August 10, 2023

Inspect & Edit your Elements with SiteOrigins CSS Inspection

Play Video

If you’re looking to get under the hood of your website and tinker with its appearance, CSS inspection is the way to go. SiteOrigins CSS is a handy tool that makes this process a breeze, even if you’re not a coding wizard. Let’s explore together with Web Squadron how you can use this free tool to make your website look just the way you want it.

What is SiteOrigins CSS?

SiteOrigins CSS is more than just a free CSS inspector tool, it’s like a friendly guide that helps you navigate the complex world of CSS. Here’s why it’s worth checking out:

  • Free to Use
    No hidden costs or subscriptions.
  • WordPress Friendly
    Works seamlessly with any WordPress site.
  • User-Friendly Interface
    Designed for both beginners and pros.

CSS Inspection with SiteOrigins CSS

CSS inspection is all about understanding the styling elements of your website. With SiteOrigins CSS, you can:

  • Inspect Elements
    Easily identify class names and IDs.
  • Modify Styles
    Change colors, add borders, and more.
  • Preview Changes
    See how your changes will look before saving them.
  • Avoid Common Mistakes
    The tool helps you avoid global changes that might mess up your site.

Here’s a quick guide to get you started:

  1. Install SiteOrigins CSS
    Search for it in the WordPress plugins and install it.
  2. Open SiteOrigins CSS Editor
    You’ll find it in your WordPress dashboard.
  3. Navigate to a Page
    Use the eye icon to go to the page you want to edit.
  4. Make Your Changes
    Click on elements to see their CSS and make changes.

Customizing Your Website with SiteOrigins CSS: A CSS Website Inspector

As a CSS website inspector, SiteOrigins CSS allows you to customize various aspects of your site:

  • Text Styling
    Change font size, color, and more.
  • Layout Adjustments
    Modify margins, padding, and alignment.
  • Adding Visual Flair
    Add background images, gradients, and shadows.
  • Responsive Design
    Ensure your changes look great on all devices.

Here’s an example of changing text color:

.en_tab_title_e_normal {
  color: red;

Advanced Tips and Limitations

While SiteOrigins CSS is powerful, it has some limitations. Here’s what you need to know:

  • Specific Targeting
    You can target specific elements, but it requires careful selection.
  • Manual Coding
    Some changes might require manual coding, like adding ‘space between’ in flex layouts.
  • Compatibility
    Works best with WordPress sites.

Modifying Elementor Tabs with SiteOrigins CSS

Want to modify the Elementor tabs on your website? Here’s a simple guide:

  1. Open SiteOrigins CSS Editor and navigate to Page
    Within the Editor open the desired page where you would like to make changes.
  2. Click on the Tab
    Select the tab you want to modify.
  3. Identify the Class Name
    Look for the class name in the CSS editor.
  4. Change the Color
    Select the color you want.
  5. Save or Copy the Code
    Apply the changes or copy the code for later use.

Conclusion and Recommendations

SiteOrigins CSS is a valuable tool for anyone looking to understand and modify the CSS of their WordPress site. Whether you’re a beginner or an experienced developer, it offers a user-friendly way to make your site look just right. Give it a try, and happy inspecting!

Required Resources

Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Inspect & Edit your Elements with SiteOrigins CSS Inspection
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.