TABLE OF CONTENTS

• IMAGE GALLERY
• I. CONTENT
  •     a. Block item
  •     b. Content wrapper settings
  •     c. Button settings
  •     d. Heading and Subheading settings
• II. SETTINGS
  •     1. LAYOUT 
  •     2. BACKGROUND
  •     3. LAYOUT CONTENT

IMAGE GALLERY

I. CONTENT

Click on Add content to add more content for the section

a. Block item

        Block label: Name for this block: �LAMPS & LIGHTS

        Style: Scroll down to choose style 1 or 2 for arranging the position of content on the block

        Image: Insert an image to display

       Insert contents for TEXT 1, TEXT 2, TEXT 3, and TEXT 4

        Button Label: Insert a text for the button label 

        Button URL: Paste a link or search a page to link it to the button so when customers click on the button they'll be moved to that destination

        Button Style: Drag to adjust the button style

    b. Content wrapper settings

        Padding: Insert the values follow the order: Top Right Bottom Left (Eg: 5px 20px 5px 20px)

If you also want to set the padding for the content wrapper in other interface (tablet, mobile), just add a comma "," right after. For example: 5px 20px 5px 20px,5px 8px 5px 8px,5px 8px 5px 8px (Destop, Tablet, Mobile respectively)

        Text block position:  Insert the values following the format "Left% : Top%" 

Eg: 10% : 20%, 10% : 30% 

→ Arrangement on desktop: Left side 10%, Top 20% (center).

→ Arrangement on mobile: Left side 10% (center), top 30%.

Note: Doesn't work on Banner Style 2.

        Text Alignment: Left/ Center/  Right.

    c. Button settings

        Font size: Eg: 16px, 14px, 13px (Destop, tablet, mobile respectively)

        Font weight: Drag to choose the font-weight to display, Eg: 400 ( 0 is Auto)

        Padding: Insert numbers in order of Top Right Bottom Left, Eg: 10px 20px 10px 20px

You can also set the padding for other interfaces by adding commas ","

        Margin: Insert the values in order of: Top Right Bottom Left, Eg: 5px 20px 5px 20px

        Text color: Change the Text color by using color picker

        Background color: Change the background color by using color picker

        Border width: Drag to adjust the border width, Eg: 3px

        Rounded corners: Eg: 10px 10px 10px 10px

    d. Heading and Subheading settings

        TEXT 1

    Font size: modify the size for TEXT 1, Eg: 30px

    Color: Set any color for TEXT 1

    Font weight: Drag to adjust the font weight of the TEXT 1

    Margin: Insert the values in order of: Top Right Bottom Left, Eg: 5px 20px 5px 20px

    Line Height: Modify the height of the line, Eg: 10px

Scrolling down to modify the TEXT 2, 3, 4

II. SETTINGS

        Created by 'Image Gallery' section 

        Section Label: Name for this section: eg: Image Gallery

    1. LAYOUT 

        Tick to have the Boxed Layout,  Add a padding around the main wrapper. 

        Section margin: Insert the values in order of: Top Right Bottom Left, Eg: 10px 5px 10px 5px

        Section padding: Insert the values in order of: Top Right Bottom Left, Eg: 5px 10px 5px 10px

    2. BACKGROUND

        Tick to have Full section background

        Background color: Change any color by using color picker

        Background image: Select any item to display for the background image.

        Size: Scroll down to choose the size of background: Auto/ Cover/ Contain

        Position: Scroll down to select the background position: Left Top/ Center Top/ Right Center/ etc

        Repeat: Scroll down to modify the background repeat: No Repeat/ Repeat/ Repeat X/ Repeat Y

    3. LAYOUT CONTENT

        Max number of items per row: The number of items is shown on a row, Eg: 2,1 corresponding with the desktop, mobile.

        Spacing between items: Eg: 30px, 15px

         Hover style: None/ Effect 1/ Effect 2
Note: Please click Save on the Top right of the screen to save the step by step that you just input.