Box Layouts

Box Layouts allow you to combine text and image elements to create different types of stylish box layouts.

You can use box layouts to add an element of information under your products and services, the display an offer or to add a call to action on a banner. Limecube provides different box layouts with multiple designs to provide users with multiple options to display their products, services etc.


Changing Layouts

Boxes come with 3 different layouts for different usage.

  1. Text over image
  2. Text under image
  3. Text next to image

Box Layouts


1. Text Over Image

This help video shows how to create a box style layout with text over a background image.

    To add a Text Over Image box layout to your page:

    1. Select the page that you’d like to add the text over image box layout to.
    2. Click on the ‘+Add Element’ Icon on the Page's Header Bar
    3. Drag and Drop the Text Over Image icon (under Box Layouts) to the area of the page required.
    4. Open Single Box Edit by hovering your mouse over a box and clicking the edit icon.
    5. Create and edit a new box
    6. Save

    You have now added a text over image box layout to your page.

    While the style editor allows you to set a site wide overlay filter, each box allows you to override the degree of transparency for each individual box set if you so choose.

    Box Overlay colour

    The overlay is quite important on this box set, as otherwise the text inside the box can be quite difficult to read. The colour of this filter feeds from the style editor options for the overlay colour.

    1. To change this overlay colour hover over the box set and you will see: style editor iconin the right corner.
    2. Click this icon to open style options
    3. Scroll down to 'Background overlay colour and select your colour
    4. Next select 'Background overlay opacity' to change the level of transparency of the overlay colour.
    It is important to note these styles control the design of any boxes across the site using this same layout.

    Box Over Image Settings

    Boxes per row This sets the number of boxes that will appear in a row before wrapping to the next row.
    Desktop/Tablet height The height the image will appear on desktop and table.
    Mobile img height The height the image will appear on a mobile device. This can be quite important as otherwise images may be too large on mobile.
    Width
    1. Auto: Having auto set automatically sizes your boxes to fit the width of the section they sit within
    2. Fixed: Fixed allows you to control the width of the box. When selected, 2 more options appear:
      1. A width slider/field for you to enter the width of each box
      2. Alignment: This controls the position the boxes align on the page.
    Box spacing This controls how much spacing sits around the outside of the box
    Box filter overlay This controls the % of transparency of the overlay on the box. The base color for the overlay is taken from the box styles.
    Space around text Vertical: This controls the space inside the content area on the left and right.
    Horizontal: This controls the space inside the content area on the top and bottom.
    Text alignment The alignment of the contents of the box. This also aligns the button if there is one.

    2. Text Under Image

    This help video shows how to create a structured box layout with an image sitting above text.

    To add a Text Under Image box layout to your page:

    1. Select the page that you’d like to add the text under image box layout to.
    2. Click on the ‘+Add Element’ Icon on the Page's Header Bar
    3. Drag and Drop the Text Under Image icon (under Box Layouts) to the area of the page required.
    4. Open Single Box Edit by hovering your mouse over a box and clicking the edit icon.
    5. Create and edit a new box OR choose from existing boxes.
    6. Save

    You have now added a text under image box layout to your page.

    Box Under Image Settings

    Boxes per row This sets the number of boxes that will appear in a row before wrapping to the next row.
    Desktop/Tablet height The height the image will appear on desktop and table.
    Mobile img height The height the image will appear on a mobile device. This can be quite important as otherwise images may be too large on mobile.
    Width
    1. Auto: Having auto set automatically sizes your boxes to fit the width of the section they sit within
    2. Fixed: Fixed allows you to control the width of the box. When selected, 2 more options appear:
      1. A width slider/field for you to enter the width of each box
      2. Alignment: This controls the position the boxes align on the page.
    Box spacing This controls how much spacing sits around the outside of the box
    Box filter overlay This controls the % of transparency of the overlay on the box. The base colour for the overlay is taken from the box styles.
    Space around text Vertical: This controls the space inside the content area on the left and right.
    Horizontal: This controls the space inside the content area on the top and bottom.

    3. Text Next To Image

    This help video shows how to create a text next to image box layout group.

    To add a Text Next To Image box layout to your page:

    1. Select the page that you’d like to add the text Next to image box layout to.
    2. Click on the ‘+Add Element’ Icon on the Page's Header Bar
    3. Drag and Drop the Text Next To Image icon (under Box Layouts) to the area of the page required.
    4. Open Box Group Settings by hovering your mouse on top of the box layout and clicking the settings icon.
    5. Select Image to Text Ratio and Save.
    6. Single Box Edit by hovering your mouse over a box and clicking the edit icon.
    7. Create and edit a new box OR choose from existing boxes.
    8. Save

    You have now added a text next to image box layout to your page.

    Box Next to Image Settings

    Boxes per row This sets the number of boxes that will appear in a row before wrapping to the next row.
    Desktop/Tablet height The height the image will appear on desktop and table.
    Mobile img height The height the image will appear on a mobile device. This can be quite important as otherwise images may be too large on mobile.
    Width
    1. Auto: Having auto set automatically sizes your boxes to fit the width of the section they sit within
    2. Fixed: Fixed allows you to control the width of the box. When selected, 2 more options appear:
      1. A width slider/field for you to enter the width of each box
      2. Alignment: This controls the position the boxes align on the page.
    Box spacing This controls how much spacing sits around the outside of the box
    Image/text ratio This setting controls the size of the image compared to the size of the text box next to it
    Image position This controls the position of the image next to the box.
    If alternate is chosen, it alternates between the image being positioned on the left or right with each row.
    Box filter overlay This controls the % of transparency of the overlay on the box. The base colour for the overlay is taken from the box styles.
    Space around text Vertical: This controls the space inside the content area on the left and right.
    Horizontal: This controls the space inside the content area on the top and bottom.
    Text alignment The alignment of the contents of the box. This also aligns the button if there is one.

    Adding additional boxes

    This help video shows you how to add additional boxes to your box set.

    To add additional boxes to your box layout:

    1. Hover your mouse on top of the Box Layout
    2. Click on the Plus Icon and Select an option to add a new box.
    3. Create and edit a new box OR choose from existing boxes.
    4. Save.

    You have now added another box to your box layout.


    Choosing the Number of Boxes Per Row

    To choose the number of boxes that you want to display per row:

    1. Hover your mouse on top of the Box Layout
    2. Click on the Settings Icon. 
    3. Enter the number of boxes that you want to display per row
    4. Save.

    Changing Between Box Layouts

    Limecube allows you to easily edit and change between the different box layouts carrying your content and images into the new layout.

    Box Layouts

    Simply:

    1. Hover your mouse over the Box Layout.
    2. Click on the Settings Icon. 
    3. Click on the Layout you would like to change to.
    4. Save.

    Styling your boxes

    1. To style your boxes hover over the box set and you will see: style editor in the right corner.
    2. Click this icon to open style options
    3. Adjust the options to style your boxes.

    Can't find the answer you are looking for?

    Try using different keywords: