{"id":997,"date":"2022-06-23T22:26:13","date_gmt":"2022-06-23T12:26:13","guid":{"rendered":"https:\/\/brickslabs.com\/?p=997"},"modified":"2024-12-23T00:56:37","modified_gmt":"2024-12-22T13:56:37","slug":"bricks-setup-guide","status":"publish","type":"post","link":"https:\/\/brickslabs.com\/bricks-setup-guide\/","title":{"rendered":"Bricks Setup Guide"},"content":{"rendered":"\n<p><em>Updated on 22 Dec 2024<\/em>.<\/p>\n\n\n\n<p>In this tutorial, we share the steps for setting up <a rel=\"noreferrer noopener\" href=\"https:\/\/brickslabs.com\/go\/bricks\" target=\"_blank\">Bricks<\/a> builder from scratch.<\/p>\n\n\n\n<p>While official documentation and videos exist already, you could consider this as a practical guide with many handy tips interlaced with useful custom code.<\/p>\n\n\n\n<p>By the end you would have created a basic site in Bricks that you could further tweak and set aside as a blueprint.<\/p>\n\n\n\n<p>Note:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>This is Part 1 in the series.<\/li>\n\n\n\n<li>There are several ways to build and design things in Bricks or any other builder. This article is not necessarily the only or the best way.<\/li>\n<\/ol>\n\n\n<h2 class=\"simpletoc-title\">Table of Contents<\/h2>\n<ul class=\"simpletoc-list\">\n<li><a href=\"#installation-and-initial-steps\">Installation and Initial Steps<\/a>\n\n<\/li>\n<li><a href=\"#bricks-navigator\">Bricks Navigator<\/a>\n\n<\/li>\n<li><a href=\"#bricks-settings\">Bricks Settings<\/a>\n\n\n<ul><li>\n<a href=\"#general\">General<\/a>\n\n<\/li>\n<li><a href=\"#builder-access\">Builder access<\/a>\n\n<\/li>\n<li><a href=\"#builder\">Builder<\/a>\n\n<\/li>\n<li><a href=\"#performance\">Performance<\/a>\n\n<\/li>\n<li><a href=\"#api-keys\">API Keys<\/a>\n\n<\/li>\n<li><a href=\"#custom-code\">Custom Code<\/a>\n\n<\/li>\n<li><a href=\"#woocommerce\">WooCommerce<\/a>\n\n<\/li>\n<\/ul>\n<li><a href=\"#wordpress-settings\">WordPress Settings<\/a>\n\n<\/li>\n<li><a href=\"#templating\">Templating<\/a>\n\n\n<ul><li>\n<a href=\"#header\">Header<\/a>\n\n<\/li>\n<li><a href=\"#footer\">Footer<\/a>\n\n<\/li>\n<li><a href=\"#page\">Page<\/a>\n\n<\/li>\n<li><a href=\"#blog-posts-page\">Blog (Posts page)<\/a>\n\n<\/li>\n<li><a href=\"#single-post\">Single Post<\/a>\n\n<\/li>\n<li><a href=\"#archive\">Archive<\/a>\n\n\n<ul><li>\n<a href=\"#category-archive\">Category Archive<\/a>\n\n<\/li>\n<li><a href=\"#taxonomy-term-archive\">Taxonomy Term Archive<\/a>\n\n<\/li>\n<li><a href=\"#author-archive\">Author Archive<\/a>\n\n<\/li>\n<\/ul>\n<li><a href=\"#woocommerce-2\">WooCommerce<\/a>\n\n\n<ul><li>\n<a href=\"#single-product\">Single Product<\/a>\n\n<\/li>\n<li><a href=\"#main-shop-page\">Main Shop page<\/a>\n\n<\/li>\n<li><a href=\"#product-category-and-tag-archives\">Product Category and Tag Archives<\/a>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li><\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"installation-and-initial-steps\">Installation and Initial Steps<\/h2>\n\n\n<ul class=\"wp-block-list\">\n<li>Those coming from Oxygen: remember that Bricks is a theme. The first time I used Bricks, I tried installing it as a plugin out of habit! Do not do that mistake.<\/li>\n\n\n\n<li>Install Bricks and Bricks child theme. It is a good practice to install and activate the <a href=\"https:\/\/brickslabs.com\/go\/child-theme\" target=\"_blank\" rel=\"noreferrer noopener\">child theme<\/a>. Using the parent theme as the active theme is also fine as long as you don&#8217;t modify or add anything to it. If and when there is anything that can&#8217;t be done w\/o a child theme you can upload and activate it at that time and use it from then onwards. Most users\/sites do not need the child theme. It depends entirely on the requirements. I do personally use the child theme.<\/li>\n\n\n\n<li>Enter your license key.<\/li>\n<\/ul>\n\n\n<h2 class=\"wp-block-heading\" id=\"bricks-navigator\">Bricks Navigator<\/h2>\n\n\n<p>While this is not a required step, you will save a lot of clicks and time by having access to direct edit links of Templates and Pages and more in WP admin bar with <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/plugins\/brickslabs-bricks-navigator\/\" target=\"_blank\">Bricks Navigator<\/a>. You might want to add it from the Plugins screen as it is in the WP repo.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"bricks-settings\">Bricks Settings<\/h2>\n\n\n<div style=\"color:#32373c;background-color:#00d1b2\" class=\"wp-block-genesis-blocks-gb-notice gb-font-size-18 gb-block-notice\" data-id=\"88d12e\"><div class=\"gb-notice-title\" style=\"color:#fff\"><p>Export File<\/p><\/div><div class=\"gb-notice-text\" style=\"border-color:#00d1b2\">\n<p><a href=\"https:\/\/k00.fr\/amsffcbt\" target=\"_blank\" rel=\"noreferrer noopener\">Here<\/a> (<a href=\"https:\/\/u.pcloud.link\/publink\/show?code=XZc9640ZWwdNhdSLY5VcIq32MajVe0uql2nX\" target=\"_blank\" rel=\"noreferrer noopener\">mirror<\/a>) is an export file of all my recommended settings detailed below.<\/p>\n\n\n\n<p>These can be imported at Bricks \u2192 Settings \u2192 Import Settings (button).<\/p>\n<\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"general\">General<\/h3>\n\n\n<p>The default setting of &#8220;Pages&#8221; for the Post types is sane choice. For other common post types like Posts and Products, we typically want to edit their content using the WP block editor and not Bricks editor.<\/p>\n\n\n\n<p>If you want to be able to upload SVG files, enable it for Administrator and Editor.<\/p>\n\n\n\n<p>I generally do not enable this setting and just copy the SVG&#8217;s HTML after <a rel=\"noreferrer noopener\" href=\"https:\/\/jakearchibald.github.io\/svgomg\/\" target=\"_blank\">cleaning it up<\/a> and simply paste it in a Code element.<\/p>\n\n\n\n<p>If you are using a SEO plugin (I use <a href=\"https:\/\/brickslabs.com\/go\/seopress\" target=\"_blank\" rel=\"noreferrer noopener\">SEOPress<\/a> Pro), disable Bricks Open Graph Meta Tags and Bricks SEO Meta Tags.<\/p>\n\n\n\n<p>Do NOT enable Custom Image Sizes unless you know what you are doing because this might create 5 additional images (different sized versions) each time an image is uploaded.<\/p>\n\n\n\n<p>If you wish to have content from pages that are built with Bricks to be included in search results, enable Query Bricks Data In Search Results.<\/p>\n\n\n\n<p>Query filters is an experimental feature as of Bricks 1.9.7.1 and I do not recommend using them especially in production sites. I use <a href=\"https:\/\/brickslabs.com\/go\/wpgridbuilder\" target=\"_blank\" rel=\"noreferrer noopener\">WP Grid Builder<\/a>.<\/p>\n\n\n\n<p>These are my recommended settings.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-general.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1962\" height=\"3425\" src=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-general.png\" alt=\"\" class=\"wp-image-7439\" srcset=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-general.png 1962w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-general-172x300.png 172w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-general-587x1024.png 587w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-general-768x1341.png 768w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-general-880x1536.png 880w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-general-1173x2048.png 1173w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-general-1600x2793.png 1600w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-general-1320x2304.png 1320w\" sizes=\"auto, (max-width: 1962px) 100vw, 1962px\" \/><\/a><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"builder-access\">Builder access<\/h3>\n\n\n<p>If you are working with clients, typically you&#8217;d set their role to either Editor or Author (more on this <a href=\"https:\/\/slocumthemes.com\/choose-the-right-wordpress-user-role-for-your-client\/\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>).<\/p>\n\n\n\n<p>You might want to provide &#8220;Edit Content&#8221; permission to that user role.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-builder-access.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1948\" height=\"1128\" src=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-builder-access.png\" alt=\"\" class=\"wp-image-7440\" srcset=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-builder-access.png 1948w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-builder-access-300x174.png 300w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-builder-access-1024x593.png 1024w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-builder-access-768x445.png 768w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-builder-access-1536x889.png 1536w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-builder-access-1600x926.png 1600w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-builder-access-1320x764.png 1320w\" sizes=\"auto, (max-width: 1948px) 100vw, 1948px\" \/><\/a><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"builder\">Builder<\/h3>\n\n\n<p>If you constantly keep getting notices in your Bricks editor near the bottom that there is a recent autosave asking if you want to revert, you may come back here later and disable autosave.<\/p>\n\n\n\n<p>Thomas, the creator of Bricks (and I) keeps autosave disabled.<\/p>\n\n\n\n<p>Toolbar Logo Link: Dashboard in a new tab.<\/p>\n\n\n\n<p>Canvas &#8211; Disable element spacing: On. If this is not disabled, you may accidentally set padding\/margin values for elements. These should typically always be precise and uniform.<\/p>\n\n\n\n<p>Structure Panel: Enable all the four options.<\/p>\n\n\n\n<p>Dynamic data: All 5 on.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-builder.png\"><img loading=\"lazy\" decoding=\"async\" width=\"2056\" height=\"4019\" src=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-builder.png\" alt=\"\" class=\"wp-image-7442\" srcset=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-builder.png 2056w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-builder-153x300.png 153w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-builder-524x1024.png 524w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-builder-768x1501.png 768w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-builder-786x1536.png 786w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-builder-1048x2048.png 1048w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-builder-1600x3128.png 1600w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-builder-1320x2580.png 1320w\" sizes=\"auto, (max-width: 2056px) 100vw, 2056px\" \/><\/a><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"performance\">Performance<\/h3>\n\n\n<p>Disable emojis: On.<\/p>\n\n\n\n<p>Disable Google Fonts: On. If you do want to use Google fonts, it is better to self-host them (or any fonts for that matter) and this can be done via Bricks \u2192 Custom Fonts or using <a href=\"https:\/\/www.altmann.de\/en\/blog-en\/code-snippet-custom-fonts\/\" target=\"_blank\" rel=\"noreferrer noopener\">Matthias Altmann&#8217;s snippet<\/a>.<\/p>\n\n\n\n<p>Disable jQuery migrate: On.<\/p>\n\n\n\n<p>Disable class chaining: On.<\/p>\n\n\n\n<p>CSS loading method: Inline styles (default).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-settings.png\"><img loading=\"lazy\" decoding=\"async\" width=\"2032\" height=\"1918\" src=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-settings.png\" alt=\"\" class=\"wp-image-7443\" srcset=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-settings.png 2032w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-settings-300x283.png 300w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-settings-1024x967.png 1024w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-settings-768x725.png 768w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-settings-1536x1450.png 1536w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-settings-1600x1510.png 1600w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-settings-1320x1246.png 1320w\" sizes=\"auto, (max-width: 2032px) 100vw, 2032px\" \/><\/a><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"api-keys\">API Keys<\/h3>\n\n\n<p>Bricks has a handy <a href=\"https:\/\/unsplash.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Unsplash<\/a> integration so stock images can be added quickly from within the builder.<\/p>\n\n\n\n<p>You might want to obtain one and enter its API key at the least.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"custom-code\">Custom Code<\/h3>\n\n\n<p>Enable code execution for admins.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-custom-code.png\"><img loading=\"lazy\" decoding=\"async\" width=\"2042\" height=\"1848\" src=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-custom-code.png\" alt=\"\" class=\"wp-image-7444\" srcset=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-custom-code.png 2042w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-custom-code-300x271.png 300w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-custom-code-1024x927.png 1024w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-custom-code-768x695.png 768w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-custom-code-1536x1390.png 1536w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-custom-code-1600x1448.png 1600w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-custom-code-1320x1195.png 1320w\" sizes=\"auto, (max-width: 2042px) 100vw, 2042px\" \/><\/a><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"woocommerce\">WooCommerce<\/h3>\n\n\n<p>Product Badge &#8220;Sale&#8221;: Text<\/p>\n\n\n\n<p>Product Badge &#8220;New&#8221;: 30<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-woocommerce.png\"><img loading=\"lazy\" decoding=\"async\" width=\"2042\" height=\"2334\" src=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-woocommerce.png\" alt=\"\" class=\"wp-image-7445\" srcset=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-woocommerce.png 2042w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-woocommerce-262x300.png 262w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-woocommerce-896x1024.png 896w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-woocommerce-768x878.png 768w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-woocommerce-1344x1536.png 1344w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-woocommerce-1792x2048.png 1792w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-woocommerce-1600x1829.png 1600w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/bricks-settings-woocommerce-1320x1509.png 1320w\" sizes=\"auto, (max-width: 2042px) 100vw, 2042px\" \/><\/a><\/figure>\n\n\n<h2 class=\"wp-block-heading\" id=\"wordpress-settings\">WordPress Settings<\/h2>\n\n\n<p>Create two Pages named: Home and Blog.<\/p>\n\n\n\n<p>At Settings \u2192 Reading, set Home as the static homepage and Blog as the Posts page.<\/p>\n\n\n\n<p>Create your site&#8217;s Pages.<\/p>\n\n\n\n<p>Create a menu at Appearance \u2192 Menus and add your menu items.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"templating\">Templating<\/h2>\n\n\n<div style=\"color:#32373c;background-color:#00d1b2\" class=\"wp-block-genesis-blocks-gb-notice gb-font-size-18 gb-block-notice\" data-id=\"9e494e\"><div class=\"gb-notice-title\" style=\"color:#fff\"><p>COMMUNITY TEMPLATES<\/p><\/div><div class=\"gb-notice-text\" style=\"border-color:#00d1b2\">\n<p>Bricks comes bundled with community templates that you can readily import with just a few clicks.<\/p>\n\n\n\n<p>You could skip the entire guide below and import them as a starting point or if you are curious to see how they are assembled with all the Bricks elements.<\/p>\n\n\n\n<p>To use this feature edit any Page (like the \u201cSample Page\u201d) with Bricks, click the folder icon at the top on the right, switch to COMMUNITY TEMPLATES and proceed.<\/p>\n\n\n\n<p>If you want to use Bricks for building custom sites for yourself or your clients and want to familiarize yourself with it, follow along.<\/p>\n<\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"header\">Header<\/h3>\n\n\n<p>Unlike in Oxygen there is no concept of a Catch All Template in Bricks.<\/p>\n\n\n\n<p>Templates marked as Header and Footer will automatically apply on all pages. There is no need to apply a Template Condition and set these two Templates to apply sitewide. It is possible to disable these on an individual Page\/Template basis.<\/p>\n\n\n\n<p>Go to Bricks \u2192 Templates and add a new Template named &#8220;Header&#8221;. Set the template type to: Header.<\/p>\n\n\n\n<p>Edit it with Bricks.<\/p>\n\n\n\n<p>Let&#8217;s now create a theme style. A theme style enables us to set default styles for certain builder elements.<\/p>\n\n\n\n<p>Click on Settings (gear icon) \u2192 THEME STYLES \u2192 +.<\/p>\n\n\n\n<p>Name it <code>Global<\/code> and click CREATE.<\/p>\n\n\n\n<p>COLORS<\/p>\n\n\n\n<p>Set your colors\/color palette if you have one.<\/p>\n\n\n\n<p>ELEMENT &#8211; SECTION<\/p>\n\n\n\n<p>Padding at top and bottom: 75, left and right: 20.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"610\" height=\"1484\" src=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/CleanShot-2024-04-09-at-7\u202f.02.51@2x.png\" alt=\"\" class=\"wp-image-7446\" style=\"width:320px\" srcset=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/CleanShot-2024-04-09-at-7\u202f.02.51@2x.png 610w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/CleanShot-2024-04-09-at-7\u202f.02.51@2x-123x300.png 123w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/CleanShot-2024-04-09-at-7\u202f.02.51@2x-421x1024.png 421w\" sizes=\"auto, (max-width: 610px) 100vw, 610px\" \/><\/figure>\n\n\n\n<p>Go ahead and adjust the defaults for any other elements of your interest. You can always come back here later and set the values as needed.<\/p>\n\n\n\n<p>Add a section by clicking on the Section element in the left side elements panel.<\/p>\n\n\n\n<p>This adds a Section having a Container inside.<\/p>\n\n\n\n<p>Select the Container and add a <strong>Logo<\/strong> element and a <strong>Nav Menu<\/strong> element.<\/p>\n\n\n\n<p>If you have a logo ready, select the Logo element and upload it.<\/p>\n\n\n\n<p>If you have multiple menus in the site, select your desired header menu after selecting the Nav Menu element.<\/p>\n\n\n\n<p>To have both these line up horizontally at the edges of the container, select the Container.<\/p>\n\n\n\n<p>Direction: Horizontal (row)<br>Align main axis: Space between<br>Align cross axis: Center<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"606\" height=\"532\" src=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/CleanShot-2024-04-09-at-7\u202f.05.57@2x.png\" alt=\"\" class=\"wp-image-7447\" style=\"width:300px\" srcset=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/CleanShot-2024-04-09-at-7\u202f.05.57@2x.png 606w, https:\/\/brickslabs.com\/wp-content\/uploads\/2024\/04\/CleanShot-2024-04-09-at-7\u202f.05.57@2x-300x263.png 300w\" sizes=\"auto, (max-width: 606px) 100vw, 606px\" \/><\/figure>\n\n\n\n<p>Save the Template by pressing Ctrl\/Cmd + S or the floppy icon at the top right.<\/p>\n\n\n\n<p>Since we do not want the header&#8217;s section to have so much space at top and bottom, change it from 75 to something like 30 each.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"footer\">Footer<\/h3>\n\n\n<p>If you still have the Bricks editor open you can access, insert and create new Templates from right within the editor without having to exit into WP admin. Press the folder icon near the top right or press Ctrl\/Cmd + Shift + L. Click +, enter &#8220;Footer&#8221; as the title, select Footer as the Template type and click CREATE TEMPLATE. Hover on the Template and click the Edit icon.<\/p>\n\n\n\n<p>If the Bricks editor is not open, go to Bricks \u2192 Templates and add a new Template named &#8220;Footer&#8221;. Set the template type to: Footer.<\/p>\n\n\n\n<p>Add a Section. Build your footer as needed.<\/p>\n\n\n\n<p>Remember that a Template of the type &#8220;Footer&#8221; is automatically sitewide out of the box.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"page\">Page<\/h3>\n\n\n<p>Create a Template of the type &#8220;Single&#8221; named <code>Page<\/code>.<\/p>\n\n\n\n<p>Edit the Template with Bricks.<\/p>\n\n\n\n<p>Apply it to all Pages.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"776\" src=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2022-06-19-at-16.06.40@2x.png\" alt=\"\" class=\"wp-image-1011\" style=\"width:300px;height:388px\" srcset=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2022-06-19-at-16.06.40@2x.png 600w, https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2022-06-19-at-16.06.40@2x-232x300.png 232w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/figure>\n\n\n\n<p>While still in the Settings area, click on TEMPLATE SETTINGS \u2192 POPULATE CONTENT and select any existing Page that has WP content like Sample Page in a default WP install. Click APPLY PREVIEW.<\/p>\n\n\n\n<p>Implement <a href=\"https:\/\/brickslabs.com\/the-perfect-bricks-page-template\/\" target=\"_blank\" rel=\"noreferrer noopener\">The Perfect Bricks Page Template<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"blog-posts-page\">Blog (Posts page)<\/h3>\n\n\n<p>Edit &#8220;Blog&#8221; Page with Bricks. If Bricks editor is already open you can click the Pages icon near the top on the left and select your Page to begin editing it with Bricks.<\/p>\n\n\n\n<p>Add a <strong>Section<\/strong> and a <strong>Posts<\/strong> element inside the Section&#8217;s Container.<\/p>\n\n\n\n<p>Select the Posts element and NAVIGATION \u2192 Show Posts Navigation \u2192 Enable to add the pagination.<\/p>\n\n\n\n<p>There&#8217;s a separate Pagination element that has more controls if you want to use instead of enabling the pagination in the Posts element.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"single-post\">Single Post<\/h3>\n\n\n<p>Create a new Template called <code>Single Post<\/code> of the type, Single.<\/p>\n\n\n\n<p>Edit it with Bricks.<\/p>\n\n\n\n<p>Apply it to single post pages.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"596\" height=\"878\" src=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2022-06-20-at-14.26.55@2x.png\" alt=\"\" class=\"wp-image-1017\" style=\"width:298px;height:439px\" srcset=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2022-06-20-at-14.26.55@2x.png 596w, https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2022-06-20-at-14.26.55@2x-204x300.png 204w\" sizes=\"auto, (max-width: 596px) 100vw, 596px\" \/><\/figure>\n\n\n\n<p><em>To be continued in the next part of the series&#8230;<\/em><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"archive\">Archive<\/h3>\n\n<h4 class=\"wp-block-heading\" id=\"category-archive\">Category Archive<\/h4>\n\n\n<p>This is how you can create a template that applies to all category archives. A Posts element or a query loop-enabled Block element added inside this template will output posts assigned to the current category when viewing any category archive page.<\/p>\n\n\n\n<p>Sample category archive page URLs:<\/p>\n\n\n\n<p>example.com\/category\/nature<br>example.com\/category\/business<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-12-22-at-19.14.54@2x.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"363\" src=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-12-22-at-19.14.54@2x-1024x363.png\" alt=\"\" class=\"wp-image-10110\" srcset=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-12-22-at-19.14.54@2x-1024x363.png 1024w, https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-12-22-at-19.14.54@2x-300x106.png 300w, https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-12-22-at-19.14.54@2x-768x273.png 768w, https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-12-22-at-19.14.54@2x-1536x545.png 1536w, https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-12-22-at-19.14.54@2x-2048x727.png 2048w, https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-12-22-at-19.14.54@2x-1600x568.png 1600w, https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-12-22-at-19.14.54@2x-1320x468.png 1320w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Edit with Bricks.<\/p>\n\n\n\n<p>Click on Settings (cog icon near the top left) \u2192 TEMPLATE SETTINGS \u2192 CONDITIONS.<\/p>\n\n\n\n<p>Add a condition like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"665\" height=\"1024\" src=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-12-22-at-19.16.15@2x-665x1024.png\" alt=\"\" class=\"wp-image-10111\" style=\"width:400px\" srcset=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-12-22-at-19.16.15@2x-665x1024.png 665w, https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-12-22-at-19.16.15@2x-195x300.png 195w, https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-12-22-at-19.16.15@2x.png 722w\" sizes=\"auto, (max-width: 665px) 100vw, 665px\" \/><\/figure>\n\n\n\n<p>Add a Section and inside its Container, a Block element.<\/p>\n\n\n\n<p>Enable query loop.<\/p>\n\n\n\n<p>There is no need to make any changes to the query settings like the Post type to post (since it is the default) or enabling &#8216;Is main query&#8217;, assuming you will not add any more queries in this template.<\/p>\n\n\n\n<p>Add any desired elements that should be shown for each post. To begin with, you could add a Post Title element, change its heading to H3 and enable &#8216;Link to post&#8217;.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"taxonomy-term-archive\">Taxonomy Term Archive<\/h4>\n\n\n<p>Consider this scenario:<\/p>\n\n\n\n<p>CPT (custom post type): Project<br>Associated custom taxonomy: Project Type<br>Sample project types: Business, Nature<\/p>\n\n\n\n<p>Here&#8217;s how you set up the taxonomy term archive pages i.e., the template that these two URLs (in this example) use:<\/p>\n\n\n\n<p>example.com\/project-type\/business\/<br>example.com\/project-type\/nature\/<\/p>\n\n\n\n<p>Create a template named say, &#8220;Project Type&#8221; of type &#8220;Archive&#8221;.<\/p>\n\n\n\n<p>Edit it with Bricks.<\/p>\n\n\n\n<p>Click on Settings (cog icon near the top left) \u2192 TEMPLATE SETTINGS \u2192 CONDITIONS.<\/p>\n\n\n\n<p>Add a condition similar to:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"557\" height=\"1024\" src=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-08-06-at-6\u202f.07.03@2x-557x1024.png\" alt=\"\" class=\"wp-image-8286\" style=\"width:400px\" srcset=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-08-06-at-6\u202f.07.03@2x-557x1024.png 557w, https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-08-06-at-6\u202f.07.03@2x-163x300.png 163w, https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-08-06-at-6\u202f.07.03@2x.png 592w\" sizes=\"auto, (max-width: 557px) 100vw, 557px\" \/><\/figure>\n\n\n\n<p>You may also want to select one of your terms to preview and click APPLY PREVIEW.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"598\" height=\"920\" src=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-08-06-at-6\u202f.18.38@2x.png\" alt=\"\" class=\"wp-image-8287\" style=\"width:400px\" srcset=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-08-06-at-6\u202f.18.38@2x.png 598w, https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-08-06-at-6\u202f.18.38@2x-195x300.png 195w\" sizes=\"auto, (max-width: 598px) 100vw, 598px\" \/><\/figure>\n\n\n\n<p>Add a Section having a h1 heading. Set its text to:<\/p>\n\n\n\n<p><code><span>{<\/span>term_name<span>}<\/span><\/code><\/p>\n\n\n\n<p>Add another Section (optional) and inside its Container, add a Posts element. There is no need to change any query settings assuming no other post type shares the taxonomy. Since the template has been applied to all your taxonomy term archives, Bricks\/WordPress will automatically show posts of the correct post type that are assigned to the current term when viewing any term archive page. There is no harm in selecting your post type in the query settings though.<\/p>\n\n\n\n<p>If you&#8217;d like more control, you could set up a query loop. Like above, there&#8217;s no need to change\/set any query settings.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-08-06-at-6\u202f.23.59@2x.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"632\" src=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-08-06-at-6\u202f.23.59@2x-1024x632.jpg\" alt=\"\" class=\"wp-image-8288\" srcset=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-08-06-at-6\u202f.23.59@2x-1024x632.jpg 1024w, https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-08-06-at-6\u202f.23.59@2x-300x185.jpg 300w, https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-08-06-at-6\u202f.23.59@2x-768x474.jpg 768w, https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-08-06-at-6\u202f.23.59@2x-1536x948.jpg 1536w, https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-08-06-at-6\u202f.23.59@2x-1320x814.jpg 1320w, https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/CleanShot-2024-08-06-at-6\u202f.23.59@2x.jpg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"author-archive\">Author Archive<\/h4>\n\n\n<p>These are pages that typically show the posts published by a user.<\/p>\n\n\n\n<p>Example URL:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;bricks.local\/author\/xkessler\/<\/code><\/pre>\n\n\n\n<p>Create a template named say, &#8220;Author Archive&#8221; of the type <code>Archive<\/code>.<\/p>\n\n\n\n<p>Edit the template.<\/p>\n\n\n\n<p>At Settings \u2192 TEMPLATE SETTINGS \u2192 CONDITIONS, set the template to apply to Author archives like this:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"596\" height=\"796\" src=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/09\/bricks-author-archive-conditions.png\" alt=\"\" class=\"wp-image-2430\" style=\"width:298px;height:398px\" srcset=\"https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/09\/bricks-author-archive-conditions.png 596w, https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/09\/bricks-author-archive-conditions-225x300.png 225w\" sizes=\"auto, (max-width: 596px) 100vw, 596px\" \/><\/figure>\n<\/div>\n\n\n<p>Add a Section and inside the Section&#8217;s Container, a Heading and Posts elements.<\/p>\n\n\n\n<p>Set the Heading&#8217;s Tag to h1 and its text to:<\/p>\n\n\n\n<p><code><span>Author: {<\/span>author_name<span>}<\/span><\/code><\/p>\n\n\n\n<p>Do not make any changes to the Posts element&#8217;s Query parameters.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"woocommerce-2\">WooCommerce<\/h3>\n\n<h4 class=\"wp-block-heading\" id=\"single-product\">Single Product<\/h4>\n\n<h4 class=\"wp-block-heading\" id=\"main-shop-page\">Main Shop page<\/h4>\n\n<h4 class=\"wp-block-heading\" id=\"product-category-and-tag-archives\">Product Category and Tag Archives<\/h4>","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we share the steps for setting up Bricks builder from scratch.<\/p>\n","protected":false},"author":1,"featured_media":1073,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[5,8],"tags":[54,55],"topic":[],"class_list":["post-997","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bricks","category-free","tag-guides","tag-setup"],"acf":[],"featured_image_src":"https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/bricks-setup-guide-600x400.png","featured_image_src_square":"https:\/\/brickslabs.com\/wp-content\/uploads\/2022\/06\/bricks-setup-guide-600x600.png","author_info":{"display_name":"Sridhar Katakam","author_link":"https:\/\/brickslabs.com\/author\/sridhar\/"},"_links":{"self":[{"href":"https:\/\/brickslabs.com\/wp-json\/wp\/v2\/posts\/997","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brickslabs.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/brickslabs.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/brickslabs.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/brickslabs.com\/wp-json\/wp\/v2\/comments?post=997"}],"version-history":[{"count":0,"href":"https:\/\/brickslabs.com\/wp-json\/wp\/v2\/posts\/997\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/brickslabs.com\/wp-json\/wp\/v2\/media\/1073"}],"wp:attachment":[{"href":"https:\/\/brickslabs.com\/wp-json\/wp\/v2\/media?parent=997"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/brickslabs.com\/wp-json\/wp\/v2\/categories?post=997"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/brickslabs.com\/wp-json\/wp\/v2\/tags?post=997"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/brickslabs.com\/wp-json\/wp\/v2\/topic?post=997"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}