0
Welcome Guest! Login
0 items Join Now

Photon: Recreating the Demo - About Us Page

Your Guide to Recreating Elements of the Photon Demo for Grav


Introduction

The About Us example page demonstrates how you can create a beautiful page with the Photon theme. Here is some information to help you replicate this page as it appears in the demo.

Modules and Particles

Below is a brief rundown of the widgets and particles used to make up the demo page.

1
Header
Simple Content (particle)
2
ShowcaseBanner
Custom HTML (particle)
3
Showcase
Mosaic Grid (particle)
4
UtilityBanner
Custom HTML (particle)
5
Utility
Grid Statistic (particle)
6
FeatureBanner
Block Content (particle)
7
Feature
Image Grid (particle)
8
MainBanner
Custom HTML (particle)
9
Main
Block Content (particle)
10
Extension
Block Content (particle)

Header Section

This area of the page is a Simple Content particle. You will find the settings used in our demo below.

Section Settings

Field Setting
Layout Boxed
CSS Classes Blank
Tag Attributes Blank

Particle Settings

Option Setting
Particle Name Simple Content
CSS Classes center
Title Blank
Item 1 Name About Us
Item 1 Layout Style Header
Item 1 Created Date Blank
Item 1 Content Title About Us
Item 1 Author Blank
Item 1 Leading Content Use beautiful Google Web Fonts to individualize your site and add character to your content. There are hundreds to choose from, in various styles and weights.
Item 1 Main Content Blank
Item 1 Read More Label Blank
Item 1 Read More Link Blank
Item 1 Read More Classes Blank
Item 1 Target Self

Block Settings

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

ShowcaseBanner Section

This area of the page is a Custom HTML particle. You will find the settings used in our demo below.

Section Settings

Field Setting
Layout Boxed
CSS Classes Blank
Tag Attributes Blank

Particle Settings

Option Setting
Particle Name Custom HTML
Process Twig Blank
Process Shortcodes Blank

Custom HTML

<h3 class="g-title nomarginbottom nopaddingbottom">Our Team</h3>

Block Settings

Option Setting
CSS ID Blank
CSS Classes nomarginbottom nopaddingbottom
Variations Blank
Tag Attributes Blank
Fixed Size Unchecked
Block Size 100%

Showcase Section

This area of the page is an Mosaic Grid particle. You will find the settings used in our demo below.

Section Settings

Field Setting
Layout Boxed
CSS Classes Blank
Tag Attributes Blank

Particle Settings

Option Setting
Particle Name Mosaic Grid
CSS Classes Blank
Title Blank
Grid Columns 4 Columns
Item 1 Name Sam
Item 1 Style Style 1
Item 1 Image Custom
Item 1 Title Label Sam
Item 1 Title Link Blank
Item 1 Title Link Target Self
Item 1 Description A great valuable team member who is very creative, successful and loved by our clients.
Item 1 Animations g-mosaicgrid-zoom
Item 1 Button Label Blank
Item 1 Button Link Blank
Item 1 Button Link Target Self
Item 1 Button Classes Blank
Item 1 Tag Blank
Item 1 Tag Icons Blank

Block Settings

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

UtilityBanner Section

This area of the page is a Custom HTML particle. You will find the settings used in our demo below.

Section Settings

Field Setting
Layout Boxed
CSS Classes Blank
Tag Attributes Blank

Particle Settings

Option Setting
Particle Name Custom HTML
Process Twig Blank
Process Shortcodes Blank

Custom HTML

<h3 class="g-title nomarginbottom nopaddingbottom">Our Experience</h3>

Block Settings

Option Setting
CSS ID Blank
CSS Classes nomarginbottom nopaddingbottom
Variations Blank
Tag Attributes Blank
Fixed Size Unchecked
Block Size 100%

Utility Section

This area of the page is an Grid Statistic particle. You will find the settings used in our demo below.

Section Settings

Field Setting
Layout Fullwidth (Boxed Content)
CSS Classes Blank
Tag Attributes Blank

Particle Settings

