Templates vs. Page Builders vs. Gutenberg

361599/Blog/Templates-vs-Page-Builders-vs-Gutenberg5
<p>Managing a website is not as scary as it used to be. It doesn&rsquo;t hurt to know HTML, CSS and JavaScript, but you don&rsquo;t really need them to build a website. Today, we rely on content management systems, such as WordPress, to manage websites. We need not know how to code.</p>

<p>But content management systems all work differently, and WordPress allows users to build websites in different ways.</p>

<h2>Purchasing Templates for WordPress Websites</h2>

<p>Building a WordPress website can be as simple as going to a site such as <a href="https://themeforest.net/" linktype="3" target="_blank">Theme forest</a> and choosing a template. You can browse through thousands of templates to find one that works for you. Then you purchase the template, which becomes the foundation for your website.</p>

<p><img alt="Purchasing Templates" class="TextMedium" loading="lazy" src="/Northwoods-2020/Blogs/pic1.png?Large" /></p>

<p>Templates used to be the most popular way to build WordPress websites. They&rsquo;re easy, but very limited. Sure, you can change the color, content, and images to match your brand. But templates tightly constrain customization, especially for site owners who can&rsquo;t code. So preview each template before you purchase it. What you see is what you get.</p>

<p><img alt="Web templates" class="TextMedium" loading="lazy" src="/Northwoods-2020/Blogs/Pic2.png?Large" /></p>

<p>We all know that images can make or break a website, but don&rsquo;t choose a template solely because of the visual appeal of its images. Consider your own content and images. Searching through thousands of templates trying to find one that looks good to you is only half the battle. Your content should be the most important component of your website; the design should accommodate your information, not the other way around.</p>

<p>With that in mind, let&rsquo;s survey the pros and cons of the template approach.</p>

<h2>Benefits of WordPress Templates</h2>

<ul>
	<li>You can choose from lots of options, and those options are easy to search by industry or functional needs.</li>
	<li>Quick starts. With the click of a button, you have a full design to work with.</li>
	<li>You don&rsquo;t need to know much code, although it wouldn&rsquo;t hurt to have some working knowledge.</li>
	<li>You can preview the templates and get a pretty good idea of how a website will look.</li>
</ul>

<h2>Downsides of WordPress Templates</h2>

<ul>
	<li>Your content needs to conform with the constraints of the design, unless you can code well enough to customize.</li>
	<li>You may end up with a cookie cutter design.</li>
	<li>The template you choose should come with documentation that clearly outlines the functionality of the template, because support is limited and costs money. Not all templates have such documentation.</li>
	<li>Templates can be hard to learn. Simple updates to sliders or content might be more challenging than expected.</li>
	<li>Many templates rely on third-party plugins for some functions. These require management and must be updated with the theme, and this can cause problems.</li>
</ul>

<h2>Using Page Builders with WordPress</h2>

<p>Such page builders as Beaver Builder, Visual Composer or Divi offer a little more design flexibility. These builders allow you to create completely custom website designs without knowing any code.</p>

<p>The builders give you all the tools you need to create your website. For example, in Beaver Builder, you would begin by adding rows and columns to your page. This helps you lay out your content.</p>

<p><img alt="Page Builders" class="TextMedium" loading="lazy" src="/Northwoods-2020/Blogs/pic3.png" /></p>

<p>Because Beaver Builder uses a block-based approach, you would then select a module from the block library by simply dragging and dropping it at the desired place on the page.</p>

<p><img alt="Block libraries" class="TextMedium" loading="lazy" src="/Northwoods-2020/Blogs/pic4.png" /></p>

<p><img alt="Block page" class="TextMedium" loading="lazy" src="/Northwoods-2020/Blogs/pic5.png?LightBox" /></p>

<p>Page builders can feel a lot more intuitive than working with the more rigid structures of templates. Page builders also allow you to save pages, blocks, rows, and columns into your own personal block library, so it&rsquo;s easier to reuse content.</p>

<h2>Benefits of Working with Page Builders in WordPress</h2>

<ul>
	<li>More design flexibility. You can create a unique website for your business.</li>
	<li>The content can really shine, as it no longer needs to conform to template constraints.</li>
	<li>Working with page builders is more intuitive for many users. No more hunting for hours just to make one simple content update.</li>
	<li>Instead of purchasing a new template for every redesign, you can create many different looks with the same tool.</li>
	<li>You can easily copy, move, and edit rows of content throughout your website.</li>
</ul>

<h2>Cons of Working with Page Builders in WordPress</h2>

<ul>
	<li>You start with a blank canvas, so you need to have a clear vision (and a good eye for design).</li>
	<li>The vast number of options can overwhelm, at first.</li>
	<li>It is easy to get carried away with all the many design options; exercise discipline and remain consistent in your design throughout the entire website.</li>
	<li>Some page builders add functionality through third-party plugins. (But page builders should decrease the number of plugins you need overall.)</li>
	<li>Page builders can be more expensive than themes and often incur a yearly fee.</li>
</ul>

<h2>How Does Gutenberg Work?</h2>

