2. Web Hosting & Domain
3. Install WordPress
4. Choose Your Theme
5. Get To Know WordPress
6. Design With Divi Builder
7. Divi Theme Builder Templates
8. Import & Export Layouts
9. Checklist: After Launch
10. Let's Celebrate!
You are a star!
6.8 Design a News Page / Blog With Divi
- Your progress:
This news page is designed to dynamically display all the posts on your website. This setup can easily be used for a blog as well. Below the hero area, you’ll find a sidebar to the right that includes a search field, links to post categories, and links to your social media profiles. In the middle of the page, there’s a list of your blog posts, each featuring a prominent image, post title, publish date, linked category, excerpt, and a “Read More” text. The posts are displayed in chronological order, with the latest ones at the top. If you wish to see older posts, you can simply click on the pagination.
To get started, we’ll reuse some design settings that were used on the homepage’s blog grid, a setting for the blog module in Divi. Let’s enable the visual builder, edit the blog post module, and apply the styles to the active presets to save the design settings we created, including fonts and styling, as the default design. This way, when we go to the news page and add a blog post module, it will already have the correct fonts and styling.
Next, let’s create the news page. Rather than building it from scratch, we’ll clone an existing page to save time. You can reuse the hero area from the “About Us” page by cloning it and then making adjustments to the text and background image.
Now, let’s create a new section for your blog post content. Add a regular section with one wide column and one slightly smaller column. Place a blog module in the larger column. Adjust the blog module’s settings to display a full-width layout instead of a grid. Remove any box shadow to achieve a cleaner look. This layout is suitable for a blog or news page.
In the content tab, specify how many blog posts you want to display on the page. You can set it to display, for example, five blog posts. Display the pagination to allow users to navigate to older posts. Customize the pagination text and styling, making sure it fits your design.
Now, let’s create the sidebar. You can create it directly in the Divi builder without relying on WordPress widgets. You can start by adding a search module to enable users to search for articles. You can remove the search button for a more minimalistic design. Specify the content types to include in the search results, excluding pages for a news article search.
Above the search field, add a text module with a heading like “Find More.” Add a divider to separate the sections. Create a heading for categories (e.g., “Categories”) and list your available categories as links. You can style them as a bullet list. Link each category to the respective category page.
Include a social media follow section by adding a text module with a heading like “Follow Us.” Then, add social media icons from your library. Customize their appearance and set the hover effect to change colors or styles as desired. Make sure these icons are easily visible.
To frame the sidebar, go to the row settings for the sidebar column and add a golden border. Adjust the border width and color. Add padding to the column to create spacing.
After making these adjustments, you should have a visually appealing and user-friendly news page with a sidebar that provides easy access to search, categories, and social media profiles.
Finally, remember to check the layout on different devices to ensure that it’s responsive and looks good on various screen sizes. You can further customize and expand on this design for category pages and search result pages in Divi’s theme builder.
All links, files and code snippets mentioned in the chapter is available below.
This is a free course about how to design a website with WordPress and Divi. The course is funded by affiliate links. If you purchase something from these links, we'll receive a commission but it will never cost more for you. Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes or SiteGround. DiviMundo is 100% independent. We only promote services that we like and use ourselves on a daily basis.
Feel free to ask questions and leave feedback on the tutorial here.