***Keep in mind, if you see dark banner images on pages it is possible that they have not been re-saved after the most recent WordPress 5.2 update. The banner images in the cover block had an opacity change of 10 or higher to all of them and they all need to be re-saved at 0. The banner images should not have this issue after being saved again at zero opacity but it is best practice to check when already editing a page.

General Style Notes:

Overall Color Codes:

-Top banner, parallax, with white standard ‘heading’ setting (populates as ‘Josefin’) text at 55px, centered , which has the title of the page, and may also have a call to action/message below (same settings, just lowercase; each word capitalized)

-Use the singular “row” block with an image background set to full width and parallax-adjust length according to how much text should be centered to be seen on page.

Large Paragraph Text 28px21pt with #484848 (gray) color settings (Metta Earth is a cultural renewal project integrating contemplative practice, …

– Large text on many, but not all pages is centered. Large paragraph text is Montserrat globally but should be set at 28px21pt

*No headers below banners on some pages– see Home pages for each section and MEC Land Design as examples of this.

***Keep in mind that all global headers and paragraph blocks are still auto transforming from Josefin Sans to Montserrat when linked out. Even using an advanced header or paragraph block and even force changing the typography font family setting to Josefin Sans. For now it’s best to use buttons for a CTA or link out paragraph text since the auto transform is Montserrat.

-Next header/title size for page areas would be H3 globally (can be used for poem titles as well) unless there is multiple sections such as the W E L L page. Then we use H2 global header in sections to break the page up.

-Third header/title size is H5 globally. See lower sections on the Metta Retreats page as an example of using this header.

This is a global H5 header

-Fourth text size is paragraph text as you see here, global setting-Montserrat 16px 12pt

-Misc Paragraph text used in various sizes include, top page paragraphs and lyrical text sections. The lyrical text below is for quotes or poems, especially like the Earth Charter preamble on ME Home and other things we choose to highlight in this way. This is auto paragraph text that is now showing as Montserrat.

ME pages should use #a6a87e and MEC pages use #b4962f instead so it’s easier to read

-Space between page titles and 1st area of the page should be set at 30 instead of the auto 50

-Thin line to break up sections that are not obvious, using the corresponding entity color

-Paragraph, centered, text is fine for most pages, see pages like Metta Retreats that have sections left justified.

-Videos on pages should be set in a 3 row block with 15% blank padding on each side-middle row at 70%-see example on Sense of Place page.

-Don’t use white banner text on any home pages within entity sections.

-Lyrical text is fine…sizing for some other places on the site may be different

Spacers Above Are Standard 50px spacers that can be added from the library or copied from this sheet

Spacer Below Is For Custom Spacing Between Headers and Paragraph Text

All pages will need to have the layout formatted to have a Top Banner and Styled text below.  Each page can also have a Page Banner and/or a Gallery with 3 photos. Mostly text is centered, but for some contrast, some sections of text can be left justified. Use global H1, H2, H3, H5 as appropriate.

Multi Testimonial Block

Single Testimonial Block

Single Testimonial Block with Photo

Global Settings For Headings Below with details of sizing with custom headers directly underneath each header.

This is an H1 Advanced Header

This is a custom Advanced Header 55px

This is an H2 Advanced Header

This is a custom Advanced Header 44px

This is an H3 Advanced Header

This is a custom Advanced Header 35px

This is an H4 Advanced Header

This is a custom Advanced Header 22px

This is an H5 Advanced Header

This is a custom Advanced Header 20px

This is an H6 Advanced Header

This is a custom Advanced Header 16px

Below is an example of how we could create custom entity color stamps for the logo.

Options for Newsletter Sign Up Banners (First One is in use now)

Subscribe to Metta Earth!

Email(required)

Subscribe