Building with Stackable Version 3

In this video, we will be teaching you how to build your website from scratch using Stackable version 3
For purposes of this tutorial, let’s create a website for a company that offers a project management solution.

You will need a WordPress account, and of course, the Stackable plugin.

Let’s first select our theme. From your WordPress dashboard, click on Appearance on the left menu panel. By default, the WordPress core theme will be selected for new accounts. Let’s use Blocksy as it’s very customizable and works well with the Stackable plugin. You should find it in the themes directory by typing it in the search bar. Install and activate the Blocksy theme. Once it’s been selected as your theme, click customize and you will be directed to the theme customizer. Now let’s set the color palette which will be carried over to the Stackable blocks you will use. On the left menu panel, click Colors. Blocksy has suggested color palettes but you may change these colors by clicking on any palette. There is a color picker for you to change the color to your preference, but if you already have hexadecimal codes, you may input it in the hex code text field like we’re doing. The color motif we’re going with for this website is centered around blue and dark gray tones. Now that we’ve set up the color palette, click publish on the top right corner of the menu panel. That should save the settings that we’ve set.

Let’s first familiarize ourselves with the WordPress block editor and Stackable editing interface before we begin building our first page. To open the WordPress block editor, click Pages from the left menu panel, then click Add New beside the Pages heading. The right most panel is called the inspector. This is where you can access various settings for plugins, like Stackable or Blocksy. The bar on the top is the toolbar. Clicking the plus button beside the WordPress icon opens the block menu. Here, you’ll be able to view the various blocks you can use for your website. It is grouped by block category but you can also find all Stackable blocks by scrolling all the way down. Clicking a block will add it to your page. You can also click the plus button within the line of text to add a block. The pencil icon next to the plus button on the toolbar lets you select the cursor mode. There are two modes you can choose from. The editing mode, and the selector mode. The select mode lets you select blocks. The left arrow is the undo button. The right arrow is the redo button. It lets you redo an action you’ve previously undone. The circular icon displays the details of your page, such as the number of words, blocks, and characters you have. The icon with the three lines is the outline. You may click on any of the listed blocks to select it. Lastly, the Stackable Design Library opens the library of Stackable’s pre-designed blocks. You may view it according to UI kit, or by categories. On the right side of the toolbar is the Save button, where we can save any changes we’ve made as a draft. The preview button lets us view the page in different modes–may it be desktop, tablet, or mobile. Clicking preview in a new tab will let us have a live view of the page we’re editing. The publish button will make the page live. Before publishing the page, we’re given some customizable settings such as visibility, and time of publishing. The visibility settings lets us choose to whom the page will be visible. While the publish settings lets us either publish the page immediately, or schedule it to a later time. Let’s leave these settings as it is and go back to the editor. The cog icon is the inspector where we can edit the settings for the page and the block that is currently selected. Here, you can see the various editing options available for Stackable blocks. We have the Block tab, the Style tab, and the Advanced tab. 

If you want to learn more about the specific settings in each tab, you can watch our Basics of V2 and V3 controls video here.

The stackable icon on the toolbar is where you can adjust the global settings. The Global Color palette is where you can see the color palette you’ve chosen from the theme customizer. You can toggle this off and set different colors within the Stackable editor. The Global Typography accordion is where you can change typography styles. In the “apply typography styles to” drop down menu, you can choose whether the typography styles will be applicable to stackable and native blocks only, stackable blocks only, or stackable and all other blocks. You could change the typography styles for each text format by clicking the pencil icon next to it. The Blocksy icon next to the stackable icon lets you customize the settings for the Blocksy theme. Lastly, the kebab menu, also known as the three dots menu, is where you could alter the Gutenberg and Stackable interface settings. You could change where your toolbar is displayed, view the interface visually or through the code editor, and access other editor tools.

Let us now change the global settings for our website. Simply click the stackable icon on the toolbar. Since we’re inheriting the colors from our theme, let’s move on to the global typography. Make sure “Stackable and all other blocks” is selected in the apply typography styles to drop down menu. For the headings let’s set the font face to Manrope, a sans-serif font. Now let’s adjust the font sizes for each of the headings for better readability. Lastly, let’s set the font face of the body text to DM Sans and adjust its size. 

