Return to previous page

Adding CSS ID property to major body area HTML tags

This topic has 5 replies, 3 voices, and was last updated 1 weeks, 3 days ago ago by Tony Rodriguez

Digital-Boutique

Participant

November 21, 2025 at 20:03
Hello,

I would like to know what you consider to the best method for adding CSS ID’s to major body areas that cannot be ID tagged directly via Elementor.

Example: The Header & Footer
In the XStore HTML code these are referenced as:

For the Header:
<header data-elementor-type="header" data-elementor-id="193274" class="elementor elementor-193274 elementor-location-header" data-elementor-post-type="elementor_library">

For the Footer:
<footer data-elementor-type="footer" data-elementor-id="193271" class="elementor elementor-193271 elementor-location-footer" data-elementor-post-type="elementor_library">

I can reference these in my Child Theme Global CSS as:
.elementor-location-header .container-area .element {}
.elementor-location-footer .container-area .element {}

But that is very inefficient, and the CSS strings become unnecessarily long and complicated.
It also means that the DOM model will crawl the entire page’s 1000’s of lines of code to find the Header or Footer before applying styles, for each… and every… single… element.

In an ideal world, and for best page loading of targeted styles,
these would be so much referenced as:

#header .container-area .element {} #footer .container-area .element {}

OR Perhaps Better as:

#masthead .container-area .element {} #colophon .container-area .element {}

CSS styles apply instantly when referenced by CSS ID,
due to the DOM Model’s inherent use of getElementbyID().

Please Advise:
Other than adding XStore Theme Template files to my Child Theme and editing them directly there, is there any other, better way built in XStore that I do not yet know of?
BTW: The same question applies to the central page content area itself.

.template-container .page-wrapper .page-heading {} .template-container .page-wrapper .container {}

These are all just inefficient and verbose CSS Element style prefixes.

How can I quickly and easily add CSS ID tags to major page areas, without having to copy XStore Template PHP files into my Child Theme, and then risk losing access to future code changes or functionality applied to the XStore theme itself?

FYI: I do realize that one could use jQuery to add those tags onPageLoad().
But even that relies on an initial full-crawl of thousands of lines of code to add 2 or 3 tags, BEFORE any of my custom CSS styles will be applied efficiently.

Thank You
Files is visible for topic creator and
support staff only.
#460470 Copied
4 Answers
Jack Richardson

Support staff

November 22, 2025 at 10:52
Hello @Digital-Boutique,

Regarding your questions about the header and footer, these template wrappers are generated by Elementor itself. You can use the classes .elementor-location-header and .elementor-location-footer, as they are unique and not repeated multiple times on a single page.

If you need specific IDs for these locations, you can add the following snippet to your child-theme/functions.php file:

add_filter('elementor/document/wrapper_attributes', function($attr) { if (isset($attr['data-elementor-type']) && isset($attr['data-elementor-id'])) { if (in_array($attr['data-elementor-type'], array('header', 'footer'))) { if (!isset($attr['id'])) { $attr['id'] = 'site-global-' . $attr['data-elementor-type']; } } } return $attr; });

Frontend result:
https://prnt.sc/tukwx-NoJLfn
https://prnt.sc/S2b3TcjYDsRB

For the breadcrumbs, you can use only the .page-heading class, as its content is loaded once per page. The .content-page class is related to the wrapper for all page content. We avoid using many IDs, as this is not considered good practice for SEO.

Based on your request, you can use .page-heading instead of .template-container .page-wrapper .page-heading for your custom styling. However, please note that in some cases, the longer structure may be required to ensure higher priority over the theme’s built-in styles.

If you critically need IDs for other areas provided in our theme, please specify a list of which areas you would like to assign IDs to, and we will review possible solutions for your request.

Best regards,
Jack Richardson
8Theme Team
#460505 Copied
Digital-Boutique

Participant

November 22, 2025 at 21:14

Hey,

Thanks for the great response, that was really very helpful.
Using the logic you provided, I added CSS ID’s for Header & Footer and the Elementor object tree parent container as well.

Closing Topic

Thank You again.

#460549 Copied

Digital-Boutique

Participant

November 22, 2025 at 23:15

Thanks for the support! My topic “Adding CSS ID property to major body area HTML tags” has been successfully resolved.

#460552 Copied

Tony Rodriguez

Support staff

November 22, 2025 at 23:15

Dear Digital-Boutique,

It’s great having you in our WordPress & WooCommerce community!

Every insight you share helps us refine XStore and build tools that empower thousands of online store owners worldwide.

Leave Feedback →
(takes less than a minute)

Together, we grow stronger with every release.

Topic closed.
The 8Theme Team

#460553 Copied
Viewing 5 results - 1 through 5 (of 5 total)

The issue related to '‘Adding CSS ID property to major body area HTML tags’' has been successfully resolved, and the topic is now closed for further responses

Adding CSS ID property to major body area HTML tags

Explore our best WordPress WooCommerce Themes collection