Blocksy Theme Tutorial - Best Theme for Gutenberg?

hey how's it going alex here from idea spot today we have a bloxy theme tutorial so we're going to be setting up this basic website in bloxy you'll learn all the skills you need to know to edit a basic page using the gutenberg editor and bloxy we'll also cover how to set up your blog page so we've got a customized blog page here and we'll also cover how to set up your contact form in bloxy as well so all the things you need to build a basic website using bloxy are covered in this tutorial so if this sounds interesting then keep watching okay for this tutorial we are just starting with a blank wordpress install this is just a blank site that you get when you first install wordpress you can reset your own wordpress to get it back to default if you want to check out my previous tutorial on reset wordpress that'll show you how to get back to this state if you've already set something up and you want to reset otherwise if you don't even have hosting i've got some hosting recommendations over on my blog on ideasbot.comau if you're looking for a new web host or if you're looking to upgrade your wordpress hosting i really like cloudways overall i think siteground is really good for beginners and vulture is really good for the more advanced people who just want to run their own server and administer their own server themselves so one of these three is going to be suitable for you i think and for cloudways i think that's best overall i do have my own coupon code for cloudways as well so if you use that idea spot code you'll get a discount and each of them have their own tutorial as well if you follow the links on my blog so check those out let's get back to the bloxy setup so we are going to go to appearance and themes and then go to add new we are going to search here for bloxy bloxy should pop up here and click install then we click activate as soon as the theme is active you'll get an option here for installing the bloxy companion so let's go ahead and install that one now here it's going to prompt you to opt in to their notifications we can go ahead and skip that one and from here we can find the bloxy starter sites so we click that starter sites tab and these are the block c starter sites so there's six of them which isn't a huge number but the ones they do have they do look quite professional and they're pretty high standard the first one and probably my favorite is the business one so i think a lot of big businesses have websites that look very similar to this so this is going to be a very useful starter site to use for a lot of projects the second one is the shop this is a very clean woocommerce setup so you've got your shop and products product categories you've got your little add to cart buttons so quite a nice clean one for online shopping you've got like an example a mobile app website which is looks pretty modern you've got that dark background which is pretty cool you've got a charity website which is pretty basic a travel blog which is quite nice this is looks like a pretty um well-designed travel blog to be honest this is very nice and the one i also really like this one bloxy news this looks like quite a credible news website so if you wanted to blog about anything in terms of if you want to run a tech blog or a professional blog this would be a great one to use for a professional blog i think this would be quite a good one if you're looking at affiliate blogging those kind of projects where this kind of theme would be perfect it's also worth noting that these starter sites can be designed for gutenberg brizzy and elementor so in the case of the business one you get all three in the case of the shop it's only for brisey and elementor no gutenberg so just check each of them have different combinations of page builder support so in this case i'm going to go for the business website and we're going to be using gutenberg because i think if you're using bloxy it's been promoted as a gutenberg friendly theme and gutenberg gives you the best performance so i think if you're considering bloxy you're probably using gutenberg but feel free to use elementor or brizzy as well but today i think i'll try gutenberg and let's go ahead and import this one the first thing it's going to ask you here is to install a child theme i think this is good practice if you want to make advanced customizations down the track so let's go ahead and click next and then we choose our page builder we're going to be using gutenberg today as we explained earlier click next and then it's going to install a couple plugins that we need for the starter site cubely and wp forms we click next and we're going to import the content so let's go ahead and click install and then we just have to wait a few seconds for this starter site to install so that was actually pretty quick that'll depend on your connection but let's go ahead and view the site so this is our bloxy starter site here we go so here we've got your typical hero image background with your text and call to action buttons here the next step is you've got some grid with a nice hover effect on there with another call to action you've got your left image with some bullet points here with icons and another call to action there and you've got some more bullet points some videos another big video down the bottom and testimonials and then we've got one last call to action and then there's a footer and the footer's got your typical links contact info additional info and you've got your bottom footer with your copyright info and your social icons and you're not just getting the home page you're also getting about blog and contacts so the about page again similar idea and the contact page it's a similar idea but you've got a wp forms contact form here that you need to set up and the blog page is quite nice i think you've got this blog grid you've got your excerpt you've got a sidebar we're going to work on that a bit later and the blog posts themselves have the featured image background you've got your breadcrumbs a couple of categories there and sidebar so lots of things you can customize on here let's get to work i think the first thing we'll do is start with looking at the top of the page here we've got our logo menu and call to action button so let's look at how we can customize this let's click customize first thing you'll notice about the bloxy customizer is that it's pretty easy to use if we hover on the header we can see we're on the main row of the header and each section of the header has a little icon next to it when you hover and you can actually edit each part of the header so let's go to the logo for a start click on that one that'll take us to our logo options we've got our logo options here and we also have our main row of the header down here so we can see that our header is made up of the logo a menu and a button so that's the logo that's the menu and that's the button and there are also other areas where we can add other things to our header to make it more complex or more functional for our visitors now for our logo it's important to realize that we've got three different logos so this is different for most themes usually only have one or two in this case we've got three because we have a uh a regular logo and a transparent logo which in this case the main page is using the transparent header so we're using the transparent logo and we also have the sticky state logo so in free themes it's rare to get a sticky menu but as you scroll down we can see we have a sticky header so this is the logo they use on the sticky header this is the logo they use on the transparent page and on other pages this is a transparent one contact page is a regular logo so make sure you've got options that look good on all three styles usually with the transparent state you can make sure that you have a a darker or colored background where your white text will be readable on that background and the opposite is true as well if you're using a light background or a very light image you want to use a dark transparent state logo so make sure you get that part right the other way to do it is just design a logo that looks good on all three options which is what i'm going to do here i'm just going to use my idea spot logo which has a lot of contrast and a background of its own so let's go and replace that logo here now so let's start with a transparent one so we can see the results straight away now there's a few stock images in the media library already what we're going to do here is upload a few extra stock images so we can customize this site to our own style so i'm just going to drag in a few of my own stock images let those upload and for our logo i'm just going to go with my standard idea spot logo click select there we go so it's quite small we'll make that bigger in just a second so to make it bigger under logo height we can see it's set to 17. i know my logo is 60 pixels so let's make it 60 so that looks fine and we'll repeat this process here as well select that for the standard logo and again for the sticky state there we go so let's check the sticky state that looks fine and i'm going to click publish here and you just want to check a page that uses the standard logo in this case the blog page uses the standard logo so just make sure that looks right so that looks pretty cool let's go back here so we can see the sticky one looks good scroll back up the transparent one looks fine as well the next thing we'll look at is this button so let's go to that button and we can see here we've got a button that has a link and we can label it and we can link it so instead of saying take action we can make it say contact us and the url could take us to the contact page for example so let's just go to that contact page grab the contact page url and let's paste it in there and publish that another option could be just to remove the button altogether so we could just hit the x button there and removing it will take us to a menu of things that we can put in its place so we can have custom html we can have a button we can have a second menu we could have social icons or a search icon so we could just drag that search icon in there drop it there and there we go in a second it should load up there we go there's our search icon we can search the website so you can choose you can set this up how you want this is just using the main row you can add top rows and bottom rows as well so you can have lots of things on your header very customizable finally with our starter site header let's look at this menu as well so let's head to there so this will give us some customization options for the display of the menu so for example at the moment the selected page is the home page it's just on highlighted white at the moment the other ones are a little bit gray if you hover it'll change that white color we can see we're on home because that one is highlighted in white you can change that highlight method so for example that will create a little blue underscore this will highlight the whole item and this will put lines above and below so i quite like the default one i think leaving this starter site default the designer has done a really nice job so we're not going to mess with it too much we just want to get a good result as quick as we can with our own custom content now if we want to actually customize what's in the menu we need to go back to the main menu here and we are going to head over to menu so we'll need to scroll down to core and under menus we have the main menu and this is our menu here home about blog and contact we can add items by clicking there and we can add and remove things so if we wanted to remove the blog we can go ahead and click the x that'll drop the blog out not all businesses are going to need a blog on their page for example and you can also add in any pages or any posts that are on the website so let's just grab one of these pages maybe the sample page we can just add that to the menu as well and then click publish we'll see our menus will update with what we've got so we don't see our update let's refresh to see our update so there we go we can see we've replaced the blog with the sample page so if we wanted to go back and change that again rather than clicking this we need to get to the menus again through the main page down there core menus and the main menu and we are going to remove the sample page and we'll put our blog back there and i like to have the blog maybe on the second option on the menu and click publish now let's have a look at our header again let's go back to the main row there it's worth noting that this is the header for the desktop and we have previews for desktop tablet and mobile so let's check out the tablet again we need to check that this icon is proper and this menu let's double check so this looks fine we will need to set up those social icons and we will need to fix that little uh logo let's have a look at the mobile one there so again we've got a small logo and this looks all good we'll need to update the address and work and those socials so let's go ahead and do that now let's start with the tablet go to our logo and again we want to make that logo 60 pixels there we go and then we check mobile that's already changed to 60 so that looks pretty cool and then we can see in our mobile menu we've got the uh off canvas menu which is this one here has a html and social so let's go to the html for a start there we go this takes us to what we saw there the address and the work hours we can change those to suit our own address and work hours obviously so let's go ahead and do that i'll just get rid of that address put my own address there and work hours i don't want to start at seven that's early i'll start at nine and i'm going to work until i'm going to work until four that's how we do things in australia on the weekend i'm not going to work on the weekend at all there we go let's hit publish so we can see that looks fine now you can actually replace that text with any text you want you don't have to use address or work hours you could put whatever message you want there let's go fill the socials here we go so by default we've got facebook twitter and insta you can actually add every every social you can think of is listed there basically i don't want twitter that's the only one i don't like i don't mind facebook and instagram the one i should personally add is probably youtube but i mean you just add the ones you use personally so what do we got there we go youtube let's add it now one little tricky step here is it says in small text you can configure the social urls here and here is actually a link and that click that link that'll take us to our social network accounts you can also get to that through the main menu if we scroll down to social networks there and this has boxes for the urls for all of your social networks so for example my youtube channel is uh c idea spot so i'll copy that url go to my youtube url here paste that url in and publish that and then just repeat that for any other social icon that you want to have on your website so our head is progressing along fairly nicely we've got our socials set up now so let's have a look we've got our address our work hours the menu here is a different menu from what is on the desktop i noticed because we've got our sample page here if we go to our desktop it's just the four pages so let's actually try and fix that up so let's go back to our main menu let's go back again let's go to menus and let's click view all locations and we want our main menu to have the mobile menu we want the main menu to display in there and wait for that to update and click publish so now if we check out our mobile menu what do we get that's better that's our proper main menu in there so that will match whatever we have on our main menu now obviously if you want different menus on the desktop compared to the mobile you can arrange that as well you can actually go to menus and you can create new menus and you can have several different menus so no drama there but in this case if you only are having three to five pages six pages maybe you can put the same menu on the desktop and the mobile no problem should look just fine so that's our basic header completed for the starter site let's go down and have a look at our footer while we're here so quite a comprehensive footer they've got here so let's go to edit on this footer now this is a similar arrangement to the header where you've got different areas we can add features to each area so in this case they've got middle row and the middle row has four columns so they've got widget area one two three and four and then you can drag widgets into those areas so it looks a bit busy in my view i'd rather just have quite a simple footer i like to just have the copyright info maybe a small menu or some social icons or a phone number something like that just keep it fairly simple but if you do like this double section footer you can go ahead and customize it to your own liking by editing each column so just click on the edit on the top left there you've got contact info for this widget here you can drop it down then you can change the title you can change the text in there they've got icons here that we can remove or add so let's say we didn't want to display the regular phone we just wanted the mobile phone so we could remove the phone there and that takes away one of those icons and say we wanted to add say the website or something like that well this is the website so that seems a bit counterintuitive doesn't it let's go with uh let's go with the work hours for uh for example add those work hours in work hours will pop up there we go nine to five and then we just have to drop that down you can change the text in there and there so just work weight your way through that and customize everything to your own liking but i think to keep this example as simple as possible let's just have a single row footer the bottom row and let's remove these four sections from the footer so just go ahead and click the x on each of those and remove them that's the first one now the second one and the third one and finally this one once that row is all clear the whole section will drop down and we'll just be left with that bottom row so we've got our copyright info let's go ahead and head to that copyright info i just want copyright current year site title we don't need powered by creative themes we can just have copyright 2021 idea spot i think that's good this socials thing i think we can delete that one and rather than the socials let's put a footer menu in there so let's drag that footer menu in drop it there there we go that's our footer menu now we'll actually have to customize that footer menu so let's click on that one you can customize the design there and then customize the actual menu items again we have to go back to the actual menu section of our customizer that is under core menus and let's go to all locations and the footer menu we want to define that as our main menu so that will be exactly the same as what we've got on our header menu so we've got a copyright message and a menu but feel free to customize your header and footer as you like put whatever sections you need in there it is very very flexible which is quite enjoyable to work with now for the next step i think we should look at the colors and typography so i'm going to scroll back up to the top here and let's go back to our main menu and let's scroll back up to the top of our menu here and you'll notice that we've got options for colors and typography this is quite an important step on customizing your website so let's start with the typography so these are the fonts that we're dealing with so by default we've got our system font for our base font and heading is all based on the default so system font basically for everything on this starter site and the buttons are default block quotes are georgia and the pre formatted text is mono space so i might just change those back to default just so everything looks uniform so that'll be system font for everything i quite like system font because it'll just be something like ariel or helvetica depending on which device and it looks really good on every device because people will be used to using whatever the system default font is it looks trustworthy and official so i think that's a good way of doing it and it's also the fastest one to load but if you want to be a little bit different and have a little bit of more design flare you can go ahead and change that base font there to anything you really want so you can scroll through there you'll be able to preview those fonts there so you could change it to times roman for example and that's what you'd get but i like to use system font for the default text i think that's a good way of doing it for the actual heading i think that's where i might use some design and actually choose a different heading so you can see we've got options for h1 h2 h3 h4 and h5 and h6 so we have to set those up individually i think this site uses mainly just h1 2 and 3. i think this one's an h2 so if we change that h2 to for example let's go ahead and change it to a monster art shall we there we go if you wanted some inspiration you could just head over to fonts.google.com and you'll get the trending fonts here so you can see lato roboto uh monster it's quite popular um open sounds i really like these these are quite all look very professional so anyway let's get back on to customizing so i might use montserrat as i as our h2 and i'll change that for the h3 and um h4 etc as well so i've skipped ahead and done all that i've got h1 two three and four set as montserrat actually i think this one down here is um an h4 and that is monserrat so i think it actually looks a bit too heavy for that level of text so we could just change the weight for example uh let's drop that back to maybe just a regular a regular 400 and that looks a little better the other thing you could do is for the h4 maybe just use the default because it's small enough that you might want to use default as the h4 so for one two and three i've got montserrat and then default for my other fonts let's hit publish and the nice thing about controlling your font through the customizer is that the fonts throughout the page will change so as long as you stick to using h1234 and regular paragraphs all your fonts will stay consistent throughout your website so don't make the mistake of going in editing an individual bit of text and changing its font and then wondering why it looks out of whack when you uh go ahead and change something in here and you've got something on the page that overrides it try and avoid doing that just manage it all through your customizer okay now let's have a look at the colors this is another really nice feature in bloxy so by default they've given us three palettes and we've set to palette one which is a combination of gray white black and purple so we can scroll down we can see the purple is is the hover color and the other shade of purple is the uh initial color so we've got two shades of purple a um a main heading color your basic font color and your background color so only five colors very very simple and uh clean way of designing things with just five different colors i think if we were doing like a very corporate looking website we might stick to blues rather than purples i think that's a little bit more conservative so pilot 2 might look a bit better for this design and then if we wanted to tweak these blues a little bit we can go in head and go in there and drag this around and tweak that blue how we want to do it so that actually is color 2 and color 2 corresponds with our link hover color so when we hover over a link or a button we see our color 2 come into effect and so it's fairly self-explanatory let's say we wanted to make this heading color a little bit less drab it's very dark grayish blue there if we wanted to make it more of a more of an attractive looking blue maybe we could we could do that like this let's move that blue over there that's a bit more a bit richer so we can see we've got a bit more a blue coming through on that it's a subtle change but these things do make a little bit of a difference and finally i still think that initial color one blue is a little bit harsh still so we could make it a little bit darker let's see that's a lot of contrast it's just a matter of just tweaking it and that's just personal preference at that point so i think something like that i think looks decent there we go i'm obviously biased towards shades of blues and grays that's what i use on my own website so um this is what i've gone for but feel free to tweak that and use the palette that suits your own taste and also remember to when you're working on the website itself try to always select from your global color palette rather than selecting colors manually because then this makes it very easy if you want to tweak something across the website you just have to go back into the customizer and update your website and everything will stay consistent as long as you just work with your palette but i think we're pretty much good to go with our customizer there's obviously tons and tons of things we can do in this customize i'm not going to cover all of it i think we've done enough to get you started and then you can explore on your own so let's go ahead and start editing this actual home page and get a few of the main ideas covered so let's close out of this customizer and then we can edit the page so here we are in our gutenberg editor so the first and probably the most important thing is our outline here we can go to we can navigate across the rows of this page so this page is made up of mostly rows there is a button group a video pop-up and a block wrapper but mostly rows and i think rows is the easiest way of working in gutenberg in bloxy so let's look at our first row here this is our header image hero type row so first thing to realize is this is not an as standard this is not a standard gutenberg row this is actually a cubely row so you'll notice that when uh bloxy installed it gave us a plugin called kubly advanced gutenberg blocks and this is a nice way of editing in gutenberg that gives you more of a page builder type feel when you're working in gutenberg so you can create quite attractive looking blocks in gutenberg which is similar to what you get in something like elementor so first thing i'll do with this row is change its background to suit my own site so i'm going to remove this building let's go ahead and edit that and let's try something like this girl typing and select that one that looks pretty cool let's try something else i have a nice bridge from my hometown that i might try so this one here there we go that's pretty cool as well i think it's a little bit uh light for the white text so we might try and make that dark with a dark overlay so let's figure out how to do that first thing you'll notice is over here is overlay is turned on and we've got this grayish color transparent overlay so we can just select that one and what we can do with that is just make it more opaque and that brings the color through we can adjust the color to make it even darker so if we want a very dark deep deep blue we can do that and we can decide how much to let through i like it quite dark i really want that i really want that that text to be very legible on top of the background so that looks about right i can quite uh make out that text so that looks good and the next thing i've noticed is these buttons don't really suit the background now so let's go ahead and edit those so all i did there was click on the button let's click on this style and we want to change the design and here we want to change our fill color so first thing you'll probably notice is that these cubely color palettes don't match our theme color palette so we can adjust that in the cubely settings and get this to match with our theme that's going to speed up our workflow quite a bit so let's go ahead go to these three dots there that's our options we want the cubely global settings and here we've got our global colors so that is set to preset one we can go to theme here and these are our theme colors and we actually can activate that one so that'll change it to our theme colors so now we hit update and now all of our cubely blocks are going to be using our theme color so everything is going to be nice and consistent now so let's go back to our style and we can go to the button and we can look at the design we can see it's chosen that color for the button we could choose a different one if we wanted the brighter blue maybe looks a bit better on that background so let's choose the brighter blue as our as our button hit update when you're happy with what you've done now editing the text is very point and click so i don't really want to say the hi friends there i might just actually delete that block there and we're creative themes of modern design agency so we can change that to whatever we want so we are idea spot and we are based in australia so that's a bit better we can update and we can just change this filler text here i'll just put something else in instead there we go join us for weekly wordpress tutorials and don't forget to like and subscribe on youtube so if you have found this useful so far definitely give us a like just drop a comment in the comments and just say thanks those things really help the channel grow because the more engagement the videos get the more they'll get recommended to other people so that really helps me i really just want to keep doing free tutorials with free methods i don't really want to have to promote paid products so if you want to keep it running like this make sure you just engage with the videos as much as you can that really helps so i'll get back to the tutorial now all right so let's have a look at what this looks like so far so our header and our top section it looks pretty nice on the desktop if we right click and go inspect we can look at it on other devices in google chrome so iphone x this is what it'll look like you can see that all these pre-designed blocks are already mobile responsive so if i go to say ipad this is what we look like so we're looking pretty good across different devices as well here so i think i'm pretty happy with how this is going so make sure you stick to the format of these pre-designed blocks if you try and design your own blocks it is quite labor intensive in gutenberg trying to get everything to look good on all devices the designers here have done a good job of getting things to look good on all devices already so if you just edit the content and just tweak things a little bit to suit your own needs then this is going to be the quickest workflow for working through bloxy let's work on these buttons a little bit more so we've got learn more here and we can go to the actual style here and this is where you'll find the most important thing you'll need to do here which is the button url by default it's just a hash you want to replace that with a link to one of your own pages so i'm going to link to the about page so i'll just paste that about page url in there you can click this gear and you've got options for opening in a new window or adding nofollow to these i'm just going to leave that as default i'd like it to work as normal go ahead and click update and usually i'll rather just have one call to action rather than two so i might just remove that second button so there we go and click update so just looking at our top section now i think we're 90 of the way there i notice i'm hovering that and it's not giving us a color change if we go back to our editor here click on the button under style and under the design we've got normal colors and we also have hover colors so i might change the fill color on hover to that that more dark color and click update now we can see that we've got the darker color when we hover it does have that light blue border so let's change the border as well so back on the editor you've got the border color there let's change that to the dark color as well now when we look at it in the browser that's a nice effect so i'm pretty happy with that that'll take us to the about page to learn more so this is our first section all done so it's just a matter of continuing through the page and customizing and editing things as you like so and if there's things you don't want it's easy just to remove the whole block so for example if i didn't want this these last two blocks on here we could just go to here we go to our row here that selects the row and we can just remove the whole row block so there we go that's gone same with this video here i don't really want this one let's remove that one and let's just help keep cleaning things up to see what we want to do so again i just want to get that whole row here and zap it i'll just remove a few more things just so we have less work to continue on this tutorial there we go so that is a little bit tidier let's work on this block here so clicking on it we can see it's a block wrapper we can have a background image or we can have a gradient background so let's use a gradient this time we've done a background image let's use a gradient this time so let's go with our theme colors let's go with a dark blue into a light blue in our theme maybe even a gray let's just play around with that and see how we can get it i think that's this is okay probably the two blues is the best way of doing it um i actually prefer doing it around the other way i have the light one here and then have the dark one over there so yeah it's a subtle effect and i think the button might be a bit nicer if it had a little bit of a border so let's go to the style and design and let's change our border color to to the white outline and i think that's a bit nicer and when we hover i wanted to keep that white border there we go so there has a slight change of color when we hover and we've got our call to action so that looks pretty decent let's update and again using this text is very straightforward i'm just going to replace that let's learn to build with wordpress so there we go let's build something let's learn a bit with wordpress with free tutorials every week and reach out now i might link that to the the contact page for example so let's just grab our contact page url and paste it in there and update now there's a few other interesting blocks we can look at before we move on so i think the second one is really cool these are info boxes so these are made up of an icon a little bit of text and a heading so if we go in there we can actually just change the heading they're set to h2 by default you can just click on them and edit them as we want so i could change that to say web tutorials there we go and you'll find the actual icon under media so that'll have all our icons here so rather than having that screen i could have maybe something like a book let's look for that there's a book and there we go so web tutorials with a little book icon so you can go ahead and customize all those and when you're ready you hit update all of our colors and fonts are linked to our theme so we're not going to touch those i think this looks really good just how it is and there's some filler text here that i might change while i'm here what we do we teach you how to use all the best wordpress hosting plugins and themes and i made a little typo there let's just fix that plugins there we go cool update and what else might do here let's change this guy so clicking on this guy we can find that it is a column and the background image is the guy so let's go and click on the guy and let's get another guy what about this guy there we go that looks like me there we go so i've got a picture of myself and i'd like the image to be a little bit uh in a different position so if we click advanced background we can say background possession is set to center center if we set it to say right center that moved me across and that looks a bit better so let's go with that and again these little boxes here are info boxes as we've dealt with previously the main thing you probably want to change is the icon there so if we want to just click on media we can grab different icons for whatever we like so go ahead and tweak those and then when you're done just click update and we can view that page i think we're 90 of the way there so you get the idea we're editing the blocks we're removing the ones we don't want and editing the ones we do want to keep so i think that's the basis of our website so let's go back to edit page and let's try adding a new block in by far the easiest way of doing this is using the cubely import layout option here so this actually has 161 pre-designed sections that we can use on our page and we can sort that by free and the 61 of them are actually free so we can basically choose any of these and add them into our website as we click import it's going to ask us to import the type settings if we say no it'll just use the settings that we already have so by saying no we've already got the fonts and the button colors already sorted out correctly so now let's change our background here we've got a bit of a landscape happening so let's go with something else we can go with maybe the girl typing select that one they've already set up the dark overlay so that already looks really good now just the button i might change that a little bit the white uh border i might just change that a little bit so rather than having a border color that's white let's go with let's try that i think that's a bit nicer and same with the hover so when we hover we get a blue let's change that to a dark there we go and i think what did i want to do with the design and when we hover the button color is the same so let's make the fill let's make the fill darker there we go good let's hit update so that's all it is we've added something new to our page that wasn't part of the starter site now this is obviously at the bottom of the page if we wanted to change where this is sitting let's just select the block use these arrows here to move them throughout the page and let's get it into the section that where it might look suitable for our project so i think putting it there is not bad probably the only thing we need there is a little bit of a little bit of margin above this a little bit of white space between these buttons and the actual block probably the easiest way to do that is to select the block and let's insert one before and all we do is just put a spacer in so let's go for spacer the default spacer i think looks fine and let's hit update so viewing our new page we can scroll down and we can see our new section it's ready to roll there looks pretty good even viewing it responsively it looks good on any screen size as well so they've designed it fairly well to fit on different screens and still look good the one thing you might want to look out for is some line breaks that look different on different widths so let's go back to our page and we can actually change those line breaks so it looks even on each screen so let's do that now so what i'll do here is remove the line breaks so that is just one single line and it will break depending on where the actual end of the column is so if we head up here and we can see the column that's that's how you tell where the actual text is going to break so that looks fine on this screen and now if we click update it should look fine on every screen really depending on what text we put in there let's reload see that looks pretty good and as we as we change the responsiveness it scales pretty good so yeah i quite like how that's working so that's the basics of working on the actual page so we can set up the page to look like how we want in the editor adding sections removing sections bringing in new sections from the cubely library so you've got enough to go on and make a pretty decent website at this point the only things we really need to look at now are the blog and the blog pages and the contact page so the blog is like this it's not something you do in the editor this is something you do through the customizer so let's work on that now let's hit customize okay here we are in the customizer this is the blog page to edit this we go to blog posts here now this page is made up of two main areas you've got your blog grid here and you've got a sidebar here now your blog structure is controlled by these options you've got five different layouts to pick from the grid one is probably the most normal conventional method this uh list is quite good as well i like this one but just choose which one whichever suits so this classic one quite would be quite good if you're doing more photography or design based rather than text based but i think for articles this grid or the list would probably be the one to go with now with our sidebar the obvious option is turning it on or off so we can turn it off just by flicking it off and that gives us a more space for our actual articles we can turn the sidebar back on and look at the options there you can move it to the left or the right and if you want to actually change what's in the sidebar it's a little more tricky you go to your main menu there scroll down to widgets and they've got your main sidebar in widgets and so you can see in your sidebar you've got your search your posts and you've got a quote as well so you can actually reorder them by dragging them around so you could move that say move the quote up above the posts i'll move it back to where it was and you can add lots of widgets to to your to your sidebar so you can add an image or contact info those kind of things so anything that you've got in your headers or footers you can add them to your sidebar as well so very handy to do i do think that sidebars are going less fashionable these days especially because most views are in mobile and what you'll end up with is the post at the top and the sidebar below and less people are even going to look at the sidebar so you can pretty safely turn the sidebar off i think that cleans up the page quite a lot as well so in my case i'm going to go back to blog posts and i think i'll just turn off the sidebar all right now let's make some more visual changes to this page so the first thing we can do is turn the blog title on or off and that will set the title there so at the moment it's called blog if you actually wanted to change this you could go into your dashboard under pages and just change the title of your blog page so just quick edit i'll change this foot to news for example and update that go back in here i'll reload it we'll see our blog page is gone now but we can just go back to blog posts here and click news there and we can just close that one and if we turn the blog title back on here we can see we've got news now instead of blogs so that's how you change that title now there's a few fancy things you can actually do with the title so we can go in here and we've got actually some options on styling the title first thing we might do here is change the horizontal alignment and make the title centered we can change the layout to type 2 which gives the title a container around the title and this gives us some options with what we want to do with the container as well so we can actually have a container background image so we can load something out of our library and put something behind there so maybe this girl typing we can add parallax scroll effect to the image as well and we can also do some more design work so given that this background image kind of messes with the text a bit i might put some overlay on there as well so let's choose a white overlay and we can add transparency so we can see the image over through the overlay so that looks pretty decent again you can do it the opposite way we did before use a dark image with white text i'm using a light image now with with dark text so either way it will look good hit publish rather than having an image background you can change a background to a color here and you can choose a gradient as well for your background so lots of ways to do your title next thing we can actually look at the cards so we go into card options and here we can see our card element so we've got a featured image a some post meta that the title is here which is there you've got an excerpt which is there and post meta again so we've got lots of ways we can arrange this for example if we wanted to move the title we want to move above that meta that'll move that title up above that meta so personally i'd probably i'd like to actually remove the post meta altogether you can edit the post matter as well so at the moment we've got news and useful those are the categories we can actually add something there so if we want to add the author we could add the author in there if we wanted to add say the published date we could add that there as well so that adds post meta there and maybe we could turn that bottom post meta off altogether so we could turn that one off just turn the visibility off on there and that tidies that up we can even turn all the post meta off and just have title and description which looks pretty good as well once you're happy with what you've done go ahead and click publish and let's look at this post number as well you've got two posts per row here i think two is usually pretty good like one or two depending on how focused you want to be on the image rather than the excerpt i don't really like going to three i think it looks too busy in most cases so two is good right now it's set to four per page and that is okay because we've actually got a pagination load more tool there but if you wanted to add more on there and have a longer display grid then totally increase that number there some other cool things under the design tab here so we can actually change the background color for example let's go with a gray background on there and that'll change the the background behind our card so let's say i wanted that blue maybe and then just we could make the transparency on there and just give it a bit of a subtle effect maybe that would be better with gray yeah so a little bit of contrast i think kind of makes it a little bit more interesting you'll notice there's a thing called card shadow right at the moment it's quite subtle but we could choose a darker color and make that card shadow a bit more prominent they even have more card shadow effects where we could tweak say the offset if we wanted the shadow to move a little bit and you could you could tweak that to get that exactly how you want the other thing we've got is a border radius on the card so right now it's 5 pixels we could make it more obvious with the 10 pixel or even 20 pixels to make it even more round so just set that how you like you can even tweak the actual font sizes for your title and excerpt i'd rather leave that as the theme just to keep everything consistent so i'm going to leave those on default so that should be enough to get you started with the cards let's go back to our actual blog posts and let's look at the the pagination options here so we've got pagination turned on which is great but they've given us a few ways of displaying this which is awesome i think yeah you've got standard pagination which will just give us give us the normal button numbers and a next as well there the other one that's really cool is infinite scroll so rather than having to hit anything the user when they scroll down it will just start loading more posts and it will just infinitely scroll all your posts so that is pretty trendy at the moment as well i kind of just like what they had load more fairly simple way of doing it you can even customize the actual text in there just by saying say more for example even make it more simple but i think that covers the main features of our blog page so i'm going to hit publish and let's move on to formatting the actual blog post so i'm going to load up one of these blog posts this is what we've got for the blog post and to get to our actual blog post options we go back to our main menu here and we're going to do single posts so under single post again we've got four different layouts two of them are involving sidebars two of them don't involve sidebars so i'm going to use there's narrow width and there is normal width so i actually think the narrow width is more readable especially on on bigger screens i suppose the other option is if you use normal width and then change your content area style to boxed that's another way it's decent but i think i might go back to the narrow width option there with the white styling and you'll notice they actually have the featured image as the background of our post which is kind of cool it might not work with all styles of blog but i think it looks pretty good alternatively what you might like is to turn the featured image on and then we might change this container to use a gradient rather than the featured image in front of our title there so to do that we have to work on our actual post title so that's up the top and we can change our background here so here we've got container background image i'm going to change that to none and then let's just try replacing this with a gradient background instead so let's go contain a background and we've got a few choices here we could replace the background with the color from our theme so it looks pretty decent the other thing if we wanted to be a little more fancy we could grab a gradient actually have a few pre-designed gradients here so go with one of these i think that one might be pretty suitable so totally up to you i might actually go with this i think that's pretty cool i might go with this one and i just want to simplify the actual title itself now so that's under general and again we've got the elements here that we can add and remove so i might turn off that postmeta and turn off the postmatter there and just have the title so by now you've got the general hang of changing your your post and your actual post page so a really important part of using wordpress this is really it's it's one of its original main functionalities was having posts with a post page so this is how we manage this through the customizer so i'm all good i'm going to hit publish so one last thing before we wrap up is the contact page so i'm going to work on that right right now okay so now i'm on our contact page now this is the same as any other page the only difference is that we've got this little form down here so we can actually go into edit page and look at what's happening so if we scroll down we'll actually find our contact form is sitting there and all this form is is a block in gutenberg called wp forms and you can select the form we only have one form on this page it's called contact form which is the form we're displaying here now to edit this form we actually have to go into the wpforms plugin and work on it from there so i'm in the dashboard and wp forms should be on your menu there we've got our contact form there where we can edit the form itself and in this form we can edit change fields those kind of things so if we wanted to say remove that subject field we could just hit that bin there and get rid of the subject we could put a number in there instead and we could call this phone number for example call it phone and go ahead and save that and you can make them mandatory by putting the asterisks there you can click required and that will make the user required to fill that in before they can send the form so just set this up how you want change the fields how you want this is quite drag and drop quite a friendly way of building a form when you're done click save and the important part is under settings and notifications so now here is where you find where the email gets sent to so any form emails will go to the admin email you can leave that as it is and receive the emails from that email address or you can customize it put your own email address in there where you want the form sent to now depending on your hosting it might be better to change the from email to match your actual site that can make the emails send more reliably if you're using php email so i might just make that contact at ideasdemo.site so it's coming from the same domain as where wordpress is from so it matches up the other thing that's really good if the emails aren't sending is to set up a smtp plugin so i've done a tutorial on how to do that i really recommend setting up smtp in wordpress to make all your wordpress email notifications more reliable i'm going to hit save here but wp forms actually has a it has a setup setup wizard that will point you towards smtp setup so once we close out of there we go back to wp forms go to the main options here and click on smtp down there and if you haven't set up smtp already this will walk you through the steps i've also done a complete tutorial so i'll put the tutorial in the description so you can set up reliable good deliverable email for wordpress i definitely recommend doing this so now back on our page we can edit pages we can change the buttons we can change all the blocks in gutenberg customize our blog page and set up our contact page so these are the skills the main skills you need to build basic wordpress websites and overall i think this was a pretty good experience and as good as most wordpress themes i've used in the past so hats off to bloxy all right so from here if you want to set up that smtp plugin i'll just pop that video right there on the end screen and if you don't have wordpress hosting or you want upgraded web hosting check out my cloudways tutorial there get a free trial test that one out so thanks for watching i'll see you next time

Channel: IdeaSpot

Views: 9,309

Keywords: blocksy theme tutorial, blocksy theme, gutenberg themes, best free wordpress themes, gutenberg blocks, blocksy theme wordpress, best wordpress theme, blocksy theme review, quebly, quebly blocks, qubely wordpress, blocksy starter sites

Id: W2LuIheMPns

Length: 52min 17sec (3137 seconds)

Published: Sat Jan 23 2021