When using Toolset with Elementor, you will often want to match the styling of certain elements to suit your design. This page provides basic guidelines for matching the styling of Toolset elements in Elementor.

How to adjust the styling of widgets

To customize styling of any Elementor widget, click to select it and then click the Advanced tab. There, you can adjust different styling settings and use the Custom CSS tab to add any custom CSS styles to the widget.

Advanced tab of an Elementor widget settings
Advanced tab of an Elementor widget settings

Use the same steps to customize the CSS styling of the Toolset View widget.

Customizing the CSS styling of a Toolset View widget
Customizing the CSS styling of a Toolset View widget

How to find the styling of an element we want to match

As you have seen so far, adjusting the styling of an Elementor widget is easy. However, to match an element’s styling, we first must find its original CSS styling.

The easiest way to do this is to use your browser’s Development Toolset. Luckily, all major modern browsers provide these tools and they all work basically the same.

Start by opening a front-end page with an element you want to inspect. Then, press the F12 button on your keyboard. The Developer Tools console will appear, similar to the one in the following image.

Using a browser's Development Tools to inspect an element on a page
Using a browser’s Development Tools to inspect an element on a page

Here are the suggested steps to use to inspect an element (use the image above for visual reference):

  1. Click the button to “select an element in the page and inspect it”.
  2. Click to select an element you wish to inspect.
  3. The element will be highlighted in the HTML markup of the page.
  4. The “styles” section of the Development Tools will list all CSS styles related to the selected element.

Now, you can find all the important styles you wish to match and copy them into your own custom element.