<p><a href="/Blog/Gutenberg-What-You-Need-to-Know" linktype="8" target="_self">Gutenberg</a> is the new default WordPress editor. It behaves like a very simple page builder that allows you use blocks to add and arrange content. It does not offer nearly as many options or flexibility as current page builders, but it is a good starting point. Eventually, Gutenberg may eliminate the need for templates and page builders, but that is a long way off. Right now, Gutenberg merely provides WordPress users with a better content editor than they had before.</p>

<h2>How Do Gutenberg and Page Builders Differ?</h2>

<ul>
	<li>Gutenberg does not currently offer a true drag-and-drop experience. Users can add blocks and move them up or down, but they cannot create complex layouts by adjusting heights and widths. They can&rsquo;t add blocks inside other blocks.</li>
	<li>Gutenberg does not provide a live preview of your post or page. Page builders have the advantage, here; They give you a live preview as you make edits, so you see EXACTLY how content will display without saving or previewing the page.</li>
	<li>Gutenberg does not allow video backgrounds, which are easy to create with page builders.</li>
	<li>Page builders typically come with more block options than Gutenberg.</li>
	<li>The blocks in Gutenberg come with limited styling and formatting options. You must add custom&nbsp;CSS for additional styling and formatting.</li>
	<li>Gutenberg helps you manage and display the&nbsp;content you create. Page&nbsp;builders take it a step further with easier, more sophisticated ways to edit the page layout.</li>
</ul>

<h2>So, what is the best way to build your WordPress Website?</h2>

<p>This depends on your time, goals, staff and business needs, but to me templates are becoming antiquated. I recommend moving toward a page builder.</p>
/Northwoods-2020/Hero-Images/Hiker-Looking-Out-Over-Mountains.pngHiker Looking Out Over MountainsMeet Gutenberg - The New WordPress EditorThe Gutenberg WordPress Editor: What You Need to KnowB2B Website Design TipsJenna Dehn/Northwoods-2020/People/Jenna-Dehn.jpgWoman in front of a log cabin wall with soft, warm lighting<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script><script>hbspt.forms.create({ region: "na1", portalId: "23630176",  formId: "40c5bbae-05a2-42ea-94dd-1662181fd56e"  });</script>Templates vs. Page Builders vs. Gutenberg2019-02-14T00:00:00/Northwoods-2019/Blogs/TemplatePageBuildersVSGutenberg.jpg?MediumTemplates and page builders and Gutenberg … oh my! Here, we share the differences between the three, all of which can be used to build a WordPress website.Hiker Looking Out Over Mountains136688ImageThe Gutenberg WordPress EditorConfused about the new WordPress Gutenberg editor? Review the pros and cons and find out how you can use it effectively on your WordPress site./Northwoods-2019/Blogs/blogging-blur-business-261662-min.jpg?MediumJenna Dehn19342Image3620813/People/Jenna-DehnJennaDehnUX Practice Lead<p>Jenna listens closely to understand clients&rsquo; goals and uncover solutions for their marketing and design challenges. She specializes in developing wireframes and prototypes with a strong focus on UX/UI and&nbsp;collaborates with Northwoods&#39; UX strategists&nbsp;to ensure that user research guides the design process. Jenna has a wealth of experience designing for data and creates stunning page layouts that showcase complex product information in a digestible format. She enjoys creating infographics, display ads, and illustrations that enrich marketing collateral and has a knack for using movement to bring websites to life. Away from Northwoods, Jenna enjoys downhill skiing, and her fuel of choice is Dr. Pepper. Be on the lookout for her cats Viper, Saber, and Flash, who are frequent guests during WFH calls.</p>Connect with Jenna on LinkedInJenna Dehn/Northwoods-2020/People/Jenna-Dehn.jpgJenna DehnAdd-In Type - NWS Data ModulesCategory - NWS Data ModulesCommittee - NWS Data ModulesDivision - NWS Data ModulesEvent Audience - NWS Data ModulesEvent Service - NWS Data ModulesEvent Type - NWS Data ModulesLocality - NWS Data ModulesModule - NWS Data ModulesPackage Type - NWS Data ModulesPersonID - NWS Data ModulesJenna DehnProductVersion - NWS Data ModulesRecorded Webinar TopicsRegion - NWS Data ModulesSite Display - NWS Data ModulesSkillLevel - NWS Data ModulesTopic - NWS Data ModulesVideoAudience - NWS Data ModulesVideoClassification - NWS Data ModulesVideoStatus - NWS Data ModulesTeamAll StaffDesignersDevelopersAdd-In Type - NWS Data ModulesCategory - NWS Data ModulesCommittee - NWS Data ModulesDivision - NWS Data ModulesEvent Audience - NWS Data ModulesEvent Service - NWS Data ModulesEvent Type - NWS Data ModulesLocality - NWS Data ModulesModule - NWS Data ModulesPackage Type - NWS Data ModulesPersonID - NWS Data ModulesJenna DehnProductVersion - NWS Data ModulesRecorded Webinar TopicsRegion - NWS Data ModulesSite Display - NWS Data ModulesNWS DigitalSkillLevel - NWS Data ModulesTopic - NWS Data ModulesUX & Website DesignWebsite DevelopmentWordPressVideoAudience - NWS Data ModulesVideoClassification - NWS Data ModulesVideoStatus - NWS Data Modules02024-11-27T13:47:31.22000