How to Use Website Templates
- Catherine Foss (Unlicensed)
View current templates here: CDA.org Webpage Templates
Our website templates were designed to:
Increase consistency across pages
Reduce page design time
Help users understand where to find common types of information
This is an overview of how to use templates when creating or modifying a webpage.
1. Create a new page (if needed)
Information on how: Adding New Pages
2. Select appropriate page template
Primary (level 1): Campaign pages or major section landing pages (CDA Presents landing page)
Secondary (level 2): A topic or catalog page (Resource Library, newsroom category)
Tertiary (level 3): A more text-heavy page such as a details page, individual article or resource, or FAQ page
Regardless of page level, all pages should have certain content sections in the following order:
Header
Intro text, if needed
Primary page content
Supporting content
Footer content like FAQs, contact info, and legal or disclaimer information
Example above of how to structure a primary page.
3. Add Modules to Page
Information on how: Adding 2sxc Content Components to Pages
4. Configure Modules
Select a header
Select a page header for the selected template. Each page must have 1 header and no more. Options are here: Headers
Example below: A header for a primary/level 1 page
Create Section 1
After the header, select the content components. Your first priority content will always go in Section 1. Options for this are outlined below.
Primary (Level 1) Content Components
Secondary (Level 2) Content Components
Tertiary (Level 3) Content Components
Example below: Section 1 for a primary page
Add a CTA (Call to Action)
If your page has a CTA, place this directly following Section 1 of your page.
Add Additional Sections
After the first section, additional sections leave more room for creativity and will depend on the content you are presenting. Do not add additional headers or footer components in this space.
Final Section: Footer Components
The following sections should be placed last on your page:
Footer news component
Contact info
Notes
Disclaimer
Example of footer components.