Docs

Anchored Design

Block Pages Guide

Landing Page Guide

This document last updated on:

If you use the One-Click Theme Setup, then the demo Recipe Index 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 Landing Page, go to Pages > Landing Page and begin editing the blocks.

 

Custom CSS Classes

Some blocks have limitations or settings which are not yet available to configure.

#1. Page Settings and Genesis Settings for Landing Page

#2. Start with Atomic Block container with 600px width

 

 

#3. Set Paragraph or just add content/text

#4 Image Block with Large Image Size

 

 

 

#4. BUY NOW BUTTON – Button Block

Add Button Text “Buy Now” and List, Having Style Outline and Class “widebtn” to have long/wide button

#6. Heading with Heading Tag H3

 

 

#8. Spacer with heigth 20px above and below heading and Button. See on Block Navigator

#8. Repeated Section with Heading, Horizontal Line and Text

1.Heading Tag: h5, Align Left

2.Separator: 3. Paragraph

Repeat Above 2 times more

#9 Spacer and Button Ref: #4

 

 

About Page Guide

This document last updated on:

If you use the One-Click Theme Setup, then the demo About Page 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 About Page, go to Pages > About and begin editing the blocks.

1. About Section

1. Add Media & Text Block

2. Add Image and Text Needed and Stretch Image section little more or make it wider

3. Add Class “aboutsection aboutpage” to make it look like theme

4. Add Spacer with 50px height after this section

 

2. My Kitchen Section

1. Add Atomic Blocks container with 1000px width

2. Add Heading H3

3. Add Paragraph

4. Add Atomic Blocks container with 1200px width

5. Inside container Gallery with 2 Columns and 4 images

3. Work With Me Section

1. Add Heading with H3

2. Atomic Blocks Advanced Columns with 2 equal columns

3. Add Image, Button with “altbtn” class and Paragraph
Repeat for second Column too

4. Atomic BlocksAdvanced Columns with 2 equal columns

5. Add Image, Button with “altbtn” class and Paragraph

Repeat for second Column too

4. Let’s Get Started Section

1. Atomic Blocks Container with width 800px

2. Add Paragraph

3. Add WPForm and select your WPForm

 

Recipe Index Blocks Guide

This document last updated on:

If you use the One-Click Theme Setup, then the demo Recipe Index 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 Recipe Index, go to Pages > Recipe Index and begin editing the blocks.

 

Custom CSS Classes

Some blocks have limitations or settings which are not yet available to configure.

#1. Spacer with 20px height

#2. Atomic Blocks container with 2 equally split Columns and with WordPress widgets

 

1. Left Hand side first comes Heading and then Categories Widget

2. Right Hand side search widget with title “Search By Ingredient”

 

#2. Latest Recipes/Posts with setting given below

#3. Spacer with 50px height. Ref: #1

#4. Featured Recipes with One Third Grid Layout with Settings Given Below

 

#5. Spacer with 50px height. Ref: #1

#6. Same as Homepage Section Columns with Front Page Sidebar widget area.

Ref: HomePage #7

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

Homepage Blocks Guide

This document last updated on:

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

Contact Page Guide

This document last updated on:

If you use the One-Click Theme Setup, then the demo Contact Page 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 Recipe Index, go to Pages > Contact and begin editing the blocks.

 

#1. Paragraph

#2. Add WPForm and select your form here

If you have not created any Form yet, go to Admin > WPForms > Add New

Other Block Pages

This document last updated on:

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

 

Instagram Page

#1. First Note Page Settings and Genesis Settings

1. Page Attributes: Landing
2. Hide Title: Yes

3. Layout: Full Width Layout

#2. Copy and Paste below code to your editor and start editing your page

It contains all necessary blocks to make this page

<!-- wp:atomic-blocks/ab-container {"containerPaddingTop":1,"containerPaddingBottom":1,"containerMarginBottom":2,"containerWidth":"full","containerBackgroundColor":"#f3fcf9"} -->

