magezon page builder extension for magento 2 · this document is the user guide for magento 2...

Magezon Page Builder


extension for Magento 2

User Guide Version 1.0

0


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


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


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


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


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

https://www.magezon.com/magezon-page-builder-for-magento-2.html

https://magezon.com/pub/media/productfile/singleproductpagebuilder-v1.0.0-user_guides.pdf


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


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


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


Choose Alphabetically Order By

9


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


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


And, this is the result on the store front

12


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


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


2.3 Product Options Tab Turn on all the below option in order to display all the information of the products.

15


Then see the result:

16


3. Product Grid Configure the setting of these following tabs like this

3.1 General Tab

17


3.2 Condition Tab

3.3 Product Options Tab

18


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


And, this is how it look in the storefront:

20


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


4.2 Product Options Tab

22


And here is the result:

23


Or, try making the Title and Description to the right

24


And the result will be like:

What about this setting?

25


Result:

26


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


And the result: Cover

28


Pop up (After clicking on the cover image)

29


Case no.2 : Set the cover image from the External links: Set the configuration like this with the External image link inserted

30


And here’s how it look

31


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


2.2 Images Tab This tab, decide the images to appear in the carousel. Fill in the Description of each (not required)

33


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


35


And the result be like:

36


3. Image Gallery This element, try using image links to create a stunning gallery. With this setting

3.1 General Tab

37


3.2 Images Tab

38


3.3 Fotorama Option Tab

39


And this

40


The result will look like:

41


V. Content 1. Content Slider Set the following tabs like this:

1.1 General Tab

42


1.2 Slider Tab

1.3 Carousel Tab

43



44


2. Accordion 2.1 General Tab

45


46


2.2 Section Tab

Why not changing the Text Color while hovering?

47


Next, Add Product Grid and Single Product to the tabs respectively.

Then, see our result! Not hovering

48


Click on the Section 1

49


And the Section 2

50


3. Toggle Toggle’s General Tab will look like this Fill in the Title and the Description text

51



52


4. Video Player Configure the element as follow:

4.1 General Tab

53


4.2 Video Options Tab

54



55


5. Button Set the configuration like this

5.1 General Tab

56


5.2 Button Design Tab

And here is your result:

57


6. Icon Use the following setting for this element

6.1 General Tab

58


6.2 Icon Design Tab

And the result:

59


7. Magezon Builders Template - K lưu đc template

60


VI. Social 1. Facebook Like Set the configuration like this

61


Result:

62


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


And here's how it look on the storefront:

64


3. Facebook Comments Display the comments from your Facebook Page using this function.

And the result:

65


4. Twitter Button Case 1 : Button Type: Choose Share a link

66



67


Case 2 : Button Type: Follow

68



69


Case 3 : Button Type: Hashtag

70


And

And the result:

71


Case 4 : Button Type: Mention

And

72


See the result:

73


5. Pinterest Case 1 : Button Type: Horizontal

And the result:

74


Case 2 : Button Type: Vertical

Case 3 : Button Type: No Count

75


And the result

76


6. Instagram

77


Then this is how it look:

78


7. Flickr Widget

Set the Title and Widget Description of Flickr Choose the Title Alignment and Title Tag

79


And the result

80


8. Social Icons Configure the setting as follow

8.1 General Tab

81


8.2 Social Icons Tab


82


VII. Magento 1. Static Block

Choose the Block

83


And see the result:

Why not try another block? Like this

84


Or this

85


2. Recent Reviews


86


3. Search Form

And how it look:

87


4. Newsletter Form

88


89


Result:

90


5. Contact Form Set the General Tab like this

And see the result:

91


6. Categories Try some categories from the list

Choose Default Category this case, and configure the setting like this:

92



Or Bags Category :

93


VIII. Other 1. Anchor From the backend, set the name of the Anchor

And the result:

94


2. Google Maps 2.1 General

95


2.2 Markers

And how it look:

96


3. Icon List 3.1 General Tab

97


3.2 Icon List Tab

98


3.3 Icon & Text Design

99


Then the result:

100


4. Message Box 4.1 General Tab

101


4.2 Message box design tab

And the result:

102


5. Progress Bar 5.1 General Tab

103


5.2 Bar Tab


104


6. Number Counter 6.1 General Tab

105


106


6.2 Style Tab

107


And the result will look like this

108


7. Countdown 7.1 General Tab

109


7.2 Style Tab

110


And here is the result:

111


8. Flip Box 8.1 General Tab

112


8.2 Primary Block Tab

113


8.3 Hover Block Tab

114



115


9. Pricing Table 9.1 General Tab

116


9.2 Items Tab

117


118


119



120


10. Call to Action 10.1 General Tab

121


10.2 Button Tab

122



123


11. Testimonials 11.1 General Tab

124


11.2 Testimonials Tab

125


11.3 Carousel Tab

And this is how it look in the storefront:

126


12. Raw HTML Send your customers some messages like this

And here's how it look in the storefront:

127


13. Raw JS This element let you put a text in any block of your site using JavaScript code (included)

And the result:

128


14. Site Logo Insert the site logo is now easier than ever. Switch the button to green.


129


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 [email protected] . ● Submit a ticket. ● Contact us through Skype : [email protected].

● Contact us on live chat on our website: magezon.com .

130

https://www.magezon.com/contact/

mailto:[email protected]

https://magezon.ticksy.com/

https://magezon.ticksy.com/

https://www.magezon.com/

magezon page builder extension for magento 2 · this document is the user guide for magento 2...

Documents