Shape Divider

Shape Divider

Page Builder plugin

User Guide

Version 1.0

Shape Divider

Table of Contents

I) Introduction ................................................................................................................ 1

II) Where to find plugin ................................................................................................. 2

III) How to use plugin .................................................................................................... 3

IV) Support ................................................................................................................... 22

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.

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.

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.

Shape Divider

4

Add color to the divider from the color picker in Color

Shape Divider

5

Click Save on the bottom right to save the options.

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:

Shape Divider

7

Enter a number (0-1) to choose the level of transparency for divider in Opacity

Shape Divider

8

Example: This is the backend settings and frontend results when opacity of divider is 0.

Backend:

Frontend:

Shape Divider

9

This case is showing how it looks after setting Opacity to 0.3.

Backend:

Shape Divider

10

Frontend:

Shape Divider

11

Enable/disable Flip toggle to flip your divider vertically.

Shape Divider

12

This is how the divider looks before Flip:

This is how it looks after Flip:

Shape Divider

13

Enable/disable Invert toggle to flip your divider horizontally.

Shape Divider

14

Before Invert:

After Invert:

Shape Divider

15

Enable/disable Bring to front toggle to make the divider nearer the screen than the

content block.

Shape Divider

16

Bring to front disabled :

Bring to front enabled:

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.

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.

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:

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

Shape Divider

21

Before customizing,

With Width = 40 and Height = 180

After customizing,

With Width = 100, Height = 70

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 support@magezon.com.

● Submit a ticket.

● Contact us through Skype: support@magezon.con

Contact us via live chat on our website.