• Skip to main content
  • Skip to primary sidebar

Take 20% off Themes and Services SUBSCRIBE

Docs

Anchored Design

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

Block Pages Guide

Landing Page Guide

This document last updated on: September 9, 2021

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

  1. Align Center
  2. Set Max width to your choice

#3. Cover Section

  1. Cover
    1. Set Alignment Fullwidth
    2. Set Background Image, Size of Image 1920×400
  2. Heading H2
    1. Text Color “#182e33”
    2. Background Color “#f2e2dd”

#4 Sign Up Button

  1. Button
    1. Background Color “#182e33”
    2. Border Radius 0px

#4 Testimonial Section

  1. Container
    1. Padding Top and Bottom 2%
    2. Inside Max Width 1140px
  2. Advanced Columns
    1. Columns: 2
    2. Advanced Css Class(es) “testimonials”
  3. Inside Columns Media with Size of Image 200×200 and Text Block used

#5 Quick Section

  1. Container
    1. Padding Top and Bottom 2%
    2. Inside Max Width 1140px
  2. Add Media & Text Block Inside
  3. Image left side, Size of Image 600×600
  4. Heading H2 and List Block with “Large” style on right side

#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. Container2. Advanced Columns with 3 Columns and top margin 40px
    3. Inside columns there is Image, Size of Image 260×260 + Heading H5 and Content

#8 Testimonial Section

  1. Container
    1. Fullwidth
    2. Padding Top 2%
    3. Margin Top 8%
    4. Inside Max Width 1140px
    5. Background Color “#fef9f8”
  2. Advanced Columns
    1. Columns: 2
    2. Advanced Css Class(es) “testimonials”
  3. Inside Columns Media & Text Block
    1. Image on left side, Size of Image 200×200
    2. Content and Heading H5 on right side

#9 About Section

  1. Container: Fullwidth with inner width 1140px and Advanced Class “herobottomsection” to make background 1/4 white and 3/4 “#fdf9f8” color
  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. Fullwidth
    2. Padding Top 2%
    3. Margin Bottom 8%
    4. Inside Max Width 1200px
  2. 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

#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 have its own settings as shown on below images please check all images for settings.

Work With Me Page Guide

This document last updated on: September 9, 2021

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. Hero Section

  1. Container Settings
    1. Fullwidth
    2. Padding Top 2%
    3. Margin Bottom 7%
    4. Inside Max Width 1140px
    5. Set Background Color
    6. Advanced Css Class(es) “herosection”
  2. Advanced Columns
    1. Padding Unit: Pixel
    2. Padding Top, Bottom and Left 30px
    3. Select Background Image – Image Size to use 1920×600
  3. Heading H2, Heading H5 and Paragraph Block on left side

#2. Info Section

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

#3. Education Details

  1. Container
    1. Padding Top and Bottom 3%
    2. Margin Top and Bottom 5%
    3. Inside Max Width 800px
    4. Background Image
    5. Advanced Css Class(es) “containbg” to fit background inside container
  2. Heading H5 and Paragraph

#4. Testimonial Section

  1. Container
    1. Padding Top and Bottom 2%
    2. Inside Max Width 1140px
  2. Advanced Columns
    1. Columns: 2
    2. Advanced Css Class(es) “testimonials”
  3. Inside Columns Media and Text Block used
          1. Left: Image, Size of Image 200×200
          2. Right: Content + Heading H5

 

#5. Quick Section

  1. Container
    1. Padding Top and Bottom 2%
    2. Inside Max Width 1140px
  2. Add Media & Text Block Inside
  3. Image left side, Size of Image 600×600
  4. Heading H2 and List Block with “Large” style on right side

#6. Call to Action Section

  1. Container
    1. Fullwidth
    2. Padding Top 2%
    3. Margin Bottom 8%
    4. Inside Max Width 1200px
  2. 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

#7. More Info Sections

Section 1

  1. Advanced Columns
    1. Columns: 2
    2. Columns Gap 8%
  2. Add Heading H2, Heading H5 and Content on left side
  3. Add Image on right side, Size of Image 600×600
Spacer

  1. Spacer with Height 70px
Section 2

  1. Advanced Columns
    1. Columns: 2
    2. Columns Gap 8%
  2. Add Image on left side, Size of Image 600×600
  3. Add Content and Button on right side

#8. Testimonial Section

  1. Container
    1. Fullwidth
    2. Padding Top 2%
    3. Margin Top 8%
    4. Inside Max Width 1140px
    5. Background Color “#fef9f8”
  2. Advanced Columns
    1. Columns: 2
    2. Advanced Css Class(es) “testimonials”
  3. Inside Columns Media & Text Block
    1. Image on left side, Size of Image 200×200
    2. Content and Heading H5 on right side
  4. Add Call to Action Block inside Container 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
  1.  

