We frequently find ourselves needing to make specific changes to the design of the page or entry we're working on. Visual editors such as Thrive Architect and Elementor allow us to get most of the job done, but even then, some manual adjustmets might be required.
Most WordPress themes give us the option to include our own CSS code, but this is a global setting. Ideally, we'd like the code to only be run on the page or entry which actually needs it. This way, on top of achieving the desired result, our page will be smaller and load faster, and on the other hand, we'll avoid collateral effects which affect the design on the rest of the content.
Thrive Architect already includes this option. When accessing the comfiguration menu, we'll see a setting which pops up a window in which we can include our own CSS code that will be run on that page or entry alone.
Elementor's free versionvdoes not include that functionality, although Elementor Pro does, so what can we do then?
Custom design with CSS Plus
The solution I found is CSS Plus. A free plugin which we can download from the WordPress official repository.
It's a light plugin, the enable-and-ready-to-go type. Once it's been activated, we'll have a CSS editor four our pages and entries at our disposal.
It's a specialized editor, it highlights the syntaxis ,helps us avoid errors and compresses content automatically.
Since our CSS content will only be loaded in the page that includes it, we won't have to use complicated selectors or create specific tags. In the image, the spacing between the elements of a list in a certain page is being modified, while the rest of the content will use the specified setting in the active theme.
How to use CSS Plus
Every modern browser includes the option to inspect the HTML code of the page displayed on the screen. For instance, in Chrome, we access this option using Ctrl+Shift+I or by right-clicking and selecting Inspect.
We'll now be shown the HTML code and the associated styling corresponding to the selected element:
We modify the CSS code to whatever we want it to look like and then copy these modifictions in the CSS Plus editor. When we publish our content, we'll see our modifications activated. It's as simple as that.
Conclusions
CSS Plus is a free plugin which will save a lot of time and effort on the design of our website and, in my opinion, it deserves a spot in the recommended tools list. We can use it with any theme and plugin.
