Content Boxes

All you need to know about the content boxes module and how to use it.

The Content-Box module offers a variety of features for users to customize their content boxes. The latest update includes a Content Box Layout feature that organizes all layout-related features in one place, allowing users to choose between a single-column or multiple-column layout.

1. Single Column: The option for a single-column layout is available for those who want to use only one box.
2. Multiple Columns: In case you want to showcase multiple boxes and even manage their control in a single go, you can choose a multiple-column layout.

Features under single-column box layout:
1. Content Alignment: The box's content could be aligned left, right or centre as per the user's preferences.
2. Icon Type: The user can choose between icon, image or SVG for the box icons.
3. Image Alignment: The user can manage the icon/image/SVG's alignment as well.
4. Heading Text: The user can control the text of the heading as it is completely editable.
5. Description Text: The descriptions can be added by the users in the content box to make them more user-friendly.
6. Button: The user can add a button to the content box and can change the style & alignment of the button from multiple options given in the feature as well.
  1. Button Text: The user can add text to the button. It's an editable button/CTA
  2. Button URL Link To The user can choose if the button is to be linked to external pages or internal pages.
  3. Button URL: Add the URL to the button
  4. Link Type: The user can choose the link to be a Follow / No-Follow
  5. Button Style: Choose from a variety of options given in the functionality given in the module.
  6. Button Alignment: The user can switch between the alignment of the button in the content box.
Clickable Box: The user can choose to make the whole box clickable instead of just one button in the box to improve the UI of the webpage.
1. Add URL to Box: The user can choose the box to be linked with internal, or external pages, email addresses or even files.
2. URL: This is where the URL will be added in the box.
3. Link Type: Control the follow/no-follow functionality.
Features under multiple-column box layout:
1. Columns per row: The user will be able to choose to keep up to 4 boxes in a single row. Any more boxes will automatically be shifted to the next row.
2. Content Alignment: The box's content could be aligned left, right or centre as per the user's preferences.
3. Add Items: The features offers the user to add boxes to the column and give better controls to manage their settings in a single go. Apart from the single-column box layout settings, there are a few more controls that have been given in this feature to collectively change the features as well as for individual boxes in the group.
  1. Content Alignment: The box's content could be aligned left, right or centre as per the user's preferences.
  2. Icon Type: The user can choose between icon, image or SVG for the box icons.
  3. Add Icon: The user should be able to add an icon of their choice
  4. Image Alignment: Choose to align the image in the box
  5. Heading Text: Add the title to the box
  6. Description Text: To add the text and description to the box
  7. Add Button: The user can add a button to the content box and can change the style & alignment of the button from multiple options given in the feature as well.
  8. Clickable Box: The user can choose to make the whole box clickable instead of just one button in the box to improve the UI of the webpage.
  9. Box Background Color - The user will be able to control the background colour of the box, the Background colour on hover and the colour of the box border as well.
4. Box Icon Color: The user can give icon colour, icon background colour, Icon Hover Colour, and Icon Hover Background Colour.
5. Box Icon Layout: The user can choose shapes between square and circle for the icons
6. Box Text Color: The user can select different text colours and hover them as well.
7. Shadow on Hover: The user can select to apply a shadow effect on box hover
8. The radius of Edge: The user can get rid of standard rectangular boxes and give a radius to the edges.
9. Box Animation: The user can give animation effects to the box from a variety of pre-defined options.
10. Icon Type: The user can choose between icon, image or SVG for the box icons.
11. Image Alignment: The user can manage the icon/image/SVG's alignment as well.
12. Button: The user can add a button to the content box and can change the style & alignment of the button from multiple options given in the feature as well.
13. Clickable Box: The user can choose to make the whole box clickable instead of just one button in the box to improve the UI of the webpage.
Style Settings
1. Box Style:
  1. Box background colour: The user can add a background colour as well as its hover colour.
  2. Shadow on hover: The user will be able to add a box shadow effect on hover over.
  3. Box border: The user will be able to add a border to the box, give width/thickness and even control the colour of the border as well.
  4. Box animation: The user can give animation effects to the box from a variety of pre-defined options.
2. Icon Style:
  1. Icon Color: The user will be having the control to add the colour to the icons. This feature will work only for the icons chosen from the icon library by HubSpot.
  2. Icon Layout: The user can manage the alignment of the logo as they would want to. A new option has been given i.e. Boxed Up layout which allows the user to use the icon like it is embedded in the box. Here's a screenshot of the box with this feature below:
  3. Text Style:
  4. Text Colour: The user can give colour to the text of the boxes in the style settings.
  5. Text Size: The user can define H1, H2 and so on for the text used in the box.
3. Visibility Controls: The user can show/hide the module for specific devices in a single control.

Update Released on 10 Jan 2023