Now let’s get to designing the homepage! We’ve named this page “home”. First let’s add a feature block and choose the default layout. Then let’s change this block’s alignment to a full-width. Let’s input our title and add a highlight by changing the color of our keyword. Change the HTML tag of the title to H1, then adjust the font size and typography settings accordingly. Afterwards, let’s change the color of our button, and add another color on hover.. It’s looking good, but let’s add another hover effect such as lift to enhance it. We’ll change the button text, and then, add our image asset to complete the block. You can adjust the image up to your liking by dragging the corners of the photo. Or simply typing in the values on the “Image Size” field when you hover over the photo. To make this block look better, let’s add a block background by toggling it on in the Block tab, and then uploading an image from our Media Library. Afterwards, let’s go back to the Style tab and set the Content Width to Align Wide. Let’s save our progress and look at how it is in a live preview. Looking great!

Next, let’s add a Heading block and treat it as a block title. Add the block inside a Stackable Container and set it to wide-width. Populate the block with the title, and adjust the block’s alignment by clicking on the Column block and increasing the Column Spacing. Afterwards, let’s add a feature grid block with the default layout. You can adjust the Heading block’s bottom margin by dragging this section. Select each column and toggle off the Container background. Afterwards, adjust the Column Spacing accordingly. Delete the buttons on each column by simply pressing the backspace button on your keyboard. Let’s change the block’s alignment to left align. Now, let’s add the content and assets to this block. You can adjust the image size by dragging the borders or simply typing in the dimensions. Now that we’re done designing this block, make sure you hit the save button to save all your changes. We should put a title to this block to separate it from the previous block. Let’s add the Heading block again and put it inside a Container. Center align it then increase the block’s bottom margin. This one will be the pricing box block. Once you add the Pricing Box block, place it inside a column and add 2 more columns. Set the block to wide-width and align the content to the left like the previous block. Now let’s adjust the border settings for each container. Add a border on each column and adjust the settings accordingly. Now it’s time to put the content in the block. Change some settings to our buttons and add the button text. Rearrange the order of the button by clicking the upward arrow to move it above the icon list. Hit ‘save’ just to make sure our progress doesn’t get lost.

Add a Column / Container block, change its width to the wide setting and keep the default settings. Inside the Column / Container block, add a Heading block by clicking the plus button within it, and then let’s type in our title. Still within the column / container block, let’s add an accordion block and choose the default layout. Let’s adjust the font styling for the accordion block, and add more accordion blocks by clicking the kebab menu in the toolbar and selecting duplicate. Lastly, change the content for each accordion as needed. To wrap up the home page, let’s add a call to action block. Set the block to wide width and then customize its container background color to make it stand out. Pattern the button from the previous buttons by choosing the same color. Add the content such as the header, the description, and button text. Feel free to adjust the inner block’s bottom margin so it won’t look too cramped. Then save the progress we’ve made. Since we’re done with the home page, let’s publish it and view it live. Let’s test whether the accordion blocks are working properly. Great! Now we’ve got the home page set up.

Now that we’ve finished designing the home page, we’ll need to set it as the front page of our site. Navigate to Pages in the Dashboard, and then select All Pages. You will find your “Home” page there. Click on the Settings options in the Dashboard, and then select Reading. The Reading settings will open up, and you can adjust accordingly. For this, select “A Static Page” and then “Home” in the Homepage dropdown. Save your changes and go back to all your pages. You will see that it’s been set to “Front Page”.

