Styling

Headings are used to delineate the importance of text and have a simple numbering system to keep track of the importance. Starting at Heading 1, each subsequent heading is less important all the way down to paragraph being the lowest. Each heading has a shortened down name to help keep things brief. For example Heading 1 is known as H1. Here are some explanations and best practices for each.

• H1: The most important heading with the biggest font. Heading 1 or “H1” should only be used for the most important text on the page and is generally reserved for the title of the page.
• H2 and H3: Both are small and less important than H1 but are still generally bigger and bolder fonts. These are good to use for titles of page sections.
• H4: This heading is specifically an all-caps option which can be helpful for lead-ins.
• H5 and H6: These headings are bold but not too big. They are good for card titles or stand out information.
• Paragraph: General text should be used as paragraph text. This is generally considered “regular” text and has no additional formatting.

These headings not only display importance in terms of visual size, but also in terms of search engine optimization. H1 is seen as the more important text than an H5 or “paragraph” when the search engine is looking through a page.

To format text, simply select the text to change and click which style to apply.

Creating links

Some of the styling options can be applied to a hyperlink. Here is how to add a hyperlink before going over how to style.

Adding a hyperlink
To add a hyperlink, first add in the text for the link. Then, highlight the text and click the link icon. A prompt will appear with a field to add the URL of the link. This is where we’d like the link to point to.

Additional options
Selecting the gear icon will bring up a pop-up box with additional options. There will be a field to add the URL into. A “Link text” field will also be available which will determine what the text of the link will display as. Changing that text can be done here.

Open link in a new tab
There is also a checkbox for “open link in a new tab.” Checking this will not take the user off the page, but will open the new link in a new tab in the browser. This is a great option if we don’t want the user to lose their spot on the current site.

Search existing sites
Last, is option to search through all the pages on our site to easily add a link. Typing in the search bar will allow WordPress to search through the site for existing pages. Once the correct page is found and clicked on, the site will atomically add the URL into our URL field.

Clicking “add link” is the last step and will finalize the hyperlink.

Styling hyperlinks

Under formats > Hyperlinks are a few choices for styling hyperlinks. Below is a brief explanation of each.

Overline
Makes the text all capital letters and bold.
Example: Overline

External
Adds an arrow to the end of the link, indicating to the user that they will be taken to an external site.
Example: External

PDF
Indicates that the link will lead to a PDF.
Example: PDF

Card CTA
This style only works inside the card component and adds a visual button to the text. This makes it appear more visually clear that the card is clickable. The text is underlined with an arrow indicating that it’s a link.

Buttons

Hyperlinks also have the ability to be styled as a button. This can be achieved by highlighting the link and selecting one of the button options under Formats > Buttons.

Standard
The standard button options will create a box around the link like a standard button.
Examples:  Blue   Yellow   Black

Ghost
The ghost option acts like a button, it simply won’t have the box outline around the link.
Examples: Blue   Yellow   Black

Contrast
When choosing a color it’s important to ensure there is enough contrast so buttons can clearly be seen and read. If we’re adding a button to a blue background area, it’s recommended to make the button white. If adding a button to a gray background, make our button black etc.