How to Create/Edit a Header #
So many websites, so many headers. They make emphasis on new posts in blogs, as well as draw attention to products for selling. Handy and multifunctional, it will serve you time and time again. Now, let’s learn how to create and customize diverse headers with Theme Builder!
There are two common ways:
Create a custom header;
Choose a ready-made header from the Magic Button Library.
Create a custom header #
To start click on Storefront > Theme Builder. As soon as you see the “Theme Parts” screen, choose Header > Add New.
You will be asked to choose a type of template, which should be “Header”. Also, enter its name and tap “Create Template.”
Using diverse widgets from the Elementor and JetPlugins kit, feel free to build headers of any complexity.
Just drag and drop a widget you like to the purposed place on a page and continue customizing. Now, you can play with options setting the background color, buttons, navigation menu, etc. Hopefully, you’ll like this process and find it not only time-saving but also really engaging. That is how the workflow with Ecomly is meant to be.
At last, do not forget to click on Publish > Update to save the result.
Edit existing header #
To edit the existing header you need to go Storefront > Theme Builder and edit the selected header.
Also, you can edit the Header directly from any page toolbar where that header template is active.
Setting the header template to the specific page #
The first thing you should do is to choose the header which you want to assign for the specific page, in Storefront > Theme Builder section and click Edit with Elementor button to open this header template in Elementor.
In case you still don’t have a header template, you should first create it like in the previous step.
Then, proceed to the Settings and locate the Conditions block. Select the Singular type of conditions as you need to apply this header to a particular page.
As a result, a new dropdown list will appear. Click it and choose Page to which you want to assign this header. Afterwards, in the Select Pages field type in the title of the page to which you need to apply the header. Note, that if you leave this field empty, the header will be applied to all the existing pages on your site. Finally, click the Update button to save the newly set conditions. Repeat the steps described above and choose another page where it should be displayed. Then save the changes. Finally, click the Update button to save the newly set conditions.
Note: If you leave this field empty, the header will be applied to all the existing pages on your site.
How to Create/Edit a Footer #
Are you looking for a footer that will fully suit your website design? So, you are only a few steps away from a unique custom footer.
Create a custom footer #
To start click on Storefront > Theme Builder. As soon as you see the “Theme Parts” screen, choose Footer > Add New.
You will be asked to choose a type of template, which should be “Footer”. Also, enter its name and tap “Create Template.”
Using diverse widgets from the Elementor and JetPlugins kit, feel free to build footers of any complexity.
Just drag and drop a widget you like to the purposed place on a page and continue customizing. Now, you can play with options setting the background colour, buttons, navigation menu, etc. Hopefully, you’ll like this process and find it not only time-saving but also really engaging. That is how the workflow with Ecomly is meant to be.
At last, do not forget to click on Publish > Update to save the result.
Import a pre-designed footer with the Magic Button #
Import a ready-made footer template with a great number of footer templates for any purpose and business. By clicking on the Magic Button, decide which of them suits your WordPress site the most.
Now, hit “Insert” to continue polishing your footer. It’s not a problem to delete or change something in the pre-made footer template. Just tap on the “Edit” button or drag the element you like. It’s also possible to adjust the background color, text size, buttons, etc.
Setting up display conditions #
There are also different conditions for displaying the footer. If necessary, you can apply it to the entire website or only one page.
