Building with Stackable Version 3

hello welcome to stackable the all-in-one solution to building stunning websites with a wordpress blog editor 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 a wordpress core theme will be selected for new accounts let's use bloxy 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 boxy 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 box you will use on the left menu panel click colors bloxy 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 grey tones now that you'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 the 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 rightmost panel is called the inspector this is where you can access various settings for plugins like stackable or bloxy 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's 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-design 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 maybe 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 are 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 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 bed is currently selected here you can see the various editing options available for stackable blocks you 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 can change the typography styles for each text format by clicking the pencil icon next to it the bloxy icon next to the stackable icon lets you customize the settings for the boxy theme lastly the kebab menu also known as the three dots menu is very good 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 dropdown menu for the headings let's set the font face to manrop 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 sense and adjust its size now let's go to designing the home page we've named this page home first let's add a feature block and choose the default layout then let's change this box 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 will change the button text and then add our image to 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 the stackable container and set it to wide width populate the block with a 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 columns facing 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 blocks bottom margin this one will be the pricing box block once you add the pricing box block place it inside the column and add two 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 or container block change its width to the wide setting and keep the default settings inside the column or container block add a heading block by clicking the plus button within it and then let's type in our title so within the column or container block let's add an accordion block and choose the default layout let's suggest 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 white 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 blocks 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 home page drop down save your changes and go back to all your pages you'll 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 you'll just populate the content of the block we'll also be removing the button since we don't need it for now click save to save our changes let's now add the count of block this is a grid 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 of 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 three more times by clicking on the three 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 sender option we can see that the space between the feature block above and this count of block is too big so we will increase the bottom origin 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 stamps as earlier such as putting it in a column and setting it to wide width afterwards add the team member block with the plan layout and then set the content alignment to center the block comes with social buttons you have the option to keep them as is put 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 you 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 two 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 ok 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 you'll add the testimonial block below it choose the default layout then add some border radius and shadow select the block again and put it inside a column add two more columns to make it a three column block and set it to white 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 let's go ahead and fix those okay it looks better now let's publish the page and look at it in the front end 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 add your menu items let's add both the home page and the about page to our menu put the home page 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 all right it looks great now let's work on the footer you can add more widgets if you want to but for this one you'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 let's go back to our pages then view how the page looks now with a menu alright so you see the menu with the newly added button and logo over here let's scroll down to see the footer looking great now it's time to check how the site looks across all screens let's 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 let's make the necessary adjustments so that the site will look good on tablet view the nice thing about this is if you 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 all right 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 like 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 link them down below

Channel: Stackable for WordPress

Views: 367

Keywords:

Id: oBneZvlNg6k

Length: 29min 37sec (1777 seconds)

Published: Mon Dec 13 2021