About Page Guide

This document last updated on: September 9, 2021

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. Hero Section

Container Settings

  1. Fullwidth
  2. Padding top and bottom 18% .. set Padding as per your image requirement.
  3. Set Background Image, Size of Image 1920×800
  4. Set Background Opacity 100%

#2. About Section

  1. Container
  2. Advanced Columns
    Columns: 2
  3. Heading H2, Heading H5 and Content on left side
  4. Image Block on right side, Size of Image 600×600

#2. About Details Section

  1.  Container
    1. Fullwidth
    2. Padding Top 10% and Padding Bottom 8%
    3. Inside Max Width 1200px
    4. Select Background Image, 1920×700
  2. Advanced Columns
    Columns: 2
  3. Content and Buttons (Default Gutenberg Buttons Block) on right side

#3. Education Details

  1. Container
    1. Padding Top and Bottom 3%
    2. Margin Top and Bottom 5%
    3. Inside Max Width 800px
    4. Background Image, Size of Image 950×400
    5. Advanced Css Class(es) “containbg” to fit background inside container
  2. Heading H5 and Paragraph

Homepage Blocks Guide

This document last updated on: September 9, 2021

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. Hero Section:

  1. Container: Fullwidth
  2. Inner Width 1140px
  3. Padding Top 2%
  4. Bottom Margin 3%
  5. Background Color “#fdf9f8”
  6. Advanced > Advanced Css Class(es) “herosection” to apply background as shown on Home Top/Hero Section.

Add Advanced Columns inside container

  1. Columns: 2
  2. Padding Top and Bottom 25px
  3. Padding Right and Left 70px

Add Heading H5, Heading H3, Paragraph Text and Button with border radius “0” on left side

Add Image Block on right side, Size of Image 500×600

#2. Testimonial Section

  1. Container
    1. Padding Top and Bottom 2%
    2. Inside Max Width 1140px
  2. Advanced Columns
    1. Columns: 2
    2. Advanced Css Class(es) “testimonials”
  3. Inside Columns Media & Text Block
    1. Image on left side, Size of Image 200×200
    2. Content and Heading H5 on right side

#3. Info Section

  1. Container with Container Settings to Note
  2. Media & Text Block with content of your choice with Size of Image 450×520

#4. Work with Me section

  1. Container2. Advanced Columns with 3 Columns and top margin 40px
    3. Inside columns there is Image + Heading H5 and Content

#5. Call to Action

  1. Container
  2. Call to Action Block

#6. About Section

  1. Container: Fullwidth with inner width 1140px and Advanced Class “herobottomsection” to make background 1/4 white and 3/4 “#fdf9f8” color
  2. Advanced Columns with 2 Columns
  3.  Inside columns add Heading, Paragraph on left and Image Block on right side with Size of Image 500×600

#7 Newsletter Section

  1.  Container: 800px width
  2. Add Media & Text Block
  3. Add image to Left Side, Size of Image 280×380
  4. Add Heading H5, List/Paragraph Block and Newsletter block from Genesis Block on right side

Right now Email newsletter only supports MailChimp and its settings goes to Admin > Genesis Blocks > Settings



 

Contact Page Guide

This document last updated on: November 23, 2021

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

#1. Hero Section

  1. Container
    1. Fullwidth
    2. Inner Width 1140px
    3. Padding Top 2%
    4. Bottom Margin 3%
    5. Background Color “#fdf9f8”
    6. Advanced > Advanced Css Class(es) “herosection” to apply background as shown on Home Top/Hero Section.
  2. Add Advanced Columns
    1. Columns 2
    2. Padding Unit Pixel(px)
    3. Padding Top 25px, Padding Right 70px and Padding Bottom 10px
    4. Background Color “#f2e2dd”
  3. Add Heading H2 and Social Icons
    • Social Icons
      • Add Links to icon you want to show on front
      • Advanced Css Class(es) “stacked”
  4. Add Image Block on right side

#2. Contact Form Section

  1. Container
    1. Inner Width 1140px
    2. Bottom Margin 5%
  2. Add Media & Text Block
    1. Image on left side
    2. Heading H2, Content and Form on right side

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

Other Block Pages

This document last updated on: September 17, 2020

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.Page Settings and Genesis Settings

1. Page Attributes: Landing
2. Hide Title: Yes
3. Layout: Full Width Layout (Select if your default layout is not full width)

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

It contains all necessary blocks to make this page

[code]
Coaching Plus Theme
COACHING PLUS
ABOUT
WORK WITH ME
BLOG
CONTACT
[/code]

 

 

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.

