TABLE OF CONTENTS

Image Gallery


I. GENERAL SETTINGS

> Section label: this is the section name, you should not change it.


Layout

  • Section Margin: insert values in pixel unit, following the order of Top Right Bottom Left (Eg: 20px 0px 20px 0px)
  • Section Padding: insert the values in pixel unit with the same format as the margin


Background

> Background color: use the color picker to adjust background-color


Layout content

  • Max number of items per row: enter the number you want to display how many items per row are on this section 
  • Spacing between items: enter a value in pixel to set the space 




II. BLOCK SETTINGS

Click on Add block to have more blocks on this section



1. Block Item

> Block label 

> Image: click on the Select Image button to upload or select an available image to set it as a background of the block 

  • Text 1: enter the content into the box to set it as a heading 
  • Text 2


  • Button label: add text for the button
  • Button URL: paste a link or search from the existing list so when customers clicking on the button, they'll be moved to that link
  • Button style: drag horizontally to adjust button style


2. [+] Content Wrapper

If you want to set the content wrapper for a certain block item, you should drag it upper or under that block.


  • Padding: add values in pixel unit to set the padding for Desktop, Tablet, Mobile. Following the order of Top Right Bottom Left (50px 20px 0 20px, 20px 10px, 50px)
  • Text block position: add values in % to set position for the text with the format of Left%:Top% (20%:50%)
  • Text Alignment: enter words such as (center, right, or left) to set alignment for the text


3. [+] Heading & Subheading

Dragging this block under the block item you want to edit its heading and subheading, or you can drag it to the top to set for all block items


Text 1

  • Font size: enter a value to set the font size for the heading of the text
  • Color: use the color picker to adjust
  • Font weight: drag to adjust how bold the text is


  • Margin: insert values in pixel unit following the order Top Right Bottom Left (Eg: 20px 0 20px 0)
  • Line height: add a value in pixel to decide its height for each line 


Text 2

You do the same steps as Text 1 to modify its content




4. [+] Button

Drag this block under the block item you want to edit separately or drag it to the top to modify for all buttons of the section

  • Font size: insert value in pixel unit
  • Font weight: drag it to adjust the font weight (0 is auto)
  • Padding: add values in pixel unit following the order Top Right Bottom Left (Eg 15px 40px 15px 40px)
  • Margin: modify the margin in the same format with the padding



Using the color picker to adjust the button color for:

  • Text color
  • Background color
  • Hover: Text color
  • Hover: Background color

  • Border width: drag to decide how big the border is
  • Border color
  • Hover: Border color
  • Rounded corners: enter a value in pixel unit to modify the corner