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.

Layout types

Boxes come with 3 different layouts for different visual usage.

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

Box Layouts

Box settings

Box group settings allow you to manage style, padding, size, and animations for a group of boxes, ensuring a consistent look and feel.

Adjusting Box Settings:

  • New Boxes: When you drag new boxes onto the page, settings open automatically.
  • Existing Boxes: Hover over the boxes and click the cog icon in the top right corner to open group settings.
  • Live Updates: Adjust settings as needed; changes will live update to give you a preview of the final look.

This feature provides an overview and ensures uniformity across your boxes. Different box types may have slightly different settings, these are noted below.

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. Click 'Apply'

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.
    Hover animation There are multiple animation options to choose from. As these live update, we suggest trying the different options and immediately hovering over the boxes in the main panel to find one that suits you. These work at a group level.
    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.
    Text alignment The alignment of the contents of the box. This also aligns the button if there is one.
    Carousel Mode

    This turns your boxes into a horizontal carousel. Carousel mode allows your boxes to scroll from right to left across the screen, rather than stacking.

    It is important to allow for different-sized screens for optimal viewing, which is why you have 3 settings to adjust how many boxes show per main width.

    Rounded corners

    This gives the blog post image rounded corners. You can also adjust corners individually to give a more creative style to your images.

    Button Settings

    Change the style of your buttons across your box set.

    Some animation settings will be unavailable, depending on the type of button you choose.

    2. Text Under Image

    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. Click 'Apply'

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

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

    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.
    Carousel mode

    This turns your boxes into a horizontal carousel. Carousel mode allows your boxes to scroll from right to left across the screen, rather than stacking.

    It is important to allow for different-sized screens for optimal viewing, which is why you have 3 settings to adjust how many boxes show per main width.

    Rounded corners This gives the blog post image rounded corners. You can also adjust corners individually to give a more creative style to your images.
    Button Settings

    Change the style of your buttons across your box set.

    Some animation settings will be unavailable, depending on the type of button you choose.


    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. Click 'Apply'

    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.
    Rounded corners This gives the blog post image rounded corners. You can also adjust corners individually to give a more creative style to your images.

    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. Click 'Apply'

    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. Click 'Apply'

    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. Click 'Apply'

    Styling your box sets

    Boxes are initially styled to match the theme chosen. However you can further style these for any additional changes you may want to make if you are changing the design of the theme.

    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 different options to style the boxes.

    Individual box styling

    Individual boxes can be styled as well, to override sitewide style settings.

    To make changes to these:

    1. Click edit on the box you wish to change
    2. Scroll down to the bottom of the box
    3. You'll see the colour scheme. Select a default colour, or choose a custom colour

    Colour palette

    If you haven't set a colour scheme for your site, you will only have the 'Custom' colour available to you.

    Box Icons

    Limecube have over 1,600 icons to choose from to insert into boxes. Box Icons can be a great way to break up your content and make it look more interesting.

    To add icons:

    1. Click the edit icon on the box you wish to add the icon to.
    2. Towards the top of the box click on 'add' in the icon section.
    3. You'll be presented with the icon library. It can be much easier to use the search function due to the number of icons.
    4. Choose a colour from the colour palette (if you already have one selected), or create a custom colour.
    5. Change the size if required.
    6. Click 'Apply', then 'Apply' again.
    7. Don't forget to press your page save button.

    The help video below also shows you how.

    Adjusting the icon spacing

    The spacing may not always be right with the default settings. To adjust this, do the following:

    1. Hover over a box, and the box group settings icons will display.
    2. Select the settings icon to open the box 'group' settings.
    3. Look for 'Icon spacing' and choose from one of the spacing options.

    Carousel mode

    This help video below shows you how to turn your box set, into a carousel. Carousels can be useful for displaying a larger amount of content in a small space. Especially quite useful for displaying logos of companies you work for, or work with.

    As carousel mode best works with the same types of items and sizes in each box to display nicely, it is a good idea to start with just one box, get that right, and then use the duplicate function to make setting up additional boxes faster.

    Here are the steps needed to setup a carousel.

    1. Insert the content you want into each box, be it logos, images, text, video etc.
    2. Duplicate your box, until you have set up all the necessary items.
    3. Once done, head over to the box group settings, and turn 'Carousel mode' on.
    4. Adjust any other settings to give the right spacing or items per row.
    5. Click Apply.

    Editing individual boxes

    Each box layout shares the same properties, so editing is the same no matter which layout you've selected.

    Image To add an image, click the add button. This will open the file manager, and allow you to click from an existing one, or upload a new one.
    Icon Click here to learn more about working with icons.
    Title The title is optional. If you don't wish to have a title in your box, leave this field empty and it will not show.
    Alt Alt text is used for images. This is text is only visible in the code of your website, and used for search engines and accessibility programs. Learn more here.
    Description The description field is optional. If you don't wish to have a description in your box, leave this field empty and it will not show.
    Alignment Setting your alignment positions all the content in the box to either left, centre, or right.
    Button text Having a button is optional. If you don't wish to have a button in your box, leave this field empty and it will not show.
    Link If you are using a button, either link it to an existing page by choosing from the drop down list of your pages, or paste in an external link. External links open in a new window by default.
    Colour scheme Click here to learn more about editing your colours.

    Can't find the answer you are looking for?

    Try using searching below: