Occasionally we need to use custom html to obtain the layouts shown on our demos in specific modules. The code below is what was used on this template. It is best to enter this code directly into the HTML editor function of your editor.

Image and Content Fader Code:

There are three different style slides to use. Each style is shown on the homepage of this demo. The first style aligns the text on the left and an image in the bottom right corner. The second style is the easiest to use, it aligns all text in the middle and uses no images. The third style is similar to the first, but it aligns the image in the center rather than the bottom right corner.

For setup instructions of this extension please visit http://www.shape5.com/documentation/Joomla/Extensions/S5-Image-and-Content-Fader



Code used for text area, the title setting should be turned off in the settings. All text is entered in the text field settings. You can also use this same code in any article if you are using the article method of the module: Style 1:
Style 2:
Style 3:

Top Boxes and Text:

This area is created with two custom html modules. One is published to the custom_2 position and the other published to the custom_3 position.



Code used for the custom_2 area. The image shown in the two boxes is a background image, so not all of the image is intended to show at all resolutions. You simply change out the background call with your own image source in the code below:

Custom_2:
Code used for the custom_3 area. This module uses the class suffix "larger_title" and "s5_icon.ion-ios-chatbubble":

Top Image Boxes:

This is a custom html module that is published to the top_row1_1 position, but can be published to almost any row of positions.



Code used for this area:

Learn More About Us:

This is a custom html module that is published to the top_row2_1 position, but can be published to almost any row of positions.



Code used for this area. The image shown on the left side is a background image, so not all of the image is intended to show at all resolutions. You simply change out the background call with your own image source in the code below:

Centered Text:

This code is published to a custom html module and is used in various positions.



Code used for this area:

Center Text and Graphs:

The text area is simply an article that is published to Featured. The graphs are custom html modules that are published to the middle_bottom_1 and middle_bottom_2 positions. Scroll Reveal must be enabled under the Javascripts tab in the template configuration.



Code used for the graphs:

Vertical Accordion:

Each slide in the S5 Vertical Accordion is a custom html module that is published to the s5_va_X positions. Each module becomes a slide. Below is the code used for the first accordion, the image is intended to disappear on smaller resolutions to save space.

For setup instructions of this extensions please visit http://www.shape5.com/documentation/Joomla/Extensions/S5-Vertical-Accordion



Code used for the first accordion:

Stats Area:

This is a custom html module that is published to the below_columns_1 position, but can be published to various positions.



Code used for this area:

Testimonial Area:

This area consists of two positions. The first is a custom html module that shows the image of three people, this is published to the bottom_row1_1 position. The other is the S5 Tab Show that is published to the bottom_row1_2 position. The background of this area can be controlled from the Main / Layout page in the template configuration.

For setup instructions of this extension please visit http://www.shape5.com/documentation/Joomla/Extensions/S5-Tab-Show



Code used in bottom_row1_1:
Code used in the S5 Tab Show slides:
Pre-Text defined in the S5 Tab Show settings:

Team Section:

Each of these is a custom html module that is published to the bottom_row2_1 and bottom_row2_2 positions. The employee boxes use the class suffix "shadow", the text box uses no class suffix.



Code used for employee: Code used for text:

Bottom Boxes:

This is a custom html module that is published to the custom_4 position.



Code used for this area:

Bottom Address:

This is a custom html module that is published to the custom_5 position.



Code used for this area:

Social Icons:

This is a custom html module that is published to the custom_6 position.



Code used for this area: