CTA With FOMO - Design Guide

Modified on Tue, 07 Dec 2021 at 06:28 PM

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 - Then add the “3-columns” row in the section. Let’s click on the “+” button(As you can see in the above screenshot) -> select the row and drag these “3 columns” row.  

 


 

 

Step 3 - Add a headline element in the first column. By simply clicking on the “+” button.

 

Step 4 - Change the text by simply double-clicking on it. After that change the text and the text setting.

 



 

Step 5 - One thing is remaining in the previous step- This setting block will appear when you click on the text element gear icon setting. (See the below screenshot)

 

Add a sub-headline below that (-50% OFF). 

 


 

Step 6 - Simply change the color and text of the sub-headline.

 

Step 7 - Simply make it a clone of the 1st one and delete the blank one(means last two). 

 

 

After deleting it will look like this.


 



 

Step 8 - Change the text(As we already discussed how to change the text and the text color- Look at the previous screenshots) and the BG color of the 2nd column.

 

 

Step 9 - Similarly change the text and text setting of the 3rd column.

 

After changing the text and the text setting it will look like this.

 


 

Step 10 - Let’s give the border of the entire row and give padding(0px) and margin(25px) so that it will look clear and neat 

 

 

Step 11 - Add a column below that “3-columns” row.

 

Step 12 - Add an image element and upload an image by simply double-clicking on it.

 Click on the “+” button and this element's block will appear. Just simply click on the image element and the image will appear in the column.

 

 

 

After double-clicking on this image you will find an image box where you can add your product image.

 


 

After adding an image it will look like this. 

 

Step 13 - Now add a sub-headline below that image. And change the text and the text setting of the sub-headline.

 

After changing the text and the text setting(color, size, etc).

 

One more thing is to underline a particular text. (By simply double-clicking on the text and a bar which we marked as a red box simply select a text and click on the underline option.)

 




Step 14 - Now add a button element below that text.

 

 

Step15 - Here is the last step to change the text of the button and the button setting.

 

1.Text - By simply double-clicking on it.

2.Button settings - Click on the button element gear setting option and change the BG color, size of the text, and padding(From the left and right).



 







 


 


 

After all the changes your section will look like this

 


 

Congrats!!! YOU achieved your final 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 atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article