Core Styles

These are not reusable blocks. This just shows the default styling for all content across the board. Anything that requires a CSS class will be noted.

Headings

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

CSS class ppc-font-alt

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tristique lacus eu nunc iaculis aliquet. Sed at aliquet urna. Maecenas nec felis dictum felis sodales porttitor. Sed sit amet feugiat libero, eget vehicula justo. Suspendisse at feugiat sem. Nulla molestie laoreet augue sit amet viverra. Curabitur tortor eros, mattis ultrices orci condimentum, efficitur commodo augue. Mauris sed justo pulvinar, condimentum magna nec, bibendum massa. Cras mattis ultricies metus et sodales. Nulla commodo est eget ante consectetur molestie. Morbi vel vehicula mauris, ac luctus nibh.

Aenean odio quam, lacinia quis purus vel, facilisis pretium nibh. Phasellus a nulla auctor, accumsan ligula at, viverra odio. In ut ipsum risus. Donec porta maximus diam, ac rutrum orci hendrerit id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam vitae vestibulum nulla. Cras rhoncus consequat pretium. Nam nisi arcu, bibendum sed metus in, finibus consectetur libero. Aenean purus velit, euismod ac justo nec, tempus consequat augue. Phasellus bibendum lacus at consectetur elementum. Cras id magna at lectus placerat laoreet. Phasellus a lacus posuere, gravida urna sed, imperdiet tellus.

  • Vestibulum cursus volutpat lorem
  • Vitae iaculis justo luctus sed. Sed eu ligula ligula.
  • Cras convallis quam ac sem condimentum
  • Pharetra rutrum dolor sodales.

Phasellus sapien augue, tincidunt quis pharetra non, mattis eget ligula. Pellentesque volutpat orci felis, fermentum gravida mauris viverra sed. Donec vitae erat non neque blandit interdum. Phasellus ac nunc lorem. Ut vestibulum quam eu metus aliquam, nec tristique turpis faucibus. Aenean volutpat accumsan metus at efficitur. Integer justo nibh, laoreet vitae vehicula sit amet, feugiat in ante. Phasellus venenatis, nibh in congue ultrices, ante enim vulputate leo, ut convallis felis ligula vel elit. Etiam laoreet nibh vitae risus accumsan lacinia ac ut lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut mollis est non rhoncus eleifend.


CSS Classes


The blocks on the page will have additional settings that show on the right-hand side column of the editor. The Settings can be hidden or shown by clicking on the black and white gear icon in the top right corner. Depending on whichever block is currently selected, different settings will be displayed in the column. To add additional CSS classes to a block, first make sure the correct block is selected, and it will most likely have blue outline around it to show you what is currently selected.

PRO TIP: Use the up and down arrow keys on your keyboard to move about and select different blocks. Many blocks have other blocks nested within them, and sometimes it’s tricky to select the containing block for an area. Just click somewhere near where you want to select, then hit up or down on your keyboard until you see that the block you are looking for is selected and outlined in blue.

Once your block is selected, look near the bottom of the settings on the right-hand side, then under the Advanced tab drawer (it may be closed and need to be toggled open by clicking on it), you will find the Additional CSS class(es) field. This field is where you will place the CSS classname that will customize the block as shown.


ppc-small-header

Create a Container block. Add a Header 1 and 2 tag. Assign ppc-small-header class by using Advanced > Additional CSS class(es) to the Container in the Sidebar Block Settings.

This is a Header 1

This is a Header 2


ppc-box

Create a header tag. Pick the text and background color. Apply CSS class ppc-box to the Header tag under Advanced > Additional CSS class(es)

Text inside box goes here


ppc-circle-list

Create a list. Set it to be a numbered list (aka, an ordered list). Apply CSS class ppc-circle-list to the list under Advanced > Additional CSS class(es)

  1. Tell us your story
    Let’s chat about your company and see if you’re a good fit.
  2. Gather materials
    We will dive into your financials and stuff about your company.
  3. Get to work
    We’ll work with you the entire way, and figure out what you can do to be better.
  4. B Corp certified
    Now that you’re a B Corp, help others become one too!

ppc-stretch-vertically

To have the inner columns stretch to be the same height as their siblings, apply CSS class ppc-stretch-vertically to the parent container of an Advanced Columns block under Advanced > Additional CSS class(es).

“Nathan was a wonderful guest on my podcast. The transparency with which he tells stories and talks about his experiences allow him to build trust with the audience–he isn’t some academic studying these things in theory; he’s been figuring it out on the fly for years, and that’s what resonates.”

Jeff Bond, Chat With Leaders

“Nathan is a natural storyteller, but he also knows what he’s talking about. He has a unique way of sharing lessons he’s learned and solutions he’s implemented that keep the audience laughing, listening, and engaged.”

Chistina Noel, Noel & Co.


Custom Blocks



Slants

Displays slants behind the next content block. Defaults to the left-hand side, but by adding the class right to Advanced > Additional CSS class(es) it will display them on the right-hand side.


Vertical Pod

Create a columns block. In each column place the Vertical Pod and fill out the custom fields with the content you want to display.

Podcasts

Create a post-and-page-grid block. Select how many Posts and Columns you want to display. Under the Category tab select Podcasts. Add ppc-podcast-image at the Post-and-page-grid block level under Advanced > Additional CSS class(es).