Image Gallery Auto Width Customization

This section is basically similar to the Image Gallery but let you keep the width of inserted images.

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 Auto Width, click Add Section > find Image Gallery Auto Width > Click Add button. You can use this section to add images lead to related pages or create image categories.

1 - Settings

Layout

• Boxed layout: Add a padding around the main wrapper.
• Section Padding: To add a custom padding around the main wrapper, insert the values in order of: Top Right Bottom Left. For the detailed guide, read here.
• You can set layout for mobile devices individually from desktop with 02 default options:

• Wide: Widen the section to full width.
• Boxed: An auto padding will be added around the main wrapper.

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.

• Mobile: Max number of items per row: How many pictures will be displayed on one row (mobile view).
• 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

To add a new banner image, click Add content > create a new Banner ticket.

• Firstly, you have to insert a banner from the library or upload a new one. Image's width will be kept.
• Attach a Label to the image: There are 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 > create a new [+] Content Wrapper ticket.

• Set the block Padding to the position you want, 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 > create a new [+] Heading & Subheading ticket.

The elements are able to be changed:

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

[+] Button

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

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 > create a new [+] Product style ticket.

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.