Banner Column

Modified on Tue, 22 Feb 2022 at 11:26 AM


Modify Banner Column Section

I. General Settings

- Select a banner for desktop: select an image to display banner only for desktop\

- Select a banner for mobile: only display on mobile

- Banner position: choose the position to show banner (Left/ Right)

- Tick to Show Image first on mobile

- Select height styles: select a type to display the image

- Manually height: or you can manage the image height

- Crop position: Type the text (center/ left/ right) to crop the image right to the position you want (it means you type the position to focus on the object of the image)


- Text color: adjust the text color by using the color picker

- Content alignment: align the text (E.g: center, left)


- Tick to have the Boxed layout

- Section margin: set the margin for this whole section following the order: Top Right Bottom Left (Eg: 20px 30px 50px 30px). As always, if you want to set the different section margins for Desktop, Mobile, and Tablet, you just need to add a comma between values. For example, 20px 30px 50px 30px, 10px 30px 50px 20px, 20px 40px 30px 40px - Mobile, Tablet, Desktop (After a comma, the margin will be set for another device)

- Section Padding: add values with the same format with the margin

- Visibility: choose Show or Hide this section on desktop or mobile.

>>> More details in this CLIP

II.Block Settings

1. Text

Click on "Add block" to add Text to the section

- Write your content here: just insert the text into the box

- Use Heading tag: choose an option to attach a heading tag to the text

- Adjust font size: fill the value to the box to adjust font size (Eg: 20px). Remember to use commas to separate the settings for different devices (Eg: 20px, 20px, 30px - Mobile,Tablet,Desktop respectively)

Adjust font weight: drag to adjust 

Text color

2. SVG + Content

- Write your content here: insert text to the box

- SVG code: paste SVG code into the box

There are 2 groups of text and its content is the same. You just need to fill the text and SVG code into the corresponding boxes

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

Feedback sent

We appreciate your effort and will try to fix the article