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.

Column Menu:

This design includes an option to set the menu to a column format. If not using the menu will display like a normal horizontal menu. First you must choose your option in the "theme specific" area of Vertex. If you choose the standard layout no other configuration is needed. If you choose the column layout then you'll just need to add a menu item spacer where you desire to break the columns. See the below image on how to do this but be sure the class "spacerlink" is added.



Code used:

Intro text:

This area is created with a custom html module published to the custom_1 position.



Code used:

Photo Showcase Setup:

For the demo we set the module up using the "article" method. The active image width is 6, the max width 1300 and the duration 6. We then set the below settings on the article page. Please reference the admin screenshot image below. For each article we just added an intro image to the "intro image" area. This is the image that will show up in the Photo Showcase module slider you must enter a intro image for each article in order for it to show. Lastly the images we used for each intro image and that display in the Photo Showcase module are all set to the dimensions of 1303x746. You can set to the dimensions you desire but we do recommend setting keeping all the images the same height/width once you choose. If you have taller or wider images just leave white or black space around them in a photo editing program.

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

Testimonials:

This is the tab show published to the custom_4 position, but can be published to almost any row positions. The below code is a sample of one of the custom HTML modules published to the 4 tab show positions:



Code used for this area:

Our Latest Photoshoots:

This is the Masonry module that is published to the top_row2_1 position, but can be published to almost any row of positions. The module is set to "hover" in the admin area with item widths set to 33%. For the Photoblog page we did the same thing but instead of hover we set it to "overlay" and item widths set to 100%:

Our Photographers

This is the tab show published to the custom_5 position, but can be published to almost any row positions. The below code is a sample of one of the custom HTML modules published to the 2 tab show positions:



Code used for this area:

Get in Touch with Me:

This is a custom HTML module published to the bottom_row2_1 position with the module class of "right-padding" added to it.



Code used:

Quick Contact:

This is the quick contact module published to the bottom_row2_2 module position with the module class suffix of "top-padding" added to it.

Social Icons:

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



Code used for this area: