Typography
H1 Watching perfect presentation of peoples portfolios quid pro quo.
H2 Watching perfect presentation of peoples portfolios quid pro quo.
H3 Watching perfect presentation of peoples portfolios quid pro quo.
H4 Watching perfect presentation of peoples portfolios quid pro quo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Key Colours
All colours aside from the following are set within the Customiser, which are set using Additional CSS in the Colours section:
1. CTA Before and After Text (and border) Colours
2. Heading Sections that have the awp-top-overlay class (as seen on Home page overlaying the slider).
3. Background colours to Full Width Sections are added inline.
Buttons
Agency uses a custom CTA button like so.
the CTA button
The markup for this is as follows:
<a class=”button cta” href=”#” data-cta=”the CTA button”>the CTA button</a>
You must ensure the data-cta=”my label” has the same content as the label between the <a> tags.
Logo
The logo is assigned in Layout > Primary Navigation. This is an SVG and requires the pre-installed Safe SVG plugin.
Navigation
The main menu is set to the Slide Out Navigation and appears on all devices.
The Slide out navigation has been customised for desktop to create a full screen overlay. And uses Flexbox to layout the content.
A Blank menu has been assigned to the primary navigation to stop this from displaying.
Slide out Navigation Widgets
Agency uses the new slide out navigation widgets in GP Premium 1.6.
There are currently two of them:
1. HTML Widget for displaying contact details.
2. Lightweight Social Icons plugin
Please note that the 2nd widget has been re-ordered so it appears at the foot of the navigation. This is using the flex order property.
Adding more widgets will create more rows in the navigation and is not advisable. And will require further custom CSS.
Page Headers
{{post_title}}
{{custom_field.headline}}
{{custom_field.byline}}
This field is a Paragraph tag and should not contain other HTML.
{{custom_field.byline_cta}}
The default Page Header is set to all pages in the Page Header > Global Locations.
It is built using template tags. The {{post_title}} is automatically set.
The remainder are defined using custom fields that are set on each page.
Custom Field Name |
Purpose |
|---|---|
| headline | Creates the H1 headline |
| byline | Creates the paragraph text |
| bytline_cta | Creates the button label |
| bytline_cta_url | Creates the button link |
| featured | Use a shortcode to display other content e.g Slider |
Meta Slider
Agency uses the MetaSlider plugin. It can be added to any part of the page or section using the generated shortcodes.
It can also be added to the Page Header full width. Using the pages featuted custom field as noted above.
Page sections with headlines and CTA
H4 Heading
H2 Heading
Must remain a H2 or H1 tag
This is a Paragraph tag and should not contain other HTML Ideally a minimum of three to four lines long.
the label
The easiest way to create this headline is to copy and paste one from the home page or use the following GIST.
There are three options provided. Each of which has its subtly different HTML listed:
1. Agency Section with heading.
For use on standard pages (no page builder container)
2. Agency Section with heading overlay section above.
The same code as one with the additional .awp-top-overlay Class.
Used on the first heading of the home page to overlay the slider.
3. Agency Full Width Section with heading.
For use with Full Width page layouts set using the Page Editor > Layout > Page Builder Container > Full Width.
This page uses the Full Width layout and sections. And a version of the home page can be found here
NOTES:
The tags used in the heading section are important and should not be changed.
They rely on H4, H2, P and A tags in the order outlined. Changing or adding to these may break the styling.
Editing the content is best done on the Text editor to avoid WordPress breaking the HTML.
When editing CTA labels you must also add the label to the data-cta=”the label” in the Text editor.
WP Show Posts
WP Show Posts plugin is used extensively throughout Agency. There are currently four main WPSP Lists created.
WPSP List |
Purpose |
Special Category* |
|---|---|---|
| Portfolio Page | Display all portfolio posts as seen on the Portfolio page | portfolio |
| Portfolio Row | Display three of the latest portfolio posts as seen on the Home page | portfolio |
| Staff | Display all staff posts as seen on the About Us page | staff |
| News single | Display a single News post as seen on the Home Page |
*The special categories of Staff and Portfolio needs to be assigned to each post within that category to create the CTA design displayed.
Footer
The Footer is set to display 2 widget areas.
1. Contact Form 7 which can be edited from the WP Dashboard > Contacts.
2. A HTML Widget for email and phone followed by a Lightweight Social Icons Widget.
Elementor
Although Agency provides you with the HTML, WP Show Posts and Slider Building blocks it is also Page Builder Compatible.
If you really are so inclined to avoid the WordPress Editor then you can find an Elementor template page here.