Page Block Layout Instructions

Detailed instructions for each designed page block on your site.

Back to the How-To Page

Page Block Layout Options

 

Full Width – Text, Testimonials, Image (for Ads)

  1. Name the block intuitively so you can easily find and attach it to the correct page.
  2. Layout: Full Width
  3. Enter optional Header. This will create an h3 header centered above the text. (Or you can always create a header in the wysiwyg editor.)
  4. Select Background Color or add an Image. (We recommend using black and white, lightened images.)
  5. Column Content Type: You will only want to use Text or Testimonial for this layout.
  6. Content types:
    1. Content: Full wysiwyg editor options. (buttons can be created in Format > Formats)
    2. Testimonials: Select Testimonial from dropdown. These are created separately in the Testimonials post type. (See Post Types for instructions.)
    3. Image: Add Image from the media library, enter optional Link URL, change link target to YES if linking to an external site.
  7. Join this page block to specific page(s) here. Note: This page block will appear at the bottom of that page. If needed, you will have to go to back of the page to rearrange the order of the blocks.
  8. Save as Draft, Publish (or Update to save edits) the page block to save it. Remember even published page blocks will not be visible on a page until it has be joined to that page.

 

Two Column – Combinations

NOTE: This is not the layout you want to use for the custom blocks that ‘look like’ two columns (instructors, upcoming course)

  1. Name the block intuitively so you can easily find and attach it to the correct page.
  2. Layout: Two Column
  3. Do NOT use the optional Header, it will not work on the 5050 layouts. (You can always create a header in the wysiwyg editor. The h3 styling creates the underline under the header text.)
  4. Select Background Color or add an Image. (We recommend using black and white, lightened images.)
  5. Columns Content Type: Two of these drop down fields will appear. The first is for the left side of the layout, the second is for the right side. You can use any combination of Text/ Text, Text/ Image, Text/ Video, Text/ Gallery, Text/Testimonial for this layout.
  6. Content types:
    1. Content: Full wysiwyg editor options.
    2. Image: Add an Image from the media library (or load in a new one).
    3. Video: Select an Image from the media library (or load in a new one).This image is typically a still shot from the video, you may need to create a screen grab. Adding this image will display the designed play button. Enter the URL (YouTube or Vimeo) in the Video field.
      1. When adding videos, be sure that the url is for the video on it’s own, not within a playlist url. If the video is in a playlist, click on the “Share” button (has an curved arrow image) below the video. Copy and paste that url in the browser, this will redirect to the full/complete url. Use this new url to paste into the site.
    4. Gallery: Add as many image fields as needed with the red “Add Image” button. Add an Image from the media library (or load in a new one) and optional Caption.
      • Once added, images can be reorder by clicking on the number on the left side to ‘drag and drop’ into place.
    5. Testimonial – Select testimonial from drop down. You will need to create the testimonial in the post type first.
  7. Join this page block to specific page(s) here. Note: This page block will appear at the bottom of that page. If needed, you will have to go to back of the page to rearrange the order of the blocks.
  8. Save as Draft, Publish (or Update to save edits) the page block to save it. Remember even published page blocks will not be visible on a page until it has be joined to that page.

 

Four Column – Text only

  1. Name the block intuitively so you can easily find and attach it to the correct page.
  2. Layout: Four Column
  3. Enter optional Header. This will create an h3 header centered above the text. (Or you can always create a header in the wysiwyg editor.)
  4. Enter optional Subheader, which will automatically create an h6 above the header text.
  5. Select Background Color or add an Image. (We recommend using black and white, lightened images.)
  6. Columns Content Type: You will only want to use Text for each column in this layout.
    1. Col Link: Enter url or search for internal page for this entire column of text/icon to link to.
    2. Icon: Select (or search for) icon from Font Awesome dropdown. (This is the Font Awesome website, to see all options.)
    3. Content: Full wysiwyg editor options.
  7. Join this page block to specific page(s) here. Note: This page block will appear at the bottom of that page. If needed, you will have to go to back of the page to rearrange the order of the blocks.
  8. Save as Draft, Publish (or Update to save edits) the page block to save it. Remember even published page blocks will not be visible on a page until it has be joined to that page.

 

