Leaf Home Solutions Blog Style Guide

Main Subpage Styles and Guidelines (This is also an h2)

This a sample paragraph with a hyperlink. This is bold text. Since this site makes use of custom Web fonts, there are different weights for italicized text and bold italicized. To ensure accuracy in font rendering, consult the HTML of this page to see tag structure.

If you have any questions about this document, please contact the LHS Experience Team.

A horizontal rule is below.

Smooth Scrolling Links (This is also an h3)

This is an example of a smooth scrolling internal hyperlink. These are used to gracefully jump users to specific sections of content.

Note: The specific example in the paragraph above scrolls users to the Image Styles and Guidelines section.

For example: <a class="custom-scroll" href="#myID"> would scroll the user to an HTML element with an id equal to myID.

* This is sample disclaimer text. You just need to add the class disclaimer to the element you have text in.

Image Styles and Guidelines

This is a paragraph with an image aligned to the right. Aligned images should be no wider than 488px. There are a few different classes you can use for images. As an example, this image also has the style-border, style-circle and style-shadow classes.

• align-left: Floats the image to the left.
• align-right: Floats the image to the right.
• align-center: Centers an image.
• style-border: Adds a 2px white border to the image.
• style-circle: Rounds the image.
• style-shadow: Adds a slight drop shadow below the image to provide depth.
• mobile-kill: Removes the image at a screen size of 700px.

Note: If a floated image doesn’t have the mobile-kill class, it will take on the align-center properties at 700px.

To properly clear a floated image, you can add an empty div after all the floated content with a class of non-cms-clear.

This technique is used to prevent new sections from wrapping around an image taller than its associated content.

Example: <div class="non-cms-clear"></div>

Adding Images Via The WordPress Media Gallery (This is also an h4)

This specific theme has some built-in auto-formatting for images uploaded through the WordPress Media Gallery to hopefully make content population easier. You can see the HTML output and make edits if you switch the WYSIWYG content editor from the Visual to the Text tab.

Auto-formatting applies this logic:

• Default WordPress CSS classes and HTML attributes are removed to prevent formatting issues.
• Images at or below the recommended width above (488px) will be output with the align-right and mobile-kill classes.
• Images above the recommended width will be output with the align-center and mobile-kill classes.
• Regardless of size, an image’s corresponding alt text is always output.

Even though images have been programmed to auto-format, it’s still advised to look the output code over if uploading images and placing them through the WordPress Media Gallery. If for some reason the auto-formatting isn’t applied, it’s advised to remove any WordPress default classes and choose the correct one(s) above. You’ll also want to remove any specified width and height attributes from the image so it doesn’t become warped on devices.

CTA Button Styles

To properly use and style CTA buttons, you’ll need to add two classes to an <a> tag – btn and a secondary, color-specific class. This theme has two different styles associated with it:

• btn-ghost-black: A ghost button with black text and a black border (see below).
• btn-ghost-white: A ghost button with white text and a white border.

To avoid buttons overlapping each other and other content, please place each in a <div> with a class of btn-container. This will ensure they have adequate spacing.

Please keep button copy limited to 25 characters (with spaces) to avoid line breaks on mobile devices.

List Examples

This is a sample paragraph.

• This is an unordered list.
• List items and other elements have been tested for worst-case scenarios.
• Below is a nested unordered list.
  • Nested ordered list item.

This is a sample paragraph.

1. This is an ordered list.
2. List items and other elements have been tested for worst-case scenarios.
3. Below is a nested ordered list.
   1. Nested ordered list item.

Using Accordion Menus

An accordion menu is below. To create accordions, use the custom admin at the bottom of the page and add a corresponding shortcode (exact code shown in accordion instructions on page or can be viewed in this post’s code) to place them wherever you’d like in the content editor.

[accordions]

Embedding Responsive Videos

Videos on the site use Vimeo and YouTube’s “modest branding.” To use responsive videos properly, follow these steps:

1. The embed link used for a video should be formatted like this: https://www.youtube.com/embed/XQu8TTBmGhA (YouTube) or https://player.vimeo.com/video/87110435 (Vimeo)
2. The bold portion of the link above is the video’s unique code. This is the only part of the link above you need to replace if adding a new video.
3. All videos are in an iframe, which need to be placed in a div with the class of video.

A fully-coded example is below. It’s best to simply copy and paste the code and change the bolded section of the link above. You can find the unique code in the URL of the YouTube video’s page.

Tables

When creating tables, it’s best to keep in mind their primary use is for tabular data, such as pricing. A good practice is to consider tables a last resort when it comes to content creation as they’re not especially mobile-friendly.

