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
Last modified 1yr ago
Copy link