How It Works

HOW IT WORKS

THE END GOAL IS THIS

Step 1 - Right now you are on the editor screen. As you can see below the screenshot. 

After that when you click on the section. Now it looks like this. (below screenshot)

Step 2 - Add a 1 column row in a section by simply just click on the (+) button and add an element which is Headline -(Large call to action headline)

Step 3 - Now it’s time to change the text (By double clicking on the text) and text setting(from gear icon settings options like- font size, font-family, font-weight, etc) as shown in below screenshot

.  

Step 4 - Now add a 2-column row below the first row by simply clicking on “+add row” 

Step 5 - Let’s take the 1st row. Simply click on this “+” button and you will find different options. 

a. Image 1(See in the below screenshot)

b. Image 2(See in the below screenshot)

c. Large call to action headline (See in the below screenshot)

d. Small call to action headline. (See in the below screenshot)

In order to put the image. 

Simply double-click on the image you will find an option where you can upload the image into that row. 

Step 6 - Let’s change the text and text settings. 

(To change the setting, see the previous screenshots.)

Step 7 - Now it’s time to make 4 clones of this column that we made. 

After that delete the last one.

Step 8 - Let's give a BG color, spacing, and border-radius to column 1 as you can see in the above screenshot. 

a. In the text setting, you will find text color

b. Change Background color

c. spacing -> margin from the Left & Right give(100px)

d. Change the border-radius from effects and give 50% not pixels.

Step 9 - See, two things you can do 1st is you can make 4 clones of the first one and remove the previous one and 2nd  is to make it  MANUALLY. (It’s all up to you)

We prefer you to make a clone and change the images and text. 

(see the previous screenshots to change text)

Now it will look like this.

Step 10 - Here is the last step as you can see in the first image(End Goal Section Image). 

The only thing remaining is an arrow. so in order to put the arrow image in the middle simply follow the step.

a. Click on the arrow image and go to the setting. 

b. Now change the spacing to margin ( -40px ) Not less than that because it works in the editor but not in the published link.

c. After that click on the Advance setting option in Style Settings (As you can see in the above screenshot-  White arrow line). 

d. Change position setting from  DEFAULT to RELATIVE.

now you can change the position MANUALLY into the middle. 

(See the below screenshot)

e. Now your 1st row is complete again if you are making the remaining one just make it a clone and delete the remaining one. 

Now your section is COMPLETED. (NOW IT’S A PRACTISE TIME)