[Support request] How to create a page template with a different container width?

Home Forums Support [Support request] How to create a page template with a different container width?

Home Forums Support How to create a page template with a different container width?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #786612
    Silvio

    Hi,

    I am interested in creating a website with:

    – narrow container, say 600px
    – special landing page with full width for images and contained wide width, say 1000px, for text

    I am wondering if I can use sections with a specific class for those sections I want to have a different container width.

    Could you help telling how to define the specific class?

    I mean, should I write some like

    body .specificclass .grid-container {max-width:1000px}

    Or

    body .specificclass .grid-container {padding: 3% 10%}

    Or, would it be better to use a specific page template? How to write it?

    #786648
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Have you looked at using the Page Builder Container section in the Layout Metabox?: https://docs.generatepress.com/article/page-builder-container/

    That should allow you to set a full width content layout on specific pages while maintaining your container width elsewhere.

    Let me know 🙂

    #787353
    Silvio

    Hi Tom,

    Yes I did, but here I have three options:

    – default, aka contained with padding for the container
    – full width
    – contained, aka container without padding

    If I have a container of 600 px with a 20px of padding, there’s no way to have a container larger than 640 px. So, I am considering changing the default container width with a class to add to every specific element of the page, build with sections.

    Alternatively, and It seems even simpler, I should create a page template that make use of a body class to set the container to a larger widht, say 1000px.

    Which is, in your opinion, the best alternative?
    How can I put that in pratice?

    Thanks in advance

    #787444
    Tom
    Lead Developer
    Lead Developer

    You could use a custom field to add that body class.

    For example:

    add_filter( 'body_class', function( $classes ) {
        if ( is_singular() ) {
            $template = get_post_meta( get_the_ID(), 'your_custom_field_name', true );
    
            if ( $template ) {
                $classes[] = 'my-special-template';
            }
        }
    
        return $classes;
    } );

    Then you could use the .my-special-template class without needing to create a page template.

    #787736
    Silvio

    it’s not perfectly clear to me how do you do.

    so, I add a custom field to the page / post I want to have a different template, for example your_custom_field_name and value true

    that way, the class my-special-template is added to the list of the body class?

    then, how do I adjust the width of the post / page?

    will this rule work?

    my-special-template .grid-container {max-width:1000px}

    to be honest, to have a page template that uses a different page width seems to me the simplest way to get there. could you point to a guide to create a custom page template for generatepress, so to evaluate which is the simplest way?

    #788100
    Tom
    Lead Developer
    Lead Developer

    That’s right, you’d do this:

    body.my-special-template .site.grid-container {
        max-width:1000px;
    }

    Creating a page template just for a different content width is likely overkill, but if you need to you could copy the theme page.php template and then turn it into a page template in your child theme: https://developer.wordpress.org/themes/template-files-section/page-template-files/

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