Now that that’s been done, it’s time for you to work on your next page, which is the About page. Once you add a new page, a blank page will open up. The process of adding and customizing your blocks will be the same as what you did for the home page. First, add a Feature block. Choose the default layout and then set it to wide width. Click on the placeholder image to the right to upload your photo. Feel free to adjust the image size accordingly. Afterwards, we’ll just populate the content of the block. We’ll also be removing the button since we won’t need it for now. Click save to save our changes. Let’s now add the count up block. This is a great block to showcase any achievements and/or pricing. Select the block and put it in a column and set it to full width. Easily select the column by clicking the list view, and then add a Subtitle block under the count up block. Populate the block with your content and adjust the typography settings accordingly. Afterwards, select the column again through the list view and then duplicate the block 3 more times by clicking on the 3-dot icon on the toolbar. Edit the content as necessary for each column. After populating the content, select the parent column block and turn on the block background under the Block tab, and select the color. Click on the alignment panel and select the align center option. We can see that the space between the feature block above and this count up block is too big so we will increase the bottom margin of the feature block. Everything looks good so let’s hit the save button! Next thing we’ll work on is the Team Member block. Let’s first add a Heading block to use it as the block title. Follow the same steps as earlier such as putting it in a column and setting it to wide width. Afterwards, add the Team member block with the plain layout, and then set the content alignment to center. The block comes with social buttons. You have the option to keep theme as is with their own colors or to change them to any color you like. Since we don’t need all of these buttons, we can simply delete the ones we don’t need. We will be needing a social icon for email, so we will just add a new icon button, and then change the icon accordingly. You can upload your own SVG icon or use the ones already available in the icon library. Since we want to set our own colors for the buttons, just simply edit this under the style tab of each button. After setting up our icons, we can now add this Team member block inside a column and add 2 more so the earlier designs will be inherited in the new ones. Set the parent column block to wide-width and start populating the content. There are many design options available for the image block. If you’re a premium user, you’ll have more image shape options to choose from! For this one, let’s choose the Default one for now. Easily adjust the image size by typing in the value you want. Okay the Team member section is done! The last block  we’ll add is the Testimonial block which will allow us to showcase what people say about our product or business. Again, let’s first add a Heading block to use it as the block title. After setting it up, we’ll add the Testimonial block below it. Choose the default layout then add some border radius and shadow. Select the block again and put inside a column. Add 2 more columns to make it a 3-column block, and set it to wide-width. Populate the content of the block with images and text and you should be done! Let’s have a look at how the about page is looking. There are some blocks wherein we need to adjust the bottom margin so lets go ahead and fix those. Okay it looks better! Now let’s publish the page and look at it in the frontend. Looks great!

Now that we’re done designing the About page, it’s time to work on the Menu and Footer of the site. Back to the Dashboard, hover over the Appearance tab, and then select Menus. You’ll see this page once the menu settings open. Fill in the menu name you want, so for this one let’s put “Primary Header” then click “Create Menu”. Now on the left side, you can now add your menu items. Lets add both the home page and the about page to our menu. Put the Homepage first since it’s our front page,. then click Save Menu. Now click on “Customize” in the dashboard. This is where you can customize the fonts, colors, etc. of the menu. Go to “header” then upload your logo. You can adjust the size here  and you can turn off the site title. You can adjust the size of the logo depending on what device you’re viewing it from. So here let’s make it smaller for the tablet and mobile. Now we can customize the menu that we set earlier on. These are the settings that you can play around with. And here you can see how it’ll appear on your tablet or mobile devices. I want to add a button to our menu, so I’ll just drag it down here
And see it appear right after! Just adjust it accordingly… Alright it looks great! Now lets work on the footer. You can add more widgets if you want to, but for this one we’ll stick to just one with the copyright claim. Let’s select it and then customize it accordingly. Let’s change the color of the row, and then the font color so we can see what it says. Looks good across other devices too… okay then click Publish! Lets go back to our pages, then view how the page looks now with the menu. Alright so you see the menu with the newly added button and logo over here. Then lets scroll down to see the footer. Looking great!

Now, it’s time to check how the site looks across all screens. Lets start with the tablet view. Each block has its own responsive settings where you can edit the way you want it to show in different devices. Lets make the necessary adjustments so that the site will look good on tablet view. The nice thing about this is, if we change anything here, it won’t change the settings on desktop or mobile view. Let’s make necessary changes again. The nice thing about v3 is now you can make the columns not collapse on mobile. Just drag the corners of the column like this. Alright all done… then update the page again.

Now that that’s all done, let’s have a look at the website we just created! Here’s our home page…. it contains the basic information that a website would need on the home page. Now our about page includes additional information that our website visitor might be curious about. And there we have it! in just a few minutes, we were able to build a fully functional website using Stackable Version 3.! Not only that, it looks professionally designed too! If you liked this video, don’t forget to give it a thumbs up and subscribe to our channel. If you need more information about Stackable, feel free to join our Facebook Community or visit our website. We’ll link them down below!