Hi, I'd like create a new default section with a dark grey background-color, white font-color and some other custom settings like margin etc. The default section options only allow "White" and "Light Grey" for background.
Yes, I want this as a section in a one pager. I added this section temporarily to check if it works but the bg-color stays the same. And no, editing with Elementor didn't help either.
I still have a section problem. When I open my page individually, everything looks as it should. But as soon as I include this as a section, all settings (e.g. margin) are ignored.
the problem I think is that WPBakery is using the header (and the footer) of the page to operate with its elements such CSS styles and when a page section is added to the one pager it just inserts the page content container.
Thanks, that helped somehow. That means, every time I make a change to the page, I have to copy the source code out and paste it into the overwrite CSS? Sounds pretty complicated and time-consuming.
Could it be a general problem with the theme that custom pages are not interpreted correctly when they are added as a section? I already had this problem, which cost me a lot of time.
This is the unfortunate way WPBakery works - it adds inline styles in the page header(<head>) for its elements but the header for a page section cannot be added in the one pager.
It has been tested, we mapped all the shortcodes we could to WPBakery elements , individual pages don't have any problems, you have to do this workaround for page sections.
Hi, I'd like create a new default section with a dark grey background-color, white font-color and some other custom settings like margin etc.
The default section options only allow "White" and "Light Grey" for background.
I added some lines in the custom CSS:
.section#leistungen{
background-color: #1e1e1e;
color: white;
}
But it doesn't work.
Is it possible to adjust it?
I Think this would work if you include the page as a section in the one pager but it looks like you want it as a separate page:
https://www.undercoverdesign.de/leistungen/
Can you try setting the background using Elementor?
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio
Yes, I want this as a section in a one pager. I added this section temporarily to check if it works but the bg-color stays the same. And no, editing with Elementor didn't help either.
Hi,
Can you add the section to the one pager? So I can try to get the CSS right?
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio
Ok, I did it. You can find the section under the menu point "LEISTUNGEN".
Hello,
because the elementor defines another <section> element inside you need to add two CSS statements in customizer -> additional CSS
#leistungen {
background-color: #your_hex_color_here !important;
}
#leistungen section {
background-color: red !important;
}
https://prnt.sc/v2u2mx
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio
Thank you. That helped a lot.
Now I can change the background color.
Hello Clapat-Support-Team,
I still have a section problem. When I open my page individually, everything looks as it should. But as soon as I include this as a section, all settings (e.g. margin) are ignored.
Single page: https://www.undercoverdesign.de/leistungen
As a section: https://www.undercoverdesign.de/#leistungen
Any suggestions?
Hello,
the problem I think is that WPBakery is using the header (and the footer) of the page to operate with its elements such CSS styles and when a page section is added to the one pager it just inserts the page content container.
So you should add the inline styles as custom css
Let's take this page as an example
https://www.undercoverdesign.de/leistungen/
If you open the page source you will see them under <style type="text/css" data-type="vc_shortcodes-custom-css">
https://prnt.sc/10sf3ol
So in this case the styles to add are:
.vc_custom_1615801686167{background-color: #1e1e1e !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}.vc_custom_1615903368307{background-color: #1e1e1e !important;}.vc_custom_1615801936534{padding-right: 10% !important;padding-left: 10% !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}.vc_custom_1615906154815{padding-right: 15% !important;padding-left: 15% !important;}.vc_custom_1615900173508{margin-bottom: 0px !important;padding-bottom: 1em !important;padding-left: 10px !important;}.vc_custom_1615900929295{margin-top: 0px !important;margin-right: 0px !important;margin-bottom: 0px !important;margin-left: 0px !important;padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 5em !important;padding-left: 0px !important;}.vc_custom_1615901034540{margin-bottom: 0px !important;padding-bottom: 1em !important;padding-left: 10px !important;}.vc_custom_1615900939135{margin-top: 0px !important;margin-right: 0px !important;margin-bottom: 0px !important;margin-left: 0px !important;padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 5em !important;padding-left: 0px !important;}.vc_custom_1615901048420{margin-bottom: 0px !important;padding-bottom: 1em !important;padding-left: 10px !important;}.vc_custom_1615900665713{margin-top: 0px !important;margin-right: 0px !important;margin-bottom: 0px !important;margin-left: 0px !important;padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important;}.vc_custom_1615805103858{margin-right: 0px !important;border-right-width: 0px !important;padding-right: 0px !important;}.vc_custom_1615901911073{margin-top: 0px !important;margin-right: 0px !important;margin-bottom: 0px !important;margin-left: 0px !important;padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important;background-color: #1e1e1e !important;}
Once again copied from the page source
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio
Thanks, that helped somehow. That means, every time I make a change to the page, I have to copy the source code out and paste it into the overwrite CSS? Sounds pretty complicated and time-consuming.
Could it be a general problem with the theme that custom pages are not interpreted correctly when they are added as a section? I already had this problem, which cost me a lot of time.
This is the unfortunate way WPBakery works - it adds inline styles in the page header(<head>) for its elements but the header for a page section cannot be added in the one pager.
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio
That surprises me, since the theme expressly recommends WP Bakery and even provides the user with a license. Hasn't anyone tested that before?
Hi,
It has been tested, we mapped all the shortcodes we could to WPBakery elements , individual pages don't have any problems, you have to do this workaround for page sections.
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio