• Skip to main content
  • Skip to primary sidebar

Docs

Anchored Design

  • HOME
  • DEMO
  • CUSTOM WEBSITE DESIGN
  • LEAVE A REVIEW
  • REQUEST SUPPORT

Homepage Blocks Guide

This document last updated on: February 5, 2020

Created OnDecember 16, 2019
byadminAD
You are here:
  • Knowledge Base Home
  • Recipe Blogger Theme
  • Block Pages Guide
  • Homepage Blocks Guide
< Back

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 Atomic Blocks by going to the plugin page.

To edit the Homepage, go to Pages > Home.

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. Spacer with 30px Height

 

#2. Atomic Blocks Post and Page Grid – Note Settings

 

#3. Atomic Blocks Spacer with 20px Height same as #1

#4. Media and Text Block

This block is very easy to update. You can stretch the Image section to make it wider and add class “aboutsection” to make it look like theme home

For Button Use following settings – Style Outline and Add extra class “btn” so all aligned like in theme Home

#5. Spacer with 50px Height same as #1

#6. Atomic Blocks Post and Page Grid

Same as Section #2 with additional setting for section title “Featured Recipes” and Columns 3

#7 Atomic Blocks Advanced Columns

1. First create columns with 2 Columns; the settings are shown below

There are some Custom CSS to add here so give “subscriberow” class to columns under “Advanced”

 

2. Add image to left column

3. Add content and Subscribe Block on right column

Add content with h3, h4 and then Email Newsletter. Right now this option only supports MailChimp and its settings goes to Admin > Atomic Blocks > Settings

#8 Atomic Blocks Columns Section again with Right Side Front Page Sidebar

Note the settings below, columns with 75/25 width and added “home-content-sidebar” class to Advanced tab.

  1. Right hand side section contain AB post and page grid (reference #2) and has LIST view.

 

Adding the “LOAD MORE RECIPE”  button with “outline style”

 

  1. Left hand side column contains shortcode to include “Front Page Sidebar” from Appearance > Widgets > Front Page Sidebar section

If you used One Time Theme Setup then the sidebar was automatically filled with the demo layout. You can elect to add or remove widgets using the drag and drop method.

 

Shortcode to use any sidebar inside block/content

This shortcode can be used to bring any other sidebar to content.

[get_sidebar id='front-page-sidebar']


NOTE: Atomic Blocks have limitation its not showing categories on AB Post and Page Grid block by any means but we are showing it on all blocks by default and can be disabled by deselecting “Atomic Blocks – Post Grid Show Meta” at Appearance > Customize > Theme Settings > Site Layout

Primary Sidebar

Search Knowledge Base by Keyword

  • Recipe Blogger Theme Documentation
  • Recipe Blogger Theme
  • Coaching Plus Theme
Installation
  • Articles coming soon
Demo Content
  • Articles coming soon
Homepage Setup
  • Articles coming soon
Customizer Settings
  • Widget Area Custom Layouts
General Setup
  • Gutenberg Ready
  • Regenerate Thumbnails
Templates
  • Articles coming soon
Popup
  • Articles coming soon
Woocommerce Settings
  • Articles coming soon
Plugins
  • Plugins Tutorials
Installation
  • Installing Theme
  • One Click Theme Setup
  • Additional Resources
  • Demo Posts Install
Customizer Settings
  • Blog and Archive Settings
  • Footer Copyright
  • Logo / Site Title
  • Site Layout Extra
  • Theme Typography
  • Singular Content
  • Theme Colors
Block Pages Guide
  • About Page Guide
  • Contact Page Guide
  • Homepage Blocks Guide
  • Landing Page Guide
  • Other Block Pages
  • Recipe Index Blocks Guide
Widget Areas
  • Before Footer Widgets
  • Footer Widget Settings
  • Header Settings
  • Sidebar Settings
  • Top Bar/Before Header Widgets
Installation
  • Installing Theme
  • One Click Theme Setup
  • Additional Resources
  • Demo Posts Install
Customizer Settings
  • Site Layout Extra
  • Blog and Archive Settings
  • Footer Copyright
  • Logo / Site Title
  • Singular Content
  • Theme Colors
  • Theme Typography
Widget Areas
  • Header Settings
  • Before Footer Widgets
  • Footer Widget Settings
  • After Entry Widgets
Block Pages Guide
  • About Page Guide
  • Homepage Blocks Guide
  • Work With Me Page Guide
  • Contact Page Guide
  • Other Block Pages
  • Landing Page Guide
Additional Guide
  • Blog/Archive Page Guide

Copyright © 2021 · Anchored Design Themes · WordPress · Log in