Learn To Target Specific Pages, Posts, And More In Divi With CSS!
As a web designer or someone building your own website, you will probably come to a point where you need to target one individual page with CSS. Or, you may want to target just the blog posts, or just a custom post type. It can be very confusing to know how to target just those pages or posts without affecting the rest of your website. In this tutorial, I’ll show you how to target a specific page or post in Divi with CSS, and also show how this same method can be used for post types in general.
▶️ Please watch the video above to get all the exciting details! 👆
1. Target Individual Pages or Posts With CSS
The best way to target a specific page with CSS in Divi is to first find the ID of the page. This can be found in several ways.
A. Find Page ID From the “Edit Page” slug
The simplest way to find the CSS class of the page you want to target is to find the page ID in the slug of the page editor. This is super easy to find. Just go to the page you want to target, edit the page, and look in the address bar for something like this: https://yourdomain.com/wp-admin/post.php?post=291&action=edit
Do you see any numbers? That’s right! The page ID that you need for your CSS is right there, 291.
So how would this be used? The number gets added to the CSS selector of “.page-id-“ and becomes “.page-id-291”
So an example would be like this:
.page-id-291 {
background: red;
}Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
Now this page is the only page on your website that will have the background color of red applied to it. This can be very handy for targeting more specific elements on your page like the header or menu item.
NOTE: For blog posts, it will be very similar, but the CSS selector will be “postid-“ instead, so for example “.postid-52”
B. Find Page ID Using the browser’s Inspect tool
This other method is for those how are familiar with the browser inspect tool. When you right-click on your website, you will see something like “inspect” or “inspect element.” Click on that and look for a button in the new, scary-looking code popout that looks like a mouse pointer. Select that pointer and click something on the page. Then, in the code popout, look for something near the top that starts with this:
<body class=”page-template-default page page-id-291 etc. etc.
Did you notice it? There it is, the “.page-id-291” that we need to target this Divi page with CSS. You can apply your CSS the same way as in the previous example.
Again, this is the same for blog posts. Just look for the “postid” on in the code.
2. Target Specific Page Types or Post Types With CSS
Next, I’m going to show you how to target a specific post type, such as blog posts, so that your code applies to all of them on your site. For this, you will need to be comfortable using the “inspect” tool in your browser, but if not, I’ll give you a few common ones that are found in Divi.
Pages = “.page”
Blog posts = “.single .single-post”
Projects = “.single .single-project”
WooCommerce Product = “.single .single-product”
To see how we found these, please refer to the included video tutorial at the top of this post (also available on our YouTube Channel).
0 Comments