TYPOGRAPHY:

This is an example "Header 1" (H1)

This is an example "Header 2" (H2)

This is an example "Header 3" (H3)

This is an example "Header 4" (H4)

This is an example "Header 5" (H5)

This is an example "Header 6" (H6)

Display 1

Display 2

Display 3

Display 4

This is an example paragraph. This Kitchen Sink page displays most of what's possible using only the WYSIWYG (What You See Is What You Get) content editors in WordPress on this site.

This is another example paragraph with some additional elements. This is bold text elit, sed do eiusmod tempor incididunt ut inline link labore et dolore magna aliqua. Ut enim ad minim veniam, strikethrough text laboris nisi ut aliquip ex ea commodo consequat. Underlined text reprehenderit in marked text velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <inline code> non proident, sunt in culpa qui officia this is abbr text mollit anim id est laborum. ctrl + , (keyboard instructional text).

Example unordered list:

• Item 1
• Item 2 (a longer item here) lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
• Item 3
  • Nested Item 1
  • Nested Item 2
• Item 4 donec id elit non mi porta gravida at eget metus. Donec sed odio dui.
• Item 5 etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Example ordered list:

1. Item 1
2. Item 2 (a longer item here) lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
3. Item 3
   1. Nested Item 1
   2. Nested Item 2
4. Item 4 donec id elit non mi porta gravida at eget metus. Donec sed odio dui.
5. Item 5 etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Example definition list:

Definition Term

Definition description.

Definition Term 2

Definition description 2.

Definition Term 3

Definition description 3.

Example blockquote:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Example <hr> (horizontal rule):

MEGA MENU:

1. First make sure CSS Class is checked in the Screen Options (upper right)
2. Place Top Level nav items first
3. If you want a Heading in the sub menu add in a Custom Link with "#" as the URL and whatever text you want as the Text.
4. The CSS Class for the heading should be set to "heading".
5. A column size should also be set for the heading. e.g. col, col-6, col-4 etc.
   • The columns are based on a 12 column grid so col-6 would create a menu with two columns, and col-4 would be three columns, etc.
   • col will automatically fill the remaining space, so if you want all evenly-sized columns that fill the width of the window, you can give each a class of col. col-auto will contract the width to the content size. To center the columns within the window, give each col-auto.
   • You can also give the parent item simple-menu to make the layout a simple vertical list

AVAILABLE SHORTCODES:

The following custom shortcodes can be copied and pasted into any WYSIWYG editor on the site to output dynamic content. The red examples below show default values; in other words, if you omit certain attributes when using the shortcode, the default values will be applied.

• [btn]
• [gravityform]
• [columns-two]
• [columns-three]
• [columns-four]
• [collapse]
• [icon]
• [leon-provider-listing]

Buttons

[btn text="Contact Us" url="/contact-us/" color="primary" size="" ghost="false" block="false" xclass=""]

• Change text to whatever text you want displayed on the button (defaults to "Contact Us" if not defined).
• Change url to wherever you want the button to link to (defaults to "/contact-us/" if not defined)
• color can be primary (default, blue), blue, secondary (red), red, white or dark (dark gray).
• size can be small, empty (default, which is medium-sized), or large.
• ghost can be true or false (default), which generates an outlined button instead of a solid background.
• block can be true or false (default), which generates a full-width block button.
• xclass - include any additional CSS classes you wish to add here.

Small Regular (no size defined) Large

Primary Color (no color defined) Secondary Color White Dark

Primary Ghost Secondary Ghost White Ghost Dark Ghost

Example Block Button

Forms

[gravityform id="1" title="false" description="false" ajax="true"]

• Change id to the ID of the desired form. Form IDs are: Contact Us (EN) - 1, Contact Us (ES) - 2, Request Printed Materials (EN) - 3, Request Printed Materials (ES) - 4
• Change title to true to show thw form's title. Should usually be left as false.
• Change description to true to show the form's decsription. Should usually be left as false.
• ajax should always be set to true.