[code]

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.

A full-width image

Images, videos, galleries, and other content can also be presented in a wide block that extends beyond the central column at bigger screen widths:

A wide image

Your posts and pages can contain galleries, which are collections of images presented in one or more columns:

Galleries can use the full width, as above, or the wide block and regular content widths:

Video support

This theme also includes styling for wide and full-width videos, such as this one embedded from YouTube:

Your videos can also have captions. This video is by BetsyLife.

Or this video embedded from YouTube:

Quotes

You can pull parts of your content into quotes, such as this one:

Good design is as little as possible. Less, but better, because it concentrates on the essential aspects. Back to purity, back to simplicity.

Dieter Rams

Buttons

Insert buttons as calls to action:

BUY Coaching Plus THEME

Content Boxes

Style paragraphs with custom colors to call attention to text anywhere in your content:

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. Sample link.

Headings

Style headings from level one to six:

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

[/code]

Primary Sidebar

Search Documentation

Choose a Main Topic

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
  • Image Sizes

Block Pages Guide

  • About Page Guide
  • Contact Page Guide
  • Homepage Blocks Guide
  • Landing Page Guide
  • Other Block Pages
  • Recipe Index Blocks Guide

Widget Areas

  • Footer Widget Settings
  • Header Settings
  • Sidebar Settings
  • Top Bar/Before Header Widgets
  • Mobile Sidebar Content

Additional Guide

  • Page/Post with or without sidebar

Installation

  • Installing Theme
  • One Click Theme Setup
  • Demo Posts Install
  • Additional Resources

Customizer Settings

  • Site Layout Extra
  • Blog and Archive Settings
  • Footer Copyright
  • Logo / Site Title
  • Singular Content
  • Theme Colors
  • Theme Typography

Widget Areas

  • Header Settings
  • Footer Widget Settings
  • After Entry Widgets
  • Top Bar/Before Header Widgets
  • Mobile Sidebar Content

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
  • Regenerate Thumbnails
  • Page/Post with or without sidebar

Installation

  • Installing Theme
  • Demo Posts Install
  • One Click Theme Setup
  • Additional Resources

Customizer Settings

  • Logo / Site Title
  • Theme Colors
  • Theme Typography
  • Blog and Archive Settings
  • Singular Content
  • Footer Copyright
  • Site Layout Extra

Widget Areas

  • Header Settings
  • After Entry Widgets
  • Footer Widget Settings
  • Sidebar Settings

Block Pages Guide

  • About Page Guide
  • Contact Page Guide
  • Landing Page Guide
  • Homepage Guide
  • Other Block Pages

Additional Guide

  • Author Box Guide
  • Regenerate Thumbnails
  • Page/Post with or without sidebar

Installation

  • Installing Theme
  • One Click Theme Setup
  • Additional Resources

Customizer Settings

  • Footer Copyright
  • Theme Typography
  • Theme Colors
  • Logo / Site Title
  • Header Settings

Widget Areas

  • Footer Widget Settings
  • Header Settings

Block Pages Guide

  • Homepage Guide
  • Other Block Pages
  • Page/Post with or without sidebar

Additional Guide

  • Menu Updates

Installation

  • Installing Theme
  • One Click Theme Setup

Customizer Settings

  • Footer Copyright
  • Theme Typography
  • Theme Colors
  • Logo / Site Title
  • Site Layout Extra
  • Singular Content
  • Blog and Archive Settings

Widget Areas

  • After Entry Widgets
  • Footer Widget Settings
  • Some Widget Areas Settings

Block Pages Guide

  • Homepage Guide
  • About Page Guide
  • Contact Page Guide
  • Other Block Pages
  • Landing Page Guide

Additional Guide

  • Regenerate Thumbnails
  • Page/Post with or without sidebar

Updates

  • Articles coming soon
Articles coming soon

Installation

  • Additional Resources
  • Theme Installation
  • Demo Install

Block Page Guide

  • About Page Guide
  • Homepage Guide
  • Work with Me Guide
  • Landing Page Guide
  • Life Coaching Page Guide
  • Health Coaching Page Guide
  • Instagram Page
  • Contact Page

Customizer

  • Theme Color
  • Theme Typography
  • Page/Post settings
  • Header
  • Footer
  • Archive settings
  • General (Theme Default) settings

Widgets

  • Widgets

Installation

  • Theme Installation
  • Demo Install

Customizer Settings

  • Archive settings
  • Theme Typography
  • Page/Post settings
  • General (Theme Default) settings
  • Theme Color

Widgets

  • Widgets

Block Page Guide

  • Homepage Guide
  • About Page Guide

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