Option Setting
Particle Name Grid Statistic
CSS Classes center
Title Blank
Description Blank
Readmore Text Blank
Readmore Link Blank
Readmore Style Button 3
Footer Description Aliquam ante augue, iaculis eget fringilla vel, gravida non nibh. Nullam dignissim, felis eu imperdiet feugiat, libero ipsum gravida arcu, eu fermentum elit metus vel mauris. In sed nunc tincidunt, faucibus quam vel, finibus arcu. Proin nec euismod nisi, id tristique augue. Nam in erat est.
Grid Column 4 Columns
Item 1 Name Item 1
Item 1 Statistic Number 25
Item 1 Statistic Text Years Experience

Block Settings

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

FeatureBanner Section

This area of the page is a Custom HTML particle. You will find the settings used in our demo below.

Section Settings

Field Setting
Layout Boxed
CSS Classes Blank
Tag Attributes Blank

Particle Settings

Option Setting
Particle Name Custom HTML
Process Twig Blank
Process Shortcodes Blank

Custom HTML

<h3 class="g-title nomarginbottom nopaddingbottom">Our Previous Work</h3>

Block Settings

Option Setting
CSS ID Blank
CSS Classes nomarginbottom nopaddingbottom
Variations Blank
Tag Attributes Blank
Fixed Size Unchecked
Block Size 100%

Feature Section

This area of the page is an Image Grid particle. You will find the settings used in our demo below.

Section Settings

Field Setting
Layout Boxed
CSS Classes Blank
Tag Attributes Blank

Particle Settings

Option Setting
Particle Name Image Grid
CSS Classes Blank
Title Blank
Description Blank
Grid Column 4 Columns
Album Name clients
Item 1 Name Image 1
Item 1 Promo Image Custom
Item 1 Caption Image 1

Block Settings

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

FeatureBanner Section

This area of the page is a Custom HTML particle. You will find the settings used in our demo below.

Section Settings

Field Setting
Layout Boxed
CSS Classes Blank
Tag Attributes Blank

Particle Settings

Option Setting
Particle Name Custom HTML
Process Twig Blank
Process Shortcodes Blank

Custom HTML

<h3 class="g-title nomarginbottom nopaddingbottom">Why You Should Join Us</h3>

Block Settings

Option Setting
CSS ID Blank
CSS Classes nomarginbottom nopaddingbottom
Variations Blank
Tag Attributes Blank
Fixed Size Unchecked
Block Size 100%

Main Section

This area of the page is a Block Content particle. You will find the settings used in our demo below.

Section Settings

Field Setting
Layout Boxed
CSS Classes Blank
Tag Attributes Blank

Particle Settings

Option Setting
Particle Name Block Content
CSS Classes center g-blockcontent-spacing
Title Blank
Icon Blank
Image Blank
Headline Blank
Description Choose the theme that suits your needs. 100% satisfaction guaranteed.
Button Label Blank
Button Link Blank
Button Classes Blank
Target Self
Item 1 Name Introduction
Item 1 Title Introduction
Item 1 Icon Blank
Item 1 Image Custom
Item 1 RokBox Image Blank
Item 1 Caption Blank
Item 1 Subtitle Blank
Item 1 Description Blank
CSS Classes nopaddingall
Button Label Blank
Button Link Blank
Button Classes Blank
Target Self

Block Settings

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

Extension Section

This area of the page is a Block Content particle. You will find the settings used in our demo below.

Section Settings

Field Setting
Layout Boxed
CSS Classes Blank
Tag Attributes Blank

Particle Settings

Option Setting
Particle Name Block Content
CSS Classes title-center g-blockcontent-spacing
Title We are a very creative team
Icon Blank
Image Blank
Headline Blank
Description <div class="center">We love what we do and you will love it too, that's a promise.</div>
Button Label Blank
Button Link Blank
Button Classes Blank
Target Self
Item 1 Name Sophisticated
Item 1 Title Sophisticated
Item 1 Icon fa fa-align-right
Item 1 Image Blank
Item 1 RokBox Image Blank
Item 1 Caption Blank
Item 1 Subtitle Blank
Item 1 Description Dynamically procrastinate B2C users after installed base benefits.
CSS Classes box3
Button Label Blank
Button Link Blank
Button Classes Blank
Target Self

Block Settings

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

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