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.
- 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”
- 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