-
Posts
-
Dear Enfold Support Team,
I am reaching out for assistance with a challenge I’ve encountered while using the Enfold theme and its Advanced Page Builder in combination with Kadence Gutenberg blocks. The issue centers around the Enfold theme’s use of a container class that applies styling affecting the Kadence blocks due to class inheritance.
Specific Issue: The container class implemented by the Enfold theme is causing style conflicts with Kadence Gutenberg blocks. This issue is most evident when trying to create a full-width hero header, as the container class prevents the Kadence block from achieving full page width.
Objective: My goal is to utilize the Gutenberg editor for constructing specific pages on my site, while retaining the aesthetic and functionality provided by the Enfold theme.
Steps I Have Taken:
Attempted to create a full-page hero header using Kadence blocks within the Enfold theme.
Noticed that the Enfold’s container class limits the ability of the block to extend fully across the page.
Seeking Your Assistance:Is there a possible workaround or solution that would allow Kadence Gutenberg blocks to operate effectively, especially for creating a full-width hero header, without interference from Enfold’s container class?
Guidance on any custom CSS modifications or theme settings that could help resolve this conflict would be extremely helpful.I appreciate your support in addressing this issue and look forward to your valuable suggestions.
Hector Moya
Hey Hector Moya,
Thanks for your question, but we don’t have any experience with the Kadence blocks, and I’m not sure how you would be able to use a block plugin within the Enfold Advanced Layout Builder since it doesn’t support “blocks”. Typically we don’t recommend using any other builders as they tend to conflict with the ALB, and the ALB can not be removed from Enfold.
I don’t see a practical way to create your pages with the Gutenberg editor and use the functionality of the Enfold elements.
I took a look at your page, specifically the header, but it seems to be fullwidth. Perhaps if your create a test page where you can demonstrate the issue, we can recommend so css, but I’m not sure if you will experience more conflicts as you create your site using the Kadence blocks, I would recommend using the Enfold elements to create your site.
That said if I had to use the Kadence blocks for a full-width hero header, I would try to use the Kadence blocks shortcode and inject the hero header using the ava_after_main_container hook, here is an example
If Kadence blocks doesn’t have a shortcode you could create one, or try some css like this to make the child element fullwidth when the parent is not:.hero_container { width: 100vw !important; position: relative !important; left: calc(-50vw + 50%) !important; }Please note that using the contact form which is not appropriate for support questions, please log in to the support forum and open a new thread if you need further assistance.
If you are unable to login to the support forum because you don’t have a activate support contract, please try going to your Theme Forest account and renew your support and then log in to the support forum and open a new thread.Best regards,
Mike
- You must be logged in to reply to this topic.