Note: All tables listed below have been optimized for mobile devices.

There are a number of table sizes that can be used in this template. For a table to render properly, it needs to be contained in a <div> with the class lhs-table-container, and the <table> element needs to have the class lhs-table placed on it. There are a number of secondary classes you can use on the <table> element to set how many columns the table has and how wide the columns should be:

• lhs-table-100: A single-column table.
• lhs-table-75-25: A two-column table with the first column being 75 percent wide and the second being 25 percent wide.
• lhs-table-66-33: A two-column table with the first column being 66 percent wide and the second being 33 percent wide.
• lhs-table-50: A two-column table with each column being 50 percent wide.
• lhs-table-33: A three-column table with each column being 33 percent wide.
• lhs-table-25: A four-column table with each column being 25 percent wide.

Note: Please see the HTML example in the page’s content editor as an example of how to structure a table.

WordPress Best Practices for Content Creation

The following are some general guidelines to consider when creating new blog posts.

General Content & Copy

Don’t Copy/Paste Content from Microsoft Word

Pasting post content from a Microsoft Word document into a WYSIWYG editor can cause a few different rendering issues as you’ll inadvertently paste in Microsoft-specific HTML formatting and special characters.

Unfortunately, this isn’t something that can be avoided by changing a setting or two in Word. For best results, copy your content into a basic text or code editor first to strip out the Microsoft syntax, then copy and paste from that program into WordPress.

Here is a list of recommended (and free) basic text editors:

• Notepad (PC)
• Notepad++ (PC)
• Sublime Text (PC or Mac)

Use The Manual Excerpt

By default, WordPress creates blog post excerpts by taking the first 55 words from your post. To improve excerpt readability and gain fine-tuned control of what the system outputs, consider using the manual excerpt when editing a post.

If you don’t see this feature when editing, you’ll need to click on the Screen Options drop-down in the right-hand corner of the editor page and select the Excerpt checkbox. You can then move it where you’d like within the editor.

SEO Best Practices

The following are some general guidelines to consider when creating SEO-friendly Web content.

General Content & Copy

• Make Use of Existing User Profiles/Personas: Producing content to attract a general audience generally results in traffic from users who don’t relate to the campaign. Personalized messaging tends to convert at a much higher clip, resulting in a higher-ranking page.
• Create Keyword-heavy Content: Keywords refer to specific combinations of terms and phrases your users will likely input into search engines to find your page.
  • These are divided into short (usually one word) and long-tail (usually more than one).
  • Certain HTML tags have more weight than others. Make sure all heading tags (<h1> and <h2> tags, specifically) and <a> tags are keyword-rich.
  • An analytics team should be able to provide this data, but if not, try using Ubersuggest to do some lower-level keyword research.
• Link Building: Always strive to create internal links within content when possible. This not only helps the ranking of the pages you’re linking to, but helps your page rank better as a referrer.
• Content Length Matters: Keep in mind Web pages with longer, high-quality content get better search rankings because users tend to get information from a single reliable source. Pages need to have at least 300 words of live copy on them to be considered relevant. Informational articles tend to rank better once they reach 2,000 words.
• Avoid Jargon: There’s a point where something can be too clever. If a user doesn’t immediately understand something, they’re likely to leave the page. When someone leaves your page after a single-viewing session (meaning they don’t progress to a conversion point), they bounce. A page’s bounce rate is an important statistical metric that factors into page ranking. If the campaign is reliant on a user moving deeper within the site, then you want to strive for as low a bounce rate as possible.

Design & Development

• Don’t Make The User Think: This may be the Web’s golden rule, and applies to every phase of Web design and development. Every experience is meant to drive a user somewhere, and they want to get there as quickly as possible. Here are a few questions to ask yourself to remove any subjectivity regarding functional elements and user experience.
  • Will the user understand what do in a split second?
  • Does this get the user to a conversion point in as few steps/clicks as possible?
• Clean Code & Semantic Markup: Pages built in proper semantic order always rank better. The location and number of certain tags also play a role:
  • Pages should have one <h1> and it should be placed as high as possible in the markup. This WordPress template uses the page’s title as an <h1>, though you have the option to create one with more keyword-rich text below the title input field.
  • Make good use of <h2> and <h3> tags. SEO Sherpa provides a great guide on best practices for these and other heading tags.
  • Since heading tags have SEO value, they shouldn’t be placed in blocks of content used on other pages to avoid duplicate content penalties. If a call-to-action has a heading in the design, consider using a <span> instead.