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

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.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. 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

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

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.

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

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.

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

Choose Alphabetically Order By

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.

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)

And, this is the result on the store front

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.

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

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

Then see the result:

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

3.1 General Tab

3.2 Condition Tab

3.3 Product Options Tab

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 .

And, this is how it look in the storefront:

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

4.2 Product Options Tab

And here is the result:

Or, try making the Title and Description to the right

And the result will be like:

What about this setting?

Result:

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

And the result: Cover

Pop up (After clicking on the cover image)

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

And here’s how it look

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

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

2.3 OWL Carousel Options Tab This tab is full of index and On-Off button which are easy to configure. Try this setting.

And the result be like:

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

3.1 General Tab

3.2 Images Tab

3.3 Fotorama Option Tab

And this

The result will look like:

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

1.1 General Tab

1.2 Slider Tab

1.3 Carousel Tab

2. Accordion 2.1 General Tab

2.2 Section Tab

Why not changing the Text Color while hovering?

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

Then, see our result! Not hovering

Click on the Section 1

And the Section 2

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

4. Video Player Configure the element as follow:

4.1 General Tab

4.2 Video Options Tab

5. Button Set the configuration like this

5.1 General Tab

5.2 Button Design Tab

And here is your result:

6. Icon Use the following setting for this element

6.1 General Tab

6.2 Icon Design Tab

And the result:

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

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

Result:

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.

And here's how it look on the storefront:

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

And the result:

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

Case 2 : Button Type: Follow

Case 3 : Button Type: Hashtag

And the result:

Case 4 : Button Type: Mention

See the result:

5. Pinterest Case 1 : Button Type: Horizontal

And the result:

Case 2 : Button Type: Vertical

Case 3 : Button Type: No Count

And the result

6. Instagram

Then this is how it look:

7. Flickr Widget

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

And the result

8. Social Icons Configure the setting as follow

8.1 General Tab

8.2 Social Icons Tab

VII. Magento 1. Static Block

Choose the Block

And see the result:

Why not try another block? Like this

Or this

2. Recent Reviews

3. Search Form

And how it look:

4. Newsletter Form

Result:

5. Contact Form Set the General Tab like this

And see the result:

6. Categories Try some categories from the list

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

Or Bags Category :

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

And the result:

2. Google Maps 2.1 General

2.2 Markers

And how it look:

3. Icon List 3.1 General Tab

3.2 Icon List Tab

3.3 Icon & Text Design

Then the result:

4. Message Box 4.1 General Tab

4.2 Message box design tab

And the result:

5. Progress Bar 5.1 General Tab

5.2 Bar Tab

6. Number Counter 6.1 General Tab

6.2 Style Tab

And the result will look like this

7. Countdown 7.1 General Tab

7.2 Style Tab

And here is the result:

8. Flip Box 8.1 General Tab

8.2 Primary Block Tab

8.3 Hover Block Tab

9. Pricing Table 9.1 General Tab

9.2 Items Tab

10. Call to Action 10.1 General Tab

10.2 Button Tab

11. Testimonials 11.1 General Tab

11.2 Testimonials Tab

11.3 Carousel Tab

And this is how it look in the storefront:

12. Raw HTML Send your customers some messages like this

And here's how it look in the storefront:

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

And the result:

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

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 .

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

Documents

magento development company - magento development india,...

magento: accelerating momentum - bas nawijn, magento

user manual magemobappbuilder - marketplace.magento.com ·...

popup builder for magento 2 - magezon.com · popup builder...

magento 2 form builder - visual form creator

form products - magezon.com€¦ · form products is a...

magento skill – hire magento developer

trusted magento 2 extensions by magezon - single …...p ro...

single product page builder for magento 2 · you to...

magento development company, psd to magento, magento...

drag & drop page builder for magento

category page builder magento 2 · category page builder...

magento furniture theme | magento interior theme

magezon core builder - marketplace.magento.com · for...

hire dedicated magento developers | hire magento developers...

mobikul mobile app builder for magento 2 › media ›...

magezon core builder · magezon core builder 44 2.1 row...

the custom product builder for magento 2 user …...the...

font builder - magezon

magento advance store locator - magento extension