How to Identify CSS Classes and IDs Using Browser Inspect Feature.
The inspect feature in web browsers allows you to view and manipulate the HTML and CSS of any web page. Here’s how you can use it to identify the CSS class and ID used for the “Contact Support” button at the bottom of this page –
Open Developer Tools
– In most browsers, you can open Developer Tools by right-clicking on any element on a web page and selecting “Inspect” or “Inspect Element” from the context menu. Alternatively, you can use keyboard shortcuts:
– Google Chrome: Press `Ctrl + Shift + I` (Windows/Linux) or `Cmd + Option + I` (Mac).
– Mozilla Firefox: Press `Ctrl + Shift + C` (Windows/Linux) or `Cmd + Option + C` (Mac).
– Safari: Go to Safari Preferences > Advanced and check “Show Develop menu in menu bar”. Then, press `Option + Cmd + I`.
– Microsoft Edge: Press `F12` or `Ctrl + Shift + I`.
Navigate to the Elements Panel
– Once Developer Tools is open, you’ll see a panel showing the HTML structure of the web page. This is the “Elements” panel, also known as the DOM Tree.
Find the Element
– Use the inspect tool (usually a mouse pointer icon) to select the element on the web page for which you want to identify CSS classes and IDs. Click on the element in the DOM Tree or directly on the page itself.
View Classes and IDs
– In the Elements panel, you’ll see the selected HTML element highlighted. Look for the `class` and `id` attributes in the HTML code:
– The `class` attribute lists one or more CSS classes applied to the element. Each class is preceded by a period (`.`).
– The `id` attribute specifies a unique identifier for the element. It is preceded by a hash (`#`).
Inspect Styles
– As you can see from the screenshots above, there is only a class (class=”hkb_widget_exit__btn”) for the button and not an ID. The only ID is (id=”ht-kb-exit-widget-4″) but that is for the grey box and not the button. We only want to target the button. Importantly, this class is only used once on this page. I don’t want to track this class for any other buttons on the page.
Add this element to Pixel Cat
Now go back to the event you are building in Pixel Cat and for the CSS Target, enter “.hkb_widget_exit__btn”. I use “.” and not a “#” since a “.” is for a class in which “hkb_widget_exit__btn” is –
If I wanted to target the ID box around the Contact Support button, I would enter (#ht-kb-exit-widget-4)
Additional Tips
– If an element has multiple classes, they are listed together in the `class` attribute, separated by spaces.
– Use the search bar in the Elements panel to quickly find specific elements by their HTML tag, class, or ID.
What is there isn’t a unique ID for the element like a button that you want to track. Using the HTML editor in WordPress, we can add a unique ID.
In WordPress, you can add HTML IDs to elements using custom HTML attributes or through the WordPress block editor. Here are two methods to achieve this:
Method 1: Adding IDs Using Custom HTML Attributes
Navigate to the Post/Page Editor
– Log in to your WordPress dashboard.
– Go to the Posts or Pages section and click on the post or page where you want to add the HTML ID.
Switch to the Text/HTML Editor
– In the post/page editor, locate the area where you want to add the HTML ID.
– Switch from the Visual editor to the Text or HTML editor. This allows you to directly edit the HTML code.
Add the ID Attribute
– Locate the HTML element to which you want to add the ID.
– Add the `id` attribute to the HTML tag of the element and specify the desired ID value. For example “id=”leadlink””
– Replace `”leadlink”` with your preferred ID name.
Update or Publish the Post/Page
– Once you’ve added the ID attribute, switch back to the Visual editor if necessary.
– Update or publish the post/page to save your changes.
Enter your new ID into Pixel Cat
Go back to Pixel Cat and enter this new ID into the CSS Target field. For example, #leadlink.
Method 2: Adding IDs Using the WordPress Block Editor
Navigate to the Post/Page Editor
– Log in to your WordPress dashboard.
– Go to the Posts or Pages section and click on the post or page where you want to add the HTML ID.
Insert a Block
– If you’re using the WordPress block editor (Gutenberg), click on the “+” icon to add a new block or select an existing block where you want to add the HTML ID.
Select the Block
– Click on the block you want to add the ID to. This could be a paragraph block, heading block, image block, etc.
Go to Block Settings
– In the block toolbar, click on the block settings icon (usually represented by three dots or three vertical dots).
Add the HTML ID
– Look for an option labeled “HTML Anchor” or “Advanced” in the block settings.
– Enter the desired ID value in the provided field. This will add the ID attribute to the HTML code of the block. For example, I will enter id=”leadlink” for the link.
Update or Publish the Post/Page
– Once you’ve added the HTML ID, update or publish the post/page to save your changes.
Enter your new ID into Pixel Cat
Go back to Pixel Cat and enter this new ID into the CSS Target field. For example, #leadlink.
If you still need assistance with this or anything else, please feel free to contact our support at fatcatapps.com/support/