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.
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:
You have now added a text over image box layout to your page.
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.
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 |
|
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. |
To add a Text Under Image box layout to your page:
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.
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 |
|
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. |
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:
You have now added a text next to image box layout to your page.
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 |
|
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. |
This help video shows you how to add additional boxes to your box set.
To add additional boxes to your box layout:
You have now added another box to your box layout.
To choose the number of boxes that you want to display per row:
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.
Individual boxes can be styled as well, to override sitewide style settings.
To make changes to these:
If you haven't set a colour scheme for your site, you will only have the 'Custom' colour available to you.
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:
The help video below also shows you how.
The spacing may not always be right with the default settings. To adjust this, do the following:
Try using searching below: