Block Pages Guide

If you use the One-Click Theme Setup, then the demo Landing Page 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 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 Genesis 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

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 Genesis Blocks container with 1000px width

2. Add Heading H3

3. Add Paragraph

4. Add Genesis 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. Genesis Blocks Advanced Columns with 2 equal columns

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

4. Genesis Blocks Advanced 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. Genesis Blocks Container with width 800px

2. Add Paragraph

3. Add WPForm and select your WPForm

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 Genesis 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

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 Genesis 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:genesis-blocks/gb-container {"containerPaddingTop":2,"containerPaddingBottom":1,"containerMarginBottom":2,"containerWidth":"full","containerMaxWidth":1600,"containerBackgroundColor":"#F6F4F4"} -->
<div style="background-color:#F6F4F4;padding-bottom:1%;padding-top:2%;margin-bottom:2%" class="wp-block-genesis-blocks-gb-container gb-block-container alignfull"><div class="gb-container-inside"><div class="gb-container-content" style="max-width:1600px"><!-- wp:heading {"textAlign":"center","style":{"typography":{"fontSize":60}},"textColor":"accent","className":"is-style-cursive"} -->
<h2 class="has-text-align-center is-style-cursive has-accent-color has-text-color" style="font-size:60px">Cuisine Recipe Theme</h2>
<!-- /wp:heading --></div></div></div>
<!-- /wp:genesis-blocks/gb-container -->

<!-- wp:genesis-blocks/gb-container {"containerMaxWidth":600,"className":"ig_page"} -->
<div class="wp-block-genesis-blocks-gb-container ig_page gb-block-container"><div class="gb-container-inside"><div class="gb-container-content" style="max-width:600px"><!-- wp:genesis-blocks/gb-container {"containerMaxWidth":1600} -->
<div class="wp-block-genesis-blocks-gb-container gb-block-container"><div class="gb-container-inside"><div class="gb-container-content" style="max-width:1600px"></div></div></div>
<!-- /wp:genesis-blocks/gb-container -->

