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.
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.
Use the same steps to customize the CSS styling of the Toolset View widget.
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.
Here are the suggested steps to use to inspect an element (use the image above for visual reference):
- Click the button to “select an element in the page and inspect it”.
- Click to select an element you wish to inspect.
- The element will be highlighted in the HTML markup of the page.
- 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.