WPDevHQ

No problem ??

how do I find out the specific element tag?

The easy way is to use “Inspect” in Chrome or “Inspect Element” in Firefox.

You basically locate the section/area you want to work, right click on and chose to inspect – you then work thorugh the elements while viewing their corresponding CSS on the right. Play with the CSS to see which values suite your needs then simply copy those to your stylesheet/css plugin.

The hard way is to dig in to the source files and study the relevant elements and then manipulate those!

Thank you for the links – they were of help in finding the right element to target. Please try this code i.e replace the second part of the original code with this one:

.elementor-element.elementor-element-pcdajpv > .elementor-container {
    clear: both;
}

Thanks for the Addon widgets tip!

You are most welcome.

That worked, thank you! Only for some reason the text elements that are on top the image still aren’t visible. Any clue?

Without the actual seeing the page it would be only guess work on part as to what the issue is and may result in a half hearted solution. If you have a link or are able to export and share the template I can take a closer look to see if I can offer you a viable solution.

Offtopic question: is it possible to partially design/customize a woocommerce shop page in Elementor, or add some Elementor elements (like a header) at all?

I’ve not tried doing so directly with WooCommerce product pages or shop page. I do however have a plugin that can help with designing the shop page by utilising native widgets – please take a look at Elementor Addon Widgets to see if it meets your needs.

Hello, you are most welcome.

Unfortunatelly Elementor’s main wrapper has a margin and padding of 0 on all sides. This results in the top most element falling under the theme’s section. Its a conflict of z-index of elements.

Not a solution but a simple workaround for now would be to edit the page using the blank template and switch back to the standard template when you are done.

I’ll dig more in to the theme and Elementor to see if I can work out a solution and add support for the theme. I initially did not include support for Sydney due to another conflict betweent the theme and Elementor on how they load their scripts.

OK, the problem is two folds – the theme and Elementor have a css conflict.

The following CSS code is the best workaround I can offer for now. You can either add it to a child theme if using one or if not then in a custom css plugin. I recommend using the Simple Custom CSS plugin.

The CSS code you need is…

.header{z-index: 1;}

.elementor-element.elementor-element-orcfxph > .elementor-container {
    clear: both;
}

You might want to post the issue to both the theme’s and Elementor’s forums and cross reference this thread to them.

No problem.

Let me take a look at the theme and both plugins to see if there’s anything that’s conflicting. Will come back to you as soon as I can.

What theme are you using?

Is the header part of the theme or a section of Elementor builder?

Confirmed as fixed…..thanks @boaz

Try going to https://yourdomain.com/page-name-here/?elementor and see if that would bring up the editor. (Replacing domainname and page-name-here with actuals).

• This reply was modified 8 years, 2 months ago by WPDevHQ.

What theme are you using and what are the other plugins that are active if any?

This issue happens on the edit screen.

Screenshots were posted on GitHub: https://github.com/pojome/elementor/issues/530 and the solutions is as stated by the OP there.

These values should do the trick for you…

.page-template-template-fullwidth-no-title .header.header {
    min-height: 60px !important;
}

.page-template-template-fullwidth-no-title .content-left-wrap {
    padding-top: 0;
}

.page-template-template-fullwidth-no-title article.hentry {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.page-template-template-fullwidth-no-title .col-xs-12, 
.page-template-template-fullwidth-no-title .col-sm-12, 
.page-template-template-fullwidth-no-title .col-md-12, 
.page-template-template-fullwidth-no-title .col-lg-12 {
    padding-left: 0;
    padding-right: 0;
}

Would be the code you need for that.

OK, with your current template you can add the following CSS rule to either a child theme or a custom css plugin….

.page-template-template-fullwidth-no-title .site-content .container {
    width: 100%;
    padding: 0;
}

We need to have a look at the underlying CSS code for the given template in order to be able to offer assistance.

Are you able to share a link to an Elemetor specific page so that we can take a look?