With these preset visual editor styles, the need to manually enter font sizes, colors, etc. should go away.
The use of manually selected font sizes, colors, etc. is not recommended as it typically leads to complexity, potential for inconsistent styling, and difficulty in management (since having all of the styles centralized in the theme allows for one update to affect all elements site-wide.) This styleguide may not take all conditions into account, but this should show the essential elements & widgets used throughout the site.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading 1 with bolded and italicized text added with a link, too.
Heading 2 with bolded and italicized text added with a link, too.
Heading 3 with bolded and italicized text added with a link, too.
Heading 4 with bolded and italicized text added with a link, too.
Heading 5 with bolded and italicized text added with a link, too.
Heading 6 with bolded and italicized text added with a link, too.
Paragraph of text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel placerat elit. Aenean vel est dictum, tristique felis at, auctor nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam tincidunt erat vestibulum porttitor volutpat. Suspendisse vehicula urna ante, eu dictum nisl vestibulum ac. Aenean elementum, elit in tincidunt vulputate, orci sem posuere sem, et tincidunt tellus neque sit amet nisi. Ut eu finibus quam. Integer diam justo, facilisis sit amet tempor quis, dignissim ac tortor. Nam justo augue, pulvinar eget orci eget, consequat feugiat mi.
Quotes
Here’s a quote.
This can have paragraphs shown within it.
– Some Person
Links within text can look like this.
Inline Media
Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis strong dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
Native Video Player
External Video Player (YouTube)
Lists
Lists can be
- Bulleted/unordered
- like
- this
Or…
- Numbered/ordered
- like
- this
Or
- Definition Lists
- As seen here
- Definition Term Title 2
- Definition term description
- Definition Term Title 3
- Definition term description
Forms
Tables
Tables should only be used for showing tabular data, but they look like this:
Example 1 | Table Header 1 | Table Header 2 | Table Header 3 | Table Header 4 | Table Header 5 | Table Header 6 |
---|---|---|---|---|---|---|
First Entry | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Link |
Second Entry | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Link |
Third Entry | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Link |
Fourth Entry | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Link |
Fifth Entry | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Link |
Sixth Entry | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Link |
Seventh Entry | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Link |
Eighth Entry | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Link |
Ninth Entry | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Link |
Tenth Entry | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Link |
Eleventh Entry | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Link |
Twelfth Entry | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Link |
Here’s a table with the default styling & interactivity disabled:
Example 2 | Table Header 1 | Table Header 2 | Table Header 3 | Table Header 4 | Table Header 5 | Table Header 6 |
---|---|---|---|---|---|---|
First Entry | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Link |
Second Entry | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Link |
Third Entry | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Link |
Fourth Entry | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Link |
Fifth Entry | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Link |
Sixth Entry | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Link |
Seventh Entry | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Link |
Eighth Entry | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Link |
Ninth Entry | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Link |
Tenth Entry | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Link |
Eleventh Entry | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Link |
Twelfth Entry | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Link |
Note: Setting whether a row is a heading (via row properties) and which cells are headings (via cell properties) can be important for accessibility, informs the styling of the table elements, and also allows the table to be mobile responsive.