Making Style Changes Using a Visual CSS Editor

Even though you use the same Word­Press theme that already hosts a bunch of oth­er web­sites across the world, this doesn’t mean you need to fol­low the same visu­al path. You can tune it on your per­son­al­i­ty and cre­ate a web­site that grabs the right kind of atten­tion.  How­ev­er, we sug­gest you play around with the theme’s option and start from there.

In this arti­cle, we assist in the process of mak­ing spe­cif­ic style changes by using the right Visu­al CSS Edi­tor Plu­g­in — Site­O­ri­gin CSS (check out their doc­u­men­ta­tion as well). The truth is that one of the chal­lenges you could face while edit­ing your site’s design is sim­ply know­ing how to find the cor­rect selec­tor to use.

Step 1 — Try SiteOrigin CSS

In just a few words, Site­O­ri­gin CSS is a CSS edi­tor that allows you to make quick visu­al changes to your web­site in no time, regard­less if you’re a begin­ner or have the in-depth tech­ni­cal know-how. How­ev­er, we high­ly rec­om­mend you to use it care­ful­ly and only when you plan to do some basic changes, such as shift­ing a col­or or hid­ing some ele­ments. Oth­er­wise, you can eas­i­ly broke the entire look and feel and take bad decisions.

Here’s what you need to do:

  • Log into your Word­Press Dashboard
  • Go to Plu­g­ins → Add new → type Site­O­ri­gin CSS in the search box (screen­shot)
  • Click on Install now, and then on Acti­vate Plugin

Now, if you go to Appear­ance → Cus­tom CSS you will find the Site­O­ri­gin inter­face, so you can start explor­ing. You also have access to a short video about how you can get start­ed with the right foot.

Step 2 — Make the Right Visual Tweaks

First of all, please keep in mind that you can use this Visu­al CSS Edi­tor plu­g­in to cus­tomize the appear­ance of any Word­Press theme you have. It works by allow­ing you to quick­ly add your CSS styles, which, in turn, offers you the free­dom to over­ride the default styles of your theme.

By using sim­ple con­trol, you can man­age in real-time the changes that you’re mak­ing. This way, you will skip unpleas­ant sur­pris­es by the end of the jour­ney. Make sure that you have a clear goal when you start work­ing with this Site­O­ri­gin CSS, and you know where you are head­ing with your website.

The only rea­son why we rec­om­mend you give Site­O­ri­gin CSS a try is that we test­ed and every­thing works fine. More­over, we’re always inter­est­ed in find­ing solu­tions that are easy to use and don’t require mas­sive cod­ing knowledge.

Updated on June 13, 2017

Was this article helpful?

Related Articles