TABLE OF CONTENTS

• I. General Settings
• II. Block Settings
  • 1. Text
  • 2. SVG + Content
  • 3. Button
  • 4. Search Form 
  • 5. Search by Vendor
  • 6. Promotion

Modify the Single Banner

I. General Settings

Click on "Add block" to add the Single Banner section 

- Select a banner for desktop: select an image or upload your own one to display as a banner on Desktop devices

- Select a banner for mobile: select an image or upload your own one to display as a banner on Mobile devices

- Select height styles: Choose an option to decide your favorite ratio for the banner

- Manually height: you can set the height for the banner manually if you don't satisfy with the default height. (Eg: 350px,470px,600px - Mobile,Tablet,Desktop respectively)

- Crop position?: this is to help you focus on displaying a specific point in the image. You can type the position (right/ left/ center) to adjust 

GENERAL CONTENT SETTINGS

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

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

- Max width: adjust the width for the whole banner by adding values in pixel unit (eg: 100%, 80%,45% - Mobile, Tablet, Desktop respectively)

- Content position: you can adjust the content with the exact position you want by adding values in %, if you don't satisfy with the default settings (50%:50%, 0:50%, 30%:80%)

LOGO IMAGE

- Select a logo: select an image or upload you own one to display the logo

SECTION STYLES

- 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.

>>> See details via 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

>>> More details 

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

3. Button

- Button label: add text to the button

- Button URL: you can paste a external link or search it from the available source

- Button style: click "up or down" to change the button style

4. Search Form 

5. Search by Vendor

6. Promotion

You can view the clip to see how to modify the promotion block