Web Styleguide


Traditionally, headings are used in the print world to break text into digestible pieces of information, helping the reader to focus in on information that may be of interest to them. On the web, headings are used in the same way, however, when we talk about headings online, we are talking about HTML tags. HTML tags range from Heading 1 <h1> through to Heading 6 <h6> and can be found in your visual editor here:

The appearance of headings on your site will depend on the theme you are using and can look quite different from site to site. Headings on our site display like this:

H1 is reserved for the page title

H2 is your primary section heading

H3 is your second-level sub-heading

H4 is a third-level sub-heading

H5 is a fourth-level sub-heading

H6 is a (rarely used) fifth-level sub-heading

Headings Are Signposts to Your Content

As you may already be aware, most of your site users won’t be reading every single word in your post. In fact, the majority of people only scan a webpage. If they catch a phrase or sentence they like the look of, they carry on reading, otherwise, they will continue scanning down the page before exiting.

Headings help to break the content into helpful junks; pointing the reader in the direction of content that may be interesting or helpful to them. Rather than write paragraph after paragraph of content that may overwhelm your reader, we recommend using brief headings, with one or two keywords.

For those of you who are interested in how users read content, you might like to check out these posts by Nick Babich, on the Z shaped and F shaped reading patterns.

Headings & Search Engines

First and foremost, we feel it’s important to say that you should be writing interesting and high-quality content for your readers, not with the sole purpose of search engine optimization in mind. Don’t be obsessive about writing SEO only text, stuffed with keywords — make sure it’s for the visitor and not just Google!

However, it is worth pointing out that when a search engine scans your page, clear and logical headings get you extra SEO brownie points. As you progress down the heading sizes, the less importance a search engine places on that heading. And although headings range from H1 through to H6, you’ll probably only need the first four in most cases.

Text Styles

As we mentioned above, consistency is key. It may feel tempting to go wild, choosing lots of different text styles and multiple colors, but simplicity is often better. Stick to a few styles and keep it simple. It’s amazing how much more professional your pages will look if there is an underlying pattern.

Important Styling Tips

We’ve put together some quick tips to bear in mind when adding text to your posts or pages:

  • Use Unordered or Ordered lists for lists that are relatively short. Resist the temptation to use them for paragraphs — instead, use the Heading styles.
  • Bold and Italic should be used in moderation. Do not use bold as a substitute for heading styles — bold is not particularly important to a search engine.
  • You may want to select the blockquote button when adding a quotation — it helps the quotation stand out from the rest of the text on the page.
  • Keep text left aligned. You’ll rarely need to center align text.
  • Most themes will highlight links in a different color and with hover properties.


WordPress & Divi do a good job of working with different size images. This version of the website (2018) inherited a number of images from the previous design. Not everything is sized consistently. Nevertheless some best practices are worth noting. Some image placements use a 16:9 aspect ratio; some use a 4:3 aspect ratio. In our experience, it is good to import all images at 1800×1200 px (3:2 aspect ratio). 3:2 images will generally crop gracefully in either direction. A consistent size helps when images are placed side-by-side in columns.

Optimizing Your Images

Images can be cropped and resized in Photoshop (or equivalent software) before being uploaded to your WordPress site. 1800×1200 px is large enough to fill most screens, but is not so large as to slow down page loading. Photographs should be saved as JPGs to reduce file size. Graphics should be saved as either SVG or PNG.


Color Palette

To maintain brand consistency, it is advisable to stick to the colors defined in the color palette below.

Bamboo Colors

Good Luck with your New Site!

From our experience, I hope to have touched upon some of the areas most new site owners seem to struggle with when visually maintaining their new website and provide you with some quick and simple tips to help you get started.

SharePoint Online

The cloud parts are functional components that extend your SharePoint Online environment in Microsoft 365.

Supports Classic and Modern sites for SharePoint Online/Microsoft 365


Top SharePoint Online Products

Experience greater power and savings by bundling our SharePoint apps and cloud parts.

Calendar Plus

Chart Plus

Knowledge Base

Project Management Central

Simple List Search


On-Premises Only

These web parts extend SharePoint beyond its out-of-the-box capabilities by tailoring it to your requirements with Bamboo Solution’s growing portfolio of SharePoint Web Parts.

SharePoint 2013, 2016, 2019, 2022 - Classic Pages Only


Top On-Premises Only Products

Experience greater power and savings by bundling our SharePoint apps and web parts.

Calendar Plus

Data Viewer

Password Change

Password Expiration

Password Reset


Our team of Microsoft 365 experts help you get the most out of your Microsoft technology, we have the best Microsoft 365 talent to streamline your organization.

Streamline Your Department

We Have What You Need

Bamboo Solutions



Bamboo Installer