Take 20% off Themes and Services SUBSCRIBE

Docs

Anchored Design

Blogger Theme

Blog and Archive Settings

This document last updated on:

Appearance > Customize > Theme Settings > Content Archives

Below is default theme settings we set to looks archive like demo.

  • Full Width: Enabled
  • Grid Column: 4
  • Select content or excerpt to display on archive – Only Apply if “Show Post Content” is Enabled
  • Limit Content: 0 – Only Apply if “Show Post Content” is Enabled
  • Display Featured Image:  Yes
  • Featured Image Size: genesis-featured-square(292×292)
    To know more about Regenerate Thumbnails check  Regenerate Thumbnails article
  • Show Post Info: NO
    Post Info shortcode to use author name, date and comments If Enabled
     by
  • Show Post Content: No
  • Show Post Meta: No
    Post Meta include Post Categories and Post Tags If Enabled
  • Image Position: Above Title
  • Meta Position: Above Title (default position for post meta is after title and content)
  • Post Info Text: 
     by
  • Post Meta Text:
  • Read More Text: “Continue Reading” – Only Apply if showing content limit or content excerpt

You will see a live view of your changes in the Customizer Preview Pane. Change these values to suit your needs, and be sure to hit “Publish” when you are ready.

If you do not like the changes you have made, each color has a “Default” button you can click to restore its default color value.

Singular Content

This document last updated on:

Appearance > Customize > Theme Settings > Singular Content

This is all default genesis settings now we just updated post before content and after content text to make is looks like demo

  1. Enable Full Width. Default: Enabled.
    This setting is to make all posts full width without considering default site layout or single posts layout(Genesis Layout).
  2. Enable Next Previous on Single Post. Default: Enabled
  4. Enable Featured Images to show on posts and pages and by default disabled on Posts.
  5. Entry Meta(above content)
    By Anchored Themes |
  6. Entry Meta(after content) Default: Blank but can be shown after content
  7. Post Info Position (Entry Meta before content). Default: No Change(After Title)
  8. Post Meta Position (Entry Meta after content). Default: Before Title

You will see a live view of your changes in the Customizer Preview Pane. Change these values to suit your needs, and be sure to hit “Publish” when you are ready.

If you do not like the changes you have made, each color has a “Default” button you can click to restore its default color value.

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 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. Logo – Add Heading or Image

  1. Heading H2 with “Cursive” style, font size  100px and align center

#3. Cover Section

  1. Cover Block
    1. Set Alignment Fullwidth
    2. Set Background Image, Size of Image 1920×400
  2. Heading H2
    1. Text Color “#333333”
    2. Background Color “#fcefeb”

#2 Sign Up Button

  1. Buttons Block
    1. Justify Items Center
    2. Border Radius 0px
    3. Link to “#signup” hash

#3 Testimonial Section

  1. Advanced Columns
    1. Columns: 2
    2. Advanced Css Class(es) “testimonials”
  2. Inside Each Column
    1. Testimonial Block
      • Add testimonial content
      • Update Testimonial Settings as below

#4 Quick Section

  1. Container
    1. Padding Top and Bottom 2%
    2. Inside Max Width 1140px
  2. Inside Container
    1. Add Media & Text Block
      • Left Side: Image, Size of Image 600×600
      • Right Side: Heading H2 and List Block

 

#5 Call to Action

  1. Container
  2. Call to Action Block

#6 Info Section

  1. Container
    1. Margin Bottom 4%
    2. Inside Max Width 1140px
  2. Heading H2, Spacer with “small” Advanced Class, Content and Button

#7 Work with Me section

  1. Container
    1. Align Full Width
    2. Padding Top and Bottom 3%
    3. Margin Top and Bottom 2%
    4. Container Width 850px
    5. Background Color #fcefeb
  2. Inside Container
    1. Advanced Columns with 3 Columns and top margin 40px
    2. Inside each columns
      1. Header H2 with Advanced CSS Class(es) “circlestyle”, Font size 80px and different background color and text color
      2. Header H5 with Advanced CSS Class(es) “innerheading”
      3. Paragraph text

#8 Testimonial Section

  1. Container
    1. Align Full Width
    2. Padding Top 2%
    1. Inside Max Width 1140px
  2. Advanced Columns
    1. Columns: 2
    2. Advanced Css Class(es) “testimonials”
  3. Inside Each Columns Testimonial Block with same settings like top Section #3
  4. Buttons with one “Sign up now” button and justify center