<div style="background-color:#f3fcf9;padding-bottom:1%;padding-top:1%;margin-bottom:2%" class="wp-block-atomic-blocks-ab-container ab-block-container alignfull">
<div class="ab-container-inside">
<div class="ab-container-content" style="max-width:1600px">
<!-- wp:heading {"align":"center","className":"ig_logo"} -->

<h2 class="has-text-align-center ig_logo">Recipe Blogger</h2>

<!-- /wp:heading --></div>
</div>
</div>

<!-- /wp:atomic-blocks/ab-container -->

<!-- wp:atomic-blocks/ab-container {"containerMaxWidth":600,"className":"ig_page"} -->

<div class="wp-block-atomic-blocks-ab-container ig_page ab-block-container">
<div class="ab-container-inside">
<div class="ab-container-content" style="max-width:600px">
<!-- wp:atomic-blocks/ab-container -->

<div class="wp-block-atomic-blocks-ab-container ab-block-container">
<div class="ab-container-inside">
<div class="ab-container-content" style="max-width:1600px"></div>
</div>
</div>

<!-- /wp:atomic-blocks/ab-container -->

<!-- wp:button {"borderRadius":0,"align":"center","className":"instabtn"} -->

<div class="wp-block-button aligncenter instabtn"><a class="wp-block-button__link no-border-radius" href="/recipe-index">Recipe Index</a></div>

<!-- /wp:button -->

<!-- wp:button {"borderRadius":0,"align":"center","className":"instabtn"} -->

<div class="wp-block-button aligncenter instabtn"><a class="wp-block-button__link no-border-radius" href="/blog">Blog</a></div>

<!-- /wp:button -->

<!-- wp:button {"borderRadius":0,"align":"center","className":"instabtn"} -->

<div class="wp-block-button aligncenter instabtn"><a class="wp-block-button__link no-border-radius" href="/landing-page">Landing Page</a></div>

<!-- /wp:button -->

<!-- wp:button {"borderRadius":0,"align":"center","className":"instabtn"} -->

<div class="wp-block-button aligncenter instabtn"><a class="wp-block-button__link no-border-radius" href="/full-width-content">Full Width</a></div>

<!-- /wp:button -->

<!-- wp:button {"borderRadius":0,"align":"center","className":"instabtn"} -->

<div class="wp-block-button aligncenter instabtn"><a class="wp-block-button__link no-border-radius" href="/full-width-content">Gutenberg Optimized</a></div>

<!-- /wp:button -->

<!-- wp:atomic-blocks/ab-post-grid {"className":"instalatestgrid","displayPostDate":false,"displayPostExcerpt":false,"displayPostAuthor":false,"displayPostLink":false,"displaySectionTitle":true,"postTitleTag":"h4","columns":3,"sectionTitle":"Latest Recipes","sectionTitleTag":"h3"} /--></div>
</div>
</div>

<!-- /wp:atomic-blocks/ab-container -->

 

 

Glutenberg Optimized Page

This is sample page built to show how editor can be used and how theme is optimized for gutenberg. If you want to have this page then please copy and paste below code to your page block editor and enjoy editing.

<!-- wp:paragraph -->
<p>This theme is optimized with support for special features of the 
Gutenberg editor. This includes wide and full-width content blocks, 
block styling, custom colors, custom font sizes, and back end editor 
styling that matches the front end of your site.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>A full-width image</h2>
<!-- /wp:heading -->

<!-- wp:image {"align":"full","id":471,"sizeSlug":"large"} -->
<figure class="wp-block-image alignfull size-large"><img src="http://recipeblogger.autoimmunesisters.org/wp-content/uploads/2019/11/full-width-1920-1024x585.png" alt="" class="wp-image-471"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Images,
 videos, galleries, and other content can also be presented in a wide 
block that extends beyond the central column at bigger screen widths:</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>A wide image</h2>
<!-- /wp:heading -->

