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 |
|
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. |
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. |
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. |
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. |
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. |
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:
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. Quite useful for displaying logos of companies you work for, or work with.
Try using searching below: