{"id":17946,"date":"2020-12-22T15:00:24","date_gmt":"2020-12-22T14:00:24","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=17946"},"modified":"2020-12-22T11:02:09","modified_gmt":"2020-12-22T10:02:09","slug":"how-to-create-full-width-page-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-full-width-page-in-wordpress\/","title":{"rendered":"How to Create a Full Width Page in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]A full width page can really make your WordPress website pop, which is why so many <a href=\"https:\/\/qodeinteractive.com\/\">premium themes<\/a> come with a <strong>full width layout<\/strong>. However, in case you are not using a theme with a built-in full width page, you can easily use a plugin or the Elementor page editor to lay it out. We will show you how.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But first, you may be wondering: what exactly is a full width page? This question, and three methods of creating and laying out a full width page, are what this article is all about.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#when-to-use-full-width-page-layout\">When to Use a Full Width Page Layout<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#change-page-layout-to-full-width\">How to Change a Page Layout To Full Width In a Theme<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#create-full-width-wordpress-page-using-plugin\">How to Create a Full Width WordPress Page Using a Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#create-full-width-wordpress-page-using-elementor\">How to Create a Full Width WordPress Page Using Elementor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"when-to-use-full-width-page-layout\"><\/a>When to Use a Full Width Page Layout<\/h2>\n<p>[\/vc_column_text][vc_column_text]A full width layout can be <strong>a great way to showcase graphics<\/strong>. If you are designing a visuals-forward webpage, you can use them to full effect by displaying them in the fullness of their glory, without sidebars and other elements cluttering your webpage space. If you are running a text-heavy blog or news website, a full width layout will mean that your users will have to read through lines of text stretching the full width of the page, which is a strain on the eyes. A good solution to this might be to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-create-tabbed-content-wordpress\/\">introduce tabs<\/a>, but a full width layout still <strong>works best for image conten<\/strong>t.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Even if the website you are looking at is not a graphics-laden portfolio, a full width layout may <strong>give your website a dynamic, modern look<\/strong>. Still, a traditional, box-layout design confers a more serious, professional tone. Depending on what kind of business you\u2019re in, a full width layout may not be right for you.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"change-page-layout-to-full-width\"><\/a>How to Change a Page Layout To Full Width In a Theme<\/h2>\n<p>[\/vc_column_text][vc_column_text]If your theme already has a full width layout, you are in luck. It will be easy enough to find. Simply load the page you want to lay out in full width, find the<strong> Page Attributes<\/strong> section in the <strong>Document<\/strong> tab of your right-hand side menu, and select the <strong>Full Width<\/strong> layout there.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Full-Width-Template.jpg\" class=\"attachment-full size-full\" alt=\"Full Width Template\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Full-Width-Template.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Full-Width-Template-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Full-Width-Template-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Full-Width-Template-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And that is all there is to it. You can now continue to edit your full width page as you would any other page. The specific, of course, will depend on your theme.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"create-full-width-wordpress-page-using-plugin\"><\/a>How to Create a Full Width WordPress Page Using a Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]Now, if your theme lacks a full width page template, you can try modifying it using a plugin. The plugin we will be using is <a href=\"https:\/\/wordpress.org\/plugins\/fullwidth-templates\/\" target=\"_blank\" rel=\"noopener\">Fullwidth Templates<\/a>. You need to install and activate the Fullwidth Templates plugin. If you are not sure <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">how to install a plugin<\/a>, we have a handy tutorial just for you.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you have done that, you will find that you have three new templates in the <strong>Page Attributes<\/strong> section of the page you are editing. <em>FW Fullwidth<\/em> simply creates a full width page in case your theme does not provide you with one, <em>FW Fullwidth No Header Footer<\/em> also removes the header and the footer for an ultra-minimalist look, and <em>FW No Sidebar<\/em> will only remove your sidebar, if you are using it, freeing up more space on your page.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Full-Width-Templates-Plugin.jpg\" class=\"attachment-full size-full\" alt=\"Full Width Templates Plugin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Full-Width-Templates-Plugin.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Full-Width-Templates-Plugin-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Full-Width-Templates-Plugin-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Full-Width-Templates-Plugin-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Below, for instance, is what a page with just some placeholder text and an image looks like in <em>FW Fullwidth No Header Footer<\/em> mode: the plugin has cleaned up nearly everything. Of course, this makes for an extremely minimalist, no frills whatsoever solution considering the theme we are using (though it is pretty much guaranteed to be the fastest loading page we have ever created), but it may work for you depending on your content.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"483\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/No-Header-Footer-Full-Width-Preview.jpg\" class=\"attachment-full size-full\" alt=\"No Header Footer Full Width Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/No-Header-Footer-Full-Width-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/No-Header-Footer-Full-Width-Preview-300x150.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/No-Header-Footer-Full-Width-Preview-768x383.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/No-Header-Footer-Full-Width-Preview-620x309.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Bear in mind, though: this plugin was tested with a lot of the most popular themes and page builders, but, depending on the layout, might not work with yours. It is usually best to rely on the theme\u2019s settings if you are not an experienced WordPress user.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"create-full-width-wordpress-page-using-elementor\"><\/a>How to Create a Full Width WordPress Page Using Elementor<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you are using Elementor, you are in luck: this page editor already has the functionality you need.. Find the page you wish to convert to full width, or create a <strong>New Page<\/strong> using the New Page command on your left-hand side menu. Next, click on the button to <strong>Edit with Elementor<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Edit-WIth-Elementor.jpg\" class=\"attachment-full size-full\" alt=\"Edit WIth Elementor\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Edit-WIth-Elementor.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Edit-WIth-Elementor-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Edit-WIth-Elementor-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Edit-WIth-Elementor-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The next thing you want is the <strong>Settings<\/strong> (gear) icon. It is located at the bottom of the left-hand side menu.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Elementor-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Elementor-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Elementor-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Elementor-Settings-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Elementor-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, under the <strong>Page Layout<\/strong> menu, choose Full Width. But this just means that the page will allow content to stretch to full width.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Elementor-Full-Width.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Full Width\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Elementor-Full-Width.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Elementor-Full-Width-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Elementor-Full-Width-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Elementor-Full-Width-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In order to make your content take up the full width of the screen, you need to set that up using the element\u2019s <strong>Layout<\/strong> settings. Simply click on the element\u2019s <strong>Edit<\/strong> menu, and change its layout from the default <strong>Boxed<\/strong> to <strong>Full Width<\/strong>, and your content will now stretch fully between the vertical edges of the page.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Elementor-Full-Width-2.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Full Width\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Elementor-Full-Width-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Elementor-Full-Width-2-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Elementor-Full-Width-2-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Elementor-Full-Width-2-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And you are all set! See how only the second text section, the one whose layout we\u2019ve changed from boxed to full width, stretches from margin to margin.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"477\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Elementor-Full-Width-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Full Width Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Elementor-Full-Width-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Elementor-Full-Width-Preview-300x148.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Elementor-Full-Width-Preview-768x378.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Elementor-Full-Width-Preview-620x305.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Note that your theme\u2019s settings or a plugin\u2019s settings (<strong>Page Attributes<\/strong> discussed above) may override Elementor\u2019s page settings. That\u2019s not much of a problem, you simply need to change the theme\u2019s page settings to Full Width, too, as described above.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As you can see, with Elementor, laying out a full width page in WordPress is no trouble at all. So, if you are aiming to impress desktop and mobile users alike with your responsive design skills, or if you are aiming to create a visually impressive and immersive webpage for your WordPress website, you now have an extra tool at your fingertips.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Want to make your layouts really pop? Take a look our handy how-to on full width pages in WordPress!<\/p>\n","protected":false},"author":16990,"featured_media":18039,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,13],"class_list":["post-17946","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/17946","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=17946"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/17946\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/18039"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=17946"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=17946"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=17946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}