Create custom page type with homepage header

Home Forums Auberge Create custom page type with homepage header

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #19024

    que1124
    Participant

    Create custom page type with homepage header

    Resolved

    Hi can you provide some guidance on how I could create a custom page type with the same header as the homepage (different image)?

    (Its fine if the image and such is hard-coded in the template file)

    I’ve tried using the get_header() function in combination with the fullwidth template and the html from the homepage.
    https://pastebin.com/GgtVmvFy

    But this has problems because the header-image is in the body.

    If you could direct me to the file that loads the homepage that would help as well.

    Basically whatever help/advice you can offer would be great.

    Love the theme (:

    • This topic was modified 1 week, 2 days ago by  que1124.
    #19026

    Oliver Juhas
    Keymaster

    Hi que1124,

    I think the easiest way of doing a custom page layout would be simply using a Beaver Builder page builder with fullwidth page template. No coding required ;)

    Best regards,

    Oliver Juhas
    WebMan Design

    #19027

    que1124
    Participant

    Could you tell me where the template for the homepage header can be found? I’ve taken a look at the builder and it cannot reproduce the homepage due to padding/margins around the image.

    #19028

    Oliver Juhas
    Keymaster

    Hi que1124,

    I’ve reproduced the homepage layout without an issue with Beaver Builder.

    The theme actually applies custom padding on Beaver Builder columns, so, to remove the “image margin/padding”, just zero out the parent column padding. Also make sure to set the parent row full width with full width content. If you provide your website access, I can create the basic layout for you, or check out this screenshot instructions:

    If you want to write some text over the image, set the image as row background instead.

    Best regards,

    Oliver Juhas
    WebMan Design

    #19029

    Oliver Juhas
    Keymaster

    If you want to proceed with your own code and not using Beaver Builder, you can actually make your custom page template work with some custom CSS:

    /**
     * Change the "SLUG" below to your page template slug.
     * For example, if your page template file is named
     * "my-template.php", change the "SLUG" to "my-template". 
     */
    .page-template-SLUG .site-content {
    	padding: 0;
    }
    
    .page-template-SLUG .content-area {
    	width: 100%;
    	max-width: none;
    }
    
    .page-template-SLUG .site-banner + .entry {
    	width: 88%;
    	max-width: 1020px;
    	margin: 6% auto;
    }

    The theme is coded using WordPress hooks. So, the code that displays homepage banner/intro can be found in includes/custom-header/custom-header.php where the wm_banner_area() function is hooked to display in tha_header_after action.

    Best regards,

    Oliver Juhas
    WebMan Design

    • This reply was modified 1 week, 1 day ago by  Oliver Juhas. Reason: Fixing the code provided
    #19031

    que1124
    Participant

    I didn’t realize the beaver builder was that powerful. I’ve got the page up and running here if you care to look.

    Thank you for the help I didn’t expect such amazing support it was a lovely experience.

    #19032

    Oliver Juhas
    Keymaster

    Awesome you’ve resolved the issue with Beaver Builder! Good luck with your website and happy creative creating :)

    Best regards,

    Oliver Juhas
    WebMan Design

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.