Clean install Cwicly library empty

Getting Started
1

Hi everyone,
Im a musician, trying to recreate my now lost site, which I made with Avada 4 years ago.

My site had a classic mobile hamburger menu, nice and big, 3 lines and an X opening top down.
The X had the same size as the 3 lines and the X was in the same place as the 3 lines.

The site was only 2 colors, the photos where converted to sketch like images, otherwise there was nothing fancy such as parallax or sliders.

Trying several templates, and builders, such as Astra, Generate Press, Neve, and some more, I could not re-create that Hamburger, mostly due to restricted Header styling options, and some other issues.

Last week I found Cwicly, I installed it to see what that is, and if I can understand how to use it.

I did read about the learning curve.
This thing is very impressive, it looks to me like anything can be done with it.

At the same time its really easy to get lost in the options, similar to photoshop 1000 in tabs hidden options.
For a non pro its quite a Learning curve.

I found the library, but it is mostly empty.
Tried to modify one of the Header menus from the headers in the library. Could not get that Hamburger ready either.

Then I found the signup link to the library hoping to find one there.
Signed up, but no mail came back.

Searching for info on how to, I found this forum.

Not sure if that is me doing something wrong or the fact,
that Cwicly has changed to open source.

Before I keep trying, I probably better ask here, if it is possible to create something like on the screen shots.

Closed Menu
Closed Menu992Ă—1940 144 KB

Open Menu
Open Menu992Ă—1940 220 KB

The template system of Cwicly, at least in the UI seems to work similar to Avada. In Avada was it in the end for a reason i dont remember, better to not use that system.

Checking out some videos I found out that I have to set Cwicly up right, so I will start clean again anyway.

I would very much appreciate some pointers.
Thanks a lot Lemon.

2

Hi @Lemon,

With Cwicly it is very easy to do what you are wanting to do.

As a starting point I recommend the Nav block - here is the documentation:

This has built-in support for switching between a hamburger menu and a normal menu between mobile and desktop and you can also choose to always show the hamburger menu if that fits your design.

If you need any more information or pointers, feel free to ask, the Cwicly community is very helpful.

1 Like
3

Thanks a lot StrangeTech.

What I didnt find in the Nav chapter, is which option to use, preset or custom.

If I load the preset, is it the black Hamburger menu with the 3 social icons or the custom drop down you where writing about ?

I tried to change that black hamburger before in a premade header from the library, I could change it some, but not get it to do what I wanted =)

Before really starting now, there is a couple of burning questions.
The last builder I used screwed up my site, displayed mostly short code.

The last weeks I read all day a lot about the WP blocks and FSE and such, tried to wrap my head around all the information, trying to find a do-able way.

Not sure if I understand it right.
If the Cwicly builder is deactivated, the site will still work, and not show any short code ?

Is the Cwicly builder translating UI actions and writing direct into WP, as if professional builder writes a site directly in the code view window in WP ?

Which template might be important.
Now I have the Cwicly template active.

I read that there will be nothing added to the builder in the future except for bug fixes, same with the template I guess.

Is it better to use the WP 2024 template or the Cwicly template ?From the bad experience with templates and Looking at constant WP updates such as changing PHP versions or and what ever else there is, Im trying to make it as future proof as possible. Same for plugins al little as possible.

How is that with the cloud library, is it officially closed, and Cwicly is now a “from scratch builder” ?

Im not lazy to read and learn, just trying to avoid time wasting trying to find out and set that up.
I read here in the forum, but is not always clear if it was valid before it became open source or still is valid.

Thanks a lot =)

4

A preset just has some default styles in it. If you start with a blank slate it doesn’t have any default styles apart from basic layout. Either way, you have full control over the styles you configure in the built-in style part of the Nav block in the Primary tab.

If you don’t use any Cwicly blocks or any Cwicly features and deactivate Cwicly, then the site will still display, whatever is in the theme you are using. The point of using Cwicly is to benefit from its features, so in order to use those features, it will need to be enabled.

Cwicly integrates directly into WordPress and Gutenberg builder and it uses Gutenberg blocks that function just like any other block but with Cwicly enhancements to the inspector.

Cwicly also adds many enhancements to the editor such as custom breakpoints, canvas scaling, an advanced navigator and many other useful tweaks and optimisations.

This is no longer the case, Louis has already started adding new features and updates and there is a beta already available to demo these.

