Image Gallery

Modified on Thu, 18 Mar, 2021 at 5:46 PM

TABLE OF CONTENTS

1. Settings

Tick to display Box Layout and Hide on Mobile 

  • Change Color for the background 
  • Select or upload the image background
  • Background Size: choose the suitable size for the background 
  • Background Image Repeat
  • Background Image Position
  • Section Padding in px: fill the numbers in the blank to set the padding of the background 
  • Position Overlay of section (in px)



Section Heading

  • Set title for Heading and Subheading,..
  • Select the alignment for the Text: Left / Center / Right
  • Change the color for Heading, Subheading,.. (blank to set the default setting)

Slider Settings

Tick to enable:

  • Enable Loop
  • Show Next and Preview Arrows
  • Show Dots
  • Merged Items
  • Change slides every second 

Scroll down to select Slider type for displaying those settings



Layout Content

  • Tick to have Spacing Items
  • Modify the Size of Item Space (in px)
  • Tick to Show Border Item and Border Radius
  • Type: choose an option for displaying the Gallery (Row / Slider / Masonry)
  • Max number of items per rowE.g: 4,3,2


2. Content

To add Image for your Gallery, click "Add Content". Be noted that add Style to modify the content for that image. 

a. Style

  • Use images as: Normal Image, Background Image, Background Image fixed
  • Background image position: Eg: center center 
  • Min height (in px): Use for Background image
  • Text content style: select an option for Text style in that image

* Tick to use Image Heading as background

  • Background image heading position: Eg: center center

* Tick to Hide Text content to Mobile devices

  • Hover effect: select an option for the Text hover

* Tick to Use inherit Position from the first "Style" block

  • Drag to modify the position for the Text in Vertical and Horizontal (Use for Content style is 'Overlay')
  • Change the color of Border and Background Text Content 
  • Drag to alter % of Background Transparency 
  • Padding Text content: Top Right Bottom Left
  • Width text content (in %): E.g: 50%. Blank to auto
  • Select to modify Text alignment: Inherit / Left / Center / Right

Background and Text Color 

Modify the color of: 

  • Heading
  • Subheading
  • Text #1
  • Text #2

(Use color inherit from the first 'Style' block, set to 'None')


 Text Font Size, Text Font Weight, and Content Margin Buttom (in px)

Blank to inherit

  • Heading 
  • Subheading
  • Subheading 2
  • Text #1
  • Text #2


Button Style

- Tick to enable:

  • Style as button
  • Underline text
  • Button Rounded Corners

- Drag to choose the button style for Text content

- Button padding: e.g 10px 5px 10px 5px

- Button radius corners

- Modify the color for button text, button background, button border

- Button font size: e.g 24px

- Letter spacing

- Button font weight: select a font-weight option to display button


b. Image

Select or upload the image for Gallery

- Image Link: select an item for the image link, when customers click to the image, it will move to the items you set 

- Or video link

Text content 

- Tick the box to have content on the same row

- Select or upload the image if you want to have Image Heading

- Add content to Heading, Subheading, Subheading 2, Text #1, Text #2

- Button label

- Button link










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 at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article