Benefits Design Guide

THE END GOAL IS THIS

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

Step 1- Simply click on the “+” button and add a section. 

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

Step  2- Then add 2 rows in the section.

Step 3 -  Then add a text element  in 1st row (you can use any element  but We prefer you - to use a sub-headline element)

Step  4 - Double click on the text, change the text and write whatever you want to write.

Step 5 - Now it’s time to change color, font, alignment (optional ), font weight, etc

Step 6 - We changed the text color and put the background color in the First Column. (Screenshot Below)

You can change color according to your Preference.

Step  7 - Now tap on the text element and open the Gear Icon settings by clicking on the gear icon. 

After that click on the spacing option and change the margin of the top and bottom(100px).

Step  8 - Select the Column and do the same process but this time is from Left & Right (15px). To differentiate (make space) between two rows

Step  9 - Now it’s time to give some shape to the column. you can change into any shape. (Look at the screenshot below) 

You can give a border(Optional). 

If you want to make a similar one, then you need to change the BORDER RADIUS(100px) [you can use any one shape (optional)

‘

Step 10 - Now the next step is to make something similar so you don’t need to make this again and again- JUST MAKE IT A CLONE OF THAT ROW.

Step 11 - After making 4 clones of the first column delete that last column.

Step 12 - Change the other column’s  Background color and text, follow the previous steps that We explained  in the previous steps to change the background color and text

Phase 2- Now Let’s make the section where We write 8 Benefits of the website.

Step 1 - Click on the “Add row” button as you can see in the below image. 

“+Add Row” will be displayed once you hover on the above row 

Step 2 - Then add one row. After that, adding a headline gives some spacing from Top & Bottom.

1

2

3 ADD Margin(40px) Spacing on Top and Bottom.

Step 3 - Now rewrite the text in the text element (double click on the text to do that ), and change color, font weight, and font size as We told you in the previous step.

when you double-click on the text it will give you certain options like- Bold, italic, underline, etc. so that you can change a single word of that entire headline(As you can see in the below image)

Step 4 - As you can see the last row is similar to the first row.

only one thing is different which is the shape (border-radius). 

So what you have to do is to make a clone of that First row (See the below image to make a clone)

Step 5 - After that  drag that entire row below the headline(8 benefits of web design). 

Click that drag button and put it below that headline.

 Step 6 - Now select the Third row (duplicate of the first row) and

 change the border-radius (shape). Of the First column. 

Step 7 - Change all the Columns similar to the 1st one.

Phase 3- It’s the final step to give a background image/color of the whole block. 

Step 1 - Go to the setting and put a background image/ BG color/ BG gradient(Whatever you like). 

Step 2 - Let’s add an image over here so you’ll get a rough idea of how to add an image. 

Simply click on the image (As you can see in the above screenshot) then go to browse->add any BG image that you like ->Click on the image it will automatically add in your background.

We have already uploaded some of the images We used as a BG images.

Step 3 - Finally It will look like this. (

We Changed the text color after putting the background because black is not visible on this background). 

To change the color follow the above instruction. 

Your end goal is achieved.

NOW, DO PRACTISE TO HONE YOUR SKILL.