The Grid – Posts component showcases all the news articles available within the system, with pagination settings controlled by WordPress’ Settings > Reading section. This component relies on the WordPress loop and must be added to the page configured as the ‘Posts page’ via Appearance > Customize > Homepage Settings.
This component provides a range of configuration options, divided into the following categories:
| Settings |
This section contains general settings common across all components within the system:
- Hide on Mobile/Tablet/Desktop: Pick whether to hide, or show this component independently on mobile, tablet, and desktop resolutions via a set of three checkboxes.
- Desktop/Mobile Padding: Adjust the top and bottom padding for both desktop and mobile views.
- Section Background Colour: Select a background colour from a pre-configured list of brand colours.
- Section Width: Set the width of the component.
|
| Animation |
Administrators can select from seven different entrance animation options for the grid:
- None
- Slide in from the top
- Slide in from the bottom
- Slide in from the left
- Slide in from the right
- Fade in
- Grow in
|
| Pod Styling |
This section allows administrators to customise the appearance of each news post pod:
- Pods Per Row: Choose how many news pods are displayed per row.
- Pod Style: Select the style for rendering news pods within the grid. Available styles include: ‘Full width image above content’, ‘Simple – no image’, and ‘Background image behind content’.
- Pod Background Colour: Choose the background colour for each pod, which may differ from the overall component’s background. Option values are based on a pre-configured list of brand colours.
- Supporting Info Colour: Set the text colour for article details, such as the publication date and news category. Option values are based on a pre-configured list of brand colours.
- Supporting Info Separator Colour: Set the colour for the separator character between the article publish date and news category. Option values are based on a pre-configured list of brand colours.
- Supporting Info Separator Content: Choose the separator character (default is a pipe ‘|’) to be placed between the publish date and news category.
- Title Colour: Set the text colour for the news article titles. Option values are based on a pre-configured list of brand colours.
- Title Style: Select the heading size for the title, with options ranging from Heading 1 to Small Paragraph.
- Text Colour: Choose the colour for the main content of each news post. Option values are based on a pre-configured list of brand colours.
- Button Colour: Set the colour for the ‘Read More’ button. Option values are based on a pre-configured list of brand colours.
- Button Style: Choose the style for the ‘Read More’ button, with options including: Solid, Outline, Outline with slide animation, Underline, and Underline Pulse Animation.
- Read More Label: Set the text for the ‘Read More’ link at the bottom of each news pod, which directs users to the full news article. The default label is ‘Read More’.
|
You can view examples of the Grid – Posts component in various styles and animations here.
