Magezon Page Builder extension for Magento 2 · This document is the User Guide for Magento 2 Magezon Page Builder. It describes the extension functionality and provides some tips
Post on 29-May-2020
11 Views
Preview:
Transcript
Magezon Page Builder
Magezon Page Builder
extension for Magento 2
User Guide Version 1.0
0
Magezon Page Builder
Table of Contents
I) Introduction 5
II) Element list 6
III, Product 8 1 Product Slider 8
1.1 Condition Tab 8 1.2 Carousel Options Tab 10 1.3 Product Options 11
2. Product List 13 2.1 General Tab 13 2.2 Condition Tab 14 2.3 Product Options Tab 15
3. Product Grid 17 3.1 General Tab 17 3.2 Condition Tab 18 3.3 Product Options Tab 18 3.4 Pagination Tab 19
4. Single Product 21 4.1 General Tab 21 4.2 Product Options Tab 22
IV. Image 27 1. Single Image 27 2. Image Carousel 32
2.1 General Tab 32 2.2 Images Tab 33 2.3 OWL Carousel Options Tab 34
3. Image Gallery 37 3.1 General Tab 37 3.2 Images Tab 38 3.3 Fotorama Option Tab 39
V. Content 41 1. Content Slider 42
1.1 General Tab 42
1
Magezon Page Builder
1.2 Slider Tab 43 1.3 Carousel Tab 43
2. Accordion 45 2.1 General Tab 45 2.2 Section Tab 47
3. Toggle 50 4. Video Player 53
4.1 General Tab 53 4.2 Video Options Tab 54
5. Button 55 5.1 General Tab 56 5.2 Button Design Tab 57
6. Icon 57 6.1 General Tab 58 6.2 Icon Design Tab 59
7. Magezon Builders Template 60
VI. Social 60 1. Facebook Like 61 2. Facebook Page 63 3. Facebook Comments 65 4. Twitter Button 66
Case 1: Button Type: Choose Share a link 66 Case 2: Button Type: Follow 68 Case 3: Button Type: Hashtag 70 Case 4: Button Type: Mention 72
5. Pinterest 74 Case 1: Button Type: Horizontal 74 Case 2: Button Type: Vertical 75 Case 3: Button Type: No Count 75
6. Instagram 78 7. Flickr Widget 79 8. Social Icons 81
8.1 General Tab 81 8.2 Social Icons Tab 82
VII. Magento 82 1. Static Block 83
2
Magezon Page Builder
2. Recent Reviews 86 3. Search Form 87 4. Newsletter Form 88 5. Contact Form 91 6. Categories 92
VIII. Other 93 1. Anchor 94 2. Google Maps 94
2.1 General 95 2.2 Markers 96
3. Icon List 97 3.1 General Tab 97 3.2 Icon List Tab 98 3.3 Icon & Text Design 99
4. Message Box 101 4.1 General Tab 101 4.2 Message box design tab 102
5. Progress Bar 103 5.1 General Tab 103 5.2 Bar Tab 103
6. Number Counter 104 6.1 General Tab 105 6.2 Style Tab 107
7. Countdown 108 7.1 General Tab 109 7.2 Style Tab 110
8. Flip Box 111 8.1 General Tab 112 8.2 Primary Block Tab 113 8.3 Hover Block Tab 114
9. Pricing Table 116 9.1 General Tab 116 9.2 Items Tab 116
10. Call to Action 121 10.1 General Tab 121 10.2 Button Tab 122
11. Testimonials 124
3
Magezon Page Builder
11.1 General Tab 124 11.2 Testimonials Tab 125 11.3 Carousel Tab 126
12. Raw HTML 126 13. Raw JS 127 14. Site Logo 128
IX) Support 130
4
Magezon Page Builder
I) Introduction
This document is the User Guide for Magento 2 Magezon Page Builder. It describes the
extension functionality and provides some tips for a quick start.
Magento 2 Magezon Page Builder is a better and easier way you can do to create your
eCommerce websites. A much less complicated way that couldn't be imagined before.
In this guide, we’ll give you an overview of Magezon page builder's specific elements as the
core ones are described in this detailed instruction.
5
Magezon Page Builder
II) Element list To go on our builder interface, click on the backend demo then choose the page or block
you want to edit.
- Home Page
- Static Block
- Product Description
- Category Description
6
Magezon Page Builder
The Element grid will appear after clicking on the plus button of the builder. Our Element Grid will look like this with 9 core elements and 42 additional ones which will be referred as follow.
7
Magezon Page Builder
III, Product
1 Product Slider 1.1 Condition Tab We choose Home Page builder as default builder and will talk about the additional elements in this page.
First, it comes to the Condition Tab of Product Slider Set the product source and the order. This case we choose the Latest Product Source
8
Magezon Page Builder
Choose Alphabetically Order By
9
Magezon Page Builder
1.2 Carousel Options Tab Set the configure of the Carousel Options Tab like this. There’s several On - Off buttons (Loop, Center, Right to Left, Auto Height, Mouse Drag, Touch Drag, Pull Drag, Number items per Column) that can be easily set and see right from the back and. Don’t forget to set the Colors of Text Color and Background Color when they are in Normal, Hover or Active status. Then, hit the blue Save button and the orange Save button on the top right of the builder.
10
Magezon Page Builder
1.3 Product Options Decide which information of the product you would like to present in the front by turning on the buttons ( Name, Price, Image, Review, Add To Cart, Short Description, Wishlist Link, Compare Link)
11
Magezon Page Builder
And, this is the result on the store front
12
Magezon Page Builder
2. Product List 2.1 General Tab In the general Tab, fill in the Widget Title and Widget Description. Set the Title Alignment and Title Tag to fit your design. Decide whether to Show Line or not.
13
Magezon Page Builder
2.2 Condition Tab Configure the setting of this tab as follow Choose On Sale in the dropdown list of the field Data Source With Order By , make it Price: Low to High
14
Magezon Page Builder
2.3 Product Options Tab Turn on all the below option in order to display all the information of the products.
15
Magezon Page Builder
Then see the result:
16
Magezon Page Builder
3. Product Grid Configure the setting of these following tabs like this
3.1 General Tab
17
Magezon Page Builder
3.2 Condition Tab
3.3 Product Options Tab
18
Magezon Page Builder
3.4 Pagination Tab This Tab is for products navigation setting only. Decide the symbols or buttons to display or not. Set the Colors of Text Color and Background Color when Normal, Hover or in Active .
19
Magezon Page Builder
And, this is how it look in the storefront:
20
Magezon Page Builder
4. Single Product This element’s setting is similar to Product List. Let’s try the following setting and see the result.
4.1 General Tab
21
Magezon Page Builder
4.2 Product Options Tab
22
Magezon Page Builder
And here is the result:
23
Magezon Page Builder
Or, try making the Title and Description to the right
24
Magezon Page Builder
And the result will be like:
What about this setting?
25
Magezon Page Builder
Result:
26
Magezon Page Builder
IV. Image 1. Single Image Case no.1 : Set up the images from the media library In the General tab: - Fill in the Title - Choose the Image Source and set the Images Like this
27
Magezon Page Builder
And the result: Cover
28
Magezon Page Builder
Pop up (After clicking on the cover image)
29
Magezon Page Builder
Case no.2 : Set the cover image from the External links: Set the configuration like this with the External image link inserted
30
Magezon Page Builder
And here’s how it look
31
Magezon Page Builder
2. Image Carousel 2.1 General Tab Choose a value from On click action field (This case we didn’t choose anything) Set the Colors when Normal and Hover
32
Magezon Page Builder
2.2 Images Tab This tab, decide the images to appear in the carousel. Fill in the Description of each (not required)
33
Magezon Page Builder
2.3 OWL Carousel Options Tab This tab is full of index and On-Off button which are easy to configure. Try this setting.
34
Magezon Page Builder
35
Magezon Page Builder
And the result be like:
36
Magezon Page Builder
3. Image Gallery This element, try using image links to create a stunning gallery. With this setting
3.1 General Tab
37
Magezon Page Builder
3.2 Images Tab
38
Magezon Page Builder
3.3 Fotorama Option Tab
39
Magezon Page Builder
And this
40
Magezon Page Builder
The result will look like:
41
Magezon Page Builder
V. Content 1. Content Slider Set the following tabs like this:
1.1 General Tab
42
Magezon Page Builder
1.2 Slider Tab
1.3 Carousel Tab
43
Magezon Page Builder
And the result be like:
44
Magezon Page Builder
2. Accordion 2.1 General Tab
45
Magezon Page Builder
46
Magezon Page Builder
2.2 Section Tab
Why not changing the Text Color while hovering?
47
Magezon Page Builder
Next, Add Product Grid and Single Product to the tabs respectively.
Then, see our result! Not hovering
48
Magezon Page Builder
Click on the Section 1
49
Magezon Page Builder
And the Section 2
50
Magezon Page Builder
3. Toggle Toggle’s General Tab will look like this Fill in the Title and the Description text
51
Magezon Page Builder
And the result be like:
52
Magezon Page Builder
4. Video Player Configure the element as follow:
4.1 General Tab
53
Magezon Page Builder
4.2 Video Options Tab
54
Magezon Page Builder
Then see the result:
55
Magezon Page Builder
5. Button Set the configuration like this
5.1 General Tab
56
Magezon Page Builder
5.2 Button Design Tab
And here is your result:
57
Magezon Page Builder
6. Icon Use the following setting for this element
6.1 General Tab
58
Magezon Page Builder
6.2 Icon Design Tab
And the result:
59
Magezon Page Builder
7. Magezon Builders Template - K lưu đc template
60
Magezon Page Builder
VI. Social 1. Facebook Like Set the configuration like this
61
Magezon Page Builder
Result:
62
Magezon Page Builder
2. Facebook Page When you want to show your customers a link of your page, this element can help. Set the configuration like this and wait for the result.
63
Magezon Page Builder
And here's how it look on the storefront:
64
Magezon Page Builder
3. Facebook Comments Display the comments from your Facebook Page using this function.
And the result:
65
Magezon Page Builder
4. Twitter Button Case 1 : Button Type: Choose Share a link
66
Magezon Page Builder
Then see the result:
67
Magezon Page Builder
Case 2 : Button Type: Follow
68
Magezon Page Builder
Then see the result:
69
Magezon Page Builder
Case 3 : Button Type: Hashtag
70
Magezon Page Builder
And
And the result:
71
Magezon Page Builder
Case 4 : Button Type: Mention
And
72
Magezon Page Builder
See the result:
73
Magezon Page Builder
5. Pinterest Case 1 : Button Type: Horizontal
And the result:
74
Magezon Page Builder
Case 2 : Button Type: Vertical
Case 3 : Button Type: No Count
75
Magezon Page Builder
And the result
76
Magezon Page Builder
6. Instagram
77
Magezon Page Builder
Then this is how it look:
78
Magezon Page Builder
7. Flickr Widget
Set the Title and Widget Description of Flickr Choose the Title Alignment and Title Tag
79
Magezon Page Builder
And the result
80
Magezon Page Builder
8. Social Icons Configure the setting as follow
8.1 General Tab
81
Magezon Page Builder
8.2 Social Icons Tab
And the result be like:
82
Magezon Page Builder
VII. Magento 1. Static Block
Choose the Block
83
Magezon Page Builder
And see the result:
Why not try another block? Like this
84
Magezon Page Builder
Or this
85
Magezon Page Builder
2. Recent Reviews
And the result be like:
86
Magezon Page Builder
3. Search Form
And how it look:
87
Magezon Page Builder
4. Newsletter Form
88
Magezon Page Builder
89
Magezon Page Builder
Result:
90
Magezon Page Builder
5. Contact Form Set the General Tab like this
And see the result:
91
Magezon Page Builder
6. Categories Try some categories from the list
Choose Default Category this case, and configure the setting like this:
92
Magezon Page Builder
Then see the result:
Or Bags Category :
93
Magezon Page Builder
VIII. Other 1. Anchor From the backend, set the name of the Anchor
And the result:
94
Magezon Page Builder
2. Google Maps 2.1 General
95
Magezon Page Builder
2.2 Markers
And how it look:
96
Magezon Page Builder
3. Icon List 3.1 General Tab
97
Magezon Page Builder
3.2 Icon List Tab
98
Magezon Page Builder
3.3 Icon & Text Design
99
Magezon Page Builder
Then the result:
100
Magezon Page Builder
4. Message Box 4.1 General Tab
101
Magezon Page Builder
4.2 Message box design tab
And the result:
102
Magezon Page Builder
5. Progress Bar 5.1 General Tab
103
Magezon Page Builder
5.2 Bar Tab
And the result be like:
104
Magezon Page Builder
6. Number Counter 6.1 General Tab
105
Magezon Page Builder
106
Magezon Page Builder
6.2 Style Tab
107
Magezon Page Builder
And the result will look like this
108
Magezon Page Builder
7. Countdown 7.1 General Tab
109
Magezon Page Builder
7.2 Style Tab
110
Magezon Page Builder
And here is the result:
111
Magezon Page Builder
8. Flip Box 8.1 General Tab
112
Magezon Page Builder
8.2 Primary Block Tab
113
Magezon Page Builder
8.3 Hover Block Tab
114
Magezon Page Builder
And the result be like:
115
Magezon Page Builder
9. Pricing Table 9.1 General Tab
116
Magezon Page Builder
9.2 Items Tab
117
Magezon Page Builder
118
Magezon Page Builder
119
Magezon Page Builder
And the result be like:
120
Magezon Page Builder
10. Call to Action 10.1 General Tab
121
Magezon Page Builder
10.2 Button Tab
122
Magezon Page Builder
And the result be like:
123
Magezon Page Builder
11. Testimonials 11.1 General Tab
124
Magezon Page Builder
11.2 Testimonials Tab
125
Magezon Page Builder
11.3 Carousel Tab
And this is how it look in the storefront:
126
Magezon Page Builder
12. Raw HTML Send your customers some messages like this
And here's how it look in the storefront:
127
Magezon Page Builder
13. Raw JS This element let you put a text in any block of your site using JavaScript code (included)
And the result:
128
Magezon Page Builder
14. Site Logo Insert the site logo is now easier than ever. Switch the button to green.
And the result be like:
129
Magezon Page Builder
IX) Support If you have any questions or need any support, feel free to contact us via following ways.
We will get back to you within 24 hours since you submit your support request.
● Submit Contact Us form.
● Email us at support@magezon.com . ● Submit a ticket. ● Contact us through Skype : support@magezon.com.
● Contact us on live chat on our website: magezon.com .
130
top related