The downloaded package for the module is a .zip archive that needs to be unzipped before use. After it has been unzipped, inside the downloaded package you will find:
- the module's .zip archive - must be installed using EXTENSIONS/MANAGE/INSTALL
- the ReadMe.txt file - has useful information about the product
Once installed, find the module in EXTENSIONS/MODULES and open it:

MODULE SETTINGS - this tab controls the general settings, the ones that apply to all elements of the module.
MODULE CONTENT - this tab controls the individual settings for each element of the module such as images, text or icons for each one of the columns.
Module Settings
1. Module Options

- LOAD JOOMLA! JQUERY - This setting loads Joomla!'s jQuery library. Choose NO if your website loads jQuery from an external source.
- LAYOUT EFFECT - Choose a CSS3 effect for the layout on page scroll and load. Note that the CSS3 features are not supported by older browsers.
2. Title Options

- TITLE GOOGLE FONT - Insert the name of the Google Font for the title of the module, for example Open Sans or Roboto. A blank field reverts the setting to the default value.
- TITLE FONT WEIGHT - Set the font weight for the title of the module.
- TITLE FONT STYLE - Set the font style for the title of the module.
- TITLE PADDING - Insert the padding for the title of the module using pixels or percent (for example: 14px or 10%, not 14). The padding is a CSS property that sets the space around the content. The padding can have from 1 to 4 values (top, right, bottom and left). A blank field reverts the setting to the default value.
- TITLE FONT SIZE - Insert the font size for the title of the module using pixels, percent or em (for example: 14px, 120% or 1.2em, not 14). A blank field reverts the setting to the default value.
- TITLE LINE HEIGHT - Insert the line height for the title of the module using pixels or em (for example: 14px or 1.2em, not 14). The line-height property is used to modify the spacing between the lines of text. A blank field reverts the setting to the default value.
- TITLE TEXT ALIGN - Choose the text align for the title of the module.
Title Icon
- TITLE ICON FONT SIZE - Insert the font size for the icon of the title using pixels, percent or em (for example: 14px, 120% or 1.2em, not 14). A blank field reverts the setting to the default value.
- TITLE ICON VERTICAL ALIGN - Choose the vertical alignment for the icon of the title of the module.
3. Description Options

- DESCRIPTION FONT SIZE - Insert the font size for the description text using pixels, percent or em (for example: 14px, 120% or 1.2em, not 14). A blank field reverts the setting to the default value.
- DESCRIPTION LINE HEIGHT - Insert the line height for the description text using pixels or em (for example: 14px or 1.2em, not 14). The line-height property is used to modify the spacing between the lines of text. A blank field reverts the setting to the default value.
- DESCRIPTION TEXT ALIGN - Choose the text align for the description of the module.
Module Content
1. Column Options
This module supports a 6 column layout. This means it can have 6, 5, 4, 3, 2 or 1 column for the module layout without assigning each module to a new module position. Each one of the columns from 1 to 6 has these options:

- SHOW COLUMN - Choose if the column for this module should be displayed or not.
- COLUMN BORDER COLOR - Choose the color for the border of the module column. A blank field reverts the setting to the default value.
- COLUMN BORDER RADIUS - Insert the border-radius for the border of the module column using pixels or percent (for example: 140px or 80%, not 140). Note that the CSS3 features are not supported by older browsers. A blank field reverts the setting to the default value.
2. Image Options

- UPLOAD IMAGE - Upload the image for the module column. A blank field reverts the setting to the default value.
- IMAGE LINK - Insert the URL for the module column image. Note that the link must include http:// or https://. A blank field means that no link is assigned to the image.
- IMAGE LINK TARGET - Choose the link target of the URL for the module column image.
- IMAGE ALT TEXT - Insert the text for the image Alt. A blank field reverts the setting to the default value.
3. Title Options

- TITLE TEXT - Insert the text for the title of the module column. A blank field reverts the setting to the default value.
- TITLE COLOR - Choose the color for the title of the module column. A blank field reverts the setting to the default value.
- TITLE BACKGROUND COLOR - Choose the color for the background of the title of the module column. This is also the color for the module background on hover. A blank field reverts the setting to the default value.
- TITLE LINK - Insert the URL for the title for the module column. Note that the link must include http:// or https://. A blank field means that no link is assigned to the title.
- TITLE LINK TARGET - Choose the link target of the URL for the title for this module column.
- TITLE ICON - Insert the Font Awesome icon name (for example: fas fa-magic or fab fa-joomla). A blank field reverts the setting to the default value.
4. Description Options

- DESCRIPTION TEXT - Insert the text for the description of the module column. A blank field reverts the setting to the default value.
- DESCRIPTION TEXT COLOR - Choose the color for the description of the module column. A blank field reverts the setting to the default value.
The module features using CSS3 have limited support for older browsers, so please check the demo first.
Being a responsive module, this Joomla! module has no fixed width. The maximum width of the module is the width of the module position containing the module and/or the width of the device used (desktop, tablet or mobile). To test the responsive behaviour of the module columns, simply adjust the width of the browser window to different sizes.