{"id":328641,"date":"2020-10-14T00:52:09","date_gmt":"2020-10-14T07:52:09","guid":{"rendered":"https:\/\/wpbeaveraddons.com\/?p=328641"},"modified":"2020-10-14T00:52:15","modified_gmt":"2020-10-14T07:52:15","slug":"custom-footer-beaver-builder-free","status":"publish","type":"post","link":"https:\/\/wpbeaveraddons.com\/custom-footer-beaver-builder-free\/","title":{"rendered":"How to Create a Custom Footer with Beaver Builder Lite"},"content":{"rendered":"\n<p><em>Are you looking for a simple way to customize the footer of your Beaver Builder website? You have landed on the right page. In this tutorial, I will show you how to create a custom footer with Beaver Builder and PowerPack addon.<\/em><\/p>\n\n\n\n<p>Every part of the website matters a lot. Even the small parts that the section that often goes unnoticed like the footer section plays a big role.<\/p>\n\n\n\n<p>If you have a well-designed footer, it can act as a major navigation point for your visitors. You can place all the relevant and important links of your website in a well-organized manner in your footer.<\/p>\n\n\n\n<p>Although it is such an important region, we usually don&#8217;t get many options with the themes to customize the footer.<\/p>\n\n\n\n<p>But is that it? Does that mean if one needs to customize the footer, they need to code their way?<\/p>\n\n\n\n<p>Definitely not!<\/p>\n\n\n\n<p>With advanced page builders like Beaver Builder, you can customize the footer of your website with simple drag and drop actions.<\/p>\n\n\n\n<p>Now, there are two ways to do this.<\/p>\n\n\n\n<p><strong>If you have <a aria-label=\"Beaver Themer (opens in a new tab)\" href=\"https:\/\/wpbeaveraddons.com\/go\/beaverbuilder\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"rank-math-link\">Beaver Themer<\/a>,<\/strong> you can use it to customize every part of the website like, the header, footer, or the sidebar.<\/p>\n\n\n\n<p>You can check here how you can customize the Footer of your website using the Beaver Themer.<\/p>\n\n\n\n<p>How to Create a Custom Footer with Beaver Themer<\/p>\n\n\n\n<p>But! <strong>If you do not have Beaver Themer,<\/strong> you can still customize parts of your website easily with the help of PowerPack for Beaver Builder.<\/p>\n\n\n\n<p>PowerPack comes with a creative <strong><a href=\"https:\/\/wpbeaveraddons.com\/demo\/header-footer-builder\/\" target=\"_blank\" aria-label=\"header\/footer builder (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"rank-math-link\">header\/footer builder<\/a><\/strong> that allows you to create a custom design for your website\u2019s header and footer.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"620\" height=\"476\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-beaver-builder.png\" alt=\"Custom footer for Beaver Builder\" class=\"wp-image-328645\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-beaver-builder.png 620w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-beaver-builder-300x230.png 300w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/figure>\n\n\n\n<p>In this tutorial, we will see how you can create a custom footer design for your website with <a href=\"https:\/\/wordpress.org\/plugins\/beaver-builder-lite-version\/\" target=\"_blank\" aria-label=\"Beaver Builder Free (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"rank-math-link\">Beaver Builder Free<\/a> version and <a href=\"https:\/\/wpbeaveraddons.com\/pricing\" target=\"_blank\" aria-label=\"PowerPack Pro addon (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"rank-math-link\">PowerPack Pro addon<\/a>.<\/p>\n\n\n\n<p>If you would rather watch a video of the same tutorial, you can check this video:<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to Create a Custom Footer with Beaver Builder | PowerPack Beaver Builder Addon\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/G0p8x-6axQk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Creating a Custom Footer with Beaver Builder&nbsp;<\/h2>\n\n\n\n<p>For this tutorial, we will be using the Beaver Builder lite plugin and the PowerPack Pro addon, make sure you have both the plugins installed and activated on your website.<\/p>\n\n\n\n<p>You can get these two plugins here:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/wordpress.org\/plugins\/beaver-builder-lite-version\/\" target=\"_blank\" aria-label=\"Beaver Builder Lite\/Pro (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"rank-math-link\">Beaver Builder Lite\/Pro<\/a><\/li><li><a class=\"rank-math-link\" href=\"https:\/\/wpbeaveraddons.com\/\">PowerPack Pro Addon<\/a><\/li><\/ul>\n\n\n\n<p>Let\u2019s begin designing our footer.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Creating A New Page<\/h3>\n\n\n\n<p>The first thing you need to do is to create a new page.<\/p>\n\n\n\n<p><strong>Step 1.1:<\/strong> Go to WordPress Admin Dashboard and add a new page by going to Pages &gt; Add New. Give your page a proper name like \u201cWebsite Footer\u201d or \u201cMy Footer\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"568\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-2-1024x568.jpg\" alt=\"my custom footer\" class=\"wp-image-328646\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-2-1024x568.jpg 1024w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-2-300x166.jpg 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-2-768x426.jpg 768w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-2.jpg 1140w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Step 1.2:<\/strong> Now, we need to make sure this page is blank and does not have any sidebars or footers of its own. So go ahead and disable the sidebars or select the page layout as a canvas.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"327\" height=\"382\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/template-settings.jpg\" alt=\"template settings\" class=\"wp-image-328647\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/template-settings.jpg 327w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/template-settings-257x300.jpg 257w\" sizes=\"(max-width: 327px) 100vw, 327px\" \/><\/figure>\n\n\n\n<p><strong>Step 1.3: <\/strong>Once you are done making changes, click on the Launch Beaver Builder button.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Designing the Footer with Beaver Builder<\/h3>\n\n\n\n<p>In this section, we will be creating our website\u2019s footer. If you have a specific design you want to give your footer, you can make the same using the Beaver Builder. I am going to create a design that will look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"292\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-1-1024x292.jpg\" alt=\"footer design with powerpack\" class=\"wp-image-328648\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-1-1024x292.jpg 1024w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-1-300x86.jpg 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-1-768x219.jpg 768w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-1-1536x439.jpg 1536w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-1.jpg 1870w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Step 2.1: <\/strong>Since I will be adding 4 separate areas in my Footer, I am going to add a 4 column layout. Simply drag and drop it on the page.<\/p>\n\n\n\n<p><strong>Step 2.2:<\/strong> Once you have added the layout, start adding the modules on the page. In the first column, I will add the site logo and a text block below that. You can adjust the width of the columns to fit the logo and text area accordingly.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"508\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-4-1024x508.jpg\" alt=\"adding footer elements in Beaver Builder\" class=\"wp-image-328649\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-4-1024x508.jpg 1024w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-4-300x149.jpg 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-4-768x381.jpg 768w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-4-1536x763.jpg 1536w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-4.jpg 1829w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Step 2.3: <\/strong>Let\u2019s add a few menus or links that can work as functional navigation points for the visitors. In one column I will be adding links about the company and in the next column, I will add links for the user accounts. Go ahead and add the respective menus or list. You can customize the text and styling of these two columns from the settings easily.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"510\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-3-1024x510.jpg\" alt=\"adding menus in custom footer\" class=\"wp-image-328650\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-3-1024x510.jpg 1024w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-3-300x149.jpg 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-3-768x382.jpg 768w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-3-1536x765.jpg 1536w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-3.jpg 1902w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Once you are done, we will add items to our last column.<\/p>\n\n\n\n<p><strong>Step 2.4:<\/strong> In the last column, I am going to add social media icons. For this, simply drag and drop the social share module of PowerPack and add the respective links to the social icons.<\/p>\n\n\n\n<p>Now if you want you can add another section at the bottom which can have the copyright details of the website or any other links or details.<\/p>\n\n\n\n<p>After making the changes, this is what the final design looks like:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"292\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-1-1-1024x292.jpg\" alt=\"final footer design\" class=\"wp-image-328651\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-1-1-1024x292.jpg 1024w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-1-1-300x86.jpg 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-1-1-768x219.jpg 768w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-1-1-1536x439.jpg 1536w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-1-1.jpg 1870w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Step 2.5:<\/strong> Once you have made all the changes, simply publish the page.<\/p>\n\n\n\n<p>Now we just need to set the page as our website\u2019s footer.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Setting Up the Footer<\/h3>\n\n\n\n<p><strong>Step 3.1:<\/strong> Go back to your WordPress admin page and go to <strong>Settings &gt; PowerPack<\/strong>. Now go to the Header\/Footer Builder tab.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"503\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-5-1024x503.jpg\" alt=\"custom header settings option of PowerPack\" class=\"wp-image-328652\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-5-1024x503.jpg 1024w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-5-300x147.jpg 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-5-768x377.jpg 768w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-5-1536x755.jpg 1536w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-5.jpg 1830w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Step 3.2:<\/strong> In the Header\/Footer Builder tab, you will see the footer option set as default. You simply need to change the default option to the page you have just designed. Click on the drop-down list and select the page you have designed recently.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"562\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-6-1-1024x562.jpg\" alt=\"beaver builder free custom footer\" class=\"wp-image-328655\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-6-1-1024x562.jpg 1024w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-6-1-300x165.jpg 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-6-1-768x421.jpg 768w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/custom-footer-6-1.jpg 1050w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Once selected, click on the save changes button.<\/p>\n\n\n\n<p>Your website\u2019s footer will be live. Simple as that. \ud83d\ude42<\/p>\n\n\n\n<p>If you wish to make changes to the footer, simply make the changes to the page you have set as the footer and the changes will be applied sitewide.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Winding it Up!<\/h2>\n\n\n\n<p>With the Header\/Footer builder of PowerPack addon, you can easily create custom footers and headers for your website with the Beaver Builder free\/pro version.<\/p>\n\n\n\n<p>Header\/Footer builder is one of the many features of PowerPack. You get 100+ amazing and creative modules along with hundreds of professionally designed Beaver Builder templates. You can get all of this with the PowerPack Addon for Beaver Builder today!<\/p>\n\n\n\n<p><a href=\"https:\/\/wpbeaveraddons.com\/pricing\/\">Get PowerPack now!<\/a><\/p>\n\n\n\n<p>If you found this tutorial useful, do share the love!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Are you looking for a simple way to customize the footer of your Beaver Builder website? You have landed on the right page. In this tutorial, I will show you how to create a custom footer with Beaver Builder and PowerPack addon. Every part of the website matters a lot. Even the small parts that&hellip;<\/p>\n","protected":false},"author":1811,"featured_media":332751,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[12],"tags":[],"class_list":["post-328641","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/328641"}],"collection":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/users\/1811"}],"replies":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/comments?post=328641"}],"version-history":[{"count":4,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/328641\/revisions"}],"predecessor-version":[{"id":328666,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/328641\/revisions\/328666"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media\/332751"}],"wp:attachment":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media?parent=328641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/categories?post=328641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/tags?post=328641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}