Image Gallery Customization

TABLE OF CONTENTS

• 1 - Settings
  • Layout
  • Section Heading
  • Layout content
• 2 - Content
  • Banner
  • [+] Content wrapper
  • [+] Heading & Subheading
  • [+] Button
  • [+] Product style

To create a new Image Gallery, click Add Section > find Image Gallery > Click Add button.

1 - Settings

Layout

• Turn on/off Boxed layout.
• To display your Image gallery as a slider, turn on Enable Slider option. Please note that if your banners quantity is equal to the number of content per row, the slider won't be able to work.
• Section Padding: Insert the padding in order of: Top Right Bottom Left. For the detailed guide, read here.
• You can set layout for mobile devices individually from desktop with 03 default options:

• Wide: Widen the section to full width.
• Boxed: Add spaces at the left and right side.
• Only full right: Only go full on the section's right side. This option is recommended when Slider is active.

Section Heading

Name your section with a title and subtitle.

• Heading & Subheading: Input text for display.
• Text alignment: Auto/ Left/ Center or Right.
• Easily choose Heading & Subheading colors using the color picker.

Layout content

To organize the layout content of the section.

• Max number of items per row: How many pictures will be displayed on one row.
• To adjust the space between 2 items, insert values to the Item spacing field. It's possible to set different spacing for tablet and mobile devices.
• Hover style: Enable hover effect (image zoom).
• Tick on the box to Show border of the section.

2 - Content

Banner

• Firstly, you have to insert a banner from the library or upload a new one.
• Attach a Label to the image: We have 04 available choices - label new/ hot/ sale or pick none option to disable label display.
• Heading: Banner heading.
• With Subheading it's possible to add a SVG code along with normal text type.

• To edit the Button on banner:

• Insert the button label in the text box and link it to another page with Button URL field.
• Choosing a display style for your Button. You can change the pre-set in Theme Settings > Color & Style.

• Attach a product on each image and lead your customers to related page using the button field above. You can also choose to display the product's price or sale percent.

Tickets arrangement tips:

The [+] tickets are used to customize the banners' contents.
To apply on all images' contents, place the [+] ticket on top of the content section.
To apply on a single image, place the [+] ticket right down below of that image.

[+] Content wrapper

• To adjust the text block, click Add Content > [+] Content Wrapper.

• To add a custom Padding around the block, insert the values in order of Top - Right - Bottom - Left (clockwise motion)
• Text block position: Use percent unit to set the position (50% is center).
• Text Alignment: Left/ right/ center.

[+] Heading & Subheading

To set the text appearance on the banner, click Add content > [+] Heading & Subheading.

The elements are able to be changed:

• Font size
• Color
• Font weight 
• Margin
• Line height

[+] Button

Set the button appearance on the banner, click Add content > [+] Button.

The elements can be modified:

• Button label's Font size, font weight
• Padding, Margin
• Text and background colors
• Border width and color
• Rounded corners

[+] Product style

To adjust the displayed prices, click Add content > [+] Product style.

Price 1 is the main price (sale price) and Price 2 is the old price.

The elements can be modified:

• Color
• Font size
• Font weight
• Margin
• Line height

How to insert values for your theme.