Blocksy Theme Tutorial - How to Redesign Your Website Under 45 minutes

let's imagine that you want to change a team and you would like the team to look like this i have here right now therefore today i'm going to show you how to create a site like this with a proxy team so if you're interested buckle up because it's gonna be a bit longer ride than usual okay the team you're seeing right now is a cadence team but now i'm going to show you how to create a similar site with a blockchain team if you don't know what the proxy team is it's a new team approximately 7000 ins active installations at the moment and as you see more than 250 five-star reviews it's a powerful theme and in order to install it go to appearance teams and click on add new search for bloxy and install it if it's done then activate and now you'll see the notification that it would be wise to download the proxy companion it's a small add-on which will let you have a access to some custom extension so on so let's download it the blockchain website opens up there is button click on it save the plugin now go to plugins and add new upload plugin and install it next activate it and there you go now it asks you to opt into the notification it depends on you whether you allow it do not i don't like all kinds of notifications therefore i'm gonna skip it here are some extensions you can activate if you want to use a mailchimp then activate this one here if you want to show the cookie's consent activate this one here if you want to show the trending post just activate it also bloxy will give you some custom widgets let's activate those also and since we're going to use a woocommerce today we're going to activate the woocommerce if you want to import starter sites then click here and just import it if you hover on the preview it will tell you which page builder it uses for example this one uses breezy or elementor this one gutenberg and breezy i'm not gonna import anything since we're going to build the site from the start now let's go to the appearance teams and as you see there is a notification heads up better woocommerce extra extension is coming soon what they are telling you right now is that currently you have the quick view and floating card in the free version but it will be gone and it will be moved to the pro version of the team therefore if you're gonna be using the quick view or floating card and you don't plan to buy the pro version you're not gonna have it later probably the pro version will be released this year later a bit but this notification is letting you know that you're going to miss those options so i'm going to dismiss this and open up the customizer here is the cookie consent extension where that i'm going to close it right now okay let's start with a header if you hover on the header you'll see that there is a main row and if you click here you'll see it's a menu and if you click here it opens up a logo section also if you go here the header option is here you have elements you can add to the header and the header itself if you click on the global header you can activate the sticky functionality or transparent functionality since we're not going to use the transparent version today we're going to add the sticky version here you can select whether the sticky will be the main row top and main row main and bottom row and so on i'm gonna make only the main row sticky sticky effect whether slide down like this or fade like this i don't see the much of the difference therefore i'm gonna let it to be the default okay let's change the logo here are the three rows top row main row and the bottom row i'm gonna click on the logo and select the logo here it is now how to get rid of the site name here just disable the site title and there it is next one i'm gonna change the color of the header i'm going to click on the main row design and the background color for a default state i'm going to put this color here if i want the sticky color to be the same i'm going to also make the sticky color the same now as you see also the sticky header uses the same color next one i'm gonna click on the menu i'm gonna select which is the main menu here shop menu and here i can make some top level design options next let's design it a bit default state the color has to be white for me and if we hover on it gonna be a yellow as you see works like that if i want to change the color for the sticky header i'm gonna change those options here but i'm not gonna do it right now okay so far so good now the main row is a bit too high for me therefore i'm gonna change it as you see raw minimal height i'm gonna just drag it a bit 120 pixels to 75 pixels much better next the search icon does not look good therefore i'm gonna click on it and here i can tell what post types i would like the search to be searching whether they are post pages or products i have a woocommerce site therefore i'm gonna skip the pages i'm gonna leave only the products activated and as a design i'm gonna make it white and there's a hover state yellow once more well there you go let's publish it if you want to change the modal background you can also do that just open the search design and you can change the background here for example maybe i want it to be a a bit bluer well there you go so first step is done now let's take a look what else can we add to the header here are the elements if you want to add an element just drag it to the place you want it to be for example here or in the middle or here i want the cart icon to be next to the search icon there it is let's customize the bit design default state white and once more overstated active state yellow badge color this one with a number here yellow again and text black well there you go here i can design the drop down which appears here maybe i want the background to be white and font black there it is looks much nicer i like it more and publish it what else can we add here we can add the account information i want it to show the icon or the label label login and if i am already logged in then the avatar will be shown or the label my account for example let's design it again default state white and overstate yellow if someone clicks here he or she will be taken to the my account page and if they are not logged in then the modal popup will appear i'm gonna show how does it work as you see there is a login button if i click on it then the modal pop-up will appear well so far so good but maybe i want to add also a top row here i can do that once again just go up here and see what else can you drag and drop maybe social icons the same way you can design the top row for example if you want the background color to be black just open it up and set your color also you can add your own image or pattern here i'm gonna just put the color here social icons you can add the icons here maybe i don't want the instagram to be shown i just delete it now you can configure the social urls just click here and here are the links now publish go back let's open up the header again socials since they don't look good with this background i'm gonna design it and tell it to be white since i don't want those social icons to be on the top pro i'm gonna move them next to the menu well there it is but now it seems to me that the menu is too close to the other elements therefore i'm gonna move the menu in the middle now i'm satisfied with the header i'm gonna publish the modification now i'm satisfied with the header as it is but maybe you would like to create some other kind of header maybe you would like the menu to be on the left logo in the middle just drag and drop them maybe you want two menus just drag another menu up here first one up here and design it as you did before or maybe you want logo b on the left let's delete this one here move the search here move the menu below the logo design the bottom row and once again with a couple of clip clicks we just redesigned the whole header now let's talk about mobile menu if you choose a tablet or mobile layout your c how does it look like going to open up the tablet view because it's much easier to see what is going on here so we have an off canvas it appears when we click here this is off canvas this is a logo again and this is a trigger trigger is up here let's start with the trigger if you want the trigger to have a label just add it here if you want the design to be a little bit different than usual you can do also it here and once again i'm gonna change the color and hover state is yellow let's add label menu now let's see what happens with the mobile menu when you type default or bordered you can select a different menu for the mobile for example i have a mobile menu for the mobile devices and the shop news menu for the desktop devices let's design it default family is 18 pixels and i don't like the bolt i'm gonna leave it as medium let's see what happened a bit better i'm gonna change off canvas design also i don't like the black background i'm gonna choose this one or a bit darker like this yeah okay now i'm gonna open up the mobile menu again and design font color black there it is now i want to have a dividers between the menus therefore as a menu type i'm going to choose bordered and under the design here is the design items divider let's see or something like this and drop down font size as you see it's too big for a moment therefore let's make it to be 17 pixels uh to be 16 pixels much better okay i like it now i need to add a cart and the search here and also social widgets i'm gonna drop the cart and the search trigger here and social icons here well looks good doesn't look so good on the mobile though there is something too much here and i think the social icons i'm gonna removed under the mobile menu take a look here they are but i need to tweak them a bit as a design default state black maybe i want to add some kind of text here html for for example open hours so i like it therefore i'm gonna leave it as it is so as you see the header builder is a really powerful tool and you can basically create whatever you want i'm going to move to the general options for example layout the layout is too wide for me i want it to be 1200 pixels wide here i can set what is the content area spacing or if i choose later as a narrow container i can set widths here bread crumbs layout is here buttons all the buttons you'll see for example those here you can customize those here i like the green color therefore i'm going to leave it as it is entry content elements whether you want the spacing to be comfortable or compact or spacious let's see do we see any difference compact comfortable spacious at the moment i don't see any difference therefore i'm going to leave it with a comfortable next one form elements for example let's go to the checkout page this is our regular form if i want it to look like a bit different i just choose this modern style here as you see it changed the appearance of the checkout form and if you want to customize it a bit more then you can do it here scroll to top yes i want it to be visible now it's here and if you see the arrow here just click on it and you can change the design of the element i want icon to be a bit bigger i want the button to be circle let's change the icon and design shape background i'm going to choose the default this one here and shadow maybe a bit shadow also would be great shadow color too much therefore let's tweak it a bit blur a bit less something like this let's publish it next one let's take a look at the typography at the moment it uses system default font but i'm gonna change it i'm gonna choose poppins font for the texts i want the font size to be 16 pixels line height seems to be quite good at the moment so i'm gonna leave it as it is the same thing i'm gonna do with the headings i'm gonna tell that headings also will be the poppins font 40 is too much for me i'm gonna tell it to be 34 pixels next on heading 2 also pop ins and 28 pixels heading 3 poppins 24. now as you see i can make all the headings with a different font but i can also leave it to the default family that means that if the base font is poppins and it takes all the heading fonts also from the base font therefore heading four five and six i'm gonna just adjust the size 22 for this one here and 20 and 16 well that is gonna be 18 pixels also i can change the buttons font here block quote i don't like the georgia i i want it also to be poppins there it is and publish again now it seems to me that the navigation font needs to be modified a bit therefore i'm gonna click on it design default family but i want it to be 15 pixels and not bold but regular like this well there you go if i want to change the drop down i can scroll down here design again items background white font color black hover green and there it is you can change item spacing and the drop down width i like the wider drop downs therefore i'm gonna screw scroll it to 300 pixels like this here i want the items divider to be there i'm gonna add the color to it a bit more well there it is but i want the border to be solid good okay now let's change the site title once again click on it and now you can choose a design whether it is type one or type two i like to type two more and therefore let's customize it a bit so it is too high for me but first i'm gonna make the title to be aligned left i don't want to show any excerpts here or stuff if i want to show the breadcrumbs i'm gonna activate this one here container width default as you see if i leave it to narrow it's going to be aligned a bit weird therefore default if i want the container background image to be featured image of the post then leave it like it is right now the height i'm gonna make it smaller and i'm gonna disable the breadcrumbs so container height 50 pixels design default family 32 pixels looks good but i don't like the bold font here therefore i would like it to be regular container background i want to tp a darker one and font white like this if you add the image to the background you can set alter the parallax effect whether it is shown on the desktop or tablets or mobiles i'm not gonna do that at the moment so this is done let's publish it again now let's scroll down and see what happens with the footer here footer builder works basically in a similar way as a header builder you click on it there are three rows show social icons those here footer menu this one here widget areas with the row for example if you want it to be not the three widgets but four you can do that also i'm going to leave it to three and also you can choose a column's layout here i will leave it as it is item spacing here and draw vertical spacing and the last row is for the copyright and contacts if you want to show them now let's customize it since i want to change the background color of the footer i'm going to click on the top row no sorry on the middle row design row background and color there it is now if you want to add the divider on the top row then just use whether it is solid or whatever color color it is and as you see i added the divider here so i'm gonna deactivate it next one i want the bottom row also to be the same color as the middle row i'm gonna edit the design row background again color here copyright color design and white and i want the want to be a bit smaller for example 13 yeah 13 pixels publish next let's edit these colors here let's open up the middle row again design and widget font colors once again black or sorry white link color will be this and link over color also this widget title is gonna be white and publish now as you see it basically works as a header builder so nothing to add here now you have seen me messing around with the colors but you don't have to do it just go to the colors and choose a color palette for yourself for example if i want color to be added here i can change it you have three colors colors one two three four five just change it as you want base font color i want it to be this one here links colors heading colors i will leave those as they are but at the moment it all seems almost already like i want it to be this is the original and this is what we have accomplished so far now we opened up the shop page let's customize this one here you have to go to the woocommerce product archives we have a page title up here two ways to modify it one you go to the page title and click on the arrow and or the other one click on edit button here once again scroll down i want it to be 75 pixels high and aligned on the left and container with like this without any description and font-weight regular done now let's see what options do we have for the archives archives page as you see this is a quick view button here as i told you before it's gonna be removed from the free version later if the pro version comes out so columns i want it to be four columns and i want it to look like that looks much better so you have two styles type one type two i like second one more therefore i'm gonna leave it as it is here you can enable or disable the page elements for example if you don't want the sorting up there just disable it if you want the sidebar to be shown just click on it and it will be here i don't like it here so i'm gonna remove it now let's click on the card options here here you can set image size whether it is square or 43 16 to 9 or 2 to 1 whatever you like or you can just add your own if you want for example 3 to 4. or original but i would not suggest you to give the original because as you see it's gonna mess up the appearance i'm gonna leave it to predefined and one to one you can disable the quick view if you want and you can change the gap between the cards another thing you can do is you can activate the product categories here if you do that then as you see the categories appear below the title but if you don't want it to be shown then leave it deactivated let's tweak a font a bit i want it to be 15 pixels and with a regular font well it seems that medium is a bit better and you can change the colors here i like it so far therefore i'm gonna publish it and leave it as it is now let's open up the single page go back two steps single product and here are the layouts narrow width normal width with the left sidebar or right sidebar i'm not going to add any sidebars here if you want the content area style to be boxed then you can choose this here looks like this right now the product information is boxed looks okay but i'm not gonna use it i'm gonna leave it with white another cool option bloxy has is uh is a product image gallery layout for example at the moment by default those color images are below the main image but if you want to show them vertically here you can do that also and you can change how big the image gear is whether you want it to be as wide as 70 percent or maybe 38 next one once again you can define the image preview size or custom three to four maybe again you can disable or enable the image slides lightbox or zoom and here are some product elements you can enable or disable for example sale batch star rating product meta and breadcrumbs for example if i disable the product meta it's not here if i enable it it is here some other page elements related products if you see the arrow here just click on it and you can set the visibility unfortunately currently you cannot choose how many related products you want to show the floating cart you see up here this one also is a feature that is taken out from the free version a bit later it is what i talked about in the beginning of this video if you want summary section to be sticky just enable it as you see a bit sticky here the longer the description here is the more it's going to be sticky while you're scrolling on it ajax add to cart is a cool option also i suggest you to activate it so if you click on that to cart button it will not refresh the page adds the product to the cart and the view cart button appears here under the design you can once again change the design and fonts for example i want the page title to be with a regular font let's take a look at the checkout page you can choose whether the address line is optional or required same goes with a phone field and you can disable or enable the coupon form let's scroll back a bit and go to the shop page once more there are one cool option for the sale badge here if you want to show the sale batch value just click on the custom and you'll see it instead of saying sale it shows a discount percent and if you want the sale badge to be shown a circle just enable this one here publish now next one let's take a look at the blog posts let's open up the blog here and blog here here you can choose whether whether to show the blog title or not let's activate it and once again we can design it as we did before quickly the same process 75 pixels design and regular it's the it seems to me though that there is a small bug here okay it changed it so publish and it's done let's go back a bit now you can choose a blocks block structure here just choose the layout you like the most i like this one the most at the moment now cards options post numbers four i want to show well not good i'm gonna show three let's change the order featured image on the top i don't want to show the post meta and i don't want to show the author name here therefore i'm going to open it up and disable the author if i want to deactivate the comments also i'm going to disable this one here this is a cool option whether you want to show it as labels or maybe as icons i'm gonna leave it on with simple and you can change the excerpt length here i'm gonna leave it as it is so looks good i'm gonna change the card gap a bit as i did with the woocommerce if you want to change the inner spacing you can do it here and under the design you can change the font again i don't like the bold font therefore i'm gonna change this one here and make it a bit bigger 22 pixels okay exact font i'm gonna make it to 15 pixels other options well i like it so far one more thing i would like to add here is a read more button i'm gonna drag it here and enable it well doesn't look any good therefore i'm gonna make it to as simple as possible and some arrow here there it is let's take a look what else do we have here so we covered all those parts we did not cover the sidebar if you want to use a sidebar on your sites then you can customize how does it look like and also you can use a sticky sidebar that means that the sidebar will be visible all the time while the user is scrolling down i'm not gonna use a sidebar today therefore i'm not gonna design it either under the performance option options if you want to disable the emojis just activate it i do it always because i do not use emojis and i don't want another script to be loaded during the browsing lazy loading if we just leave it on it will speed up the browsing experience oh we didn't cover the single post let's open this one also up there it is now single posts here once again narrow width or normal width i'm gonna leave it with normal well doesn't look good maybe i'm gonna open up the sidebar here well i don't like that one either either though so narrow with it is the featured image i'm gonna enable this one here and let's customize it a bit wide width or default width above title or below title i like above title a bit more ratio redefined 16 to 9 looks a bit better for me go back one step whether i want to show the post tags yes i do share box it's here if i don't want to show it just deactivate it if you want to show the author box activate this one here related post those here if you don't want to show them deactivate it otherwise you can choose whether to show two or three or more per row you can customize it here also you can change the title for example you like also these posts comments if you don't want to enable the commenting on your blog then just disable it here and box style looks like this i don't like it at the moment therefore i'm gonna leave this here post title let's customize this if you want to show it as we did before enable this option i don't like it therefore i'm gonna leave the default option design once again i'm gonna change the font weight here otherwise looks good to me although i would like the background to be white therefore i'm going to change it to white and publish next one pages do we have any pages here yes we do about this is a page don't worry about the gap up here i'm gonna show you later how to fix this one here so let's see what happens here normal width left sidebar right sidebar or narrow i'm going to leave it with normal content style everything as it was before i don't use a featured image but if i would then i would activate it and the design here page background white page title if i want to change the title here i can do it but i already did it before therefore i'm gonna leave it as it is so a couple of more things author page and search page i'm not gonna go through it with it but you can customize it as we did it before with the other pages cookie consent is here we have already seen a couple of times let's see whether it opens up again but you can customize it here i like this one much better therefore i'm gonna make the background red sorry green button color black hover color dark gray and font color white like this and you can change the text here and also here button text and if everything is okay just publish it i'm going to accept it therefore it will hopefully not be shown to me anymore next one trending posts this one here you can choose whether you want to show the post or maybe products since i'm using the woocommerce i'm gonna show the products down here in a spacing a bit higher this is a scroller here design content background well i don't like it i'm gonna make it a light gray f9 f9 f9 like this or a bit darker if f1 f1 f1 and if i don't want to use it i'm going to disable it under the proxy companion that means here block c extensions and if i don't want the trending i just deactivate deactivated here okay publish here are some core options site identity and menus all the teams have these options so i'm not gonna go through those here social networks you can add links to your networks and they appear here since we added them to the header visitor engagement if you are using some seo plugin for example yoast or rank matte then disable the schema because your plugins already do that well and there it is now let's see how does it look like on the front end looks something like this therefore i have to tweak it a bit i'm going to open the edit page and first thing i'm going to do is i'm going to disable the page title in order to do that icon i'm going to press on this icon here page title disabled if i update and preview it as you see it's gone now i have to get rid of the spacing up here go back again content area vertical spacing custom disabled update refresh and there it is now i should fix also the issues here because as you see this is our original and this is what it is right now so in order to keep the tutorial short i'm not gonna go through how should i fix it but since i'm using the gutenberg it is rather easy to do just go through the pages and fix what needs to be fixed so updating it refreshing it there it is shop page single product page manual drop down menu cart checkout and everything is customizable and the best part is that you can achieve all this without any knowledge of the programming and you can do it also if your first timer take a look at the time and you'll see it took me less than 45 minutes with explanations to accomplish what i have accomplished imagine what you can do with a couple of hours of work now if you find this tutorial helpful then press thumbs up and subscribe to this channel and you will be the first to be notified about new tutorials meanwhile take care

Channel: WP Simple Hacks - Wordpress tips and tricks

Views: 15,462

Keywords: blocksy theme tutorial, blocksy theme review, blocksy theme wordpress, blocksy theme support, blocksy theme demo, blocksy theme sticky header, blocksy theme header builder, blocksy theme, blocksy theme full tutorial, blocksy theme footer builder, best wordpress theme, fast wordpress themes, gutenberg themes, best free wordpress themes, page builder themes, blocksy theme transparent header, wordpress theme customization

Id: _p3XFvDdhJ4

Length: 43min 21sec (2601 seconds)

Published: Thu Oct 29 2020