Style Your Blog Content in Elementor the Right Way
Elementor is amazing for designing WordPress pages, but when it comes to blog posts, there’s a major limitation—you can’t style the content inside the post beyond basic text settings. That means no control over spacing, images, block quotes, bullet lists, or other key elements that shape your blog’s look.
The best way to fix this? CSS.
I’ve created a custom CSS template that I use on all my projects, and I’m sharing it with you for free. With this snippet, you can style your blog content exactly the way you want without breaking your site’s global design.
PS. There’s a video tutorial at the end of this article showing how to edit the CSS in a very easy way for non-coders.
Step 1: Add the Class
Add the class ‘post-content‘ to your Post Content widget. Make sure to watch the video below to ensure you’re adding the class correctly.
Step 2: Add the CSS Template
Copy and paste the CSS template below into your preferred location for adding CSS. I usually add mine in the customizer to see the changes and make adjustments. After I conform the CSS is good, I transfer to my code management plugin. But do what works best for you.
New Updated CSS Template With Variables
***Attention! The template has been updated with variables for an easier editing workflow and applying best CSS practices. This means the template used in the video is different. I’ve created a new video showing how to edit the variables. But just incase you want to template in the video, I’ll leave that below.
CSS Template With Variables
/*----------------------------------------------------------------
Edit The Template Styles Below
----------------------------------------------------------------*/
:root {
/* Edit Link Colors */
--color-link: #1391ff;
--color-link-hover: #06BCC1;
/* Edit Quote */
--color-quote-border: #06BCC1;
--width-quote-border: 3px;
--bg-quote: #F4F8FC;
/* Edit Code */
--color-code-text: #89E3E4;
--bg-code: #0B0515;
/* Edit Spacing */
--space-s: 0.25rem;
--space-m: 0.75rem;
--space-l: 1.25rem;
--space-xl: 2.25rem;
--space-xxl: 2.5rem;
/* Edit Image Border Radius */
--radius-m: 0.75rem;
/* Edit Link Transition */
--transition-default: 0.2s ease-in-out;
/* Edit Typography */
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
--font-size-xs: .85rem;
--font-size-p: 1.15rem;
--mobile-font-size-p: 1.15rem;
--font-size-m: 1.5rem;
--mobile-font-size-m: 1.5rem;
--font-size-l: 2rem;
--mobile-font-size-l: 2rem;
--line-height-body: 1.75em;
--line-height-heading: 1.25em;
--line-height-list: 1.2em;
}
/*----------------------------------------------------------------
End of template style editing, do not edit below
----------------------------------------------------------------*/
/* Headings */
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
padding-top: var(--space-xxl);
padding-bottom: var(--space-s);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-heading);
}
.post-content h2 {
font-size: var(--font-size-l);
}
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
font-size: var(--font-size-m);
}
/* Paragraphs */
.post-content p {
padding-bottom: var(--space-l);
margin-bottom: 0;
line-height: var(--line-height-body);
}
/* Links */
.post-content p a {
color: var(--color-link);
font-weight: var(--font-weight-medium);
text-decoration: underline;
transition: color var(--transition-default);
}
.post-content p a:hover {
color: var(--color-link-hover);
}
/* Lists */
.post-content ul,
.post-content ol {
font-size: var(--font-size-p);
font-weight: var(--font-weight-medium);
padding-bottom: var(--space-xl);
}
.post-content ul li {
line-height: var(--line-height-list);
margin-bottom: var(--space-l);
}
.c-post-meta ul li:nth-child(2) {
font-weight: var(--font-weight-regular)!important;
}
/* Images */
.post-content .wp-block-image img {
margin: var(--space-xxl) 0;
border-radius: var(--radius-m);
}
/* Blockquotes */
.post-content blockquote {
border-left: var(--width-quote-border) solid var(--color-quote-border);
margin: 0;
padding: var(--space-m) var(--space-l);
background: var(--bg-quote);
font-size: var(--font-size-p);
font-weight: var(--font-weight-regular);
}
.post-content blockquote cite {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-light);
}
.post-content blockquote p {
padding-bottom: 0;
}
/* Code Blocks */
.post-content .wp-block-code {
background: var(--bg-code);
padding: var(--space-xl);
border-radius: var(--radius-m);
}
.post-content code {
color: var(--color-code-text);
}
/* Mobile responsiveness */
@media screen and (max-width: 767px) {
.post-content p {
font-size: var(--mobile-font-size-p);
}
.post-content h2 {
font-size: var(--mobile-font-size-l);
}
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
font-size: var(--mobile-font-size-m);
}
}CSS Template Without Variables
/* Single Post */
/* header fixes inclding spacing */
.post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6{
padding-top: 2.5rem;
padding-bottom: .25rem;
font-weight: 700;
line-height: 1.25em;
}
.post-content h2 {
font-size: 2rem;
}
.post-content h3, .post-content h4, .post-content h5, .post-content h6 {
font-size: 1.5rem;
}
/* body text fixes including spacing */
.post-content p {
padding-bottom: 1.25rem;
margin-bottom: 0px;
line-height: 1.75em;
}
/* this is for your links change the color here */
.post-content p a {
color: #1391ff;
font-weight: 500;
text-decoration: underline;
transition: .2s all ease-in-out;
}
/* link hover color */
.post-content p a:hover {
color: #06BCC1;
}
/* bulletlist item fixes */
.c-post-meta ul li:nth-child(2){
font-weight: 400!important;
}
.post-content ul, .post-content ol {
font-size: 1.2rem;
font-weight: 500;
}
.post-content ul, .post-content ol {
padding-bottom: 2.25rem;
}
/* control space between list items*/
.post-content ul li {
line-height: 1.2em;
margin-bottom: 1.25rem;
}
/* image fixes with spacing and border radius*/
.post-content .wp-block-image img {
margin: 2.5rem 0rem;
border-radius: .75rem;
}
/* use only for blockquote blocks */
.post-content blockquote {
border-left: 1px solid #06BCC1;
margin: 0px;
padding: .75rem 1.25rem;
background: #F4F8FC;
font-size: 1.1em;
font-weight: 400;
}
.post-content blockquote cite {
font-size: .8em;
font-weight: 300;
}
.post-content blockquote p {
padding-bottom: 0px;
}
/* use only for code blocks */
.post-content .wp-block-code {
background: #0B0515;
padding: 1.5rem;
border-radius: .75rem;
}
.post-content code {
color: #89E3E4;
}
/* FOR MOBILE fixes body and header font sizes on mobile */
@media screen and (max-width: 767px) {
.post-content p {
font-size: 1.2rem;
}
.post-content h2 {
font-size: 2rem;
}
.post-content h3, .post-content h4, .post-content h5, .post-content h6 {
font-size: 1.5rem;
}
}Watch the Tutorial
In the video below, I walk you through how to use this CSS snippet, customize it, and apply it to your Elementor blog posts. Watch it now:
