[Support request] Issues Moving From Astra Pro To Generazte Press

[Angus]

Hi

I have only recently switched to GeneratePress from Astra Pro theme, in which most of the home page has been built using Elemento Pro page builter with Max Mega Menu as the primary navigation. I have searched your documentation and cannot find answers to the following issues:-

1. Page Title & Footer Bars

I am unable to ‘switch off’ the page title so it doesn’t appear as a white bar across the top of both the main page content and the footer, which is a page template built in Elementor. Similarly there seems to be a white bar inserted at the bottom of the pages too. I have got round this by giving the section at the top and bottom of each a negative margin, but is there no way to simply disable the page title & bars from being displayed within the theme controlled options?

2. Z Values Disrupted For Elementor Slide / Carousel Navigation & Within Widget Ribbons

I don’t know if this should be influenced by the theme or not but it is not an issue in Astra Pro. Now in GeneratePress theme the navigation (dots / fractions) in the Elementor Slide and Crousel widgets show in front of the expanded Max Mega Menu, even though the background is set to being non-opaque.

Also in the Elementor Call To Action widgets the ribbons are no longer frontmost elements, and appear behind the images. Again this is not the case in Astrao Pro.

I don’t know if these 2 issues have a common cause, but they shouldn’t be happening and I haven’t touched any of the widgets. The only cause has been to switch to GeneratePress theme.

Some advice would be appreciated.

Best regards

Angus

[Tom]

Hi there,

1. You can disable the content title under certain conditions by using our Layout Element: https://docs.generatepress.com/article/layout-element-overview/

Just be sure to have the Disable Elements module activated as well.

2. The dots issue can be fixed with this CSS:

.swiper-pagination {
    z-index: 1;
}

I’m not seeing what you mean about ribbons. What section should I be looking at?

Let me know 🙂

[Angus]

Hi Tom

Many thanks for getting back to me so quickly. In response to your suggestions:-

1. I have created a new ‘Elementor Layout’ layout element and applied it to the whole site. In it I have disabled both the ‘Top Bar’ and ‘Content Title’ elements. I have also removed the negative margins and reset them to zero in the Elementor section settings. The white bars at the top of the page and between the bottom of the page content and the footer are still there 🙁

2. Where do I apply the CSS? Is it in the Custom CSS section in the Advanced Tab for every widget that has navigation dots?

3. If you look in the MindManager (pale blue) section of the Footer you will see 2 green CTA widgets, once with the headline “Don’t Have MindManager?” and the other “Public Domain Knowledge Map Store”. Both have a blue ribbon at the top right corner and in both the ribbon and the text are now behind the image that is at the top of the CTA content. It is not like this when in Astra. Obviously it’s another z value thing. Would there be a similar quick fix with CSS?

Best regards

Angus

[Tom]

1. So right now you’re using Elementor to force its sections to be full width. Instead of doing that (it uses javascript and is pretty hacky), set your Container to “Full Width” in the same “Elements Layout” you created: https://docs.generatepress.com/article/layout-element-overview/#container

That will make the page full width for you without any javascript, and should remove any whitespace.

Just a note that you will want to apply this Layout only to pages that will have Elementor. So if every single page will have Elementor, apply the layout to single pages (not the entire site).

2. You can add CSS using one of these methods: https://docs.generatepress.com/article/adding-css/

3. I see, this is because the z-index value for the ribbon is 1, and the value for the content is 2, meaning the content will be placed on top of the ribbon.

If there’s a z-index setting for those elements in Elementor, change it so the ribbon has a higher value.

If not, you can add this CSS:

.elementor-ribbon {
    z-index: 3;
}

[Angus]

Hi Tom

Many thanks for getting back to me so quickly once again. In response to your responses:-

1. I am having trouble getting my head around this as this is my first WP project so I’m still learning the architecture and boundaries between WP, themes and page builders. Anyway I have changed the setting of the topmost page section with the slides by turning off the ‘Stretch Section’ and it has removed the white bar at the top of the page so the slides have moved up to where I want them to be. However:-
– I did change the Container setting in the Elementor Layout from ‘Default’ to ‘Full Width’, however it only works if the Display Rules are set to ‘Whole Site’, and not ‘Page’ as you suggested. If I set it to ‘Page’ the section background and contents are only 1200px wide.
– I have turned off the ‘Stretch Section’ for all the other page sections and it hasn’t had any deleterious effect, however I am concerned about doing that for every section on every page on the fully developed site and then being wholy dependent on the theme for the full stretch look.
– It doesn’t work for the footer however. Turning off the section stretch for the Elementor Footer page template just restricts the section to be 1200 px wide, and the white section at the very top is still there. I don’t know if this is because the Element settings don’t apply to the footer (I notice that a footer is not a type of element I can create), or because what Elementor calls a ‘page’ template and is inserted into GPs footer widget area, is not recognised by GP as a page.

I may well just go back to giving the top of the elementor footer section a negative margin to sort the issie for now 🙂

2. I have added your CSS in the Custom CSS section in the Advanced Tab of the slides widget at the top of the page, and lo and behold it has sorted the issue for all the widgets with navigation.

3. Likewise adding the CSS to a single CTA widget has sorted the problem out for all of them and the ribbon is now on top. I still don’t understand how this issue has arisen though, as I said it’s not a problem when the Astra theme is applied. In my ignorance (this is my first WO project) I thought that the ‘thing’ with page builders like Elementor was that they took care of the page content independently of the theme, and the theme did headers and footers and menus and things? Obviously not!

Best regards

Angus

[Tom]

1. Did you implement solutions for this? I’m not seeing any issues anymore. It’s strange that setting it to all pages didn’t work, as the page you linked me to is definitely a “page” post type. As long as you don’t mind those layout settings working on things like your blog etc.. it shouldn’t be a problem.

2 + 3. Both issues were a matter of z-index, which handles the stacking order of elements. There isn’t really a way around it without setting the z-index to proper values. However, I do believe that Elementor has a z-index field within their settings.

[Author]

Posts