Common Page Elements

When you are creating posts, you should be sure to use the common layout elements built into the theme. For instance, the title of your article should be a “Heading 1” title (i.e. “h1” in code). There should only be one of those on a page.  All sections should be “Heading 2”. You get the idea.  You can use Heading 1all the way to Heading 6, but “heading 6” is usually reserved as something that goes above a title or section, e.g. if your title is “Cool things in the amazon” you may want a little text block above that says “Peru – South America”. You’d use “Heading 6” for this.

If you don’t like the color or size of any of them, we can change them and it will update your entire site.

H1 Title – only one per article

H2 Title – use for main sections in the article

H3 Title – use for subsections in your article

H4 Title – use to break up subsections

H5 Title – Use for captions and small callout sections

H6 Title – Use for “over” titles that usually appear above an h2 or h1, like a category or location

Paragraph – Use for normal writing. You can bold and italics things.

Buttons and Links

Custom Widgets

Most of the custom widgets like the Featured or Notes widgets support applying up to three classes to the text box:

• [MANDATORY] The first class you add changes what a text box will look like, e.g. adding the class “sb-plan” to it to turning a bulleted list into a nice checklist.
• [OPTIONAL] The second class you can add is the icon you want to use for the text box, e.g. “sb-icon-plane” which would apply a plan icon to the text box design.
• [OPTIONAL] The third class you can add is the button or link style you want to use for the call to action (the last link) text box, e.g. “sb-link-next” which would apply that style to the link or button in the text box design.

All you would need to put in the “extra class name” field in the text box would be “sb-plan sb-icon-plane” which is just both classes (“sb-plan” for the design and “sb-icon-plane”  for the icon) with a space between them. If you wanted to change the button style you would put something like “sb-plan sb-icon-plane sb-link-next”. Easy peasy.

Once you do it a few times, this will make perfect sense and really speed up how fast you can add great items to your posts.

Widget Heading Reference

Available Widget Styles

Available Icon Classes

Available Button Classes

Special Notes

Add a class to a text box to turn it into a colored highlight: sb-tip, sb-note, sb-affiliate, sb-updated, sb-favorite, or sb-important. The color and icon appear automatically — just type your text.

Hero Boxes

A promo box: sb-cta-dark (bold teal) or sb-cta-light (soft). Inside: a title (Heading 3), a sentence or two, and your main link on its own line at the end — it becomes the button.

FAQ and Q&A

A questions-and-answers box. Use one text box with class sb-faq and a nested bulleted list: the top-level bullet is the question, and its indented bullets are the answer(s) — one or more.

Checklists

A text box with class sb-checklist and a list inside. A bulleted list becomes teal checkboxes; a numbered list keeps teal numbers. Add sub-headings (Heading 4) and a link if you want — two columns automatically.

Featured or Callouts

Make a row of equal columns, then put one text box per card in each column. Class = sb-feature plus an icon (e.g. sb-feature sb-icon-train). Inside: a short title (Heading 3) and a sentence. Cards auto-align to equal height.

Recommendations 

Use one text box per card, side by side. Class = sb-recommendation-pick (top pick) or sb-recommendation-alt (runner-up). First line = the badge (e.g. OUR PICK), then a title (Heading 3), your text, an optional list, and a link.

Plans

Use one text box per stage. Class = sb-plan plus an icon (e.g. sb-plan sb-icon-calendar). Inside: a title (Heading 3) and a bulleted list. Stack the stages and they auto-connect into a timeline.

Sequences

Use one text box per step. Class = sb-sequence plus a travel icon (e.g. sb-sequence sb-icon-plane). A down-arrow connects the steps automatically — great for routes and “do this, then this.”