Embed Size (px)
Citation preview
Header & Footer Builder
Header & Footer Builder
extension for Magento 2 User Guide
Version 1.0
0
Header & Footer Builder
Table of Contents
I) Introduction……………………………………………………………………………………………...2
II) Configuration…………………………………………………………………………………………...3
III) Header & Footer Builder……………………………………………………………………………..4
IV) Elements list…………………………………………………………………………………………... 8
V) Specific elements……………………………………………………………………………………...9 1. Topbar ………………………………………………………………………………………………. 9 2. Top Links…………………………………………………………………………………………....11 3. Header Links………………………………………………………………………………………..12 4. Mini Cart……………………………………………………………………………………………. 15 5. Welcome message…………………………………………………………………………………16 6. Store switcher……………………………………………………………………………………… 17 7. Currency switcher…………………………………………………………………………………..20 8. Top navigation………………………………………………………………………………………21 9. Links………………………………………………………………………………………………....22 10. Copyright…………………………………………………………………………………………..25
VII) Support………………………………………………………………………………………………. 26
1
Header & Footer Builder
I) Introduction This document is the User Guide for Header & Footer Builder. It describes the extension
functionality and provides some tips for a quick start.
Header & Footer Builder is an EASY-TO-USE extension letting you shape these blocks in
minutes. No coding skills needed, just make your own headers and footers using intuitive
drag & drop interface.
Header & Footer' builder is developed on a core builder based on which we’ve built all
builder extensions. The core builder includes elements and settings that all builder
extensions have in common. For details, please visit:
https://magezon.com/pub/media/productfile/magezon-core-builder-user_guides.pdf
In this guide, we’ll focus on elements and settings that are specific to Header & Footer
Builder.
2
Header & Footer Builder
II) Configuration Once the extension has been installed, click on Stores > Configuration. The interface will
look like this.
- Choose Yes to Enable Header & Footer Builder
- Select Default Header/ Footer using the drop-down list.
Note: This setting will be applied for all the pages in your site. It means default header/
footer chosen appears all over the site. To set different header/ footer for individual page,
come to its editing interface, select the desired ones from Design tab.
3
Header & Footer Builder
III) Header & Footer Builder The section Headers & Footers will appear in the Content menu. To go to admin grid of
Header & Footer Builder extension, navigate to Content > Headers or Content > Footers
4
Header & Footer Builder
List of existing Headers or Footers will be displayed like this:
To go on builder interface, choose the header or footer you would like to edit then click
Select > Edit.
5
Header & Footer Builder
This case, we choose Header 1 and Footer 1.
From left to right of the editor interface, we have some buttons with their function like below:
- Magezon Logo drives you to the official Header & Footer Builder page.
- Plus button lets add new items into the header/ footer.
- Template button shows the list of common predefined headers or footers list.
- Coding button lets you copy and paste the code to save time configuring.
- Setting button is useful for developers to customize.
- Undo and redo whenever you make a mistake.
- Responsive button (with 5 common devices listed) lets you choose the screen mode to
configure individually.
- Widen button lets you see the builder in full screen and configure in a bigger viewport.
- Enter the Header Name.
- Decide whether to display the header or not by turning one Enable Header button.
- Enable Sticky Header to stick it to the top even while scrolling.
6
Header & Footer Builder
- Enter Footer Name
- Display footer by switching Enable Footer button.
7
Header & Footer Builder
IV) Elements list Click on the Plus button to see what can be added into your header/ footer.
The list of 22 elements supported will be shown like follow:
- Row, Text Block, Section, Heading, Separator, Empty Space, Generate Block,
Magento Widget are the core elements that are described carefully in this guide.
- Social Icons, Search Form, Newsletter Form are Magezon Page Builder’s elements
and can be learnt through its guide (Page 81, 87 and 88).
Now, come to our specific elements.
8
Header & Footer Builder
V) Specific elements
1. Topbar We will use Header 1 to show the elements’ functions and the changes in the frontend.
Common settings of Topbar is mentioned in Magezon Core Builder Guide, and will not be
explained in this guide. Add Topbar element above the navigation bar like this:
When it comes to Topbar's specific setting, we get:
9
Header & Footer Builder
Then see how Topbar look in the storefront:
What about change the Float to Right?
When setting to None, the default position of Topbar will be in the right
10
Header & Footer Builder
2. Top Links Just like Topbar element, Top Links has no new settings except Float field. Try this setting in the backend (Set Top Links Float to Left)
And this is how it looks in the front:
11
Header & Footer Builder
3. Header Links Add Header Links, and set Float to the Left like this:
And in storefront:
This element gets a new tab setting named Style with the configurations like follow:
12
Header & Footer Builder
Try this setting:
13
Header & Footer Builder
And see the result:
14
Header & Footer Builder
4. Mini Cart Add Mini Cart and set its Float to the Right:
Or Left:
15
Header & Footer Builder
5. Welcome message Set the color for the text of Welcome message like this
And the result will be like:
16
Header & Footer Builder
6. Store switcher Configure the Store switcher in General Tab
17
Header & Footer Builder
And Style Tab:
18
Header & Footer Builder
The result will look like this
19
Header & Footer Builder
7. Currency switcher Set the Currency switcher settings like this:
The frontend:
20
Header & Footer Builder
8. Top navigation Set Top navigation to Right
The result:
Or set it to Left:
And how it looks:
21
Header & Footer Builder
9. Links
22
Header & Footer Builder
23
Header & Footer Builder
The result will be like:
- The color of Title, Links when normal and hovering as well as the icons displayed:
- The result after clicking on the links:
24
Header & Footer Builder
10. Copyright Set the general design for Copyright line text like this
And this is how it looks in the front:
25
Header & Footer Builder
VII) Support
If you have any questions or need any support, feel free to contact us. We will get back to
you within 24 hours since you submit your support request.
● Submit Contact Us form.
● Email us at [email protected].
● Submit a ticket.
● Contact us through Skype: [email protected].
● Contact us on live chat on our website: magezon.com.
26