#9 About Section

  1. Container
    1. Align Full width
    2. Padding Bottom 1%
    3. Margin Top 5%
    4. Contaier width 1140px
    5. Background Color #fcefeb
  2. Advanced Columns with 2 Columns
  3.  Inside columns add Heading, Paragraph on left and Image Block on right side, Size of Image 600×600

#10 Call to Action Section

  1. Container
    1. Align Fullwidth
    2. Padding Top 2%
    3. Padding Bottom .5%
    4. Inside Max Width 1200px
  2. Spacer with Height 40px
  3. Heading H2 with “Cursive” style, Font Size 100px and align center
  4. Add Call to Action Block with Below Settings
    1. Title Font Size 27px
    2. Text Font Size 17px
    3. Background Color set to same as Container Background Color
    4. Button Options: Size “Small” Button Share: “Square” and Background Color
    5. Advanced Css Class(es) “btn” so Call to Action button look like default button of theme or alternate button style will apply

#11 Pricing Table

  1. Container
    1. Margin Top 8%
    2. Margin Bottom 4%
    3. Inside Max Width 800px
  2. Heading H2, Align Center
  3. Spacer with Height 20px
  4. Pricing Table
    1. Columns: 2
    2. Columns Gap: 2
    3. Each Columns Background Color set to  “#fdf9f8”
    4. Each Section in pricing table has its own settings as shown on below images please check all images for settings.

#12 Testimonial Section

Follow Section #3 Guide for this section

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

Everything we set with Container and Columns using Genesis Blocks

To edit the Contact, go to Pages > Contact and begin editing the 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.

Page Settings

  1. Select “Genesis” Icon and you will see other setting for genesis
  2. Hide Title: Enabled
  3. Layout: Full Width Content

#1. Top Section

  1. Container
    1. Align Full width
    2. Padding Top 4% and Padding Bototm 1%
    3. Margin Bottom 2%
    4. Container Width 800px
    5. Background Color #fcefeb
  2. Inside Container
    1. Heading H1 “Contact” and align center

3. WP Forms Block for contact form display

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

#1. Pages > Block Editor

It contains all necessary blocks to make this page

