0
Welcome Guest! Login
0 items Join Now

Photon: Recreating the Demo - Expanded Section

Your Guide to Recreating Elements of the Photon Demo for Joomla


Introduction

1
Content Tabs
2
Owl Carousel
3
Simple Content

The Showcase section includes three particles: Content Tabs, Owl Carousel, and Simple Content. The Content Tabs particle is assigned to the expanded-a module position, while the Owl Carousel and Simple Content particles are assigned to the expanded-b module position.

Here is a breakdown of the module(s) and particle(s) that appear in this section:

Section Settings

Option Setting
Layout Boxed
CSS Classes nomarginbottom
Tag Attributes Blank

Content Tabs (Particle)

The Content Tabs particle is a Gantry 5 Particle module placed within the expanded-a module position. Adding a particle to a module position can be done by creating a Gantry 5 Particle module, adding the particle using the settings found in the section below, and assigning it to the position.

Module Position Particle Settings

Particle Settings

Demo Expanded

Option Setting
Particle Name FP Expanded A
Key expanded-a
Chrome gantry

Block Settings

Demo Expanded

Option Setting
CSS ID Blank
CSS Classes Blank
Variations Blank
Tag Attributes Blank
Fixed Size Unchecked
Block Size 68%

Content Tabs Particle Settings

Particle Settings

Demo Expanded

Option Setting
Particle Name Content Tabs
CSS Classes Blank
Title Blank
Animation Type Slide Left
Duration 500
Item 1 Name Particles
Item 1 Tab Name Particles
Item 1 Title Particles
Item 1 Subtitle Blank
Item 1 Description Blank
Subitem 1 Name News Slider
Subitem 1 Tag News Slider
Subitem 1 Dot Accent Color Accent Color 1
Subitem 1 Dot Custom Color Blank
Subitem 1 Subtag Text 1
Subitem 1 Description Highlight top headlines without taking up a lot of vertical space. This particle is perfect for breaking news and important information.

Owl Carousel (Particle)

The Owl Carousel particle is a Gantry 5 Particle module placed within the expanded-b module position. Adding a particle to a module position can be done by creating a Gantry 5 Particle module, adding the particle using the settings found in the section below, and assigning it to the position.

Module Position Particle Settings

Particle Settings

Demo Expanded

Option Setting
Particle Name FP Expanded B
Key expanded-b
Chrome gantry

Block Settings

Demo Expanded

Option Setting
CSS ID Blank
CSS Classes Blank
Variations No Margin No Padding
Tag Attributes Blank
Fixed Size Unchecked
Block Size 32%

Owl Carousel Particle Settings

Particle Settings

Demo Expanded

Option Setting
Particle Name Owl Carousel
CSS Classes Blank
Title Blank
Layout Standard
Width Full Width
Out Animation zoomOut
In Animation fadeIn
Prev / Next Enable
Prev Text Blank
Next Text Blank
Dots Disable
Loop Enable
Autoplay Enable
Autoplay Speed 5000
Pause on Hover Enable
Footer Shadow Enable
Footer Shadow Color #20232a
Item 1 Name Business
Item 1 Image Blank
Item 1 Icon Blank
Item 1 Title Business
Item 1 Description Blank
Item 1 Link Blank
Item 1 Link Text Blank
Item 1 Target Self
Item 1 Button Class Blank

Simple Content (Particle)

The Simple Content particle is a Gantry 5 Particle module placed within the expanded-b module position. Adding a particle to a module position can be done by creating a Gantry 5 Particle module, adding the particle using the settings found in the section below, and assigning it to the position.

Module Position Particle Settings

Particle Settings

Demo Expanded

Option Setting
Particle Name FP Expanded B
Key expanded-b
Chrome gantry

Block Settings

Demo Expanded

Option Setting
CSS ID Blank
CSS Classes Blank
Variations No Margin No Padding
Tag Attributes Blank
Fixed Size Unchecked
Block Size 32%

Simple Content Particle Settings

Particle Settings

Demo Expanded

Option Setting
Particle Name Simple Content
CSS Classes Blank
Title Blank
Item 1 Name Simple Content
Item 1 Layout Style Standard
Item 1 Created Date MAR 03, 2016
Item 1 Content Title About Photon
Item 1 Author Blank
Item 1 Main Content Blank
Item 1 Read More Label Read More
Item 1 Read More Link Blank
Item 1 Read More Classes button
Item 1 Target Self

Leading Content

All demo content is for sample purposes only, to represent a live site.
<br>
Note: Photon is built on the latest version of the Gantry 5 Framework.

Found errors? Think you can improve this documentation? Please edit this page. You can also view the history of this page.