Layouts

Layouts

When adding new pages, posts, and projects - use a template from the ‘Your Saved Layouts’ tab or copy an existing page in the ‘Your Existing Page’ tab. This way the baseline OFN styles will be set up as a starting point.

1. Use the purple button ‘Use Divi Builder’ Sometimes it takes a little time to load… be patient :)
2. For a new page this modal will load. Select the middle option ‘Choose a premade layout’
3. By default the Divi Premade Layouts are displayed first. Use the tabs in the purple bar to navigate to the OFN ones in the Your Saved Layouts tab.
4. ‘Your Saved Layouts’ tab has 3 options to select from. [layout] Blog Post should only be used for News. [layout] Resource can be used for Case Studies, Models, Research, Resources which DO NOT have a feature image to highlight. [layout] Resource with Feature Image can be used for the same as above, but will have a feature image presented above the text.
[layout] Blog Post [layout] Resource [layout] Resource with Feature Image
5. ‘Your Existing Pages’ tab has all pages currently being used in the website. You can select any page to ‘copy’. This screenshot shows ‘Pages’ selected in the left hand column filter

If you’ve already started a page, and want to insert a premade OFN layout - this is what’s currently been built for the Library:

[section] Standard Page Gradient Banner
[section] Standard Page Photo Banner
[section] Quote Banner
[section] Latest Resources
[section] Testimonial

Global layouts

A global layout means the content + UI styling is shared where ever it is used on your site.

If you change ANYTHING in these layouts - it will change the content + UI styling EVERYWHERE in the site - so be mindful of making any changes.

In the library list they have a green globe icon
And in any ‘page/post/project’ you’re editing they will be highlighted green (green border, green edit icons)

There are currently 4 global modules in the library:

[section] Major Funders
[section] Join Us Banner
[section] Feature list - large icons
[section] Feature list - small icons
[section] Footer
[section] Security Message