About Product

Modified on Tue, 7 Dec, 2021 at 6:20 PM

THE END GOAL IS THIS


 

1st phase 

 

Step 1 - Right now you are on the editor screen. So let’s add a section on the editor. (As you can see below the screenshot)


 


 

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

.

 

Step 2 - Then add 2 column row inside  the section.


 

After clicking “2 Columns” rows then it looks like this. (below Screenshot)


 

Step 3 - In the first row, to add an image element just simply click on the “+” button and you will find multiple elements. Sometimes your image must look at the page so click on the image element(see the below screenshot). You can add any image of your product.


 


 

Step 4 - Go to the Image Element Gear setting and click on “select image “ button to add an image. 

 

 


 

Step 5 - Now the image is uploaded. 




 

Step 6 - Let’s take a second column and a Headline over there.

 


 

Step 7 - Now let’s change the text(by double-clicking on it).

One can change the text setting ( font, size, color, weight, etc.).

Refer to  the yellow line in the below screenshot. 

 

 

Step 8 - Now add the sub-headline element below the headline element

 

 

Step 9 - Now change the text and text setting. 

(To change the Text setting and text see the previous screenshot). 




 

Two more things over there- 

 

1. Underline (By double click on the text- You will find a bar)

2. Spacing (Change margin [30px])

 

 

Step10 - After that add paragraph element. 

 


 

Step 11 - Again give spacing by following the previous screenshots. (Margin- 150px)

 



 

Step 12 - Sometimes your image must look a bit squeezed. (In order to change see the below screenshot)

 


 

Step 13 - Again add paragraph element and do two things:-

 

1. Reduce the size of the paragraph.

2. Give margin. (150px)(Same follow previous steps)


 

ALTERNATIVE OF STEP13 - Simply make a clone and reduce the size.

 


 

Step 14 - Now what you have to do is take 2 column row  and put them below the paragraph element 

 

 

Step 15 - Now in those columns add an image in the first column

(See the previous steps to put the image in a row). 

Over there make 4 clones of the first one and delete the last one.

 

 

Step 16 - Give a Background to the entire section .

(See the below screenshot that We marked 1,2, and 3)

 

1. Background Image

2. Background Color.

3. Background Gradient(means more than two colors)

 

 

Now it’s your choice what you want to do with the background.

(If you want to give color, image, gradient. It’s up to you)

 

Step 17 - Your section is ready and well done. You achieved your end goal. :-)

 

 

NOW, DO PRACTISE TO HONE YOUR SKILL.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article