<!-- wp:buttons {"contentJustification":"center"} -->
<div class="wp-block-buttons is-content-justification-center"><!-- wp:button {"borderRadius":0,"width":75} -->
<div class="wp-block-button has-custom-width wp-block-button__width-75"><a class="wp-block-button__link no-border-radius" href="/recipe-index">Recipe Index</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons {"contentJustification":"center"} -->
<div class="wp-block-buttons is-content-justification-center"><!-- wp:button {"borderRadius":0,"width":75} -->
<div class="wp-block-button has-custom-width wp-block-button__width-75"><a class="wp-block-button__link no-border-radius" href="/blog">Blog</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons {"contentJustification":"center"} -->
<div class="wp-block-buttons is-content-justification-center"><!-- wp:button {"borderRadius":0,"width":75} -->
<div class="wp-block-button has-custom-width wp-block-button__width-75"><a class="wp-block-button__link no-border-radius">Landing Page</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons {"contentJustification":"center"} -->
<div class="wp-block-buttons is-content-justification-center"><!-- wp:button {"borderRadius":0,"width":75} -->
<div class="wp-block-button has-custom-width wp-block-button__width-75"><a class="wp-block-button__link no-border-radius" href="/full-width-content">Full Width</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons {"contentJustification":"center"} -->
<div class="wp-block-buttons is-content-justification-center"><!-- wp:button {"borderRadius":0,"width":75} -->
<div class="wp-block-button has-custom-width wp-block-button__width-75"><a class="wp-block-button__link no-border-radius" href="/gutenberg-optimized">Gutenberg Optimized</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:spacer {"height":30} -->
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:genesis-blocks/gb-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:genesis-blocks/gb-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","sizeSlug":"large"} -->
<figure class="wp-block-image alignfull size-large"><img src="http://localhost:10019/wp-content/themes/cuisine-recipe-theme/config/import/images/fullwidthimage.jpg" alt=""/></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","sizeSlug":"large"} -->
<figure class="wp-block-image alignwide size-large"><img src="http://localhost:10019/wp-content/themes/recipe-blogger/config/import/images/wideimage.jpg" alt=""/></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 {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:10019/wp-content/themes/cuisine-recipe-theme/config/import/images/galleryimage1.jpg" alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:10019/wp-content/themes/cuisine-recipe-theme/config/import/images/galleryimage2.jpg" alt=""/></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 {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:10019/wp-content/themes/cuisine-recipe-theme/config/import/images/galleryimage1.jpg" alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:10019/wp-content/themes/cuisine-recipe-theme/config/import/images/galleryimage2.jpg" alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:10019/wp-content/themes/cuisine-recipe-theme/config/import/images/galleryimage3.jpg" alt=""/></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 {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:10019/wp-content/themes/cuisine-recipe-theme/config/import/images/galleryimage4.jpg" alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:10019/wp-content/themes/cuisine-recipe-theme/config/import/images/galleryimage5.jpg" alt=""/></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:embed {"url":"https://www.youtube.com/watch?v=SvzPxtaQKgw","type":"video","providerNameSlug":"youtube","responsive":true,"align":"wide","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed alignwide is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=SvzPxtaQKgw
</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:embed -->

<!-- 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.&nbsp;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-theme-secondary-background-color has-background">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.&nbsp;<a href="https://recipeblogger.anchoredthemes.com/">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 -->

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. Post Grid Section:

1. Add Post and Page Grid Block
2. Number of Items: 4
3. Columns: 4
4. Display Featured Image: Enabled
5. Image Size: Genesis Featured Portrait – 268px width X 396px height
6. Disable All Other Settings
7. Additional CSS class(es) slidersection
   With “slidersection” class it will show slider on mobile + only show 4 columns on desktop

#2. Subscribe Section

1. Container
   1. Padding 2%
   2. Background Color #f6f4f4
   3. Additional CSS class(es) subscribesection
2. Columns
   1. Columns: 3
   2. Advanced Css Class(es) “nomargin”
3. Inside Columns
   

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

Remove Label
Button Label change to SUBMIT

#3. Categories, Search and Popular Recipes Section

1. Container with no settings update
   1. H4 Heading with “Section Heading” style.
   2. Shortcode to include categories with icons only.
      [categories_listing icons="true" slugs="gluten-free,dairy-free,whole30,vegan,vegetarian"]
   3. Search Block
   4. Spacer with 25px height
   5. Heading H4 with “Section Heading” style.
   6. Post and Page Grid block having same settings above with select category to show related posts or set offset
      Thumbnail image: Genesis featured portrait 268px width X 396px height
   7. Para with “Link Section” style and Link inside
2. Spacer with 50px height
   

#4. Dinner Section

1. H4 Heading with “Section Heading” style.
2. Para with Additional CSS class(es): margin10
3. Post and Page grid having same settings above and select category to display related posts.
   Thumbnail image: Genesis featured portrait 268px width X 396px height
4. Para with “Link Section” style and Link inside
   

#5. About Section

1. Container
   1. Padding 2%
   2. Background Color #f6f4f4
   3. Advanced Css Class(es) “aboutsection”
2. Columns 2
   1. Left: Image with Image size 600px width X 600px height

2. Right:
1. Heading h2 with Larger fonts size and color #71aa97
2. Columns 2
3. Column Left: Heading H6
4. Column Right: Social Icons
5. Two Buttons with “Alternate” style
6. Two Buttons with “Alternate” style

---

#6. Featured On Gallery

1. Spacer with 30px height
2. Columns 2
3. Column Left:
   Width 20% and Heading H6 with color b4babd

4. Column Right:
Gallery Block with your logos and settings shown below, select proper image sizes for your logo as required.

#6 Dessert Section

1. Spacer 25px height
2. Heading h4 with “Section Heading” Style
3. Para with Additional CSS class(es) “margin10”
4. Post and Page grid with same setting above and without “slidersection” additiona class
   Select your category to show related posts…
   Thumbnail image: Genesis featured portrait 268px width X 396px height
5. Paragraph with “Link Section” style and Link inside
6. Spacer 30px height
   

#6 Tabs Section

1. Tabs Block – Custom Block added by Anchored Design to Cuisine Recipe Theme
2. Add as many tabs as need but add one Ad Tabs block only per page
3. Tabs Settings: Please check above image for settings
4. Tabs
   1. Title: Title of your tab
   2. Content: Content we added shortcode to show posts from specific category with display posts shortcode (Uses: “Display Posts” Plugin)
   [display-posts posts_per_page='4' wrapper='div' image_size='genesis-featured-portrait' 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 portrait 268px width X 396px 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
   2. Always choose custom color for tabs … right now choosing theme colors not work..it auto apply theme colors to tabs title
   Custom Color Demo
   

1.