Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

FAVFEATURES is a responsive Joomla! module designed to showcase a gallery of text and icon features with multiple layout options and CSS3 effects for icons.

use up to
24 features

100+ module
settings

CSS3 effects
on hover

load & scroll
CSS3 effects

FavFeatures Layout

Designed to be versatile and customizable, FavFeatures supports up to 24 features for each module, each one with title, description and 8 icon effects. The icons can also be aligned to the left or to the right, creating new layouts:

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

FavFeatures Columns

This module supports a 4 column layout which means it can have 4, 3, 2 or 1 column for the module layout without assigning each module to a new module position. Using the module settings, each image row can have a 4 column layout or a 3 column layout. Here are some examples of different column layouts:

4 Column Layout

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

3 Column Layout

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

FavFeatures Effects

This module supports 8 preset CSS3 effects on page scroll and load which can be changed by using the module settings. Here are some examples of different CSS3 load & scroll effects for this module:

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do magna aliqua.

FavFeatures Documentation

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:

  1. the module's .zip archive - must to be installed using EXTENSIONS/MANAGE/INSTALL
  2. the ReadMe.txt file - has useful information about the product

Once installed, find the module in EXTENSIONS/MODULES and open it:

FavFeatures Joomla module documentation main screen

MODULE SETTINGS - this tab controls the general settings, the ones that apply to all elements of the module.

MODULE STYLE - 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

FavFeatures Joomla module documentation settings main

  1. LOAD JOOMLA! JQUERY - This setting loads Joomla!'s jQuery library. Choose NO if your website loads jQuery from an external source.
  2. NUMBER OF COLUMNS - Choose the number of images on each row.
  3. 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. Display Module Elements

FavFeatures Joomla module documentation settings display screen

  1. SHOW ICON - Choose if the icon for this module should be displayed or not.
  2. SHOW TITLE - Choose if the title for this module should be displayed or not.
  3. SHOW DESCRIPTION - Choose if the description for this module should be displayed or not.

4. Icon Options

FavFeatures Joomla module documentation settings icon screen

  1. ICON WIDTH - Insert the width for the the icon when the icon layout is enabled using pixels or percent (for example: 140px or 80%, not 140). A blank field reverts the setting to the default value.
  2. ICON FONT SIZE - Insert the font size for the the icon when the icon layout is enabled using pixels, percent or em (for example: 14px, 120% or 1.2em, not 14). A blank field reverts the setting to the default value.
  3. ICON SHADOW ON HOVER - Choose if the icon shadow on hover should be displayed or not.
  4. ICON BORDER WIDTH - Insert the border width for the icon when the icon layout is enabled using pixels (for example: 1px, not 1). A blank field reverts the setting to the default value.
  5. ICON BORDER TYPE - Choose the border type for the icon when the icon layout is enabled.
  6. ICON BORDER RADIUS - Insert the border-radius for the icon when the icon layout is enabled 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

FavFeatures Joomla module documentation settings title

  1. 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.
  2. 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.
  3. 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.
  4. TITLE TEXT ALIGN - Choose the text align for the title of the module.
  5. TITLE TRANSFORM - Choose the text transform for the title of the module.

3. Description Options

FavFeatures Joomla module documentation settings description

  1. 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.
  2. DESCRIPTION TEXT COLOR - Choose the color for the description text. A blank field reverts the setting to the default value.
  3. 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.
  4. 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.
  5. DESCRIPTION TEXT ALIGN - Choose the text align for the description of the module.

Module Style

1. Feature Options

FavFeatures Joomla module documentation style main

  1. SHOW FEATURE - Choose if this feature should be displayed or not.

2. Icon Options

FavFeatures Joomla module documentation style icon

  1. ICON NAME - Insert the Font Awesome icon name (for example: fa-magic or fa-joomla). A blank field reverts the setting to the default value.
  2. ICON EFFECT - Choose a CSS3 effect for the icon. Note that the CSS3 features are not supported by older browsers.
  3. ICON COLOR - Choose the color for the icon. A blank field reverts the setting to the default value.
  4. ICON BACKGROUND COLOR - Choose the color for the background of the icon. A blank field reverts the setting to the default value.
  5. ICON BORDER COLOR - Choose the color for the border of the icon. A blank field reverts the setting to the default value.
  6. ICON FLOAT - Choose the float for the icon, either to the left or to the right of the text.
  7. SHOW ICON LINK - Choose if the icon link should be displayed or not.
  8. ICON LINK - Insert the URL for the module icon. Note that the link must include http:// or https://.
  9. ICON LINK TARGET - Choose the target of the URL for the icon.

3. Title Options

FavFeatures Joomla module documentation style title

  1. TITLE TEXT - Insert the text for the title of the module column. A blank field reverts the setting to the default value.
  2. TITLE COLOR - Choose the color for the title of the module column. A blank field reverts the setting to the default value.
  3. 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.
  4. SHOW TITLE LINK - Choose if the title for this module column should be displayed or not.
  5. TITLE LINK - Insert the URL for the title for this module column. Note that the link must include http:// or https://. A blank field reverts the setting to the default value.
  6. TITLE LINK TARGET - Choose the link target of the URL for the title for this module column.

4. Description Options

FavFeatures Joomla module documentation style description

  1. DESCRIPTION TEXT - Insert the text 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.