shape divider - magezon...shape divider 1 i) introduction shape divider is a plugin for magento 2...
TRANSCRIPT
![Page 1: Shape Divider - Magezon...Shape Divider 1 I) Introduction Shape Divider is a plugin for Magento 2 Page Builder extension. It allows users to replace original horizontal line between](https://reader034.vdocument.in/reader034/viewer/2022050312/5f744f8221483438092b9480/html5/thumbnails/1.jpg)
Shape Divider
Shape Divider
Page Builder plugin
User Guide
Version 1.0
![Page 2: Shape Divider - Magezon...Shape Divider 1 I) Introduction Shape Divider is a plugin for Magento 2 Page Builder extension. It allows users to replace original horizontal line between](https://reader034.vdocument.in/reader034/viewer/2022050312/5f744f8221483438092b9480/html5/thumbnails/2.jpg)
Shape Divider
Table of Contents
I) Introduction ................................................................................................................ 1
II) Where to find plugin ................................................................................................. 2
III) How to use plugin .................................................................................................... 3
IV) Support ................................................................................................................... 22
![Page 3: Shape Divider - Magezon...Shape Divider 1 I) Introduction Shape Divider is a plugin for Magento 2 Page Builder extension. It allows users to replace original horizontal line between](https://reader034.vdocument.in/reader034/viewer/2022050312/5f744f8221483438092b9480/html5/thumbnails/3.jpg)
Shape Divider
1
I) Introduction
Shape Divider is a plugin for Magento 2 Page Builder extension. It allows users to
replace original horizontal line between sections by aesthetic separator. With our
various customizable designs, users can make their own version of divider in no time.
Here are some critical features that Shape Divider presents:
● Create shape dividers for both rows and columns
● Customize aesthetic dividers
● 28+ unique shape designs
● Responsive to all devices
Note: Shape Divider is a plugin of Magento 2 Page Builder extension. Please pre-
install Magento 2 Page Builder. After that, install Shape Divider plugin and it will be
integrated with existing Magento 2 Page Builder on your website.
![Page 4: Shape Divider - Magezon...Shape Divider 1 I) Introduction Shape Divider is a plugin for Magento 2 Page Builder extension. It allows users to replace original horizontal line between](https://reader034.vdocument.in/reader034/viewer/2022050312/5f744f8221483438092b9480/html5/thumbnails/4.jpg)
Shape Divider
2
II) Where to find plugin
After Shape Divider plugin is installed, a Divider Tab will appear inside the Row
Settings and Column Settings. ( In this User Guide, we make all the examples in
Row Settings. Note that they can be applied Column Settings similarly). From there,
it provides you a list of features to configure.
Check the photo below.
![Page 5: Shape Divider - Magezon...Shape Divider 1 I) Introduction Shape Divider is a plugin for Magento 2 Page Builder extension. It allows users to replace original horizontal line between](https://reader034.vdocument.in/reader034/viewer/2022050312/5f744f8221483438092b9480/html5/thumbnails/5.jpg)
Shape Divider
3
III) How to use plugin
Firstly, decide the position where divider will be applied by selecting either Top or
Bottom Tab.
In the Type drop-down, click into a shape to choose it from the list.
![Page 6: Shape Divider - Magezon...Shape Divider 1 I) Introduction Shape Divider is a plugin for Magento 2 Page Builder extension. It allows users to replace original horizontal line between](https://reader034.vdocument.in/reader034/viewer/2022050312/5f744f8221483438092b9480/html5/thumbnails/6.jpg)
Shape Divider
4
Add color to the divider from the color picker in Color
![Page 7: Shape Divider - Magezon...Shape Divider 1 I) Introduction Shape Divider is a plugin for Magento 2 Page Builder extension. It allows users to replace original horizontal line between](https://reader034.vdocument.in/reader034/viewer/2022050312/5f744f8221483438092b9480/html5/thumbnails/7.jpg)
Shape Divider
5
Click Save on the bottom right to save the options.
![Page 8: Shape Divider - Magezon...Shape Divider 1 I) Introduction Shape Divider is a plugin for Magento 2 Page Builder extension. It allows users to replace original horizontal line between](https://reader034.vdocument.in/reader034/viewer/2022050312/5f744f8221483438092b9480/html5/thumbnails/8.jpg)
Shape Divider
6
Click Save on the top right of the page to save the page.
Check the frontend in https://www.domain.com/URL_KEY to see the result. Here is how
it looks in this example:
![Page 9: Shape Divider - Magezon...Shape Divider 1 I) Introduction Shape Divider is a plugin for Magento 2 Page Builder extension. It allows users to replace original horizontal line between](https://reader034.vdocument.in/reader034/viewer/2022050312/5f744f8221483438092b9480/html5/thumbnails/9.jpg)
Shape Divider
7
Enter a number (0-1) to choose the level of transparency for divider in Opacity
![Page 10: Shape Divider - Magezon...Shape Divider 1 I) Introduction Shape Divider is a plugin for Magento 2 Page Builder extension. It allows users to replace original horizontal line between](https://reader034.vdocument.in/reader034/viewer/2022050312/5f744f8221483438092b9480/html5/thumbnails/10.jpg)
Shape Divider
8
Example: This is the backend settings and frontend results when opacity of divider is 0.
Backend:
Frontend:
![Page 11: Shape Divider - Magezon...Shape Divider 1 I) Introduction Shape Divider is a plugin for Magento 2 Page Builder extension. It allows users to replace original horizontal line between](https://reader034.vdocument.in/reader034/viewer/2022050312/5f744f8221483438092b9480/html5/thumbnails/11.jpg)
Shape Divider
9
This case is showing how it looks after setting Opacity to 0.3.
Backend:
![Page 12: Shape Divider - Magezon...Shape Divider 1 I) Introduction Shape Divider is a plugin for Magento 2 Page Builder extension. It allows users to replace original horizontal line between](https://reader034.vdocument.in/reader034/viewer/2022050312/5f744f8221483438092b9480/html5/thumbnails/12.jpg)
Shape Divider
10
Frontend:
![Page 13: Shape Divider - Magezon...Shape Divider 1 I) Introduction Shape Divider is a plugin for Magento 2 Page Builder extension. It allows users to replace original horizontal line between](https://reader034.vdocument.in/reader034/viewer/2022050312/5f744f8221483438092b9480/html5/thumbnails/13.jpg)
Shape Divider
11
Enable/disable Flip toggle to flip your divider vertically.
![Page 14: Shape Divider - Magezon...Shape Divider 1 I) Introduction Shape Divider is a plugin for Magento 2 Page Builder extension. It allows users to replace original horizontal line between](https://reader034.vdocument.in/reader034/viewer/2022050312/5f744f8221483438092b9480/html5/thumbnails/14.jpg)
Shape Divider
12
This is how the divider looks before Flip:
This is how it looks after Flip:
![Page 15: Shape Divider - Magezon...Shape Divider 1 I) Introduction Shape Divider is a plugin for Magento 2 Page Builder extension. It allows users to replace original horizontal line between](https://reader034.vdocument.in/reader034/viewer/2022050312/5f744f8221483438092b9480/html5/thumbnails/15.jpg)
Shape Divider
13
Enable/disable Invert toggle to flip your divider horizontally.
![Page 16: Shape Divider - Magezon...Shape Divider 1 I) Introduction Shape Divider is a plugin for Magento 2 Page Builder extension. It allows users to replace original horizontal line between](https://reader034.vdocument.in/reader034/viewer/2022050312/5f744f8221483438092b9480/html5/thumbnails/16.jpg)
Shape Divider
14
Before Invert:
After Invert:
![Page 17: Shape Divider - Magezon...Shape Divider 1 I) Introduction Shape Divider is a plugin for Magento 2 Page Builder extension. It allows users to replace original horizontal line between](https://reader034.vdocument.in/reader034/viewer/2022050312/5f744f8221483438092b9480/html5/thumbnails/17.jpg)
Shape Divider
15
Enable/disable Bring to front toggle to make the divider nearer the screen than the
content block.
![Page 18: Shape Divider - Magezon...Shape Divider 1 I) Introduction Shape Divider is a plugin for Magento 2 Page Builder extension. It allows users to replace original horizontal line between](https://reader034.vdocument.in/reader034/viewer/2022050312/5f744f8221483438092b9480/html5/thumbnails/18.jpg)
Shape Divider
16
Bring to front disabled :
Bring to front enabled:
![Page 19: Shape Divider - Magezon...Shape Divider 1 I) Introduction Shape Divider is a plugin for Magento 2 Page Builder extension. It allows users to replace original horizontal line between](https://reader034.vdocument.in/reader034/viewer/2022050312/5f744f8221483438092b9480/html5/thumbnails/19.jpg)
Shape Divider
17
In the Device Type, select All to apply divider to all types or Custom to customize
your own size of divider for each interface.
![Page 20: Shape Divider - Magezon...Shape Divider 1 I) Introduction Shape Divider is a plugin for Magento 2 Page Builder extension. It allows users to replace original horizontal line between](https://reader034.vdocument.in/reader034/viewer/2022050312/5f744f8221483438092b9480/html5/thumbnails/20.jpg)
Shape Divider
18
Width and Height are optional. You can leave it blank so the divider will be set in
default mode. Or you can enter numbers to resize the divider as you like.
A small tip for you: Enter “0” into Height to disable divider.
![Page 21: Shape Divider - Magezon...Shape Divider 1 I) Introduction Shape Divider is a plugin for Magento 2 Page Builder extension. It allows users to replace original horizontal line between](https://reader034.vdocument.in/reader034/viewer/2022050312/5f744f8221483438092b9480/html5/thumbnails/21.jpg)
Shape Divider
19
Here is an example for you. For desktop, customize the divider by changing Width and
Height as below in backend:
The divider will be reshaped as you can see in frontend:
![Page 22: Shape Divider - Magezon...Shape Divider 1 I) Introduction Shape Divider is a plugin for Magento 2 Page Builder extension. It allows users to replace original horizontal line between](https://reader034.vdocument.in/reader034/viewer/2022050312/5f744f8221483438092b9480/html5/thumbnails/22.jpg)
Shape Divider
20
But it doesn’t look very nice on mobile screen.
To change this, click into the icon of mobile portrait and enter the new Width and Height
you like. In this example, we choose Width = 100, Height = 70
![Page 23: Shape Divider - Magezon...Shape Divider 1 I) Introduction Shape Divider is a plugin for Magento 2 Page Builder extension. It allows users to replace original horizontal line between](https://reader034.vdocument.in/reader034/viewer/2022050312/5f744f8221483438092b9480/html5/thumbnails/23.jpg)
Shape Divider
21
Before customizing,
With Width = 40 and Height = 180
After customizing,
With Width = 100, Height = 70
![Page 24: Shape Divider - Magezon...Shape Divider 1 I) Introduction Shape Divider is a plugin for Magento 2 Page Builder extension. It allows users to replace original horizontal line between](https://reader034.vdocument.in/reader034/viewer/2022050312/5f744f8221483438092b9480/html5/thumbnails/24.jpg)
Shape Divider
22
IV) Support If you have any questions or need any support, feel free to contact us by following ways.
We will get back to you within 24 hours since you submit your support request.
● Submit contact form.
● Email us at [email protected].
● Submit a ticket.
● Contact us through Skype: [email protected]
Contact us via live chat on our website.