How to Customize Post Menu in Elementor with CSS

Elementor is really awesome at customizing your pages. You can “Style” almost everything. They even make it easy to add customized templates for the your posts and archives and Elementor Pro has the ability to add custom headers and footers. 

However, the default WordPress Widgets (e.g. Recent Posts, Categories and Archives), do not have the Styling option (at least at this time).  So, I used the Custom CSS option under the Advanced tab to customize my Posts menu.  

Below is the code I used to change the Recent Posts menu in my footer.
When typing in the CSS code, it’s important to use the word “selector” in front of the element. The CSS may work if you don’t include this, however, it may change the complete page, not just the section you are trying to edit. 

You can find the element name by inspecting the published page through your browser. In chrome, just right click on the published page  and click on “inspect”.

Be sure to be in the Advanced section, in the Custom CSS  of the element you are wanting to change in elementor.

CSS Code: 
/* This changes the indent of the bullet to line up with the title heading and changes the font size. */

selector ul{


          margin-left: 20px;

          font-size: 17px;
}

/* This changes the color of the linked text to white */

selector a{

          color: #ffffff;

}

/* This changes the hover color of the linked text to blue */

selector a:hover{

           color: #3BE1F4;
}

/* This changes the element color to blue, (in this case changing the bullet color) */

selector div.elementor-widget-container{

          color: #3BE1F4;

}

/* This changes the color of the Title (H5) to blue. */
selector h5 {

          color: #3BE1F4;

}  

Leave a Comment

Your email address will not be published. Required fields are marked *