Homepage Guide

If you use the One-Click Theme Setup, then the demo homepage will automatically be created for you using Gutenberg editor blocks. You can learn more about Genesis Blocks by going to the plugin page.

To edit the Homepage, go to Pages > Home.

Everything we set with Container and Columns using Genesis Blocks

Custom CSS Classes

Some blocks have limitations or settings which are not yet available to configure so added Custom CSS Classes for some Blocks.

#1. About Section

1. Add Container Block
   1. Padding top: 2%
   2. Max Width: 1200px
   3. Background Color: #fce8e1
2. Columns: 2
   1. First Column: Add image of your choice ( Recommended size: Width 600px X Height 840px)
   

2. Second Column with Column align Middle:
1. Heading H2 with Color: #ffffff and Background Color: #e07c7c
2. Paragraph Text Bold and Color: #30575e
3. Default paragraph
4. Button “Book a Call” with Background Color is Button Color: #30575e

#2. Subscribe Section

1. Container
   1. Padding Top and Bottom 2%
   2. Background Color #f2e197
   3. Additional CSS class(es) subscribesection
2. Columns
   1. Columns: 2
3. Inside Columns
   

1. Header h2 and Paragraph
2. Newsletter Block
   1. Connect Mailchimp Admin > Genesis Blocks > Settings
   2. Select Mailing List

3. On edit home: Remove Label
4. Button Label change to SUBSCRIBE

#3. Services Section

1. Spacer with 68 Height
   

2. Heading H2

3. Spacer with 10px Height
4. Columns
1. Columns: 3
2. Background Color: #fdf9f8

5. Inside each Column
1. Image center aligned
2. Heading H4 with Color: #e07c7c
3. Paragraphe center aligned

6. Book a Call Button
7. Spacer with Height 70px

#4. Portfolio Section

1. Container
   1. Padding Top: 5%
   2. Padding Bottom: 6%
   3. Max Width: 1200px
   4. Background Color: #fce8e1
2. Heading H2
   1. Color #182e33
   2. HTML anchor “portfolio”
   

3. Spacer with Height 10px
4. Advanced Columns
1. Columns 4
2. Column Gap 1
3. Enable Slider
4. Columns 3 per slide

5. Inside Columns
1. Column Settings
1. Background Color: #fffffff
2. Padding all 20px
2. Image with Size Width 350px X Height 250px
3. Heading h4
4. List of content

#5. Testimonials Section

1. Container
   1. Padding Top 5%
   2. Paddng Bottom 4%
   3. Max Width 1100px
   4. Background Color #fdf9f8
2. Heading H2 with Color #182e33 and Align Left
3. Columns
   1. Columns 2
   2. Background #ffffff
   3. Additional CSS Class(es) “quote”
4. Inside Columns
   1. Left: Quote Block
   

2. Right: Circle Image with Width 200px X Height 200px

#6 Contact Section

1. Spacer with Height 70px
   

2. Container with Max Width: 800px
3. Heading H2
4. Separator Block
1. Style: Verticle
2. Color: #dece69

5. Content
6. Click Here to Schedule Button