How to

Style Guide

Colour swatch

Key Colours

#ffffff
#00000
#f1ad0f
#8c7853
#c0c0c0

 

Headings

H1 Maven Pro 84px

H2 Alfa Slab one 56px

H3 Maven Pro 20px

Paragraph – Raleway 16px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut placerat orci nulla pellentesque dignissim enim sit amet venenatis. Felis eget velit aliquet sagittis id consectetur purus. Pretium fusce id velit ut tortor pretium viverra suspendisse. Sed augue lacus viverra vitae congue eu consequat. Id donec ultrices tincidunt arcu. Molestie ac feugiat sed lectus vestibulum mattis.

Buttons

Head On Button

GeneratePress Page Headers

Wordpress > Dashboard > Page Headers

Content

The ‘Big Head’ Page Header Content is display using Template Tags


{{post_title}}

{{custom_field.page_header_slug}}

{{custom_field.page_header_body}}   {{custom_field.page_header_label}}   button url: {{custom_field.page_header_label}}

The {{post_title}} pulls the post title of the page.
The {{custom_field.term}} is drawn from the custom fields on the page.
Change the custom field value to update the header content.

The Content container is resized and positioned left using Additional CSS.

Featured Image

The Page Header uses the Featured Image of the page.
Additional CSS is used to scale the image based on the viewport height. And reposition it depending on screen size.

Merged with Header

The Page Header is set to Merged with Header.
This can be changed within the Page Header > Advanced

One Header many pages

Using these features means a single header can be customised for each new page.

GeneratePress Sections – ‘blocks’

Blocks have different styles.
Each style is assigned by a Custom Class.
They are added to the Section > Settings > Custom Classes.

The grid

The grid is comprised of 33% wide sections.
This requires the additional section-flex-33 class.
Each block style has various sizes for each break point.
Blocks will automatically fill empty space. They can vary in size if space permits.
This is noticeable if a full width section is placed after a header-block.
Also when the final row has less than 3 blocks.

Custom Class
heading-block 100% 33% 33%
text-block 100% 66% 33%
image-block 100% 33% 33%
list-block 100% 66% 33%
form-block 100% 100% 33%
video-block 100% 100% 100%

fig. block % width based on break point

For a full width Section, as per this Section and the video section at the foot, don’t apply the section-flex-33 selector.

Video Section

The video player works with YouTube only. You can add your own player if you wish.
This is a full width section and contains a simple closed div.
It requires a class of youtube-player
And a data-id which is the final string in your YouTube URL.

H1 Heading block

heading-block

I am left aligned on desktop and tablet.
I am centered on mobile.

[contact-form-7 id=”408″ title=”Head on contact form”]

form-block

I contain a Contact Form 7 shortcode.
WordPress Dashboard > Contact

image-block

Section Settings:
Background image uploaded
Background color set
Background color overlay enabled
CSS sets the image size to 50vw.
That is 50% of the viewport width.

list-block

I am H2

  • an unordered list
  • bullets removed
  • they look naff
  • left margin corrected

I am a H3

I just contain simple text and a couple of HTML tags

image-block

Useful Links

Documentation.

image-block

Colours

Colours are set in

  • Customiser > Colors
  • Page Headers
  • Sections
  • Additional CSS
  • Inline Styles

Button border

Set in Additional CSS


Ready to Get Started?

Try Out a Free Intro Class!