Full Width – Courses

NOTE: This layout appears like a 2-column but it is not.

  1. Name the block intuitively so you can easily find and attach it to the correct page.
  2. Layout: Full Width
  3. Do NOT use the optional Header, it will not work in this layout
  4. Select Background Color or add an Image. (We recommend using black and white, lightened images.)
  5. Columns Content Type: Courses
    1. Select a single course from the listing on the left, that will then appear on right side. This will automatically pull the name of the course to the left side of the block, and the ‘description’ from that course to the right side.
  6. Join this page block to specific page(s) here. Note: This page block will appear at the bottom of that page. If needed, you will have to go to back of the page to rearrange the order of the blocks.
  7. Save as Draft, Publish (or Update to save edits) the page block to save it. Remember even published page blocks will not be visible on a page until it has be joined to that page.

 

Full Width – Upcoming Courses

NOTES: This layout appears like a 4-column but it is not. You are only able to display Course here.

  1. Name the block intuitively so you can easily find and attach it to the correct page.
  2. Layout: Full Width
  3. Enter optional Header. This will create an h3 header centered above the text. (So you can say Upcoming Course, Featured Courses, Next Level Courses, etc.)
  4. Enter optional Subheader, which will automatically create an h6 above the header text.
  5. Select Background Color or add an Image. (We recommend using black and white, lightened images.)
  6. Columns Content Type: Upcoming Courses
    1. Select UP TO four course from the listing on the left, that will then appear on right side. This will automatically pull the card details, title, level, description, etc. (You do not need to select 4 but the design obviously looks best with 4.)
  7. Join this page block to specific page(s) here. Note: This page block will appear at the bottom of that page. If needed, you will have to go to back of the page to rearrange the order of the blocks.
  8. Save as Draft, Publish (or Update to save edits) the page block to save it. Remember even published page blocks will not be visible on a page until it has be joined to that page.

 

Full Width – Resources

NOTES: This layout appears like a 4-column but it is not. You are only able to display Resource Topics here.

  1. Name the block intuitively so you can easily find and attach it to the correct page.
  2. Layout: Full Width
  3. Enter optional Header. This will create an h3 header centered above the text. (So you can say Upcoming Course, Featured Courses, Next Level Courses, etc.)
  4. Enter optional Subheader, which will automatically create an h6 above the header text.
  5. Select Background Color or add an Image. (We recommend using black and white, lightened images.)
  6. Columns Content Type: Resources
    1. Select as many Resource Topics as you want from the dropdown list. (multiples of 4 look best) This will automatically pull the topic name and the topic description (editable in the Resource > Topic post type) and make them a link to the filtered view of the Resources.
  7. Join this page block to specific page(s) here. Note: This page block will appear at the bottom of that page. If needed, you will have to go to back of the page to rearrange the order of the blocks.
  8. Save as Draft, Publish (or Update to save edits) the page block to save it. Remember even published page blocks will not be visible on a page until it has be joined to that page.

 

Full Width – Instructor

NOTES: This layout appears like a 2-column but it is not. You are only able to display one instructor per page block

  1. Name the block intuitively so you can easily find and attach it to the correct page.
  2. Layout: Full Width
  3. Do NOT use the optional Header, it will not work in this layout.
  4. Select Background Color or add an Image. (We recommend using black and white, lightened images.)
  5. Columns Content Type: Instructor
    1. Select a single instructor from the listing on the left, that will then appear on right side. This will automatically pull the bio image to the left side of the block and the name and short description from the bio post type to the right side.
  6. Join this page block to specific page(s) here. Note: This page block will appear at the bottom of that page. If needed, you will have to go to back of the page to rearrange the order of the blocks.
  7. Save as Draft, Publish (or Update to save edits) the page block to save it. Remember even published page blocks will not be visible on a page until it has be joined to that page.