This is personal preference. We use the Cwicly theme as we prefer to style our sites using Cwicly global classes and stylesheets within the Cwicly interface. The Cwicly theme is essentially a blank slate theme.

Technically you can use any FSE theme with Cwicly and it will work, however, depending on the theme it may require overriding certain styles in Cwicly.

To my knowledge the the Cwicly team have plans to update the cloud library with Tailwind designs. We don’t really use the cloud library for anything at the moment, so I can’t say more than that.

5

Thanks for the quick answer =)
Getting the drift.

Very slowly getting the hang of it.
This is a really well made builder !
I got farther than expected.

I took the preset and restyled it, trying to line up the icons.

In the tablet and mobile viewport I found out, how to almost lining up the closing cross icon on top of the opening icon of the hamburger, the last pixels or em´s I had to do with margin. hope that good.

There where a lot of questions on the way but I found out most of it =)
what i didnt find out, how to get rid of the menu in the menu, and just make the word home or about a link pointing to there, as well as the current page highlighted text color, in the mobile menu.

Setting text colors in mobile and tablet in:
NAV block / Primary / Styles / D Current, Current Page

I cant see if it worked because clicking the home takes me to the menu in the menu.

either the background or the text has to change color to show the active page.

Menu
Menu1014Ă—2228 114 KB

menu of home
menu of home1014Ă—2228 159 KB

The text color which shows the active click field, basically the mouse pointer, I got to work.

Thanks again for pointers =)

I set most colors transparent, its mostly background color, only the moving parts like the drop down menu will need color, thats why it looks messy.

What I can see, the whole system seems to work in a hierarchy, the main container is the first instance keeping the settings until the last item in the chain unless it was changed.

1 Like
6

Hello again found out how to add the WP menu.

7

This may help:

8

(beginn Edit, Pretty much the whole post.)

Sorry, but Im lost with a couple of points now, to many possibilities and to many options :dizzy_face:

Just now I created the templates over the Default button.
That took me to WP/ Settings, and ask me specific or any page.
Specific lets me choose the pages I created in WP/Pages.
I created all the Templates i will need that way again.

In: WP/ Reading:
The site is set to: Static Homepage,
and the Homepage “Bass and Drum Lessons in Zuerich”
is selected and saved.

But in the Themer, that The Homepage template is listed as
Page: “Bass and Drum Lessons in Zuerich”
And Not as Frontpage anymore, I dont know if that is correct.

In: Themer/ Parts:
I saved the header with the Hamburger Menu, the Hamburger separate. There is a still a empty footer template.

Is there any guide step by step to set this up right ?

What I dont get, in Themer

In Avada there where 2 ways dynamic, except for the Header and Footer, which where static. Everything between Header and Footer was injected when changing the page, and everything dynamic.
I ended up not using the complete Dynamic Way, because it loaded slower.

In Cwicly, do I have to add the header and footer to each page,
or does Cwicly work like Avada or similar ?

Before I found the place to save Header and Footer as Global in Fragments. I guess to display Header and Footer Static.

Does it have to be done in the Custom Template way,
explained in the Themer video ?

I didnt get The Custom Template way to work.
Same settings as in the Video, displayed Default.
Can it be because WP is set to static page ?

Whats the best way for speed and simplicity ?

I dont mind to put the Header and Footer on each page, its more about trying to avoid problems doing it wrong.

Page Title Block placement question.
In the setup wizzard it asks for Site Title and Tagline, when adding the blocks it shows for both, so far its clear.

In Avada it was placed automatic, meaning there was not really an option placing the Site Title, there was only hide or show if I remember right.

Now I have the Site Title Block above the Nav block inside the Header Header Container/ Container/ Logo/ Container/ Site Title Block.

I dont know if I have to use it on every page, if it is there hidden.
Is the Block just to make it visible, or if not used,
is the site without site title ?

Where is the right placement for the Site Title Block ?
In the very beginning if i remember right.

Is it ok in the Header or better above ?
Above the Nav block is ok, or does it have to be below ?

(End edit)

I hope its not to may questions :grimacing:
Thanks so much again ! :pray:

9

Hi @Lemon,

I don’t have time to give a full response now, but I will give some quick pointers as a starting point.

Firstly, it is best to assume that things are simpler and easier with Cwicly and then you will usually find the simpler and easier answer.

Here are the quick tips: