Page template ( or look )

[Mark]

I am using the starter template “Aspire” on my website. I like the appearance of the pre-built pages which have the page content somewhat overlapping the header.

I just added a page called “Happy THIS Year,” but it doesn’t not seem to have the same appearance ( of the body slightly overlapping the page hero) as the prebuilt pages has.

I’ve looked at the documentation and I can’t figure out what it takes to make this page that I built take on the same appearance as the prebuilt pages.

Can you tell me how to achieve this? Is there a way to duplicate pages and then modify them?

Thanks,

Mark

Site is at : generatepress.michianait.net

[Leo]

Hi there,

The overlapping is coming from the negative top margin in this Elementor section:
https://www.screencast.com/t/Xe8QOdumn9t

Is there a way to duplicate pages and then modify them?

That would be a good solution. You can try a plugin like this:
https://en-ca.wordpress.org/plugins/duplicate-page/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mark]

Thanks Leo,

I had actually tried another plugin called “duplicate page and post” (or some similar name) but it did NOT preserved the negative margin. The one you mentioned worked fine!

Thanks,

Mark

[Leo]

Glad to hear 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mark]

Leo,

Sorry to bother you again – I thought I had it figured out. I used the Duplicate Page plugin, and duplicated the “About” page so I would get the right format. However when I changed the name of the page and “viewed” it, the cool formatting disappeared. When I look at the page, I can’t see how they put a column on top of a section.

For example, I am trying the make the page called “Happy THIS Year” have the same shape/look as the original About page that I duplicated. But when I view “Happy THIS Year” it seems to have lost the -90px negative margin. When I look at the page “About” in Elementor, it looks like a column has a negative top margin, but I can’t see how the column is overlaid on a section.

Could you take a look at “Happy THIS Year” and tell me what I have to modify to get it to “look like” the “About” page? (I’m still confused about the column and the section.)

Thanks Leo,

Mark

[Mark]

Leo,

I made you an admin password in case you needed it.

LOGIN Details moved by Admin
Thanks again,

Mark

[Elvin]

Hi Mark,

Strange, I’ve tried duplicating the about page on your site and I don’t encounter the same issue.

What I did was simply, duplicated the About Page, Edited it to be renamed as A.1 > This is an About page Clone by GeneratePress Support and published it(placed it back to draft after testing).

See the duplicated page named: A.1 > This is an About page Clone by GeneratePress Support on your pages list. Note:

Can you try duplicating again and make a recording of it so we can see the issue?

Note: This may be related – https://generatepress.com/forums/topic/issues-with-page-duplication/

A wise man once said:
"Have you cleared your cache?"

[Mark]

Unfortunately, I don’t have any video recording equipment, but here is what I did.

1. I took your page and renamed it. (I don’t know where it is now)

2. Anyway, in the regular WP admin panel, I duplicated the “About” page, which was the original from the starter site. I clicked on it to bring up the page editor. I renamed it to About (clone) and clicked “Publish.”

3. Back in the admin panel interface, when I now click “View page” on “About (clone), it no longer has the nice overlapping sections, so apparently the process of duplicating, renaming and then publishing, messes with the original (About) page and removes the neg margins.

4. But it seems a bit finicky, as it worked for you.

Thanks

Mark

P.S. If you could just tell me how to create the About page (with the overlapping sections or columns using negative margins) I could avoid having to duplicate pages.

[David]

Hi there,

select the Elementor Column containing your Content.
In the settings sidebar it will say Edit Column.
Select the Advanced Tab.
Here you will find the Margins fields.
Uncheck the Link icon ( Link values together ) to the right of the 4 fields.
Then in Top Margin click the down arrows to create a minus value – and set it to –60px

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mark]

Thanks David,

I will try that and get back to you.

Mark

[David]

Let us know

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mark]

Hi David,

I am trying to accomplish that on the page called “Happy THIS Year,” but not having success. When I select the section that has the content and add a 60px negative margin and a positive z index, the text moves up, but doesn’t retain the white background, so it just looks like text moving up without the background.

I can’t seem to edit the white area behind the text, moving it up along with the text.

I can’t tell from looking at it, how many “sections” and “widgets” there are on the page, and I can’t seem to access what looks like the white background.

Any help would be appreciated.

Mark

[Mark]

David,

I seem to making a little progress on the “Happy THIS Year” page. I have the text column a solid white background and moved it up. It now looks better, but I still seem to have an extra section or columns in there as it looks like there are 3 components instead of 2. In the “About” page that came with the template, it looks much cleaner and looks like just two separate “pieces” of paper are overlaid together. I assume the narrow top and wider background has something to do with the different size sections or columns?

Thanks,

Mark

[Mark]

David,

There seems to be a light gray area that is behind the text column, but using the Elementor Navigator, I can’t seem to select it, or see how it comes into play.

Mark

[Tom]

Hi Mark,

I think we’re better off using some simple CSS vs working with the Elementor options.

1. Undo your Elements settings (background color, negative margin etc..).
2. Add this CSS:

body:not(.full-width-content) .page-hero + .container {
    margin-top: -60px;
}

This will automatically bring your content up on top of your page hero if it exists 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts