We’ve had a lot of requests for Extra specific freebies and today we’re finally providing one. I’m excited to announce that in today’s post we’re giving away an Extra Category Layout (along with the necessary demo content) for a news website like The New York Times, Washington Post, or other large, high volume news website.
This layout is not a full site design, but it is the perfect starting point for anyone wanting to fine tune their homepage for a high volume content site. And because it’s quite different from our typical Divi Layouts I’ll be walking you through a different process for setting it up.
Let’s get into it!
What’s Included in The News Layout Pack for Extra
The download file extra-news-layout.zip comes with six different files inside:
- 1-news-layouts-theme-options.json – Extra Theme Options settings to match the settings in the images below.
- 2-the-news-layout-logo.png – The News Layout logo as a placeholder logo.
- 3-news-layout-customizer-settings.json – The Extra Theme Customizer Settings I used to create this design.
- 4-news-layout-demo-content.xml – 72 blog posts of demo content.
- 5-demo-content-featured-images.zip – The featured images for each demo post.
- 6-the-news-layout.json – The Extra Category Layout itself.
Downloading The News Category Layout Pack
To gain access to the download you will need to subscribe to our Divi Daily email list using the form below. This will give you access to the News Category Layout Pack as well as providing you with an ongoing source of new (and free) Divi resources, tips, tricks, and news.
If you’re already on the list, simply enter your email address below and click download. You will not be subscribed twice.
Download The Layout Pack
Step 1: Unzip Your New Download
The first step in getting your new category layout up and running on Extra is to locate the zipped file you just downloaded in your downloads folder and unzip it. Once it’s unzipped you’ll see the six files we went over above. We can now begin adding those to your WordPress install running Extra. For best results I recommend following the order I’ve outlined below.
Step 2: Import The Theme Options
Navigate in your WordPress Admin to Extra > Theme Options and click on the import/export icon.
Next, select the import tab. Check the box next to “Download backup before importing”. This will ensure that when you import the new theme options file your old theme options (which will be overwritten) will not be lost. You’ll be able to restore them by importing that backup download.
Ok, now that you’ve done the responsible thing and selected the backup option, it’s safe to choose the news theme options file from the news layout pack in your downloads folder. Choose the 1-news-layouts-theme-options.json file and then click the blue “Import Extra Theme Options” button.
When the import is finished click the green “Save Changes” button at the top of the Theme Options page. This should result in two things: the news layout logo being imported and the custom css for the footer background color being imported. If the logo does not appear for some reason, I’ve included the png image as 2-the-news-layout-logo.png in the download so you can add it manually.
Step 3: Import The Customizer Settings
Now we can move on to the customizer settings. The customizer settings will set the background color to white, set the typography options, and add settings for the top navigation as well as the bottom bar.
Just as with the Theme Options above, importing new Customizer Settings will override your existing settings. It’s always a good idea to create a backup of your current settings using the “Download backup before importing” checkbox.
To import the news layout’s customizer settings navigate in your WordPress admin to Extra > Theme Customizer. Click on the import/export icon in the top left corner.
Select the import tab and check the backup box. Then, click the choose file button and select the 3-news-layout-customizer-settings.json file from your downloads folder.
When the import is complete be sure to click the blue “Save Changes” button.
Step 4: Import The Demo Content
Ok, so now that our general settings are out of the way we can move onto the heavy lifting. Importing our content. Navigate in your WordPress admin to Tools > Import. If you’ve never used this feature before, you’ll want to click “Install Now” under the WordPress option. Once the WordPress importer is installed, click the “Run Importer” link.
Next click the “Choose File” button and select the file from your downloads folder called 4-news-layout-demo-content.xml. Click the blue “Upload file and import” button.
You’ll be given the option to set a new author up as well as choose to download and import the file attachments. At the very least I’d recommend checking the download and import file attachments option so that any post with images inside it will retain those images.
When the import is complete, navigate to Posts > All Posts. You should have 72 new pieces of demo content.
Step 5: Set Your Featured Images
Ok, so this is the one tedious part of this process. For some reason when exporting blog posts WordPress does not attach the featured images. There are some plugins out there for this but I couldn’t get any of them to work. Most are outdated and the others (at least for this content) didn’t work as advertised. Hopefully we can figure this out in the near future to make giving you all demo content with these category layouts much easier.
Until then, here is what you’ll have to do: Open every new post and manually add the corresponding featured image. I’ve tried to make this as easy as possible by including a zipped folder of all the images, organized by category.
I would recommend doing the following:
First, unzip the zipped folder called 5-demo-content-featured-images.zip. You’ll notice that each category has it’s own folder.
In Posts > All use the filter feature to select each category.
Click the “edit” link under each post title and add the corresponding featured image. The featured image meta box is located in the right hand column of the post editor screen.
This will take a bit of time to do for each of these posts. However, it will still be much faster than creating 72 posts from scratch.
Step 6: Import The News Layout to Your Divi Library
Ok, whew, the hard part is done. The easy and satisfying parts are all we have left!
It’s time to import the News Category Layout. In your WordPress admin navigate to Extra > Divi Library. Click the “Import & Export” button at the top of the page.
Select the import tab and click the “choose file” button. Select the 6-the-news-layout.json file from your downloads folder. Click the blue “Import Divi Builder Layouts” button.
When the import is done you should now see a category layout in your library called “The News Layout”.
Step 7: Set Your Homepage to the News Category Layout
Finally, navigate in your WordPress admin to Extra > Category Builder. Click the “edit” button underneath The News Layout.
In the right hand column of the page you will see a meta box called “Layout Usage”. Make sure the check box next to “Use this layout as the home layout” is ticked and click “Update”.
If you now navigate to your home page it should look like the example screenshot below!
The only thing that might be off is the email opt-in form. I’ve included a shortcode for a Bloom opt-in form in the top right corner of the Category Layout. If you want that to show up you’ll need to make sure you have Bloom installed. If you are not using Bloom you can simply swap in a form from whatever tool you’re using.
The News Layout for Extra
As you can see, The News Layout is the perfect starting point for a high volume news website. One of the hardest things about fine tuning a design for a large content site–especailly one that hasn’t launched yet–is lack of content! This layout pack and the demo content it includes solves that problem. Once you have all of your content in place and the news layout loaded, you can tweak the design to meet your specific needs.
What Other Extra Category Layouts Are You Interested In?
I really enjoyed creating this layout and I’d like to do even more for the community. As a blogger, Extra has a soft spot in my heart and I’ve really enjoyed working with it. So let me know in the comments what other types of category layouts you’d like to see and I’ll get to work on them!
Also, be sure to subscribe to our email newsletter and so that you never miss a big announcement, useful tip, or Divi freebie!