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 module rows.
Module Settings
1. Module Layout

- LOAD JOOMLA! JQUERY - This setting loads Joomla!'s jQuery library. Choose NO if your website loads jQuery from an external source.
2. Display Module Elements

- SHOW IMAGE - Choose if the image for this module should be displayed or not.
- SHOW TITLE - Choose if the title for this module should be displayed or not.
- SHOW DESCRIPTION TEXT - Choose if the description for this module should be displayed or not.
- SHOW READ MORE - Choose if the Read More button for this module should be displayed or not.
3. Image Options

- IMAGE BORDER RADIUS - Insert the border-radius for the image 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.
4. Title Options

- TITLE GOOGLE FONT - Insert the name of the Google Font for the title, 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 FONT SIZE - Insert the font size for the font size 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 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 MARGIN - Insert the margin for the title using pixels or percent (for example: 14px or 10%, not 14). The margin is a CSS property that sets the space around the content, including the padding. The margin can have from 1 to 4 values (top, right, bottom and left). A blank field reverts the setting to the default value.
- TITLE TEXT TRANSFORM - Choose the text transform for the title of the module.
5. Description Options

- DESCRIPTION TEXT GOOGLE FONT - Insert the name of the Google Font for the description text, for example Open Sans or Roboto. A blank field reverts the setting to the default value.
- DESCRIPTION FONT WEIGHT - Set the font weight for the description of the text.
- DESCRIPTION FONT STYLE - Set the font style for the description of the text.
- DESCRIPTION TEXT 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 TEXT ALIGN - Choose the text align for the description text.
- DESCRIPTION TEXT 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 MARGIN - Insert the margin for the description text using pixels or percent (for example: 14px or 10%, not 14). The margin is a CSS property that sets the space around the content, including the padding. The margin can have from 1 to 4 values (top, right, bottom and left). A blank field reverts the setting to the default value.
6. Read More Options

- READ MORE COLOR - Choose the color for the Read More text. A blank field reverts the setting to the default value.
- READ MORE BACKGROUND COLOR - Choose the color for the background of the Read More text. A blank field reverts the setting to the default value.
- READ MORE BACKGROUND COLOR HOVER - Choose the color for the background color for the Read More text on mouse hover. A blank field reverts the setting to the default value.
- READ MORE GOOGLE FONT - Insert the name of the Google Font for the Read More text, for example Open Sans or Roboto. A blank field reverts the setting to the default value.
- READ MORE FONT WEIGHT - Set the font weight for the Read More text.
- READ MORE FONT STYLE - Set the font style for the Read More text.
- READ MORE SHOW ICON - Choose if the icon for the Read More should be displayed or not.
- READ MORE ICON - Insert the Font Awesome icon name for the Read More text. For example: fas fa-angle-right. A blank field reverts the setting to the default value.
- READ MORE FONT SIZE - Insert the font size for the Read More 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.
- READ MORE LINE HEIGHT - Insert the line height for the Read More 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.
- READ MORE TEXT ALIGN - Choose the text align for the Read More text.
- READ MORE TEXT TRANSFORM - Set the text transform for the title of the module.
- READ MORE PADDING - Insert the padding for the Read More text 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.
- READ MORE MARGIN - Insert the margin for the Read More text using pixels or percent (for example: 14px or 10%, not 14). The margin is a CSS property that sets the space around the content, including the padding. The margin can have from 1 to 4 values (top, right, bottom and left). A blank field reverts the setting to the default value.
- READ MORE BORDER RADIUS - Insert the border-radius for the Read More text 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.
Module Content
1. Row Options

- SHOW ROW - Choose if this row of the module should be displayed or not.
- ROW 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. Image Options

- UPLOAD IMAGE - Upload the image for the module column. A blank field reverts the setting to the default value.
- IMAGE STYLE - Choose the image style for this row.
- IMAGE ALT TEXT - Insert the text for the image Alt. A blank field reverts the setting to the default value.
- IMAGE FLOAT - Choose the image float for this row.
- IMAGE WIDTH - Select a width for the image from a list of fixed values that will preserve the reposnsive layout of the module.
- SHOW IMAGE LINK - Choose if the image link should be displayed or not.
- IMAGE LINK - Insert the URL for the image. Note that the link must include http:// or https://. A blank field reverts the setting to the default value.
- IMAGE LINK TARGET - Choose the link target of the URL for the image.
3. Title Options

- TITLE TEXT - Insert the text for the title of the module. A blank field reverts the setting to the default value.
- TITLE COLOR - Choose the color for the title of the module. A blank field reverts the setting to the default value.
- SHOW TITLE LINK - Choose if the link for the title of the module should be displayed or not.
- TITLE LINK - Insert the URL for the title of the module. Note that the link must include http:// or https://. A blank field reverts the setting to the default value.
- TITLE LINK TARGET - Choose the link target of the URL for the title of the module.
4. Description Options

- DESCRIPTION TEXT - Insert the text for the description of the module. A blank field reverts the setting to the default value.
- DESCRIPTION TEXT COLOR - Choose the color for the description of the module. A blank field reverts the setting to the default value.
5. Read More Options

- READ MORE TEXT - Insert the text for the Read More text. A blank field reverts the setting to the default value.
- READ MORE LINK - Insert the URL for the Read More text. Note that the link must include http:// or https://. A blank field reverts the setting to the default value.
- READ MORE LINK TARGET - Choose the link target of the URL for the Read More text.
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.