This is the Styles Page H1 Header
This is the H1 supportive text and lives in the Hero section.
The top margin should be set individually for each of these on the page so that we can place it to be read most easily. Please use the vh measurement.
General Styles
This is an H1 Header
This is an H2 Header
This is an H3 Header
This is an H4 Header
This is an H5 Header
This is an H6 Header
(poor thing, we’ll probably never use it)
This is paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is bold paragraph text ipsum dolor sit amet, consectetur adipiscing elit. Nam finibus odio et nulla commodo, ac gravida neque luctus. Praesent fermentum, ex quis tempor aliquet, ante tellus pellentesque nisi, a scelerisque risus sapien ornare velit. This is what a link looks like. Sed vitae diam faucibus, suscipit nulla vel, rhoncus libero. Suspendisse potenti. Nam tempus, purus et molestie condimentum, est velit pellentesque nisi, eget tincidunt diam massa nec ante. Donec sapien diam, sollicitudin ac tellus eget, pharetra consectetur odio. This is another link.
#f3b14a
logo
#51a6df
logo
#333c2e
accent
#3e3e3e
#6a6a6a
#9c9c9c
#c7c7c7
Image Guidelines
Image Sizing
Images work best when they don’t have extreme color contrasts, e.g. completely white whites and completely black blacks or too much detail. Please refer to this guide when selecting an image. If possible choose the image with the least amount of detail (very hard to do with whitewater sites). The image above is 1600×900 and comes in under 180kb, you can see that there are not extreme contrasts in the image and not a TON of detail.
Hero Images: 1600 x 900 – Aspect ratio of 16:9 and below 200k
Featured Images: 600 x 400 – Aspect ratio of 3:2 and below 50k
Guidelines for Image SEO
First, make sure the images look good. Then, you need to make sure they can be easily indexed by search engines by ensuring you name the image file correctly.
Have you ever saved an image as “Photo1.jpg” or “Screen Shot 2019-03-18 at 4.13.42 pm?” This is a big no-no when it comes to the images on your website.
When naming, be consistent and don’t use punctuation or spaces. It’s also best to use hyphens in the name rather than an underscore.
Once the image file name is formatted correctly, don’t forget about the alt text, which also adds SEO value.
Alt text is a short, typically 100-character description of what the image is showing. While this text won’t be visible to site visitors, it gives search engines an idea of what the image is about. This text will also help visually impaired visitors navigate your site with audio-based software.
Choose the right image file type
Unsure which type of image file you should use? Let’s break them down.
- JPGs: This type of file should be used for photographs, as they can handle the colors in a small and efficient file size. When used, you won’t need to worry about having a humongous file, which will help with the loading time of this image.
- PNGs: This type of file should be used for graphics, especially using large or flat areas of color. This includes most designs, infographics, images that are text-heavy, and logos. PNGs also support transparent background (which you’ll want to use for a logo). If you can, save your PNG as a “24-bit” format for better quality and a richer display of color.
This is the last section on a page. If you add “last-section” to the CSS Class field it will give put 3em padding on the bottom.
Sometimes the background of the section is black, if you add “golden-text” to the CSS Class field it will change the section’s text color to “#f3b14a”.