<!-- wp:image {"align":"wide","id":472,"sizeSlug":"large"} -->
<figure class="wp-block-image alignwide size-large"><img src="http://recipeblogger.autoimmunesisters.org/wp-content/uploads/2019/11/wide-1400-1024x585.png" alt="" class="wp-image-472"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Your posts and pages can contain galleries, which are collections of images presented in one or more columns:</p>
<!-- /wp:paragraph -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":475,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://recipeblogger.autoimmunesisters.org/wp-content/uploads/2019/11/gallery-1-1024x1024.png" alt="" class="wp-image-475"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":476,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://recipeblogger.autoimmunesisters.org/wp-content/uploads/2019/11/gallery-2-1024x1024.png" alt="" class="wp-image-476"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:paragraph -->
<p>Galleries can use the full width, as above, or the wide block and regular content widths:</p>
<!-- /wp:paragraph -->

<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":477,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://recipeblogger.autoimmunesisters.org/wp-content/uploads/2019/11/gallery-1-1-1024x1024.png" alt="" class="wp-image-477"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":478,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://recipeblogger.autoimmunesisters.org/wp-content/uploads/2019/11/gallery-2-1-1024x1024.png" alt="" class="wp-image-478"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":479,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://recipeblogger.autoimmunesisters.org/wp-content/uploads/2019/11/gallery-3-1024x1024.png" alt="" class="wp-image-479"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:group --></div></div>
<!-- /wp:group -->

<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":480,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://recipeblogger.autoimmunesisters.org/wp-content/uploads/2019/11/gallery-4-1024x1024.png" alt="" class="wp-image-480"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":481,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://recipeblogger.autoimmunesisters.org/wp-content/uploads/2019/11/gallery-5-1024x1024.png" alt="" class="wp-image-481"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:group -->

<!-- wp:heading -->
<h2>Video support</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This theme also includes styling for wide and full-width videos, such as this one embedded from YouTube:</p>
<!-- /wp:paragraph -->

<!-- wp:core-embed/youtube {"url":"https://www.youtube.com/watch?v=SvzPxtaQKgw","type":"video","providerNameSlug":"youtube","align":"wide","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed-youtube alignwide wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">

</div><figcaption>Your videos can also have captions. This video is by <a href="https://www.youtube.com/watch?v=SvzPxtaQKgw">BetsyLife.</a></figcaption></figure>
<!-- /wp:core-embed/youtube -->

<!-- wp:paragraph -->
<p>Or this video embedded from YouTube:</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<iframe src="https://www.youtube.com/embed/SvzPxtaQKgw" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="1280" height="720" frameborder="0"></iframe>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Quotes</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can pull parts of your content into quotes, such as this one:</p>
<!-- /wp:paragraph -->

<!-- wp:quote {"align":"center"} -->
<blockquote class="wp-block-quote has-text-align-center"><p>Good
 design is as little as possible. Less, but better, because it 
concentrates on the essential aspects. Back to purity, back to 
simplicity.</p><cite>Dieter Rams</cite></blockquote>
<!-- /wp:quote -->

<!-- wp:heading -->
<h2>Buttons</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Insert buttons as calls to action:</p>
<!-- /wp:paragraph -->

<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:button {"align":"center"} -->
<div class="wp-block-button aligncenter"><a class="wp-block-button__link" href="https://my.studiopress.com/themes/" rel="https://www.studiopress.com">BUY RECIPE BLOGGER THEME</a></div>
<!-- /wp:button --></div></div>
<!-- /wp:group -->

<!-- wp:heading -->
<h2>Content Boxes</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Style paragraphs with custom colors to call attention to text anywhere in your content:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"backgroundColor":"theme-secondary"} -->
<p class="has-background has-theme-secondary-background-color">This  is a sample paragraph text with a colored background. You can use this  to feature content, highlight something important, or provide a  call-to-action. <a href="http://recipeblogger.autoimmunesisters.org/">Sample link.</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Headings</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Style headings from level one to six:</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":1} -->
<h1>Heading level 1</h1>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2>Heading level 2</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>Heading level 3</h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h4>Heading level 4</h4>
<!-- /wp:heading -->

<!-- wp:heading {"level":5} -->
<h5>Heading level 5</h5>
<!-- /wp:heading -->

<!-- wp:heading {"level":6} -->
<h6>Heading level 6</h6>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->