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. Latest Posts Section:

1. Add columns
   1. Select 1 Column with 100% width – Align Center and Inner Width 1200px
      
   2. Columns: Align Full Width
   3. Columns: Background Color: #fcefeb
2. Inside Column
   1. Add Spacer with Height 30px
   2. Add Heading H2 “Latest Blog Posts”
   3. Add Paragraph with content of your choice with “margin0” Additional Css Class(es)
   4. Add Post and Page Grid Block with Settings as below
      1. Style: Default
      2. Number of Items: 8
      3. Columns: 4
      4. Display Featured Image: Enabled
      5. Image Size: Featured Image Square (292×292)
      6. Display Title: Enabled
      7. Slider: Enabled with Columns 4
         (NOTE: when slider enabled columns specified here only taken into account)

#2. Top Cateogories Section

1. Add columns
   1. Select 1 Column with 100% width – Align Center and Inner Width 900px
   2. Columns: Align Full Width
   3. Columns: Background Color #d46e6c
2. Inside Column
   1. Spacer with Height 20px
   2. Heading h6 “CHECK OUT OUR TOP CATEGORIES:”
   3. Add Columns with 5 Columns
      
   4. Each Column Contains Circle Image(Image Size: 140×140) with Caption
   5. Space with Height 10px

#3. Blog Posts Section

1. Container with Margin Top: 3% and Max Width: 1200px
   1. H2 Heading “Our Most Read Blog Posts” with “Heading with Arrow” style.
   2. Add Columns with 2 Half Columns
   3. Left Column
      1. Post and Page Grid with “Style 2 with Titlte on Top” Style
         
   4. Right Column
      1. Post and Page Grid with “Default” Style and settings below
         
      2. Paragraph with “Link Section” style and add link
         
2. Add Search Block
   

#4. About Section

1. Container without any setting changes
2. Inside Container
   1. Advanced Columns – 2 Columns with 75/25 Size
      
   2. Left Column
      1. Add Columns with 2 Columns 50/50 Size
      2. Left Side
         • add Client Image of size 600×600
      3. Right Side
         • Heading with “Cursive” Style and Font Size: 120px
           
         • 1 or 2 Paragraph that explain about client
         • Social Icons Block with Below settings
           
3. Right Column
   1. Heading H6 “NEW? GET STARTED HERE.”
   2. Buttons with Vertical Variant and Settings as Below
      
      
4. Spacer with Height 20px

#5. Featured In Section

1. Container
   1. Width 900px
   2. Advanced Css Class(es) “logos”
2. Columns 2
   1. Left:
      
      1. Heading H6 “Featured On”
      2. Align center
      3. Color #b4babd

2. Right:

1. Image Gallery with Logos you choose
2. Style “Light” style
3. Columns 6 or specify custom
4. Image Size Thumbnail
5. Advanced Css Class(es) “logosgallery”

---

#6 Categories Display with Tabs

1. Container
   1. Margin Top 4% and Margin Bottom 1%
2. Inside Container
   1. Heading H3 “An Excellet Tri-Category Display Section”
      
   2. Paragraph with Text of your choice
   3. Ad Tabs Block – Custom Block added by Anchored Design to Blogger Theme
      
      • Add Tab and Remove Tabs as needed
      • Tabs Settings: Please check above image for settings
      • Tabs
        1. Title: Title of your tab
        2. Content: Content we added shortcode to show posts from specific category with display posts shortcode [display-posts posts_per_page="4" wrapper="div" image_size="genesis-featured-image" class="one-fourth"]
           • About Display Posts Shortcode read here and to have four column layout we added class “one-fourth”
           • Column Classes to use
             2 Columns: “one-half”
             3 Columns: “one-third”
             4 Columns: “one-fourth”
             6 Columns: “one-sixth”
           • Thumbnail image(image_size): Genesis featured Image 292px width X 292px height
        3. Link to category
           NOTES:
           1. Tab content not support other block styling so we can always create link outside of content and copy paste inside content
   4. Space wiht Height: 50px

Below is Tabs Demo with Different Color

#7 Categories Section with Two Columns

1. Container
2. Advanced Columns with 2 50/50 Columns and Column Gap 1
3. Each Column Settings
   
   1. Padding Top 15, Padding Right 15, Padding Bottom 25 and Padding Left 15
   2. Background Color #fcefeb
4. Inside Each Column
   1. Heading H3, Align Center
   2. Paragraph Text
   3. Post and Page Grid Block with below Settigns
      
   4. Paragraph with “Link Section” style with Link inside and align center
      
      

#8 Latest Posts Section

This section will be same as Section #1 just without background color

#9 Optin Section

1. Container
   1. Padding Top and Bottom 2%
   2. Margin Top 5%
   3. Container Width 680px
2. Inside Container
   1. Heading H3 with align center
   2. Paragraph Text
   3. Email Newsletter Block from Genesis Block which only connect to mailchimp right now
      1. Configure settings <YOURSITEURL>/wp-admin/admin.php?page=genesis-blocks-settings at Admin > Genesis Blocks > Settings
      2. Enter your mailchimp api key
         
      3. Configure Block Settings as required