[Resolved] Page template ( or look )

Home Forums Support Page template ( or look )

  • This topic has 16 replies, 5 voices, and was last updated 5 months ago by Leo.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1468051
    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

    #1468139
    Leo
    Staff
    Customer Support

    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/

    #1468143
    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

    #1468150
    Leo
    Staff
    Customer Support
    #1468189
    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

    #1468192
    Mark

    Leo,

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

    LOGIN Details moved by Admin
    Thanks again,

    Mark

    #1468278
    Elvin
    Staff
    Customer Support

    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?"

    #1468941
    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.

    #1469017
    David
    Staff
    Customer Support

    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

    #1469040
    Mark

    Thanks David,

    I will try that and get back to you.

    Mark

    #1469115
    David
    Staff
    Customer Support
    #1469374
    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

    #1469491
    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

    #1469499
    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

    #1469714
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.