{"id":34802,"date":"2020-11-21T03:03:20","date_gmt":"2020-11-21T11:03:20","guid":{"rendered":"https:\/\/461226a8f4.nxcli.net\/?post_type=article&#038;p=34802"},"modified":"2021-05-04T10:26:25","modified_gmt":"2021-05-04T18:26:25","slug":"the-ultimate-guide-to-website-builder","status":"publish","type":"post","link":"https:\/\/w3layouts.com\/the-ultimate-guide-to-website-builder\/","title":{"rendered":"The Ultimate Guide to Free Website Builder"},"content":{"rendered":"\n<p>Creating a website is no easy task you need a free website builder. There a lot of things to be handled like design, development, and content (both textual and visual). A web designer has to design a website, then a web developer has to deal with HTML documents and style sheets.<\/p>\n\n\n\n<p>To prevent all the fatigue, W3Layouts Team has been creating amazing website templates for many years now. However, a lot of you had trouble editing the templates so we have a free website builder to build your website with ease.<\/p>\n\n\n\n<p>Owing to the abundance of requests we were getting each week for help, we started working on a game-changing tool that can help you maximize the impact of each template on our website.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-list-of-features-in-website-builder\"><strong>List of Features<\/strong> in website builder:<\/h3>\n\n\n\n<ul><li><a href=\"#drag-drop\">Drag &amp; Drop&nbsp;<\/a><\/li><li><a href=\"#multi-platform-views\">Multi platform Views<\/a>&nbsp;<\/li><li><a href=\"#simple-page-management\">Simple Page Management<\/a>&nbsp;<\/li><li><a href=\"#page-section-linking\">Page Section Linking<\/a>&nbsp;<\/li><li><a href=\"#linking-a-page\">Linking A Page<\/a>&nbsp;<\/li><li><a href=\"#edit-content-like-a-pro \">Editing Content<\/a><\/li><li><a href=\"#style-editor\">Style Editor<\/a>&nbsp;<\/li><li><a href=\"#image-manager\">Image Manager<\/a>&nbsp;<\/li><li><a href=\"#background-image-manager\">Background&nbsp;Image Manager<\/a>&nbsp;<\/li><li><a href=\"#video-manager\">Video Manager<\/a>&nbsp;<\/li><li><a href=\"#icon-manager\">Icon Manager<\/a>&nbsp;<\/li><li><a href=\"#quick-export\">Quick Export<\/a>&nbsp;<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-faq\">FAQ:<\/h3>\n\n\n\n<ul><li><a href=\"#faq-one\">How to modify a menu item?&nbsp;<\/a>&nbsp;<\/li><li><a href=\"#faq-two\">Is there a way to see my page outside the editor?<\/a>&nbsp;<\/li><li><a href=\"#faq-three\">How to rename a page?&nbsp;<\/a><\/li><li><a href=\"#faq-four\">Can I view the source code of my page?<\/a>&nbsp;&nbsp;<\/li><li><a href=\"#faq-five\">How to add a border around an image?&nbsp;<\/a>&nbsp;<\/li><li><a href=\"#faq-six\">How to delete an element?<\/a>&nbsp;<\/li><li><a href=\"#faq-seven\">I have designed my website using the W3Layouts Editor. How can I publish it on my actual website?<\/a>&nbsp;&nbsp;<\/li><\/ul>\n\n\n\n<p>After working on this tool for countless days and nights, we have finally launched our website builder that can help you design the website of your dreams.&nbsp;&nbsp;<\/p>\n\n\n\n<p>It is an intuitive drag &amp; drop based tool that allows you to edit any template on our website. When we say any template, we mean literally every single one currently available on our website.&nbsp;<\/p>\n\n\n\n<p>An online presence is the single most important factor to help your brand keep up with the changing landscape. Businesses that fail to maintain a digital presence are the ones that get left behind.&nbsp;However, it can be a mountain of a task for the average person to build a website from scratch.&nbsp;&nbsp;<\/p>\n\n\n\n<p>We made the tool with the average person in mind. Someone who doesn\u2019t know how to code but wants a great looking website. If this sounds like you, our latest innovation is precisely the right one for you.&nbsp;&nbsp;<\/p>\n\n\n\n<p>In this guide, we will cover everything you need to know to design and publish a gorgeous web page or website using our brand new tool. Simplicity is at the core of our design so do not worry if you are not a tech-savvy person.&nbsp;&nbsp;<\/p>\n\n\n\n<p><strong>What Makes Our Online Editor A Game Changer?&nbsp;<\/strong>&nbsp;<\/p>\n\n\n\n<p>Before we get into the how, let\u2019s talk about the why. You heard us call this editor a game changer and you might be wondering why.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Our template editor is not just some random page builder that\u2019s good for nothing. On the contrary, here are some of the most fantastic ways our editor could take your online presence to the next level:&nbsp;&nbsp;<\/p>\n\n\n\n<p><strong>1). Mobile First Design<\/strong>&nbsp;<\/p>\n\n\n\n<p>Mobile First is the ideology we adopted when we started W3Layouts many years ago. The founder,&nbsp;<a href=\"https:\/\/twitter.com\/w3hidayath\">Hidayath&nbsp;Shaik,<\/a> had a vision from day one to make the&nbsp;internet mobile-friendly. This was long before the competitors made a push for the same.&nbsp;&nbsp;<\/p>\n\n\n\n<p>When developing this tool, we kept true to our vision of promoting a mobile-first internet and this is reflected in the core design of our editor.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Any websites made using the online editor are responsive web design friendly and will work across all devices used by your audience. This includes, but is not limited to mobile phones, tablets, desktops, and large screens.<\/p>\n\n\n\n<p><strong>2). Lightning Fast<\/strong>&nbsp;<\/p>\n\n\n\n<p>Any website made using our website editor runs at a lightning pace thanks to the pure HTML export.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Once you <a href=\"\/articles\/deploy-website-with-cpanel\/\">upload your exported template to your web hosting account<\/a>, even the cheapest package will allow you to handle a massive number of visitors daily.&nbsp;&nbsp;<\/p>\n\n\n\n<p>How? Since your website is made using HTML, you don\u2019t need to run any heavy functions like a database or even PHP.&nbsp; Your website will be a static website.<\/p>\n\n\n\n<p><strong>3). Simplicity<\/strong>&nbsp;<\/p>\n\n\n\n<p>As mentioned earlier, simplicity was of utmost priority during the design of our editor. Our efforts have paid off well in the form of a simple platform that even your grandmother could use. No guarantees on that last statement though \ud83d\ude42<\/p>\n\n\n\n<p>How simple is it? You don\u2019t need to install any complex software or even touch a single line of code. No more staying up late at night trying to make that background the color you want!&nbsp;&nbsp;<\/p>\n\n\n\n<p>Our drag &amp; drop design makes everything intuitive. Want to change a headline? Just click on it and type away!&nbsp;&nbsp;<\/p>\n\n\n\n<p><strong>4). Accessible To Everyone<\/strong>&nbsp;<\/p>\n\n\n\n<p>We know how some of you are just starting with a humble budget. Here at W3Layouts we deeply respect people like yourself and we always strive to help our customers.&nbsp;&nbsp;<\/p>\n\n\n\n<p>While we could charge a premium like almost any other business on the internet, we have decided to give out our amazing software for nothing but your good wishes. You do not have to pay us anything to use it.&nbsp;&nbsp;<\/p>\n\n\n\n<p>However, for those of you who would like to support what we are building here, you can always pay a small price to do so. You get to remove the links from the footer on in addition to our gratitude.&nbsp;&nbsp;<\/p>\n\n\n\n<p><strong>Launching The W3Layouts Online Website Builder<\/strong><\/p>\n\n\n\n<p>Just like all things W3Layouts, it is quite easy to launch our editor. Just follow these steps to begin using the editor:&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"706\" src=\"\/wp-content\/uploads\/2019\/10\/1-3-1320x706.jpg\" alt=\"\" class=\"wp-image-34823\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/1-3-1320x706.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/1-3-600x321.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/1-3-386x206.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/1-3-990x529.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/1-3-768x411.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/1-3.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p>Browse through our wide selection of templates available freely on our website. We have categorized everything in dozens of different categories with a huge variety of templates in each. For example, there are dozens upon dozens of templates in the 404 Pages category alone.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"713\" src=\"\/wp-content\/uploads\/2019\/10\/2-1-1320x713.jpg\" alt=\"\" class=\"wp-image-34824\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/2-1-1320x713.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/2-1-600x324.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/2-1-386x209.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/2-1-990x535.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/2-1-768x415.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/2-1.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p>Once you have found a category you like, click on it to visit the details page.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"709\" src=\"\/wp-content\/uploads\/2019\/10\/3-1-1320x709.jpg\" alt=\"\" class=\"wp-image-34825\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/3-1-1320x709.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/3-1-600x322.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/3-1-386x207.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/3-1-990x532.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/3-1-768x412.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/3-1.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p>On the template details page, you will see an aptly titled button called \u201cEdit Template\u201d. Simply click on it to launch the editor.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"750\" src=\"\/wp-content\/uploads\/2019\/10\/4-1-1320x750.jpg\" alt=\"\" class=\"wp-image-34826\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/4-1-1320x750.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/4-1-600x341.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/4-1-386x219.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/4-1-990x563.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/4-1-768x437.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/4-1.jpg 1900w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p>You will have to sign-in to your W3Layouts account at this point. In case you don\u2019t have one, it is actually quite simple. You just need to enter your email and choose a password.&nbsp; <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"752\" src=\"\/wp-content\/uploads\/2019\/10\/5-1-1320x752.jpg\" alt=\"\" class=\"wp-image-34827\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/5-1-1320x752.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/5-1-600x342.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/5-1-386x220.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/5-1-990x564.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/5-1-768x438.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/5-1.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p>Voila! Our innovate builder should be shining bright on your screens now with your selected template loaded already.&nbsp;&nbsp;<\/p>\n\n\n\n<p><strong>A Comprehensive List of Features You Should Check Out<\/strong>&nbsp;<\/p>\n\n\n\n<p>You\u2019ve launched the editor with a template of your choice. Now it\u2019s time to mold that template into the website you have always dreamed of.&nbsp;&nbsp;<\/p>\n\n\n\n<p>The first thing you will notice is that every part of the template is divided into sections. You will see a thin red border around each element once you hover over it.&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<p id=\"drag-drop\"><strong>1). Drag &amp; Drop<\/strong>&nbsp;<\/p>\n\n\n\n<p>Following is a comprehensive list of features to help you customize your template in a breeze:&nbsp;&nbsp;<\/p>\n\n\n\n<p>Owing to the Drag &amp; Drop nature of our editor, you can simply grab a template from the left panel and drop it onto the canvas. This will bring up the whole template in the page view.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"743\" src=\"\/wp-content\/uploads\/2019\/10\/7-1-1320x743.jpg\" alt=\"\" class=\"wp-image-34828\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/7-1-1320x743.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/7-1-600x338.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/7-1-386x217.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/7-1-990x557.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/7-1-768x432.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/7-1.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p>You can easily edit anything using our intuitive controls. Just click on an element to bring up the editing properties. You will see different properties load up in the left panel and the selected element get highlighted with a thin red border around it. This way you\u2019ll always know what you\u2019re editing.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"752\" src=\"\/wp-content\/uploads\/2019\/10\/8-1-1320x752.jpg\" alt=\"\" class=\"wp-image-34829\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/8-1-1320x752.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/8-1-600x342.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/8-1-386x220.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/8-1-990x564.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/8-1-768x438.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/8-1.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p id=\"multi-platform-views\"><strong>2). Multi platform Views<\/strong>&nbsp;<\/p>\n\n\n\n<p>Consumers are rapidly moving towards browsing the internet using a variety of devices including smartphones and tablets. Have you wondered how your website might look across the many devices used by your audience? Well, you don\u2019t have to wonder anymore.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Have you noticed the three icons right next to our logo on the top left? In case you can\u2019t tell already, those icons let you switch the view between different devices so you can quickly see how your website will look in other devices.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"754\" src=\"\/wp-content\/uploads\/2019\/10\/cross-devices-1-1320x754.jpg\" alt=\"\" class=\"wp-image-34830\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/cross-devices-1-1320x754.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/cross-devices-1-600x343.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/cross-devices-1-386x220.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/cross-devices-1-990x565.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/cross-devices-1-768x439.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/cross-devices-1.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p>You have three options in total. By default, the desktop view is brought up. You can edit and verify your site\u2019s look on all desktop devices through here.&nbsp;&nbsp;<\/p>\n\n\n\n<p>The other two are tablet and smartphone views. Again, you can switch in the click of a single button and you can see the responsive design of our themes in action instantly.&nbsp;&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-tablet-view\">Tablet View<\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"743\" src=\"\/wp-content\/uploads\/2019\/10\/9-2-1320x743.jpg\" alt=\"\" class=\"wp-image-34831\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/9-2-1320x743.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/9-2-600x338.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/9-2-386x217.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/9-2-990x557.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/9-2-768x432.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/9-2.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-mobile-view\">Mobile View<\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"743\" src=\"\/wp-content\/uploads\/2019\/10\/10-1-1320x743.jpg\" alt=\"\" class=\"wp-image-34832\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/10-1-1320x743.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/10-1-600x338.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/10-1-386x217.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/10-1-990x557.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/10-1-768x432.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/10-1.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p id=\"simple-page-management\"><strong>3). Simple Page Management<\/strong>&nbsp;<\/p>\n\n\n\n<p>Does your dream website need more than a single page? Do not worry, we have got you covered as well.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Keeping true to our core foundation of intuitive design, you are going to love our simple page management system.&nbsp;&nbsp;<\/p>\n\n\n\n<p>You can create a new page using the aptly named \u201cAdd Page\u201d button on the left panel. Once you click on it, you get the option to enter a name for your page. Please do not enter the HTML extension as our tool automatically does that for you.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Simply enter the name you want for the page and click the small \u201ctick\u201d icon button on the right side. A new page is instantly created for you.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"743\" src=\"\/wp-content\/uploads\/2019\/10\/11-1-1320x743.jpg\" alt=\"\" class=\"wp-image-34833\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/11-1-1320x743.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/11-1-600x338.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/11-1-386x217.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/11-1-990x557.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/11-1-768x432.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/11-1.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p>Following the above method you can manage your blog posts also.<\/p>\n\n\n\n<p><strong>Note:<\/strong>&nbsp;The name you enter here is the same one we will use when exporting your website in the last step.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Once you have created a new page, you will notice that the canvas is empty at the moment. Have you noticed the \u201cTemplates\u201d section on the left panel? If you look closely, all the templates for your chosen design are shown below it.&nbsp;&nbsp;<\/p>\n\n\n\n<p>To use a template for your newly made page, simply click on the name of the template. This will slide out a quick view of the template so you can be sure you\u2019ve picked the right one.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"743\" src=\"\/wp-content\/uploads\/2019\/10\/left-panel-view-1-1320x743.jpg\" alt=\"\" class=\"wp-image-34834\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/left-panel-view-1-1320x743.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/left-panel-view-1-600x338.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/left-panel-view-1-386x217.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/left-panel-view-1-990x557.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/left-panel-view-1-768x432.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/left-panel-view-1.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p>Once you have chosen a page template to use, simply grab it and drop it on the canvas. All the contents will show up in the page view right away. Simple as we promised, right?&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"748\" src=\"\/wp-content\/uploads\/2019\/10\/12-3-1320x748.jpg\" alt=\"\" class=\"wp-image-34836\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/12-3-1320x748.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/12-3-600x340.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/12-3-386x219.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/12-3-990x561.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/12-3-768x435.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/12-3.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p>What if you added a page earlier that you want to delete now? Find your page under the \u201cMy Pages\u201d section in the left panel. If you click on the page name, you will notice a small \u201ccross\u201d icon next to it.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"748\" src=\"\/wp-content\/uploads\/2019\/10\/cross-1320x748.jpg\" alt=\"\" class=\"wp-image-34886\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/cross-1320x748.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/cross-600x340.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/cross-386x219.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/cross-990x561.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/cross-768x435.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/cross.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p>Once you click on that icon, a confirmation dialogue will be brought. Click on the \u201cDelete Page\u201d button to confirm the same. You may also click on the \u201cCancel &amp; Close\u201d button if you have decided against it.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"453\" src=\"\/wp-content\/uploads\/2019\/10\/delete-popup-2-1320x453.jpg\" alt=\"\" class=\"wp-image-34837\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/delete-popup-2-1320x453.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/delete-popup-2-600x206.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/delete-popup-2-386x132.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/delete-popup-2-990x340.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/delete-popup-2-768x264.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/delete-popup-2.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p id=\"page-section-linking\"><strong>4). Page Section Linking<\/strong>&nbsp;<\/p>\n\n\n\n<p>Have you ever wanted to create a Table of Contents section on your website? It is quite easy to make using our editor. You can link to any section on your page by using the link editor.&nbsp;&nbsp;<\/p>\n\n\n\n<p>How? Click on any element that has a link in it. You will see the styling properties popup in the left panel. On the top, there\u2019s a \u201cLINK\u201d pane. You can click on it to bring up the link properties.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"748\" src=\"\/wp-content\/uploads\/2019\/10\/13-2-1320x748.jpg\" alt=\"\" class=\"wp-image-34838\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/13-2-1320x748.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/13-2-600x340.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/13-2-386x219.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/13-2-990x561.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/13-2-768x435.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/13-2.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p>You get two options there. You can either link to a separate page or a section within the same page.&nbsp;&nbsp;<\/p>\n\n\n\n<p>For this exercise, we want to create a link to a section within the same page so let&#8217;s use the \u201cChoose a block\u201d dropdown. You will see a list of all the available blocks. Click on the one you want to link to and you are done.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Tip: Do not forget to hit the \u201cApply Changes\u201d button whenever you want to save your changes. Your work will be lost otherwise.&nbsp;&nbsp;<\/p>\n\n\n\n<p id=\"linking-a-page\"><strong>5). Linking A Page<\/strong>&nbsp;<\/p>\n\n\n\n<p>You can just as easily link to a different page as well. Simply bring up the link-editor as explained in the last section. Remember: you need to select an element with a link in it, and then click on \u201cLink\u201d in the style editing panel on the left.&nbsp;&nbsp;<\/p>\n\n\n\n<p>To link to a page, you can use the \u201cChoose a page\u201d dropdown to do so. You can also change the text of the link from here as well.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"748\" src=\"\/wp-content\/uploads\/2019\/10\/links-1-1320x748.jpg\" alt=\"\" class=\"wp-image-34839\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/links-1-1320x748.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/links-1-600x340.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/links-1-386x219.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/links-1-990x561.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/links-1-768x435.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/links-1.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p id=\"edit-content-like-a-pro\"><strong>6). Edit Content Like A Pro<\/strong>&nbsp;<\/p>\n\n\n\n<p>Want to edit a heading, a paragraph or any other block of text within your page? Simply click on the element containing the text and the editing features will kick in. You can add, delete, and edit the text the same way you would in any word processor.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"743\" src=\"\/wp-content\/uploads\/2019\/10\/add-delete-1-1320x743.jpg\" alt=\"\" class=\"wp-image-34840\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/add-delete-1-1320x743.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/add-delete-1-600x338.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/add-delete-1-386x217.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/add-delete-1-990x557.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/add-delete-1-768x432.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/add-delete-1.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p>W3Layouts HTML site builder comes with a powerful rich text editor so you can style your content on the go.&nbsp;&nbsp;<\/p>\n\n\n\n<p>To bring up the rich text editor, select a block of text by double tapping your mouse. You will see a toolbar popup with a lot of options for you to choose from. Here\u2019s a complete list:&nbsp;&nbsp;<\/p>\n\n\n\n<ul><li>Bold&nbsp;<\/li><li>Italic&nbsp;<\/li><li>Underlined&nbsp;<\/li><li>Add A Link&nbsp;<\/li><li>Numbered List&nbsp;<\/li><li>Bullet Points&nbsp;<\/li><li>Headings (H1 to H4)&nbsp;<\/li><li>Remove Formatting&nbsp;<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"748\" src=\"\/wp-content\/uploads\/2019\/10\/edit-tool-1320x748.jpg\" alt=\"\" class=\"wp-image-34841\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/edit-tool-1320x748.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/edit-tool-600x340.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/edit-tool-386x219.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/edit-tool-990x561.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/edit-tool-768x435.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/edit-tool.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p>As with everything else, the rich text editor was made with simplicity in mind. The names of the buttons describe their function right away.&nbsp;&nbsp;<\/p>\n\n\n\n<p id=\"style-editor\"><strong>7). Style Editor<\/strong>&nbsp;<\/p>\n\n\n\n<p>Once you select an element, you will notice the Style Editor in the left panel. The available options depend upon your chosen element. For example, if you select a block of text, you will see the options to change the font, size, text color, or the background of the block itself.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"743\" src=\"\/wp-content\/uploads\/2019\/10\/text-styling-1320x743.jpg\" alt=\"\" class=\"wp-image-34842\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/text-styling-1320x743.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/text-styling-600x338.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/text-styling-386x217.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/text-styling-990x557.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/text-styling-768x432.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/text-styling.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p>The W3Layouts HTML Editor comes with a built-in CSS editor so you can insert your own CSS without going through any daunting source codes. You can also alter the CSS properties set by the template admin. Please note that this feature is for advanced users who actually know how to write CSS. However, if you mess something up, you can always reset the block using the \u201creset\u201d button on the bottom.&nbsp;&nbsp;<\/p>\n\n\n\n<p id=\"image-manager\"><strong>8). Image Manager<\/strong>&nbsp;<\/p>\n\n\n\n<p>The Image Manager allows you to quickly add an image or change an existing one. To bring up the editor, click on any image in your page. You will see a tab titled \u201cIMAGE\u201d on the top of the left panel.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"749\" src=\"\/wp-content\/uploads\/2019\/10\/15-1-1320x749.jpg\" alt=\"\" class=\"wp-image-34843\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/15-1-1320x749.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/15-1-600x341.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/15-1-386x219.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/15-1-990x562.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/15-1-768x436.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/15-1.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p>Once you open that tab, the Image Manager will load up. You can change the image in two ways. You can either enter the direct path to the image or upload an image using the \u201cSelect image\u201d button.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"747\" src=\"\/wp-content\/uploads\/2019\/10\/image-1320x747.jpg\" alt=\"\" class=\"wp-image-34844\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/image-1320x747.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/image-600x340.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/image-386x218.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/image-990x560.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/image-768x435.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/image.jpg 1908w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p id=\"background-image-manager\"><strong>9<\/strong><strong>).&nbsp;<\/strong><strong>Background&nbsp;<\/strong><strong>Image Manager<\/strong>&nbsp;<\/p>\n\n\n\n<p>The&nbsp;Background&nbsp;Image Manager allows you to quickly add an image or change an existing one. To bring up the editor, click on any&nbsp;background&nbsp;image in your page. You will&nbsp;notice the Style Editor in the left panel.&nbsp;There, you will see the options to change the&nbsp;background-image.&nbsp;<\/p>\n\n\n\n<p>To edit the&nbsp;background image, you can click on the&nbsp;background-image&nbsp;option in the left panel and&nbsp;upload an image&nbsp;of your choice.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Once you click the&nbsp;\u201cApply Changes\u201d button, the&nbsp;background image&nbsp;will update on the page right away.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"749\" src=\"\/wp-content\/uploads\/2019\/10\/bg-image-change-1-1320x749.jpg\" alt=\"\" class=\"wp-image-34917\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/bg-image-change-1-1320x749.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/bg-image-change-1-600x341.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/bg-image-change-1-386x219.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/bg-image-change-1-990x562.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/bg-image-change-1-768x436.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/bg-image-change-1.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p id=\"video-manager\"><strong>10). Video Manager<\/strong>&nbsp;<\/p>\n\n\n\n<p>The Video Manager allows you to edit a video in a breeze. Simply select a video on your page and the Video Manager will show up in the left panel.&nbsp;&nbsp;<\/p>\n\n\n\n<p>To edit the video, you can enter the&nbsp;Youtube&nbsp;or Vimeo ID for it. Do not worry about choosing the correct one, as the system automatically identifies the right one for you.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"748\" src=\"\/wp-content\/uploads\/2019\/10\/video-1320x748.jpg\" alt=\"\" class=\"wp-image-34846\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/video-1320x748.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/video-600x340.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/video-386x219.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/video-990x561.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/video-768x435.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/video.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p>Once you click the \u201cApply Changes\u201d button, the video will update on the page right away.&nbsp;&nbsp;<\/p>\n\n\n\n<p id=\"icon-manager\"><strong>11). Icon Manager<\/strong>&nbsp;<\/p>\n\n\n\n<p>Our Icon Manager works the same as the other managers. Once you click on an icon, you will see a tab called \u201cICON\u201d in the left panel. You should click on it to open the manager.&nbsp;&nbsp;<\/p>\n\n\n\n<p>The Icon Manager comes with a huge selection of icons from the Font Awesome Collection for you to choose from. Use the dropdown menu to check out all the available icons and then select the one that you like the best. Placing icons doesn\u2019t get any easier than this!&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"747\" src=\"\/wp-content\/uploads\/2019\/10\/icon-1320x747.jpg\" alt=\"\" class=\"wp-image-34847\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/icon-1320x747.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/icon-600x340.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/icon-386x218.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/icon-990x560.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/icon-768x435.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/icon.jpg 1908w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p id=\"quick-export\"><strong>12). Quick Export<\/strong>&nbsp;<\/p>\n\n\n\n<p>So you have made the website of your dreams. You like what you have and now want to publish it on your live site. You can now quickly export your website using the \u201cExport\u201d button at the top right.&nbsp;<\/p>\n\n\n\n<p>Once you click the export button, a dialogue will pop up allowing you to set the doctype. You don\u2019t want to change it? Just leave it empty and click the \u201cExport Now\u201d button on the right.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"296\" src=\"\/wp-content\/uploads\/2019\/10\/export-2-1320x296.jpg\" alt=\"\" class=\"wp-image-34848\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/export-2-1320x296.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/export-2-600x134.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/export-2-386x86.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/export-2-990x222.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/export-2-768x172.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/export-2.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p>Your browser will download a zip archive containing all the files for your website. This includes all HTML,&nbsp;JavaScript, and the images as well. We bundled everything in a single file so you can upload everything to your host easily.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Remember how you named your pages earlier? Our system uses the names you choose when exporting HTML for the page.&nbsp;&nbsp;<\/p>\n\n\n\n<p><strong>Frequently Asked Questions<\/strong>&nbsp;<\/p>\n\n\n\n<p id=\"faq-one\"><strong>1). How to modify a menu item?&nbsp;<\/strong>&nbsp;<\/p>\n\n\n\n<p>Our drag &amp; drop editor allows you to easily modify or even remove any menu at the click of a few buttons.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Hover your mouse over a menu item and click the left mouse button. A variety of options will show up in the left panel. You can easily change the color, font weight, or even the link for the menu through here.&nbsp;&nbsp;<\/p>\n\n\n\n<p>If you want to delete a menu item, click on the red \u201cremove\u201d button on the bottom right of the sidebar panel.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"540\" src=\"\/wp-content\/uploads\/2019\/10\/menu-2-1320x540.jpg\" alt=\"\" class=\"wp-image-34849\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/menu-2-1320x540.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/menu-2-600x245.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/menu-2-386x158.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/menu-2-990x405.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/menu-2-768x314.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/menu-2.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p id=\"faq-two\"><strong>2). Is there a way to see my page outside the editor?<\/strong>&nbsp;<\/p>\n\n\n\n<p>Yes! If you want to see what your page looks like without our Online Editors user interface over it, you can click the \u201cPreview\u201d button on the top right corner. It is placed right next to the \u201cExport\u201d button we mentioned earlier.<\/p>\n\n\n\n<p>Please note that the preview will always show your latest changes, even if these have not been saved yet.<br><strong>Links do not work in the preview; you can only preview the page you are currently working on.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"743\" src=\"\/wp-content\/uploads\/2019\/10\/preview-3-1320x743.jpg\" alt=\"\" class=\"wp-image-34850\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/preview-3-1320x743.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/preview-3-600x338.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/preview-3-386x217.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/preview-3-990x557.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/preview-3-768x432.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/preview-3.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p>&nbsp;&nbsp;<\/p>\n\n\n\n<p id=\"faq-three\"><strong>3). How to rename a page?<\/strong>&nbsp;<\/p>\n\n\n\n<p>Whether you accidentally set the wrong page name or just want to try a new one, you can change it by clicking on the name of the page in the sidebar panel. Once you open the page you want to rename, a tiny blue edit icon will show next to it.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"507\" src=\"\/wp-content\/uploads\/2019\/10\/renameone-2-1320x507.jpg\" alt=\"\" class=\"wp-image-34851\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/renameone-2-1320x507.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/renameone-2-600x230.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/renameone-2-386x148.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/renameone-2-990x380.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/renameone-2-768x295.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/renameone-2.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p>You can change the name of your page by clicking on that icon. Be sure to press the blue \u201ctick\u201d button to save it.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"474\" src=\"\/wp-content\/uploads\/2019\/10\/renametwo-1-1320x474.jpg\" alt=\"\" class=\"wp-image-34852\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/renametwo-1-1320x474.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/renametwo-1-600x215.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/renametwo-1-386x139.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/renametwo-1-990x356.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/renametwo-1-768x276.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/renametwo-1.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p id=\"faq-four\"><strong>4).&nbsp; Can I view the source code of my page?&nbsp;<\/strong>&nbsp;<\/p>\n\n\n\n<p>We know some of our users are more advanced than the others. Some of you know your way around HTML, CSS and even&nbsp;JavaScript. To give you more freedom and control over your template, we have added the option to directly modify the code within our online editor.&nbsp;&nbsp;<\/p>\n\n\n\n<p>To bring up the source code, you should click on the small gear icon on the right side. You will see a menu slide up. Click the \u201c&lt;\/&gt; Source\u201d button to bring up the source code panel. The panel contains all the HTML code for your page. You can edit anything directly through here.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"743\" src=\"\/wp-content\/uploads\/2019\/10\/source-view-1-1320x743.png\" alt=\"\" class=\"wp-image-34853\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/source-view-1-1320x743.png 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/source-view-1-600x338.png 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/source-view-1-386x217.png 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/source-view-1-990x557.png 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/source-view-1-768x432.png 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/source-view-1.png 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"743\" src=\"\/wp-content\/uploads\/2019\/10\/source-code-1-1320x743.jpg\" alt=\"\" class=\"wp-image-34854\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/source-code-1-1320x743.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/source-code-1-600x338.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/source-code-1-386x217.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/source-code-1-990x557.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/source-code-1-768x432.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/source-code-1.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p id=\"faq-five\"><strong>5). How to add a border around an image?&nbsp;<\/strong>&nbsp;<\/p>\n\n\n\n<p>To add a border around an image, click on the image you want to edit. The image editing options will show up in the left panel. Once there, you can change any of the following values:&nbsp;&nbsp;<\/p>\n\n\n\n<ul><li><strong>Border Radius<\/strong>&nbsp;&#8211; You can add a border with rounded corners to your image using these properties. You can add it for all four positions including top-left, top-right, bottom-left, and bottom-right.&nbsp;&nbsp;<\/li><li><strong>Border Color<\/strong>&nbsp;&#8211; As the name suggests, any color you choose here will be used as the color of the border around your images.&nbsp;&nbsp;<\/li><li><strong>Border Style<\/strong>&nbsp;&#8211; The border style value comes with three options. You can have either a dotted, dashed or a solid border.&nbsp;&nbsp;<\/li><li><strong>Border Width<\/strong>&nbsp;&#8211; The higher the number you choose here, the thicker your border will be.&nbsp;&nbsp;<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"749\" src=\"\/wp-content\/uploads\/2019\/10\/image-border-1-1320x749.jpg\" alt=\"\" class=\"wp-image-34855\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/image-border-1-1320x749.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/image-border-1-600x341.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/image-border-1-386x219.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/image-border-1-990x562.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/image-border-1-768x436.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/image-border-1.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p id=\"faq-six\"><strong>6). How to delete an element?&nbsp;<\/strong>&nbsp;<\/p>\n\n\n\n<p>To delete an element, you need to select it by clicking the left mouse button. You will see a red border around the selected element. To delete it, you need to click the red \u201cremove\u201d button at the bottom of the sidebar panel.&nbsp;&nbsp;<\/p>\n\n\n\n<p>There\u2019s a built-in confirmation dialogue to prevent any accidental deletions. Simply click the \u201cDelete Block\u201d button when prompted to do so.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"743\" src=\"\/wp-content\/uploads\/2019\/10\/delete-element-1-1320x743.jpg\" alt=\"\" class=\"wp-image-34856\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/delete-element-1-1320x743.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/delete-element-1-600x338.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/delete-element-1-386x217.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/delete-element-1-990x557.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/delete-element-1-768x432.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/delete-element-1.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"453\" src=\"\/wp-content\/uploads\/2019\/10\/delete-popup-3-1320x453.jpg\" alt=\"\" class=\"wp-image-34857\" srcset=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/delete-popup-3-1320x453.jpg 1320w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/delete-popup-3-600x206.jpg 600w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/delete-popup-3-386x132.jpg 386w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/delete-popup-3-990x340.jpg 990w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/delete-popup-3-768x264.jpg 768w, https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/delete-popup-3.jpg 1760w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/figure>\n\n\n\n<p id=\"faq-seven\"><strong>7). I have designed my website using the W3Layouts Editor. How can I publish it on my actual website?&nbsp;<\/strong>&nbsp;<\/p>\n\n\n\n<p>Congratulations! We are delighted to see you\u2019ve found the perfect design for your website. You need a web hosting account from any of the major providers to host your website.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Simply export your website using the export button (as explained earlier). You will get a zip file containing all the files including HTML, CSS and images as well.&nbsp;&nbsp;<\/p>\n\n\n\n<p>You need to log into your <a href=\"\/articles\/deploy-website-with-cpanel\/\">hosting provider\u2019s panel<\/a> to upload these files. Your website will go live as soon as you publish these.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Sounds too complicated? Don\u2019t have a hosting account? We have something exciting for you. We are working on a tool that will allow you to host your websites made with the W3Layouts Website Builder in a few clicks only. No complex setups.&nbsp;&nbsp;<\/p>\n\n\n\n<p>The best part? We will offer our hosting tool completely free! Do follow us our social channel for the exciting updates.&nbsp;&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"Creating a website is no easy task you need a free website builder. There a lot of things to be handled like design, development, and content (both textual and visual). A web designer has to design a website, then a web developer has to deal with HTML documents and style sheets. To prevent all the&#8230;\n","protected":false},"author":5,"featured_media":35143,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_relatedPosts":"","footnotes":""},"categories":[21005],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.8.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>The Ultimate Guide to Free Website Builder &#187; W3Layouts<\/title>\n<meta name=\"description\" content=\"Creating a website is no easy task. Use our free Website Builder includes Page management, Text Editing, Style Editor and HTML Quick Export for free\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/w3layouts.com\/the-ultimate-guide-to-website-builder\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Ultimate Guide to Free Website Builder &#187; W3Layouts\" \/>\n<meta property=\"og:description\" content=\"Creating a website is no easy task. Use our free Website Builder includes Page management, Text Editing, Style Editor and HTML Quick Export for free\" \/>\n<meta property=\"og:url\" content=\"https:\/\/w3layouts.com\/the-ultimate-guide-to-website-builder\/\" \/>\n<meta property=\"og:site_name\" content=\"W3Layouts\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/w3layouts\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-21T11:03:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-04T18:26:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/best-website-builder-W3Layouts.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1760\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"w3layouts\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@w3layouts\" \/>\n<meta name=\"twitter:site\" content=\"@w3layouts\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"w3layouts\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"23 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/w3layouts.com\/the-ultimate-guide-to-website-builder\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/w3layouts.com\/the-ultimate-guide-to-website-builder\/\"},\"author\":{\"name\":\"w3layouts\",\"@id\":\"https:\/\/w3layouts.com\/#\/schema\/person\/522ad070a7f55980bda8a5884462a243\"},\"headline\":\"The Ultimate Guide to Free Website Builder\",\"datePublished\":\"2020-11-21T11:03:20+00:00\",\"dateModified\":\"2021-05-04T18:26:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/w3layouts.com\/the-ultimate-guide-to-website-builder\/\"},\"wordCount\":3765,\"publisher\":{\"@id\":\"https:\/\/w3layouts.com\/#organization\"},\"articleSection\":[\"Knowledge base\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/w3layouts.com\/the-ultimate-guide-to-website-builder\/\",\"url\":\"https:\/\/w3layouts.com\/the-ultimate-guide-to-website-builder\/\",\"name\":\"The Ultimate Guide to Free Website Builder &#187; W3Layouts\",\"isPartOf\":{\"@id\":\"https:\/\/w3layouts.com\/#website\"},\"datePublished\":\"2020-11-21T11:03:20+00:00\",\"dateModified\":\"2021-05-04T18:26:25+00:00\",\"description\":\"Creating a website is no easy task. Use our free Website Builder includes Page management, Text Editing, Style Editor and HTML Quick Export for free\",\"breadcrumb\":{\"@id\":\"https:\/\/w3layouts.com\/the-ultimate-guide-to-website-builder\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/w3layouts.com\/the-ultimate-guide-to-website-builder\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/w3layouts.com\/the-ultimate-guide-to-website-builder\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/w3layouts.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Knowledge base\",\"item\":\"https:\/\/w3layouts.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"The Ultimate Guide to Free Website Builder\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/w3layouts.com\/#website\",\"url\":\"https:\/\/w3layouts.com\/\",\"name\":\"W3Layouts\",\"description\":\"Free Website Templates built with HTML, CSS and JS on top of bootstrap framework.\",\"publisher\":{\"@id\":\"https:\/\/w3layouts.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/w3layouts.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/w3layouts.com\/#organization\",\"name\":\"W3Layouts Limited\",\"url\":\"https:\/\/w3layouts.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/w3layouts.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/logo-400.png\",\"contentUrl\":\"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/logo-400.png\",\"width\":400,\"height\":400,\"caption\":\"W3Layouts Limited\"},\"image\":{\"@id\":\"https:\/\/w3layouts.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/w3layouts\",\"https:\/\/twitter.com\/w3layouts\",\"https:\/\/www.instagram.com\/w3layouts_\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/w3layouts.com\/#\/schema\/person\/522ad070a7f55980bda8a5884462a243\",\"name\":\"w3layouts\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/w3layouts.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/w3layouts.com\/wp-content\/uploads\/2020\/11\/cropped-w3layouts-logo-512-100x100.png\",\"contentUrl\":\"https:\/\/w3layouts.com\/wp-content\/uploads\/2020\/11\/cropped-w3layouts-logo-512-100x100.png\",\"caption\":\"w3layouts\"},\"sameAs\":[\"https:\/\/w3layouts.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Ultimate Guide to Free Website Builder &#187; W3Layouts","description":"Creating a website is no easy task. Use our free Website Builder includes Page management, Text Editing, Style Editor and HTML Quick Export for free","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/w3layouts.com\/the-ultimate-guide-to-website-builder\/","og_locale":"en_US","og_type":"article","og_title":"The Ultimate Guide to Free Website Builder &#187; W3Layouts","og_description":"Creating a website is no easy task. Use our free Website Builder includes Page management, Text Editing, Style Editor and HTML Quick Export for free","og_url":"https:\/\/w3layouts.com\/the-ultimate-guide-to-website-builder\/","og_site_name":"W3Layouts","article_publisher":"https:\/\/www.facebook.com\/w3layouts","article_published_time":"2020-11-21T11:03:20+00:00","article_modified_time":"2021-05-04T18:26:25+00:00","og_image":[{"width":1760,"height":1100,"url":"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/best-website-builder-W3Layouts.jpg","type":"image\/jpeg"}],"author":"w3layouts","twitter_card":"summary_large_image","twitter_creator":"@w3layouts","twitter_site":"@w3layouts","twitter_misc":{"Written by":"w3layouts","Est. reading time":"23 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/w3layouts.com\/the-ultimate-guide-to-website-builder\/#article","isPartOf":{"@id":"https:\/\/w3layouts.com\/the-ultimate-guide-to-website-builder\/"},"author":{"name":"w3layouts","@id":"https:\/\/w3layouts.com\/#\/schema\/person\/522ad070a7f55980bda8a5884462a243"},"headline":"The Ultimate Guide to Free Website Builder","datePublished":"2020-11-21T11:03:20+00:00","dateModified":"2021-05-04T18:26:25+00:00","mainEntityOfPage":{"@id":"https:\/\/w3layouts.com\/the-ultimate-guide-to-website-builder\/"},"wordCount":3765,"publisher":{"@id":"https:\/\/w3layouts.com\/#organization"},"articleSection":["Knowledge base"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/w3layouts.com\/the-ultimate-guide-to-website-builder\/","url":"https:\/\/w3layouts.com\/the-ultimate-guide-to-website-builder\/","name":"The Ultimate Guide to Free Website Builder &#187; W3Layouts","isPartOf":{"@id":"https:\/\/w3layouts.com\/#website"},"datePublished":"2020-11-21T11:03:20+00:00","dateModified":"2021-05-04T18:26:25+00:00","description":"Creating a website is no easy task. Use our free Website Builder includes Page management, Text Editing, Style Editor and HTML Quick Export for free","breadcrumb":{"@id":"https:\/\/w3layouts.com\/the-ultimate-guide-to-website-builder\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/w3layouts.com\/the-ultimate-guide-to-website-builder\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/w3layouts.com\/the-ultimate-guide-to-website-builder\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/w3layouts.com\/"},{"@type":"ListItem","position":2,"name":"Knowledge base","item":"https:\/\/w3layouts.com\/knowledge-base\/"},{"@type":"ListItem","position":3,"name":"The Ultimate Guide to Free Website Builder"}]},{"@type":"WebSite","@id":"https:\/\/w3layouts.com\/#website","url":"https:\/\/w3layouts.com\/","name":"W3Layouts","description":"Free Website Templates built with HTML, CSS and JS on top of bootstrap framework.","publisher":{"@id":"https:\/\/w3layouts.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/w3layouts.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/w3layouts.com\/#organization","name":"W3Layouts Limited","url":"https:\/\/w3layouts.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/w3layouts.com\/#\/schema\/logo\/image\/","url":"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/logo-400.png","contentUrl":"https:\/\/w3layouts.com\/wp-content\/uploads\/2019\/10\/logo-400.png","width":400,"height":400,"caption":"W3Layouts Limited"},"image":{"@id":"https:\/\/w3layouts.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/w3layouts","https:\/\/twitter.com\/w3layouts","https:\/\/www.instagram.com\/w3layouts_"]},{"@type":"Person","@id":"https:\/\/w3layouts.com\/#\/schema\/person\/522ad070a7f55980bda8a5884462a243","name":"w3layouts","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/w3layouts.com\/#\/schema\/person\/image\/","url":"https:\/\/w3layouts.com\/wp-content\/uploads\/2020\/11\/cropped-w3layouts-logo-512-100x100.png","contentUrl":"https:\/\/w3layouts.com\/wp-content\/uploads\/2020\/11\/cropped-w3layouts-logo-512-100x100.png","caption":"w3layouts"},"sameAs":["https:\/\/w3layouts.com"]}]}},"_links":{"self":[{"href":"https:\/\/w3layouts.com\/wp-json\/wp\/v2\/posts\/34802"}],"collection":[{"href":"https:\/\/w3layouts.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/w3layouts.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/w3layouts.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/w3layouts.com\/wp-json\/wp\/v2\/comments?post=34802"}],"version-history":[{"count":0,"href":"https:\/\/w3layouts.com\/wp-json\/wp\/v2\/posts\/34802\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/w3layouts.com\/wp-json\/wp\/v2\/media\/35143"}],"wp:attachment":[{"href":"https:\/\/w3layouts.com\/wp-json\/wp\/v2\/media?parent=34802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/w3layouts.com\/wp-json\/wp\/v2\/categories?post=34802"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/w3layouts.com\/wp-json\/wp\/v2\/tags?post=34802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}