Full Width Using Gutenberg with Themler

ike
16 Posts
ike posted this 2 weeks ago

I am using Themler for my theme package so that I can manipulate the Header and the Footer area, and then set some of the fonts, and other basic features. I am using Gutenberg to edit everything between the Header and the Footer, I am setting the theme to have a box width, however, I have rows that I would like to have full width to the edge of the page. I am unable to figure out how to do this. There are discussions on the WordPress sections that there must be full-width assets in the functions .php file. Can anyone tell me if I am on the right track here or not, has anyone tried to accomplish this? Other thoughts out there from anyone?

I am using Themler for my theme package so that I can manipulate the Header and the Footer area, and then set some of the fonts, and other basic features. I am using Gutenberg to edit everything between the Header and the Footer, I am setting the theme to have a box width, however, I have rows that I would like to have full width to the edge of the page. I am unable to figure out how to do this. There are discussions on the WordPress sections that there must be full-width assets in the functions .php file. Can anyone tell me if I am on the right track here or not, has anyone tried to accomplish this? Other thoughts out there from anyone?
Vote to pay developers attention to this features or issue.
3 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 2 weeks ago

If I were using Themler only, I would have taken the advantage of custom templates in it. I.e. create new Page template with full (or block) width and then assign this specific template to the pages needed.
See more details here: https://answers.themler.io/articles/9466/how-to-create-and-use-custom-templates
This would though mean that when you install new theme, it must contain custom template as well and you would need to assign it to those pages again.

If we go with WP Gutenberg rules, we can try the following (this wasn't tested though):
1) add this code to Home -> Setting -> CMS Code field:

/**
 * Register support for Gutenberg wide images in your theme
 */
function mytheme_setup() {
  add_theme_support( 'align-wide' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

2) Add this code to Home -> Settings -> Additional CSS:

  .entry-content .alignwide {
        margin-left  : -80px;
        margin-right : -80px;
    }
    .entry-content .alignfull {
        margin-left  : calc( -100vw / 2 + 100% / 2 );
        margin-right : calc( -100vw / 2 + 100% / 2 );
        max-width    : 100vw;
    }
    .alignfull img {
        width: 100vw;
    }

This code is taken from the article you referred to, so you can change the values for the CSS code in it.

Gina
Themler Support

If I were using Themler only, I would have taken the advantage of custom templates in it. I.e. create new Page template with full (or block) width and then assign this specific template to the pages needed. See more details here: https://answers.themler.io/articles/9466/how-to-create-and-use-custom-templates This would though mean that when you install new theme, it must contain custom template as well and you would need to assign it to those pages again. If we go with WP Gutenberg rules, we can try the following (this wasn't tested though): 1) add this code to Home -> Setting -> CMS Code field: /** * Register support for Gutenberg wide images in your theme */ function mytheme_setup() { add_theme_support( 'align-wide' ); } add_action( 'after_setup_theme', 'mytheme_setup' ); 2) Add this code to Home -> Settings -> Additional CSS: .entry-content .alignwide { margin-left : -80px; margin-right : -80px; } .entry-content .alignfull { margin-left : calc( -100vw / 2 + 100% / 2 ); margin-right : calc( -100vw / 2 + 100% / 2 ); max-width : 100vw; } .alignfull img { width: 100vw; } This code is taken from the article you referred to, so you can change the values for the CSS code in it. Gina Themler Support
ike
16 Posts
ike posted this 2 weeks ago

No it's on multiple pages where i would just put a section or a row in that would make it full width. So for instance before I was using WPBakery, and on a row, I could add a column, and in the setting make it full width, or box. This would override the width settings on the template so it didn't mess up the other 50 pages, or posts. So if I changed the template, all those other pages would still be what the new template was, only those columns would have the override, I'm trying to find a way to make that work for Gutenberg, or at least implement the path that the WordPress community put out there which was this

https://weblines.com.au/gutenberg-blocks-wide-alignment-full-width/

If someone can give me information of how to implement this in Themler, and make it work, and make it so when I update the theme I don't have to go back and reinstall this each time, it would be greatly helpful.

Ike

No it's on multiple pages where i would just put a section or a row in that would make it full width. So for instance before I was using WPBakery, and on a row, I could add a column, and in the setting make it full width, or box. This would override the width settings on the template so it didn't mess up the other 50 pages, or posts. So if I changed the template, all those other pages would still be what the new template was, only those columns would have the override, I'm trying to find a way to make that work for Gutenberg, or at least implement the path that the WordPress community put out there which was this https://weblines.com.au/gutenberg-blocks-wide-alignment-full-width/ If someone can give me information of how to implement this in Themler, and make it work, and make it so when I update the theme I don't have to go back and reinstall this each time, it would be greatly helpful. Ike
Support Team
Support Team posted this 2 weeks ago

Hello,

Do you need to have Full Width only on a specific page?
If so, you can try creating new Page template in Themler, change the content width to Fluid and check all other settings to match this design (like page width, any extra margins or paddings on the sides). Then this template can be assigned to that specific page you need.

Gina
Themler Support

Hello, Do you need to have Full Width only on a specific page? If so, you can try creating new Page template in Themler, change the content width to Fluid and check all other settings to match this design (like page width, any extra margins or paddings on the sides). Then this template can be assigned to that specific page you need. Gina Themler Support
You must log in or register to leave comments