<!-- wp:paragraph {"align":"wide","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<p class="has-text-align-wide wp-embed-aspect-16-9 wp-has-aspect-ratio">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 {"align":"wide","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<h2 class="alignwide wp-embed-aspect-16-9 wp-has-aspect-ratio">A full-width image</h2>
<!-- /wp:heading -->

<!-- wp:image {"align":"full","id":243,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-large"><img src="http://localhost:10108/wp-content/uploads/2021/11/blogger-theme-landing-featured-1024x683.jpg" alt="" class="wp-image-243"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"wide","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<p class="has-text-align-wide wp-embed-aspect-16-9 wp-has-aspect-ratio">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 {"align":"wide","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<h2 class="alignwide wp-embed-aspect-16-9 wp-has-aspect-ratio">A wide image</h2>
<!-- /wp:heading -->

<!-- wp:image {"align":"wide","id":243,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignwide size-large"><img src="http://localhost:10108/wp-content/uploads/2021/11/blogger-theme-landing-featured-1024x683.jpg" alt="" class="wp-image-243"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"wide","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<p class="has-text-align-wide wp-embed-aspect-16-9 wp-has-aspect-ratio">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","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<div class="wp-block-columns alignwide wp-embed-aspect-16-9 wp-has-aspect-ratio"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":125,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://localhost:10108/wp-content/uploads/2021/10/blogger-theme-featured-1-1.jpg" alt="" class="wp-image-125"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":126,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://localhost:10108/wp-content/uploads/2021/10/blogger-theme-featured-2-1.jpg" alt="" class="wp-image-126"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:paragraph {"align":"wide","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<p class="has-text-align-wide wp-embed-aspect-16-9 wp-has-aspect-ratio">Galleries can use the full width, as above, or the wide block and regular content widths:</p>
<!-- /wp:paragraph -->

<!-- wp:group {"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<div class="wp-block-group wp-embed-aspect-16-9 wp-has-aspect-ratio"><!-- wp:group -->
<div class="wp-block-group"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":125,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://localhost:10108/wp-content/uploads/2021/10/blogger-theme-featured-1-1.jpg" alt="" class="wp-image-125"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":126,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://localhost:10108/wp-content/uploads/2021/10/blogger-theme-featured-2-1.jpg" alt="" class="wp-image-126"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":67,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://localhost:10108/wp-content/uploads/2021/10/blogger-theme-featured-9.jpg" alt="" class="wp-image-67"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<div class="wp-block-group wp-embed-aspect-16-9 wp-has-aspect-ratio"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":39,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://localhost:10108/wp-content/uploads/2021/10/blogger-theme-featured-5.jpg" alt="" class="wp-image-39"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":34,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://localhost:10108/wp-content/uploads/2021/10/blogger-theme-featured-4.jpg" alt="" class="wp-image-34"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

<!-- wp:heading {"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<h2 class="wp-embed-aspect-16-9 wp-has-aspect-ratio">Video support</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"wide","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<p class="has-text-align-wide wp-embed-aspect-16-9 wp-has-aspect-ratio">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 {"align":"wide","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<p class="has-text-align-wide wp-embed-aspect-16-9 wp-has-aspect-ratio">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 {"align":"wide","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<p class="has-text-align-wide wp-embed-aspect-16-9 wp-has-aspect-ratio"></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<h2 class="wp-embed-aspect-16-9 wp-has-aspect-ratio">Quotes</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"wide","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<p class="has-text-align-wide wp-embed-aspect-16-9 wp-has-aspect-ratio">You can pull parts of your content into quotes, such as this one:</p>
<!-- /wp:paragraph -->

<!-- wp:quote {"align":"wide","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<blockquote class="wp-block-quote has-text-align-wide wp-embed-aspect-16-9 wp-has-aspect-ratio"><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 {"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<h2 class="wp-embed-aspect-16-9 wp-has-aspect-ratio">Buttons</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"wide","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<p class="has-text-align-wide wp-embed-aspect-16-9 wp-has-aspect-ratio">Insert buttons as calls to action:</p>
<!-- /wp:paragraph -->

<!-- wp:group {"align":"wide","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<div class="wp-block-group alignwide wp-embed-aspect-16-9 wp-has-aspect-ratio"><!-- 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 BLOGGER THEME</a></div>
<!-- /wp:button --></div>
<!-- /wp:group -->

<!-- wp:heading {"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<h2 class="wp-embed-aspect-16-9 wp-has-aspect-ratio">Content Boxes</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"wide","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<p class="has-text-align-wide wp-embed-aspect-16-9 wp-has-aspect-ratio">Style paragraphs with custom colors to call attention to text anywhere in your content:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"wide","backgroundColor":"theme-secondary","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<p class="has-text-align-wide wp-embed-aspect-16-9 wp-has-aspect-ratio 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 {"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<h2 class="wp-embed-aspect-16-9 wp-has-aspect-ratio">Headings</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"wide","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<p class="has-text-align-wide wp-embed-aspect-16-9 wp-has-aspect-ratio">Style headings from level one to six:</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":1,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<h1 class="wp-embed-aspect-16-9 wp-has-aspect-ratio">Heading level 1</h1>
<!-- /wp:heading -->

<!-- wp:heading {"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<h2 class="wp-embed-aspect-16-9 wp-has-aspect-ratio">Heading level 2</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<h3 class="wp-embed-aspect-16-9 wp-has-aspect-ratio">Heading level 3</h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":4,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<h4 class="wp-embed-aspect-16-9 wp-has-aspect-ratio">Heading level 4</h4>
<!-- /wp:heading -->

<!-- wp:heading {"level":5,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<h5 class="wp-embed-aspect-16-9 wp-has-aspect-ratio">Heading level 5</h5>
<!-- /wp:heading -->

<!-- wp:heading {"level":6,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<h6 class="wp-embed-aspect-16-9 wp-has-aspect-ratio">Heading level 6</h6>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"wide","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<p class="has-text-align-wide wp-embed-aspect-16-9 wp-has-aspect-ratio"></p>
<!-- /wp:paragraph -->

Some Widget Areas Settings

This document last updated on:

The Blogger Theme includes Before Header Widgets, Header Right, Before Archive Widgets and Archive Internal Widgets areas as default.

#1 Before Header Widgets

  1. Go to Appearance > Widgets
  2. Add Paragraph with text of your choice and link
  3. Background Color can be managed at Appeance > Customize > Colors

#2. Header Right – at right side of Logo and above primary navigation

  1. Go to Appearance > Widgets
  2. Add Search to Header Right

#3. Before Archive Widgets – at top of Blog(default blog archive) Page

  1. Add Paragraph text of your choice
  2. Background Color can be managed at Appeance > Customize > Colors

#4. Archive Internal Widgets – after 1 row of archive grid

  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 > SettingsEnter your mailchimp api key
      2. Configure Block Settings as required

Demo Widgets

If you use the optional One-Click Theme Setup feature, demo widget content will automatically be added for you. The demo widget areas each contain a text widget.