Logistics and cost/enrollment information for offerings

This section is designed to make important information easy to find and digest within a long offering page.

The two column layout lets the eye easily scan the category/subject of each row. This helps the information both stand out — and be easy to read and internalize.

Watch the video tutorial “9 - Editing Logistics Sections” for a walkthrough of how to edit this section, and to add or delete rows.

Text styles are controlled by the font weights and the use of Paragraph 1 and Paragraph 2

Left Column:

• Use Paragraph 2, Bold Italic to access the all caps font

Right Column:

• Use Paragraph 1 to access the price font

• Use Paragraph 2 for the normal paragraph style. Use the Regular, Bold, and Italic weights as desired

• Use Paragraph 2 Bold Italic to access the all caps font

Where to Find It

• Hover over section → Click on “Edit Section” → “Colors” Tab

• Select Color Theme

What Color to Use

• Use the main offering color theme for this section.

• For example, the main color is blue for Reviving Our Roots. So on the course page, use the blue background.

Headline (h2 or h4)

Button

Accordion Block

Squarespace Form & Flodesk Form — See separate “Form Sections” page for how-tos

This section functions exactly the same as the above section, but adds the banner image.

Change Image

• Double click on the image to open the editing menu. Click “Add an Image” or “Replace” to set a new image.

Image Size & Crop

• Banner Images don’t look cropped in “Edit” mode, but display differently in “Preview” mode and on the public version of the webpage.

• Banner Images automatically crop to different sizes based on the screen size. These crops are controlled via code. On large browser windows, it will show up like a horizontal banner image. On smaller screens, it crops to 5:4 — still horizontal but taller than the banner style.

• Refine the position of the image in the frame via the “focal point”, which is the outlined circle on each image. The platform will try to keep this focal point in the center of the frame.

An image paired with long text with or without a button

Where to Find it

• This section uses the “Image Card” block. Double click on the image to open the Edit Menu.

Change Image

• Click “Add an Image” or “Replace” to set a new image.

Image Size: 4:3

• This section uses vertical images with a 4:3 proportion.

Crop Image

• Double click on the image to open the Edit menu.

• Click on “Edit”

• In the top right corner, you’ll see three icons. Click on the one that looks like a box. This is the symbol for “Crop.”

• Select “4:3” and adjust the image in the frame as desired.

• Click “Save”

Image Crop

• Refine the position of the image in the frame via the “focal point”, which is the outlined circle on each image. The platform will try to keep this focal point in the center of the frame.

Headline = h2 Bold

Instagram handle link = Paragraph 2 Italic

Paragraph = Paragraph 2

• All Caps accent style = Bold Italic — Use for the first few words of the first sentence

Button = Secondary Button style

For guest teachers, under “Edit” toggle on “Open Link in New Tab”

This section uses a separate button, not the Link available inside of the Image Card block.

Use this section before a Template 4 section to add an Headline, like “Meet Your Guest Facilitators” before Facilitator Bios

Headline = h4 Italic

• Special swash characters = Bold Italic

Where to Find It

• Hover over section → Click on “Edit Section” → “Colors” Tab

• Select Color Theme

What Color to Use

• Use the same color as the Facilitator Bio sections that follow. Usually this is Light Purple.

Extra large special headline to highlight a special sentence or phrase

Headline text length will impact the legibility and success of this section. It’s best to keep this to a shorter phrase or sentence so it’s easy to read.

Use to highlight a special sentence about your offering

Use with or without paragraph text and a button

Used at the beginning and end of an offering pages as a way to make a strong impact and inspire people to take the next step

Watch the video tutorial “2 - XL Headline Style Tips”

Uses Heading 2

Access Headline Font Styles

• Use Bold weight for all caps

• Use Bold Italic on individual letters to access a swash accent, like on an “R”

• Use Italic for the small italic style. This style works well for short prepositions or supporting words

Paragraph Text Options

• Paragraph 1, Centered

  • Fancier Italic font style

  • Text alignment = center

  • For short supporting copy. Because this font is an accent style, keep this between 1-3 lines of text for legibility.

• Paragraph 2, Left Aligned

  • Normal paragraph font style

  • Text alignment = left

  • All Caps accent: Use Bold Italic for the first few words of the first sentence

  • For longer supporting copy that’s 2+ sentences long. Use line breaks between sentences to make it easy to read.

Use special characters to help finesse the way your text breaks across multiple lines. Using one of the methods below can help solve some common headline problems.

Copy special characters from the links below and paste it between the words replacing the default space/hyphen.

Non-Breaking Space:

• Click here to copy non-breaking space

• Use this to keep two words together instead of breaking across two lines. Good between two words in the middle of your headline or at the very end. Don’t use for long words or for more than 2, because it may make things look weird on mobile.

Non-Breaking Hyphen

• Click here to copy non-breaking hyphen