Columns

Split content in content editors into two, three or four equal-width columns. Vertically align content to the top (default), middle or bottom of the columns. Optionally condense the width of the overall container by setting condensed to true. Optionally include additional CSS classes via xclass.

[columns-two valign="top" xclass="" condensed="false"] ...your content here... [column-split] ...your content here... [/columns-two]

- or -

[columns-three valign="top" xclass="" condensed="false"] ...your content here... [column-split] ...your content here... [column-split] ...your content here... [/columns-three]

- or -

[columns-four valign="top" xclass="" condensed="false"] ...your content here... [column-split] ...your content here... [column-split] ...your content here... [column-split] ...your content here... [/columns-four]

Expandable/Collapsible Content

[collapse button_text="View More" button_class="btn-primary" xclass=""] ... [/collapse]
(replace the ellipsis above with the content you wish to expand/collapse)

• button_text - define the button text (defaults to "View More").
• button_class - define button styling using Bootstrap 4 button classes (btn is already added).
• xclass - add extra CSS classes to the element's outer wrapper (separate multiple by spaces).

Icon Library & Shortcode

[icon icon="leon" url="" size="lg" xclass=""]

• Do NOT use the XML in WYSIWYG editors; use the shortcode instead.
• Optionally add url="https://www.google.com/" to the shortcode to turn the icon into a link (changing the URL).
• Optionally change size to xs, sm, md or xl (lg is default):
  

  xs	sm	md	lg	xl

• You can change an icon's color by adding these CSS classes as an xclass parameter on the shortcode:
  • blue (primary)
  • red (secondary)
  • aqua
  • white
  • black (default)
• (The leon logo and mark cannot change colors.)
• For example, "[icon icon="atom" url="https://ruffalonl.com/" xclass="blue"]" will display the following (notice its color and that it's a link):
  

CONTENT BLOCKS:

With each of these blocks, you can change padding above and below.

• Basic Content
• Basic 2 Columns
• Full-Width CTA
• Statistics
• Table
• Cards
• Curved Image Layout - 2 Columns

Basic Content

This block is a basic content editor.

Basic 2 Columns

This block allows you to create two columns in a row. You have options to change the background as well.

Full-Width CTA

You can add any content you want in this block, and you have options for the background.

Statistics

Here you can enter up to 3 columns of statistics. The numbers will count up when the user scrolls to them. You have options for backgrounds and to add content above the statistics.

Table

This block allows you to adda a basic table. It's the block used for the price comparison table. The first column in the table will always be left aligned and the other columns will be centered.

You have the option to add a table header and make it sticky by toggling on the "Sticky Table Header" field.

To add a blue bar section header within the table, enter the header text in the first cell of the row you want to be the header. Add the text "---HEADER---" directly in front of the header text with no spaces.

Cards

Here you can add as many cards as you'd like, with up to 4 cards in a row.

You have the option to:

• add no border,
• add a border around each card, or
• add a border around the whole section of cards.

Curved Images Layout - 2 Columns

This block lets you add content in rows of 2-columns, where one column contains an image with a curved side and the other column can be any content you want.

The side the image is on should switch in each row to create an alternating pattern.

PAGE OPTIONS:

These options are present for every page on the side of the page's editor. They can all be "disabled", but they're "enabled" by default. The front page is the only page all options won't work on, as it isn't meant to have breadcrumbs and requires a banner.

The options are:

• Header: This controls visibility of the header (including utility nav & main nav).
• Navigation: This controls visibility of the main navigation.
• Banner: This controls whether or not the hero shows.
• Breadcrumbs: This controls whether or not the page will have breadcrumbs at the top.
• Left Sidebar: This controls whether the sidebar shows. If left enabled, you have some options to customize the sidebar.
• Blue Footer CTA: This controls the full width blue CTA that appears below the content.
• 2 Column Footer CTAs: This controls the 2-column CTAs with icons that appears below the blue CTA.
• Footer: This controls visibility of the footer (not including the CTAs).