News Posts Training UI
News Page
Adjusting the Post page in Theme Builder
The post page is the page that contains the full article. This is styled in the Theme Builder.
- In the WP Dashboard, go to Divi > Theme Builder.
- Once in the Theme Builder, there should be box labled “All Posts”. If its not there, it will need to be added.
- On the box labled “All Posts” click on the pencil icon for “Custom Body”
- Leave all the dynamic text as is.
- In the header, add the same image that is used for the News page.
- In the sidebar, add the same image that is used for the News page. No other content needs to be included in the sidebar.
- Save changes and exit.
Adding the Blog Module on the News Page
- While on the News page, enable the Visual Builder
- Click on the + to add a module
- Select the ‘Blog’ module
- Follow the instructions in the two toggles below for “Blog Settings” and for the “Moving Arrow”
Blog Settings | The 'Content' Tab
These are the typical settings and may need to be adjusted for each site.
Content
| Post Type | Posts |
| Post Count | 10 |
| Included Catetories | All Categories Current Category News Uncategorized |
| Date Format | (prompt text) |
| Content Length | Show Excerpt |
| Use Post Excerpts | Yes |
| Excerpt Length | (prompt text) |
| Post Offset Number | (prompt text) |
Elements
| Show Featured Image | No |
| Show Read More Button | No |
| Show Author | No |
| Show Date | No |
| Show Categories | No |
| Show Comment Count | No |
| Show Excerpt | Yes |
| Show Pagination | Yes |
The rest of the styles in the ‘Content’ tab are not changed.
Blog Settings | The 'Design' Tab
These are the typical settings and may need to be adjusted for each site.
Layout
| Layout | Fullwidth |
Overlay
| Featured Image Overlay | OFF |
Image
Add styles if images are enabled.
Text
| Text Alignment | Left aligned |
| Text Color | Dark |
| Text Shadow |
Title Text
| Title Heading Level | H2 |
| Title Font | Default |
| Title Font Weight | Regular |
| Title Font Style | |
| Title Text Alignment | |
| Title Text Color | Adjust if needed |
| Title Text Size | Adjust if needed |
| Title Letter Spacing | (prompt text) |
| Title Line Height | (prompt text) |
| Text Shadow |
Body Text
| Body Text | Left aligned |
| Body Font | Default |
| Body Font Weight | Regular |
| Body Font Style | |
| Body Text Alignment | |
| Body Text Color | Adjust if needed |
| Body Text Size | (prompt text) |
| Body Letter Spacing | (prompt text) |
| Body Line Height | (prompt text) |
| Body Text Shadow |
The rest of the items are typically left as is.
"Moving Arrow" after the News Article Title
The styles for the arrow that moves on hover should be found in the main css. Adjust the styles as needed for the site.
/***** NEWS PAGE ARTICLE HOVER *****/
article h2.entry-title a:after {
content: ‘\f061’;
font-family: ‘FontAwesome’;
font-size: 1.2rem;
margin-left: 5px;
transition: .5s all;
}
article h2.entry-title a:hover:after, article h2.entry-title a:focus:after {
margin-left: 10px;
color: var(–secondary-color);
}
Homepage News
Adding a Post Slider Module for the News on the Homepage
- While on the homepage, enable the Visual Builder
- Click on the + to add a module
- Select the ‘Post Slider’ module
Post Slider Settings | The 'Content' Tab
These are the typical settings and may need to be adjusted for each site.
Content
| Post Count | 5 |
| Included Catetories | All Categories Current Category News Uncategorized |
| Order by | Date: new to old |
| Content Display | Show Excerpt |
| Use Post Excerpts | Yes |
| Excerpt Length | (prompt text) |
| Offset Number | (prompt text) |
Elements
| Show Arrows | No |
| Show Controls | Yes |
| Show Read More Button | No |
| Show Post Meta | No |
The rest of the styles in the ‘Content’ tab are not changed.
Post Slider Settings | The 'Design' Tab
These are the typical settings and may need to be adjusted for each site.
Overlay
| Use Background Overlay | No |
| Use Text Overlay | No |
Navigation
| Arrow Color | (not used) |
| Dot Navigation Color | Adjust as needed The padding may need to be adjusted in the custom css under the ‘Advanced’ tab. The dots will only display if there are 2+ articles. |
Image
Add styles if images are enabled.
Text
| Text Alignment | Left aligned |
| Text Color | Dark |
| Text Shadow |
Title Text
| Title Heading Level | H2 |
| Title Font | Default |
| Title Font Weight | Regular |
| Title Font Style | |
| Title Text Alignment | |
| Title Text Color | Adjust if needed |
| Title Text Size | Adjust if needed |
| Title Letter Spacing | (prompt text) |
| Title Line Height | (prompt text) |
| Text Shadow |
Body Text
| Body Text | Left aligned |
| Body Font | Default |
| Body Font Weight | Regular |
| Body Font Style | |
| Body Text Alignment | |
| Body Text Color | Adjust if needed |
| Body Text Size | Adjust if needed |
| Body Letter Spacing | (prompt text) |
| Body Line Height | (prompt text) |
| Body Text Shadow |
The rest of the items are typically left as is.
Adjusting the Position of the Navigation Dots
- With the ‘Post Slider’ module open, go to the ‘Custom CSS’ under the ‘Advanced’ tab.
- There is likely to be some css in there that sets the padding to ‘0’. If the navigation dots are laying on the text body, then change the padding to ‘padding: 0 0 20px 0’