• Same as the non-breaking space, but with a hyphen. Use this for hyphenated words that you don’t want to split across a line break.

Soft Line Break (use w/ caution!)

• When a non-breaking space won’t do the trick, use a “soft line break” (shift+return) instead of a “hard line break” (return).

• Insert a soft line break by holding (shift+return) at the same time instead of (return) when making a new line. 

• This will drop the cursor down to a new line without making a full paragraph break.

Check Your Work:

• Always check your work on smaller screens using the mobile preview to make sure your work looks good on mobile and tablet.

Button = Primary Button style

This should link to Enrollment/Purchase

Where to Find It

• Hover over section → Click on “Edit Section” → “Colors” Tab

• Select Color Theme

What Color to Use

• Use the main offering color theme for this section.

• For example, the main color is blue for Reviving Our Roots. So on the course page, use the blue background.

1-2 powerful sentences paired with an evocative image

Headline text length will impact the legibility and success of this section. It’s best to keep this to a shorter phrase or sentence so it’s easy to read.

Use to break up the rhythm of a long offering page, or as transition between different parts of an offering page

Use evocative images alongside valuable insight

Use statements or questions that invite the reader to reflect on what they want or need and that ask them to consider how this offering could serve them

Use these to build connection with the reader, momentum in the page, and appetite for what you are offering

Use with or without paragraph text

Watch the video tutorial “2 - XL Headline Style Tips”

Where to Find it

• This section uses the Background Image

• Hover over section → Click on “Edit Section” → “Background” Tab

Change Image

• Click “Add an Image” or “Replace” to set a new image.

Image Crop

• Refine the position of the image in the frame via the “focal point”, which is the outlined circle on each image. The platform will try to keep this focal point in the center of the frame.

Test Focal Point on Mobile View

• Setting this focal point is especially important for mobile views. Check your work on desktop and mobile views and make adjustments if you need to.

Uses Heading 2

Access Headline Font Styles

• Use Bold weight for all caps

• Use Bold Italic on individual letters to access a swash accent, like on an “R”

• Use Italic for the small italic style. This style works well for short prepositions or supporting words

Paragraph 1, Centered

• Text alignment = center

• For short supporting copy. Because this font is an accent style, keep this between 1-3 lines of text for legibility.

Use special characters to help finesse the way your text breaks across multiple lines. Using one of the methods below can help solve some common headline problems.

Copy special characters from the links below and paste it between the words replacing the default space/hyphen.

Non-Breaking Space:

• Click here to copy non-breaking space

• Use this to keep two words together instead of breaking across two lines. Good between two words in the middle of your headline or at the very end. Don’t use for long words or for more than 2, because it may make things look weird on mobile.

Non-Breaking Hyphen

• Click here to copy non-breaking hyphen

• Same as the non-breaking space, but with a hyphen. Use this for hyphenated words that you don’t want to split across a line break.

Soft Line Break (use w/ caution!)

• When a non-breaking space won’t do the trick, use a “soft line break” (shift+return) instead of a “hard line break” (return).

• Insert a soft line break by holding (shift+return) at the same time instead of (return) when making a new line. 

• This will drop the cursor down to a new line without making a full paragraph break.

Check Your Work:

• Always check your work on smaller screens using the mobile preview to make sure your work looks good on mobile and tablet.

Where to Find It

• Hover over section → Click on “Edit Section” → “Colors” Tab

• Select Color Theme

What Color to Use

• Use the main offering color theme or light purple for this section.

• For example, the main color is blue for Reviving Our Roots. So on the course page, use the blue background.

Sharing an image with a short headline

Use with or without paragraph text

Text is left-aligned in this section

Use this to break up the rhythm of a long offering page. The layout of this section is different than most of the other sections on your offering pages, so this can offer a nice change of pace.

This to share photos of yourself on offering pages

Where to Find it

• This section uses the “Image Card” block. Double click on the image to open the Edit Menu.

Change Image

• Click “Add an Image” or “Replace” to set a new image.

Image Size: 4:3

• This section uses vertical images with a 4:3 proportion.

Crop Image

• Double click on the image to open the Edit menu.

• Click on “Edit”

• In the top right corner, you’ll see three icons. Click on the one that looks like a box. This is the symbol for “Crop.”

• Select “4:3” and adjust the image in the frame as desired.

• Click “Save”

Swap Image and Text Sides

• Double click on the image to open the Edit Menu. On the “Design” Tab, choose between Image Left and Image Right.

Main Headline = h2, h3 

• All Caps = Bold

Alternate Headline = h4

Paragraph = Paragraph 1 or Paragraph 2

• All Caps accent style = Bold Italic
  Use for the first few words of the first sentence

Where to Find It

• Hover over section → Click on “Edit Section” → “Colors” Tab

• Select Color Theme

What Color to Use

• Use the main offering color theme or light purple for this section.

• For example, the main color is blue for Reviving Our Roots. So on the course page, use the blue background.