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.

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: in 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.

Box Over Image Settings

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

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

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.

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:  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

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.