Complete Blocksy Wordpress Theme Tutorial (All Features, WooCommerce, Blogging)

what's up party people my name is daryl wilson and today i'm going to give you guys a complete breakdown and tutorial of the bloxy theme now the blox theme is one of the best versatile and overall free wordpress themes i've ever come across we created an e-commerce website with it we also created an amazon affiliate website with it and just a general wordpress website using the bloxy theme now if you're a first time user of the bloxy theme i got to be honest it could be a bit overwhelming using the bloxy theme because it is packed with options so in this video i'll give you guys a complete breakdown of how to use the bloxy theme step by step first i'll be walking you through the general settings explaining to you how each of the general settings work then i'll explain how to build a customizable header for your website and also a customizable footer for your website as well next i'll be walking you through how to use the blog post features the blogsy theme is arguably one of the best wordpress names for blogging so i'll cover how you can utilize bloxy and make your blog look amazing then i'll be walking you through the special settings like the page settings the product reviews and the core extensions for bloxy along with the woocommerce options the woocommerce options are packed with customizable features so i'll be walking you through how to customize your shop page your product pages and other various parts of your websites now for those of you who are on the fence about purchasing blocks so you're not really sure i'll be covering the pro features that come with bloxy not everyone really needs the pro version so i'll be covering the pro features in this video and if you guys do decide to purchase the pro i will leave a 10 discount in the description below of this video also if you guys know how some parts work not to worry i have timestamps in the description of this video so feel free to jump to any part of this tutorial at any time so with that said let's get started all right so right now i have a blank installation and we're going to install the bloxy theme now there is a link below to download bloxy theme however you can also download bloxy by just going to your appearance and themes i know pretty basic right you know how to you know install bloxy but uh just in case there's people out there who have been drinking and are not sure where to find bloxy you can actually just go to add new and then under search themes you'll just type in bloxy so this is the wordpress theme so right here i'll click on activate it so when you install bloxy you'll get this activate block companion plugin and i highly recommend to activate this plugin this will give you more extensions and features for the bloxy theme now right here we have the home this is where you can actually get starter websites where they have templates i do have a tutorial on product reviews where we build an amazon affiliate website and i do also have an e-commerce tutorial where we use the modern shop for creating our e-commerce website but right now i'll just go ahead and import this travel website just to get us started just so we can see what we're working with here so under travel under imports i'll click on imports now we can choose to have a child theme or not essentially what this does is a child theme protects your website from updates so let's say there is an update and that update breaks something if you have a child theme you usually be able to protect your current work so i'll go ahead and click on activate child theme and click on next and you can choose a page builder i do like brizzy and i also do like elementor so it really depends on what you want to go with but here i'll just click on elementor i will install these necessary plugins and then i will click on install so as of right now it's installing a fresh website on our current wordpress website so just give it like a minute all right so we can view our website so let's click on view sites and ta-da now if this doesn't work for you you guys can always just go ahead and try it again but that's how you guys can import a starter website now there's also other extensions and this is something like you know mailchimp subscribe cookies consent we'll talk more about all this a little bit later i just want to just kind of touch base on where some of the settings are and why we installed the actual um companion plug-in so now let's talk about the actual customizer settings so in this section we're going to be talking all about the general options for the customizer options so over here we'll click on customize all right cool and the one thing i like about bloxy is that they've actually labeled it so here we have general options and these right here are the general options so this will control the header the footer the sidebars the color topography and also they have some performance features and then right here we have the posts which are your blog post and your single post and also your pages so right here you guys can go ahead and mess around with these settings for posts and pages and then there's other things like core and visitor engagements and we'll cover all this a little bit later in the video but first things first we'll talk about the general options now i like the dark mode here so i'll click on the dark mode settings and i do like that i think this is a little bit easier on the eye so uh yeah so first thing we have all these general options now you guys can get a good understanding of the general options just by kind of tinkering around with some however there are some options that you might not be aware of because you have to have specific settings for those options so first let's talk about layout so for the maximum site width you can actually change the actual site width right here which you know if you want to do that you can go ahead and do that however the page builder also controls the width of the website so that's strictly up to you now there are some settings that i do find beginners uh get confused about like the narrow container max width and the wide alignment offsets now these options are only if you have a narrow page with structure so to get that option or to actually see and kind of mess around with that you'll first have to actually close this and you'll have to go to edit page so right here i'll click on edit page and on the right side we have page structure now by default we're going to use whatever the theme customizer is on however if you want to change the page structure like narrow width this is where you can actually change the width of the page if you want to have a custom page structure for each individual page however by default all the pages will have the inherit from customizer option but if you want to have a specific page with a specific format you can go ahead and do that so right here i'll go to narrow width and i'll click on update now let's click on view the page and now you guys can see that we have this narrow width now in the customizer options now we can actually design this so over here under the actual general under the layout now the narrow with container max width can be applied so now we can actually change it so this options or these options are for only specific page style so so again just remember that the narrow container max width this is only for narrow width and also the wide alignment offset this is only for elements that have a wide alignment option so just to be clear that there are some conditions to be met in order for all of these settings to work so let's go ahead and change it back so to change everything back i'll go over here and click on refresh and click on confirm so next let's talk about breadcrumbs now breadcrumbs are probably one of the more confusing aspects of bloxy however it integrates really well with yoast so for example if you see breadcrumbs you might notice that they don't really appear on your blog by default and that's because you need to install an seo plugin that is suitable that allows breadcrumbs so you can see here how i have breadcrumbs right here and if i click on this design type you guys can see how it actually changes right here in between the blog right there so let's see if it goes back to that and this will have that little dash so if you do want to activate breadcrumbs on your pages and your post you can do that a lot of bloggers prefer to have breadcrumbs just because it helps the users navigate to other parts of the website but however the first thing you're gonna have to do to get breadcrumbs is you're going to have to install an seo plugin like yoast so let me go ahead and just walk you through on the option really quick because uh it actually is a little confusing at first even for myself so you'll have to install a plug-in like yoast right now under yoast you'll go to search appearance now whatever seo plugin that you're using you will have to activate the breadcrumbs now i believe right here is under breadcrumbs and you'll have to activate it so just make sure that you have breadcrumbs enabled for your certain whatever that you're using it could be rank math it could be yoast it could be all-in-one seo but i'm not really sure on which one you're using but that's how you would activate it once you actually activate the breadcrumbs for your seo plugin you will then go ahead and go back to the actual general options and under breadcrumbs now you'll see breadcrumbs source so what you'll do is that you'll actually select the actual breadcrumb source just to make sure that it integrates well with your seo plugin you'll click on publish now here i'll go back to the blog now there is one more thing you'll have to do so you guys can see that the breadcrumbs are working however what we're gonna have to do is we're going to have to enable the breadcrumbs on the blog post so we'll have to kind of jump over here to the blog post right here and under the blog post we're going to click on the blog title and you're going to want to make sure that this element under breadcrumbs is visible so you can see by default it's not visible and that's because bloxy doesn't really know which you know which plugin that you're using so they just disabled it so in order to disable or to enable breadcrumbs you will have to go ahead and uncheck that for the blog title and then you'll do the same thing for the actual single posts for the single post as well you will have to go ahead and enable the breadcrumbs that they can be displayed on your blog so yeah the the breadcrumbs at first can be a little confusing at first and i myself was as well you'll just have to go through some hoops to get it all set up and done so now let's talk about buttons now the buttons will be displayed on various parts of your website just depending on the features and the options that you set so for example like the read more on the blog that is a button um the search box and also on the contact form so you can see we have this button right here that's made by bloxy and you can design that under the buttons tab you'll have to just kind of go through your website and navigate where the buttons may be just depending on where you selected them so right here we have the initial and this is the initial color of it so here you can see we're changing the initial color of the actual button and the second color i guess you want to say is the hover option and this is going to be throughout the whole website so if i hover over it then it'll change color so that's just what that's referring to and then you can always change the border radius which is the box of its and then you can have that hover effect which is how it hovers over like that and then you can also make it bigger or smaller so that's just some clarifications on the button and if you want to go ahead and change the background to the default you can click on that and that would just change it back also the font color just remember you can change the specific font color as well for all of your buttons on your current websites so now we have the entry content elements so the entry content elements are specifically for your blog post if you are using gutenberg in fact these options are primarily for gutenberg because the page builder already does most of the work so if you're using gutenberg and also you're using the gutenberg for your post you can change the content spacing now essentially what this does is that it just adds padding to it so here we have compact we have comfortable and then also we have spacious so you can see how it's just adding a little bit of space between that the left and right block offset just allows a little bit more space on the left and the right side for your specific post or if you are using the actual gutenberg builder and then we have a link types now the link types refer mostly to your actual links on your website and they're just different ways of presenting your links so for example we have link one right we have link two now we have the underline option so the link of the type one didn't have the underline now let's go to type three and now you'll see it has this animation over it and then type four it's pretty cool right and then we also have type five so that's just a little rundown of the links and what they do so let's go back over here and let's go back over here and now we have form elements so let's go back to our contact page so the form elements will control your contact forms on your website and this is really cool because a lot of these contact forms they either can't be changed and a lot of them require the pro version so bloxy allows you to kind of design all of these now here we have this like this classic where it's like this box look and we also have this modern style you can also change the font size now the font size only applies to whatever you're typing within these actual um spaces here so you can see how the font size gets bigger so if you want to go ahead and adjust it you can do that and then we have the border color the border size the input height so these options you can kind of mess around with to see what you want to do with your contact form but this is what the form elements is applying to you it's applying to any contact form on your wordpress website next we have the scroll to top so the scroll to top option will allow you to have this cool little scroll to top on the bottom right now you have to actually close bloxy and then open it for it to appear but let me just go ahead and give you a quick demonstration of it so i'll click on scroll to top now here we have the rockets now you can change the rocket to any specific style and type you can change the size and the design tab allows you to change the color and also add a box shadow around the icon on the bottom right so first let's go ahead and make this appear so i'll click on publish and i'll close the theme customizer now i'll scroll down the page and now you'll see we have this icon on the bottom right so if it doesn't appear you'll just have to close your theme customizer in order for it to display so now that we have the icon showing here we can design it so we can change the the color we can change the shape so we have initial and we also have the hover and you can also add a drop shadow around if you want to add a drop shadow and you can go ahead and change the drop shadow for your specific um read more or i'm sorry scroll the top little button there so let's go back over here and again remember if you want to change the size of it you can change all of the options for that specific icon right here under the general tab i'll click back now we have a website frame and this is really cool i do like this option i just wish it had a gradient feature so if i click on this you will then see that our website has this border around it on the website which looks really nice now you might want to change the frame color to something like black or you can change it to something like green or whatever color you want to do you can change it like that and this works for a lot of websites you know i think it's nice i'm just hoping to introduce something like a um you know like a gradient i think a gradient would be really nice but yeah so that's exactly what the web fight website frame does now let's say for example you've done a lot of options with bloxy and you want to save it and you want to put it on another website here you can actually click on this little import export tab and you can export these customization options you can export the customizer settings and also the widgets and then click on export and then on the bottom right screen you'll see that we have these options being exported now if you want to import those options duh right it's right here so just click on import customizations and then you'll just go ahead and upload the file right here and you'll just go ahead and upload the actual file right here i think it's a dat file so that's what that's referring to so so yeah that's how you can import and export your options for the bloxy theme so that's pretty much it for the basic general options now let's go ahead and move on to the actual other options like the header and the footer where things can get a little bit more trickier a little bit more dynamic so first let's click on the header options now the header with block c is very versatile and remember there are always three rows all right there's a top row there's a main row and then there's a bottom row now each of these rows has different options or you can add different options so for example if you want to add social icons to the top row you can drag and drop these elements on the left side and then right here you'll see how we have these icons appearing and you can actually change the style and design of each row and then here we have another menu i'll take menu two and i'll drag it right here and now we have three rows so we have the top row the middle row and then we have the actual bottom row now whenever you want to design any elements within these rows you'll just double click or just click once on whatever tab and then you'll see you have all these customizable options so now we can have facebook twitter instagram we can also add pinterest and any other of these other social networks you can change the icon size and all of these other options for each specific element as well now remember the general tab controls the general structure of the actual elements the design tab controls the color and also the transparent and default state so for example right now we are in the default states now what's really cool about block c is that you can actually design specific elements while they are in a specific state so right now we can see our menu is transparent right but here we have the default state and transparent state so for the icons at the top since we're in a transparent state i want to change it to black you see that so right now they're in black and they stay black and if i want to have the hover while it's in a transparent state i can change that to something like whites and now you'll see that it turns white because remember it's in a transparent state at the current moment so that's a pretty cool option you can actually change the conditions for your elements depending on what kind of state it's in now let's say for example we have menu one let's just click on menu one and here we have other options so we have menu type one menu type 2 menu type 3 and then menu type 4. so every one of these just offers a different style of your menu you guys can kind of you know get an idea just by messing around with it you guys can also control the item spacing and then also the height of the current menu as well now you can also assign specific menus here so we have menu one but if you have other menus you can select your specific menu and then you can go ahead and customize these other options now remember when you are designing your menus you guys can see we have the design tab and just depending on what state it's in we can design it for that specific state so for example the font color so you guys can see here how bloxy has already changed the font color to a white and let's say for example i want to change this to a black while it's in a transparent states if i hover over it then it'll be black like that and if i change it back to something like white you guys will see that now when i hover over it it has this white color to it so remember you guys can change the specific color and the style for everything while it's in a specific state and then you guys can go ahead and go through these other options so the drop down options this is referring to if you have a drop down menu you guys can go ahead and change the actual background of the actual drop down menu so now let's take off the transparent header so i want to kind of go through each row and design each specific row so under the header option under global header i'm going to go ahead and turn off the transparent functionality so now i want to be able to design each specific row right so to design the the color of each specific row so you have this top row i'll go ahead and click on this gear icon and we can change this to full width or default just depending on how many uh social icons or how many elements you have within a specific row now here we have the design we can change this row to something like a gradient right so now it's in this gradient states and then for the second row i'll click on main row and we can change this specific row to something like i don't know teal or something i don't know it's this menu is so ugly but i'm just giving you guys an example and then we also have the bottom row as well and we can change the actual style of the bottom row so over here i'll just leave it out as white you guys get the point right and then you can add other options for each row so you can add a top border which is just like a little border right here you guys can faintly see it you guys can also increase the size of that specific border as well so now you can kind of see we have this gray border on the top and then you can also change the bottom border so you can do the same thing for the bottom and you can also add a drop shadow to each specific row if you want to do that so you guys can see there is a lot of customization options with bloxy and in the pro version you do get a lot more elements that you can use to drag in for your headers in the pro version but that's what you get in the free to be honest the free version is very generous they do give you a lot in the free version but let's just go ahead and change all of this back right here so under the top row what i'll do is under design i'll just click on this refresh here and just change everything back so main row design right there we go and then also the main the bottom row design and then we also have the uh where was it it was the uh background or the top row there we go so that's how you guys can go and revert everything back to default settings so now that i've shown you guys a little bit about how to customize the actual menu let's talk about a sticky menu so you notice when i scroll down right here nothing really happens and we can enable a sticky menu with bloxy and we can also design that sticky menu while it's in a specific sticky state so let me just give you an example to let you know what i'm talking about here so under the actual header i'll click on global header and i'll click on sticky functionality so what this is going to do is that it's going to create this sticky right here so if they scroll down they will always have this menu displayed for them and you can change the actual um style of what you want to show so for example i introduce you guys to the top row the main row and the bottom row these options are referring to having only specific rows being available in sticky states so this is the top and the main row so with this option only the top row and the main row will be displayed now all rows this means all three rows will be displayed in a specific sticky state as well you just got to wait some times for it to show up there we go and then we have the main and the bottom row so the main row and this row only so we're excluding the top row and this one is top row only and then yeah you guys are kind of getting it as we go and now we have sticky effect so this just kind of adds an animation style to your menus when the sticky menu is being applied now we also have a transparent functionality so you guys can actually have specific transparent sticky menus if you want to go that route so that's just an example of the actual sticky menu and the transparent menu and how you can turn it on and off now let's talk about one more option which is the display conditions for your headers so let's go ahead and go to headers right global headers and here i'll go ahead and scroll down and now you can see we have this display conditions and that display conditions displays because we have the transparent functionality being displayed now you can actually have specific transparent menus on specific pages if you want to achieve that so for example we have the transparent functionality on right but where do i want the transparent menu to be applied well i'll click on add conditions and here we can actually include or exclude the transparent header conditions for example let's say i do not want the transparent menu being applied on the home page i will exclude it on the home page however i want the transparent menu to be applied on all these other pages you can also include posts post archives and pretty much all of your other archive pages as well but just to keep this simple i'm just going to say i want to exclude the transparent menu on the home page so what that's going to do is that that's going to force bloxy to use the default settings for the header for our home page so whatever we set right here it's going to apply for only our home page so let me just go ahead and clear this up make it look a little bit cleaner and i will publish this so now let's test it let's see if that works so the conditions i have basically says this header should be applied only to our home page however if we go to any of these other pages the transparent menu should be applied so now you guys can see that the transparent menu is being applied to all of our other pages except the home page so in reality you have a sort of theme builder for your header so the blockchain theme gives you a lot of control over your header and that's why i really like this wordpress theme now let's go ahead and go back to our customizer so in a nutshell that's basically the header builder now remember for every element within the header you can double click and there are customizable options for that specific icon now i'm not going to go through every icon you guys can kind of just go through those on your own time and mess around with it however let's now talk about the off canvas menu for the mobile header so if i click on mobile header right here you're going to notice that we have a different style header so we have this this mobile header now what we can do here is that first off we can actually change this little uh hamburger menu so here under trigger we can actually change the type of this we can change the outline make it solid and we can also add a text to this specific trigger label as well so if i turn this on you'll see now it says menu and we can change this to the left or to the right or we can just put something like click me right and then that would be our current menu so that's if you want to have a trigger label as well for mobile users and under the design tab you can also design this now you can also design it for the default states if you have a transparent menu you can design the uh the initial and also the hover and then also for sticky menus so if you have this as a sticky uh menu you guys can also change the sticky state as well and remember you can design or you can enable the actual um the actual the sticky and the transparent menu right here so you can turn it on and off right here if you want to go ahead and have a mobile header uh or sticky for your website so there's just a lot you can do with the actual um you know with the actual uh uh off canvas menu so now that we clicked on the off canvas menu we can actually design it here and then we can also change the general tab to like bordered so to see that you'll click on this and now you'll see that this is bordered or we can have it default i do like that look a lot and then for the design you guys can change the design right here like the font the color and just you know the divider size as well you guys can also select the specific menu for the off canvas menu so let's say for example you want to have a specific menu only for mobile users that's cool you can have a specific menu only for your off campus menu now one thing too i wanna let you guys know is that you guys can actually add more elements to your off canvas menu there's no limitation with bloxy so let's say i wanna add a button so i'll take button right here and i'll just drag it in there like that and now we got this button and then we can design it you know at a ghost button or you know a full button and then under html which is text i can go ahead and drag that above here so i can make this say something like uh you know i don't know like like welcome welcome to our website and then for the design tab we can go ahead and design it you know we can change it to whites you can also add media to your specific off canvas menu so i just got to be honest there's so much you can do with this theme it's it's pretty crazy and then you can kind of drag and drop more elements within your off canvas menu to make it look however you want so in a nutshell guys that is the bloxy header explained uh you'll just have to kind of go through each option and just decide how you want to build your header the header is very robust it's very dynamic there's a lot you can do with the header and yeah so on your own time feel free to go and check those out i have explained all of the features so now that we talked about the header now let's talk about the footer builder now the footer builder for bloxy works the same exact way for the header you're going to notice that we have the same exact option so you have the top row you have the middle row and you also have the bottom row and if you click on any of these elements here you're going to see that you can design it just like you can for the header so guys just to be clear the header and the footer options are identical however there are widget areas that you can use with bloxy so for example we have widget area one and this is where you can add specific widgets so you can add an about us achievements or click on add a widgets you can add a facebook like box you can add any of these elements you want and i'm sure you guys have seen widgets before so widgets are essentially just little things you can add to your footer so you can have a second area widgets a third area and also a fourth area and you can add any widget you want so you can add a facebook like box you can add a contact info you can add a i don't know a video if you want to add a video you can go ahead and add in a specific video and just add in the video there and then it'll it'll appear on your specific footer so remember this is the widget area 1 widget area 2 widget area 3 and widget area 4. so that's what this is all controlling so that's pretty much the same thing guys i'm not really going to go into the footer too much because it's identical to the actual header and remember under the footers you can have a global footer and you can change the actual footer background so that's just something that you might want to consider and you can actually have a reveal effect for specific devices so for example i do want to cover that i'll click on this little computer and now when i scroll down you'll notice how this kind of reveals the footer so it kind of adds this parallax effect to it now you can have this on the tablet on the phone and also on the computer and you can also adjust the shadow as well so for example see if i scroll down it has this shadow right here and this is the reveal effect so if you want to have this reveal effect you can go ahead and add that maybe here i can give you guys a little bit more of a demonstration there we go like this see so that's what the the reveal effect is and if i turn them off you'll see that it's gone so that's just what that is a pretty cool feature i do like that option so if you do want to customize your footer that's how you would do it so now let's talk about the sidebar now first the sidebar must be activated in order for you to first customize your sidebar so the sidebar will generally appear on your blog or also your blog posts so here i have blog posts right so this is my current blog post now in order for me to first design it i must include the left sidebar or the right sidebar so if i have it under the normal width i can't really customize the sidebar because i don't have it so to turn on the sidebar you'll have to first select the right sidebar or the left sidebar once you do that for your single post or your blog then you can go back to the sidebar i know bloxy is kind of like you have to kind of go somewhere turn it on and come back i do wish they would make it a little bit more kind of all in one but it's actually really easy once you get the hang of it so now that we have a sidebar right here we have four different options we have type one type two type three which adds this really cool line right there and also type four now each of these actually can be customized and designed so for example let's just go to type three because this is the best kind of preview on it so we also have other options like the sidebar width you can change the actual sidebar with you can change the gap you can change how much space is within the actual sidebar as well and you can also have a really cool sticky sidebar so this means the sidebar will actually stick with the user as the user scrolls throughout the blog post and i actually have this on my current wordpress website so i do find that feature is really cool and also really helpful now one thing to note also is that depending on which blog i guess type you select different options will appear on the design tab so for example if i go to the design tab right here i can't customize the background color because that's what style three just that's what it offers us however you can see type 4 how it has that black kind of background color so now under the design tab if i go to background color you'll see it's available and i can change this to have a specific sort of background color for our current blog post so i do like this feature and remember that i think it's for blog post two and four that you will get the background color option to be displayed so if you do want to go ahead and have that on your website you can go ahead and do that then you can also change the widget title font color so instead of black you can change to something like white and then also we have the the widget fonts and then we have the widget font color so the widget font color is the widgets within the actual i guess you want to say sidebar here so we have the initial text changes something like white all right which is the widgets right and then you also have the link initial so these are links you can change those also to whites and then you also have the link hover so that means when they hover over it we can change it to something like black maybe right like black so now it changes to black so it just depends on how you want to kind of you know achieve whatever style you want to design but that's the sidebar explained each option again i think two and four allow you to have a background color and one and four do not so that's just something to consider if you want to have a specific background for your sidebar next we have colors and colors basically change the color palette of your current websites now the color palettes will be displayed on archive pages searches pages 404 pages and also your blog pages as well so let's say for example you want to change the color palette something like blue we now have this blue color palette right and we also have color palette three and you can kind of see how the website kind of changes basically depending on what color color palette you want to achieve now you can also change the global colors for each specific element on your current website let's say for example you have an h1 or h2 tag or h3 tag you can actually change it right here on your you know on your website the link color so if you have links on your website like i think we do right here right let's see we have a link color yeah right here so these are links if you want to change these colors we can change them to something like black right and if they hover over it i can change them to whites so now they turn whites when we hover over it and there's just some other general options that you might want to mess around with if you want to mess around with the global colors instead of having to go to every part of your website and changing them manually so that's just a quick rundown of colors so next we have the topography and the topography allows you to change the fonts based off of specific features so let's say for example you have a heading one text in your blog post this can actually be changed right here and then your h2 your h3h4 so that means whenever you're writing a blog post and you change it to a specific tag you can actually change them here globally by default instead of having to manually change them all you can also change the base font of your website so for example if we can do something like i don't know lucida you can see here how all of the fonts are changing on the websites now i believe this right here is an h1 tag so for the h1 tag we can change to something like uh you know something like that and any other tags that you add in your website or on your blog post they can all be adjusted right here you can also change the specific fonts of the buttons the block quotes which are the quotes within the sidebar and then just some other options right here so you can change all the topography from right here on your current wordpress websites and lastly under the general options bloxy does have some performance features i'm not really sure what this does to be honest i'm sure in certain situations on certain websites it might be necessary however for the emoji script you guys can disable emojis people believe that emojis slow your website down so people who are on mobile will put emojis you can actually disable emojis on your website and you can also have lazy load on your website so lazy load does essentially is that when you scroll on a website your website will automatically load everything but with lazy load it'll actually not load anything until the user scrolls which can put less strain on your server so lazy load can speed up websites and there are some plugins that have lazy load on it however the blockchain theme has it by default so if you want to have lazy load on your website you can enable it right there so that's just a quick rundown guys of the general options i know at first and can be a little confusing but i hope i was very clear and i hope you guys understand how to use the general options now let's go ahead and move on to the next section and let's talk about the post types in this section we'll be talking all about post types the blog post the category and other various archive pages for the blog post so first let's just talk about the actual blog post style so if you click on blog post right here this is the actual presentation of your actual blog so for example we have this simple structure we have this classic structure and you kind of go through these and just seeing you know which one's for you and you know how you want to design your specific blog page also next we have card options now the card options will basically display the number of posts and the number of posts per page you can also disable or enable specific elements on the actual blog page so for example we have this um you know we have this title right here we can take out the excerpt the post meta and uh yeah i think i actually have two post metas there so i'll actually disable that as well and then we can see it changes to look something like that or you can add the read more button and uh you know add post meta if you want to do that so this is where you can kind of customize everything and make it look how you want there's also a card so you can have a simple or a box style you can change the card gap and also the card interspacing so this section controls the actual style and presentation of your blog post you also have the design tab where you can change the title fonts the meta fonts and then the button color and also the card divider so depending on which options you enable you'll get more options on your design tab that allows you to customize features that you enabled for your specific blog posts then we also have the page elements so if you want to add a sidebar you can click on sidebar and then you can enable your sidebar here you can also have the paginations there we have the load more button and then also there is infinite scroll so that basically means that if you have several blog posts right here uh it'll keep actually displaying the blog post just depending on how you you know how long the user scrolls and that's why it's called infinite scroll and then you can actually design this tab so you'll have to change it back to something like load more and then you can kind of customize the actual design of this specific section so that's what the pagination is referring to and then we also have the cards reveal effect and it's just a different way on how you can kind of make it look different see how it kind of slides in like that so you can just kind of change the actual reveal effect now if you are going to use the grid you should probably not have a sidebar and if you have something like a classic i think that's better for the sidebar right see something like this makes a little bit more sense because this style just comes off a little bit more it just comes off very clustered and i and i don't think you need the sidebar if you're going to have that grid style like that i think that's a little bit more uh you know more cleaner and looks more nicer now also on the top right here we can disable or we can change this specific section so right here under the blog title we can have it as type 1 or type 2. now you can do this for the custom i'm sorry the category pages and also the archive pages as well so you can have type one type two you can also take out the title and you can also change the excerpt as well now i'll be very honest the excerpt is a very tricky thing to find with the blogsy theme but before we jump into that let me just go ahead and just tell you all that if you want to design anything else you guys can change everything right here in this specific section if you want to change this image you can do that right here and also add a parallax effect if you want to add a parallax effect to the background of your blog however let me talk about the more important things like where to find this text and also how to change this right here so to find this what you'll first do is you'll go to your edit page but i'll open up a new tab right now so you'll go to your blog page and you'll click on edit page now on your blog page you're going to notice that you cannot basically edit anything and it doesn't really work because you're currently editing this page however with bloxy there's a unique feature so you'll need to click on screen options you'll need to enable excerpt here once you enable excerpt you will then see this tab where you can go ahead and fill this out about your blog so this is about your blog now if you do want to change the title of the blog you'll need to change the title of the page so this will be something like the blog page or our blog or whatever you want to do so i'll just do something like our blog and then i'll click on updates now let's go ahead and view the page so now you'll see that our blog has been changed to our blog and also how this says this is our blog so it was very tricky for me to actually find how to do that so that's just how you can design the the title of the blog and the excerpt right here so now let's say all right well now that we know how to design the blog page and everything else you can also design everything here under the design tab i'm not really going to go through these these are just the general options on how to design the blog title let's talk about the actual post now so first i'll click on a post so to design the blog post you'll go over here to single post because remember we already categorized the blog post page now we're going to design the single post page so let's click on single post and then we basically have the same exact option so first let's talk about the page i'm sorry the post title so we can have type one or type two so you can see here how we have type one where displays the image and everything and then we also have type one where it just basically displays the actual um the title of everything but since i have a white font so you guys can see it's hard to see i do like the type 2 but again that's up to you if you want to change the actual style of the fonts remember you can go to the design tab and then change the design tab to something like black or i'm sorry the um was it the meta font i think it's metaphones to black oh there it goes okay yeah so it looked like it was white there i don't know why i did that but uh yeah so that's how you can change it however i'm gonna change this back to white and i'll go ahead and change this back to type 2. now here you can go ahead and include the post meta the title the excerpt the whatever you want to add right here you can hide or display them for your specific blog now here again these are the same exact options so you can just change the alignment you can add a default or a narrow width and then you can also change the actual background color so if you don't want to have the actual featured image of that specific blog post you can change one to whatever one you want to do and then you can also add a parallax effect now just remember the featured image is what you set when you actually create the blog post so uh just to give you a you know just just to be very you know clear on the same level here i'll click on the actual blog post i'll click on edit post and on the bottom right here this is the featured image so this is the image that's displaying here on the background so you can select none or custom if you want to do that so yeah that's just how you can kind of design everything now let's just say for example you want to you want to add excerpt to this specific blog post so first you'll go to your post right let's say we're designing a post right here under the excerpt tab right here under the actual post you'll see here how you have to click the gear icon under post if we scroll down to excerpt this is excerpt so essentially you can kind of write i spell that wrong so essentially you can write a specific title for your blog posts so i'll click on update all right cool so now you can see that we have this is excerpt so that's how you can kind of hide or add extra to your blog post if you want to go that route we already talked about breadcrumbs earlier so you can kind of add the breadcrumbs here you can see our bread crumbs are working it used to be really hard to add bread crumbs and some themes were not compatible with bread crumbs so what happened is people's websites they broke and that was the end of it so but also we can design everything here so if you want to design everything on the specific page like the title fun color and everything this is where you can design the um the colors and the fonts and everything for your specific post title so let's go ahead and say all right well let's talk about the actual page so let's not talk about the actual post title let's talk about the post structure so you can actually have a normal width you can have a left sidebar or a right sidebar you can also have a narrow width which i think looks pretty cool and pretty standard actually you can have a box style and then you can also have a vertical top spacing so this will just give you a little bit more spacing on the top area and then you can also disable or enable specific features of the actual post elements so for example let's say i don't want the actual share box we can take out this specific share box and whenever you enable a feature you will then get this arrow and this will actually allow you to customize that specific feature so you can see that there is a lot of options that you can kind of customize within your blog post so for the author box we can have it as type one or type two i do like type one i think this is pretty cool and this right here is where you can put stuff like hey um you know i like to go hiking like you know talk about the author and that can be filled out in the user profile within your backend so let me just go ahead and publish this and just kind of show you where you can kind of design that so under your users under profile you will see we have admin and right here is your biological or say sorry biographical info and that's what will appear right here so you can see how mine's empty so this is info and then update just in case you want to you know add some decor and style to everything so once i close this page out it'll say this is info over here and then you can add post counts you can add social icons and other various things to your current to your author box as well so this section right here coordinates with this area so here you'll need to enter in your social your social links and put other information about yourself in order to propagate this information about the author box and then you can design the author box and so on and so forth you can do the same thing for the share box so you can have a share box and then you can design the share box right here and you can actually just have different styles you know and at this point you guys can kind of just go through these and just seeing you know seeing what works out for you and your websites they do have a lot of options where you can kind of you know if you open one option it gives you the option to have like three or four more what's this module title a module title you can see you can have a little cool little message to people saying hey you know make sure to share this to your friends we you know we spend a lot of time trying to create content for you and give us money or something like that you know or whatever you want to do there so that's a little quick nut um you know a nutshell so that is the post title page in a nutshell that's what i meant to say but uh yeah so there is the single post and that's basically you know how you can design your single post i hope i was very clear on that again if you want to add the sidebar you can go ahead and enable them here as well however there is one thing i do want to talk about that is on the blog post that we need to actually enable in the back end of the bloxy settings so here i'll click on publish and let's go back to our block c section so click on block c and here we have extensions now there are some extensions that you can use that will turn other features on so let's do that let's turn on all of these right here so let's turn on activate or no no sorry not mailchimp trending product reviews and the cookie consent and the cookie consents let's turn all these on let's go back over here and what i'll do now is i'll go ahead and refresh this page so one thing i want to talk about too before we go into categories is i want to talk about the actual trending reviews so on your blog page if you scroll to the bottom now you'll see this trending now so we enabled the trending now extension right here so we can see trending posts here you can have other you know posts you can have other reviews you can also select specific time frames of trending and so on and so forth and then you can go ahead and design it so that's how you get this trending post section and you'd have to enable that as um or enable it in the back end right here in order for it to appear so it's the trending right here we also do have cookie consents i do want to jump to that really quickly because it might appear sometimes when people are reading on your blog post so i know i'm kind of jumping around again but uh if users land on your blog post they might be jumped to or the the cookie consent might appear on that specific page so right here cookie consents it's just a little thing on the bottom left of the screen and basically just it's like a check box and if users go to that it'll actually display the cookie consents and if users find your blog post the cookie consent will probably pop up right there so you just want to make sure that the cookie consent is enabled all right so on the bottom left of the screen you'll see this is the cookie consent notice now this will appear for first-time users and users can accept because uh i guess that's what people do they just click on accept when they go to websites but that's just accepting the cookies when people visit your website now there's also one more feature i do want to mention about the blog post is that you can actually change the featured image size so for example we have the featured image right now if i click on the featured image we can actually change the size of the featured image to something like medium or medium large or so on and so forth so next let's talk about categories now the good thing about the categories and the author page and the search page is that these settings are all the same as the blog post so for example we have the categories here and if i go to a categories i'll just click on a specific category you can then design the category page for this specific section so you can see here how it's a grid you can also change the two enhanced grid or a simple i do like simple and the grid i think those are probably the most ideal you can also change the page title here so again these are the same options as the blog post so you can go ahead and change the type 2 like that and then if you scroll down you can add a custom background image to your current background here so i'll just click on select image i'll choose this one select and cool there we go and then if you want to change the style and design you can click on design and then change the font color to something like white and there you go and then you can also change the font and everything else so i'm not going to go through all these options again because these are the same exact options as the blog post i'm just showing you guys how to design it now let's go back here now we also have the author page so let's say for example you have multiple authors right so here i'll click on admin so the author page is referring to the people that are currently writing on your current website so we have admin and then you can go ahead and change the actual structure for the author page as well so the author page is basically displaying the author and what blog post they currently have written on the website so let's say you have a good writer and people want to see more about their contents you can design the author page for that specific author and then again all these options are the same you can have the page title and you can go through these options and just kind of mess around and tinker with it and see what works best for you and then you can also do the same thing for the search page as well now the search page can be found when you're looking for specific sections on your websites so right here i'll click on the search and i'll type in i'll just type in darryl i don't know here we go darryl now this right here is the actual search results page so if specific results appear you can adjust all of them right here so for the page title again we can change that we can take off the title or the subtitle or whatever you want to do but that's what this page is referring to so if users search for something and they find multiple blog posts you can make them appear how you want in the search results so that's the search page and that's how you can access it now this right here is a custom post type which i'm not going to be covering because this is created by elementor and this doesn't apply for a lot of us however i do want to talk about the product reviews and the single product reviews which is a really cool feature so i recently created an amazon affiliate marketing website and we use the actual affiliate product post right here so you can see how we can start reviewing products and it has this beautiful templates where you can add specific custom post types and an overall score as well so let me go ahead and show you guys a little bit about how to use that it is a new feature for bloxy and i think that if you're writing reviews it's a great feature to have on your current wordpress websites so first let's go ahead and we'll first do is i'll close this and let's go ahead and make a post so on the left side you're going to see product reviews now right here i'll click on all reviews this is where you're going to reviews are going to be displayed however we can create a new one so let's click on add a new review so let's add a title for our product that we are going to review so let's say for example i'm going to review a new drone so drone the best see the i don't know the phantom drone phantom drone right phantom drone now this is the area where it's going to be your primary content so if i go right here and i see this meat of the article this is the actual meat of the article all right so when you're writing your post this is going to be the meat of your article so this is where you're going to talk all about the drone and you're going to put your affiliate links in here and just you know make it a good single review product post for your you know visitors or whatever and then we'll scroll down and first i'll probably want to add in a featured image so under product review i'll set a featured image and i'll select a picture of a drone right just to give you guys an example now we have these general custom post types so here we have gallery now if you add a specific gallery it's going to appear right here on little small images so let me just go ahead and add in some images really quick all right so i added in these three images for my gallery of course it probably needs to be a picture of the drone but i'm just adding in some just demo images now those demo images will appear right here so actually you guys can see it'll appear like that so anything that you add will appear directly below the featured image now if we go back right here we're going to see the buy now option now the buy now option displays right here and you can actually put your specific affiliate link let me close that tab you can put your affiliate here so this will be like you know amazon.com you know affiliate link or you know whatever link that you have so people can purchase the product you can select a read more which can take them to another article it can take them to any other part of your website maybe you have alternatives to this specific product which would be something really cool and then this would be your small description now whenever you're writing blog posts you want to have a quick summary so this is just a quick little you know a quick little taste of the article just to let users know what you're talking about and what you might be referring to so i'll go ahead and paste that right there and that's what the small description is so it'll appear directly below your buttons now the next section we have specs and pros and cons so over here we have rating right we have the rating tab and we have the scores product specs pros and cons so the product specs appear right here so you can see that we have the speed the battery just some specifications about the specific product so first let's add in some product specs right i'll just say this is going to be the speed or the value and then like cheap and then we can add in another one like uh you know the the drone or the the i don't know the top speed this could be like 60 miles per hour so essentially what we're doing here is that we're just basically adding in some product specs about the product just so the user kind of has an idea of what we're going to be talking about now we have the pros so this will be something like you know we can go and add in good price right a good price i don't know fast right it's fast and it's also easy to find or something like that you know easy to find and then for the cons we can say that this is a it breaks easy right breaks breaks easy um you know hard to you know hard to get started with you know hard to or how to learn and then maybe uh it's ugly i don't know it's ugly right so now it's basically saying that uh you know it's ugly so let me go ahead and update this article really quick and let me just give you a preview of what we got so far so i've added in everything except for some content about the article so here we go we got the phantom drone we have the read more by now quick summary the specs we have the pros and the cons and then we have the meat of the article which is just like the content and everything else so what we need to do next is we need to add in the ratings and these are custom post types created specifically by bloxy so let's go back down here and click on the rating tab under the rating tab we can add score so what we can do here is add in a bunch of default things right here so we can add in like the value the value we can put in the speed maybe the supports right so i'll put in the support of this product and we'll give it like a low score you know the support sucks you know so and then we have the uh popularity right popularity and then we'll just leave it at that so i think that's enough information and once that's done it's going to automatically propagate this score for our article which is really cool so let's go click on update and now let's click on view product review alright so here's our article and we have some images of the article i should probably add maybe either three or five to make it look a little bit more cleaner right and then we have the actual value speed support popularity default and then it averages out for us so that's really really cool and then they can click and they can purchase our product or they can click on this and go to read more we have the quick summary the specs the pros and just some more information about our product so it's just a really clean way to present your affiliate products and it's a brand new feature they just introduced and i think they're going to add more to this as time goes you guys can see that this right here is an amazon affiliate website and this is like a live kind of like a style so we added in the social boxes i threw in the sidebar right here to show them like other things we have this image and we have this other stuff right here and then we have the share box i probably could have even added a author box here and then we also have the tag so you can see i did a little bit of work here and if you guys do want more information on how to build posts like this or any kind of blog post you guys can check out this tutorial where we kind of go in depth and we talk about how to actually write specific blog posts for affiliate products it's a really really good it's a really good tutorial so in a nutshell that is how you guys can use the product reviews uh to your advantage using the bloxy theme all right in this section we're going to talk all about the woocommerce settings with bloxy now you guys can make an ecommerce website with bloxy and there is so much flexibility and control that boxy gives you over your ecommerce websites now in order for you to get the woocommerce options you must have the woocommerce plugin installed and once you install the woocommerce plugin it'll appear or this option will appear right here that says woocommerce now if you guys do want to help with woocommerce and you guys need help with it i have a complete tutorial that goes over every setting in the woocommerce options and i'll leave this video in the description below we cover everything and we cover shipping taxes all the advanced options and also really cool things like we have an um what's this new thing that they have there it's an e-commerce builder i'm sorry a an email builder for like your woocommerce for your woocommerce emails it's really really cool but yeah you guys can actually go through this video and check it out but in this video i'm just going to focus on bloxy i'm not really going to talk about the woocommerce options so once you guys have the woocommerce plugin installed you guys will get this new tab that says woocommerce so i'll go ahead and click on this now you have four different options you have general product archives single product and the checkout page so the product archives controls like the shop page and the category pages and the single product will control the actual product page once you click on the product but first let's just go to general so the general settings right here just basically say you know we have this sale badge and if you want to change the sale badge to something like a circle you can then change it to a circle now instead of saying sale you can make it say whatever you want you can say a specific percent you can do something like you know big deal big black friday sale or whatever you want to do so you can go do custom and then you can kind of change it to whatever you want also for those of you who want a store notice you can add a store notice on your website and you can have it on the bottom of your website and also the top now this is also good for sale banners you know i i think people should actually use this specifically for announcements because by default um people usually install a plug-in for this however with the bloxy theme you can actually use the woocommerce notice just as a banner you know just as a normal banner i mean it doesn't even have to involve your products you can just say hey there's a problem with our website check out our blog or something like that you know but that's you know that's that option and you can change the text there also for the design tab you guys can change uh the color of the badges you can change the color of the actual announcements and you can change the color of the rating and so on and so forth so here we have the quantity main color so we have the actual quantity main color i can change it to something like red there we go red now the quantity main color will appear when people actually try to add more of the products to the cart so for example i'll go to view products and i'll scroll down and now you guys will see that we have this red so again remember the red will appear when people try to add more of a specific product to your cart it doesn't necessarily appear on simple products so it'll appear for variable products and also group products so just keep that in mind now also we have the quantity arrow colors now the quantity arrow colors are actually referring to these specific arrows right here so let's say for example you want these black arrows you can see how these change and this is the hover option so we can change it to anything that we want so if you hover over it it's now this yellow so that's what the quantity arrows colors are referring to it's referring to these arrows right here and this will apply for variable products and it'll also apply for group products next we have the sale badge now the sale badge will appear right here so this is the sale badge and you can change the text and this is actual color of the background so let's say for example you want a white background it's now white so that that's basically what that's referring to now we also have the star rating color now the starter in color will be displayed on the the single products or any product with reviews and then also it'll be displayed in your shop so if they click on the product it'll display there also if you have the star ratings enabled on the actual shop page they will be displayed right here and you can change the color of your star ratings at any time so that's what the star rating color is referring to now the info message color will be displayed when a user adds something to the car or there is some notification from woocommerce so for example i'll go ahead and change this text to something like blue right say just to a blue now if i add something to the cart you're going to notice that woocommerce has these little notices sometimes and this is a specific notice right here so it looks like we have to change that color to blue there it goes so now it's there it goes now it's blue so now you guys can see you guys can design this specific notice right here and you can also change the background color so basically that's what that's referring to next we have the error let's see was it the error message color so the error message color will be displayed on either your checkout page or on your shop page if there is a problem on your website let's say for example someone tries to buy something on your website and there is no shipping for that specific country they will then get the error message color and the text will be in white and the background will be in this kind of red color so that's basically what that's referring to there are instances where it would pop up here and there but i just can't really find a good uh you know i can't really find out where uh an instance to make an error on my website but if there is that's what it's going to be referring to so the notice font color will be displayed on this message right here so you can see we have the notice font color we can change this to something like black and then you'll see how this is changing for some reason it's all supposed there it goes all right and then you have the notice background color so this is what the notice background color is referring to so yeah there's just a lot of options here and at times it can be very confusing in fact i myself have to go back and kind of find out okay what does this do what does that do and so on and so forth so those are the general options with woocommerce now it's going to talk about the product archives so the product archive is essentially the page of the shop so it's your shop page so this is my current shop page and you can see we have type one and we have type two right so we have see how this looks here i think type two adds a shadow yeah so it's kind of like a shadow right here and you can add these specific rows and columns so we have four columns right here one two three four and we have three rows you can change that to something like three rows or four you know three columns and four rows so it just depends on how you want to approach your websites and you guys can you know have fun and knock yourself out and you know design your website as you please so next we have the card options and the card options are essentially how you want your products to be displayed so let's say you want to take out the star rating we can take out the star rating we can also take out the sales badge you can also add in product categories if you want to do that so let's say these are categorized you can go ahead and display your product categories here if it doesn't work you guys will need to actually just click on publish and then you guys can go ahead and just uh you know it'll it'll display but sometimes you have to just close the theme customizer to get it to work and that's just how it is so i'll go ahead and enable all of these now we also have cards gap so you can choose a specific gap for your products i think 30 pixels is really good you can change the image ratio and have a hover effect so you can have a zoom hover effect where if they hover over it it'll have this kind of zoom effect which looks really nice actually that's kind of like iso and then you have swap images which i believe will go ahead and swap the image if they have other products i'm sorry product images in the image gallery so basically you'd have to add a product image to the gallery and then it'll display like that so some of them have them some of them don't so that's just something to consider if you have other images on your products so let's go back over here to the design tab now the design tab again is the same thing so you can design the title color which is this color the price color the category color the button text color and then the card background color and then you can add a card shadow to it if you want to do that so that's just basically what the cards options are they are referring to the actual products themselves on your shop page now you can also go ahead and you know add in new things like you can add a sidebar shop results count shop source pagination so if you want to have a pagination here at the bottom you go and add that as well and you can design the pagination if you have one here at the bottom so the pagination again is just referring to um you know like if there's more products go to page two and you can do more things like next preview load more and infinite scroll these are very similar to the blog post features so if you have more products it'll be displayed at the bottom of the page right so let's go back here and then we also have the product catalog so you can actually control what displays on your shop so the shop page displays what well i want to show categories i want to show categories and products or i just want to show the categories and products now if you do want to show just categories make sure you upload an image into your category section in the woocommerce backend because if you don't have an image then these images will be displayed by default which are just placeholders so you'll need to go ahead and go to the back end here let me go ahead and walk you through how to do that just in case you're not sure so under the i believe it's under the products we have categories and under the categories you'll go ahead and put an image right here and then that will basically put the image here so that's basically what that's referring to all right and then that's pretty much it for the product archives now of course you guys can always add a page title as well this is very similar to the actual blog as well so you guys can go ahead and design this and these are the same exact options for the blog so if you guys remember we talked about it earlier if you want to design this section you'll have to go to the page itself so let me just go ahead and just take you to the page for those of you who just kind of skipped around and you didn't follow the previous section which is fine because some of you might just want to know about the woocommerce settings so under the shop i'll click on edits and then there we go or is it the shop page i think it's actually this page here let's see here yeah so take your adventure to the next level which is our shop page so remember for your shop page the title of the actual shop page will be displayed right here so that's basically what that's referring to i'll just go ahead and click on edit here really quick and yeah so you have take your adventure to the next level i think you can add some sort of excerpt here as well i'm pretty sure you can add some sort of excerpt right here you can add some sort of additional content and see here this is contents and i'll update that i'm actually not sure i'm not going to edit this i kind of want to know for myself here if you can add excerpt i don't think you can't actually you have description so i think you could so let's go ahead and publish this and find out we're going to we're going to find out right now here we're gonna go ahead and refresh this page i believe you can and all right there it is so if you guys do want to add more to your page just remember you'll go to the excerpt section and then you'll add in more content here so you can put something here like black friday deals or whatever you want to add to your website so i just remember that uh this is the page title and then this is the excerpt section page title excerpt section okay i hope that was that was clear guys i hope i made a lot of sense there so and then you can go ahead and design it and you can change the style you can also change the image as well and you can also add a custom image and of course add a parallax effect to this back end right there so that's basically what the page title is referring to and i think by now you guys might get an understanding of the bloxy theme because the page title the blog post and the blog page are essentially the same settings they're just kind of rearranged you know they're rearranged the same way actually they're pretty similar but uh for this section right here i'll go ahead and just show products i kind of want my i want my products to be displayed here by default i don't like the categories i think that's it's too much clicking for me and why you know my visitors in my personal opinion now let's go and talk about the single product so let's say for example someone clicks on a product right now when they click on a product you can also design the single product page so by default we have this normal width right and then we have this narrow width so there's four different page structures you can see it's more narrow you can also add a right sidebar and then you can add a left sidebar so that's just you know if you want to have a sidebar to your you know your website and then in order to add the widgets you'll just go to the widgets section and then you can add in widgets on your woocommerce sidebar so again for those of you who don't know where that is i'll just go ahead and just uh walk you through that because people leave me comments saying well darrell you didn't go through this section and i don't know what to do now and you know so the woocommerce sidebar so that's what that's referring to so i'll just drag in something here like this stuff right here and then just you know there we go and click on done and go back here so now what i'll do is i'll go ahead and refresh the page and there we go so we have the quote and the facebook like box didn't appear that's probably because i have to add my fan page but you guys get the point right so if you add the sidebars you can go to the back end and you can add widgets and it must be in the woocommerce sidebar section and then for the product gallery you can change the width and then all these other additional settings now these settings are essentially the same thing as like the blog post so let's say for example you want to change the product elements you can hide or enable certain elements on your page so let's say for example you don't want to have the sale badge right maybe not on this product you can disable it on this specific uh i'm sorry on your on your product pages and then you can go ahead and turn it on so you can turn on and off product elements now you can also customize the add to cart so we have this add to cart here right but under the design tab you can change the actual add to cart button itself so you can change the font color the background color and all these other options right here so yeah that's if you want to change the actual add to cart button and then you can change the width of it to make it smaller or you can make it bigger now remember guys um if it doesn't you can see how oh there it goes all right but if you see a setting it doesn't work don't panic just go ahead and publish it and then close the theme customizer and then everything should work just fine all right so don't panic right and um yeah here we have the page elements so you can add the related upsells you can add product tabs which are already open which are these right here uh related upsells and i'm sorry what is that related and upsells i think they mean cross cells and upsells right that's what this is right here so these are your uh upsells and then the cross sells would be at checkout all right is that the right that's correct yeah so and lastly we have the sticky summary and the ajax attitude cards now the sticky summary will make your description of your product sticky and the ajax active car will add the product instantly to the cart and not make users wait so i think it's a good thing to leave the ajax add to cart by default it's just a faster way for people to check out on your current ecommerce website now also we have the checkout page and the checkout page is pretty standard so what this will allow you to do is that it'll allow you to make certain areas hidden optional or required now this is perfect for digital download websites because sometimes you're dealing with digital download websites you don't need all of your address and everything to display so you guys can actually choose to hide the address line to you can hide the phone number you can also hide the company name field as well and then you can also select your privacy policy and also your terms and conditions right here if you want to do that and you can also display the checkout form i'm sorry the coupon form again on your checkout just in case people actually forgot to put it on the card page so that's just what the options here are referring to now i also do want to mention one more thing that a lot of users get confused about with bloxy so this is my add to carts right now these options right here these are not being able to be edited by the theme customizer so you actually have to use the header so let me just go ahead and publish this really quick and this is a lot of people actually ask me about this in my facebook group so what you'll have to do here is first let's go to customize and we're going to customize the actual header here so let's click over here on header and now we have this icon right here so let's click on that and under this design tab this is where you can start designing the actual background color the font color and the icon color the same thing with the my account as well so if you want to change the my account options you guys can go ahead and edit this so just remember that the header is controlling the actual cart itself and the headers actually controlling the account section as well i do get a lot of confusion about that uh with bloxy maybe they should add it in their woocommerce options i'm not really sure let me know what you guys think about that in the comments below but uh yeah so that would be the total part of the woocommerce section all right so now that we talked about the free version and all that stuff i know that was a bit overwhelming right but now let's talk about the bloxy pro version now everything i talked about was the free version however bloxy pro does offer a lot of really cool features in the pro so i'll go ahead and cover all of that in detail in this part of the video also if you guys do decide to buy the pro version there is a 10 discount for all of you in the description below of this video the code daryl 10 will give you 10 off and there is a 14 day money back guarantee so it is risk free and the pro version is actually pretty cool especially for the header and the woocommerce option so let's just go ahead and dive into it now when you install the bloxy pro plugin it gives you these pro extensions so it gives you the adobe type kit custom google fonts and local google fonts as well i'm not really too big onto the font things and everything so i'm not really even familiar with adobe type kit so that's just something that if you use or you want to add you can go ahead and add that it also gives you the custom fonts and the local google fonts as well but first let's talk about the actual header builder so when you install the pro version of bloxy you get a lot more elements right here so you get different menus a search a search box socials and just more additional widgets to add to your header also you get a really cool i guess you want to say uh what's the word integration and that's for translate press so with translate press you actually get this new languages little option here and you can actually offer different languages on your website now the one thing that's a little bit confusing about proxy is that you'll need to install plugins in order for these elements to show up for example if you don't install the woocommerce plugin you won't have the option for like the accounts the cart and so on and so forth like the wish list and if you don't have the translate press plugin installed you will not have the option for languages so you need to install those plugins in order to get access to these elements you can also add dividers everywhere on your website and i do like this look and i think they actually give you a really cool example of how you guys can add it on your uh on your website here let's see if they give it to us here oh yeah right here you guys can see how there's these dividers so you guys can kind of add these dividers throughout your menu just to give it that elegant feel and style so yeah that would be the header builder in a nutshell it just offers more elements and just more control over your header next let's go ahead and talk about the hooks so when you are using bloxy you can actually use theme hooks and basically add content anywhere you want throughout the wordpress theme that might sound a little confusing but let's go ahead and take a look here so for example if you want to add something on this section you do is you click this pencil and you can insert pretty much anything you want here you can insert a block you can insert custom code you can even insert an elementor library and add in like a whole new section but you can go ahead and just kind of insert stuff that you want right here and you can do that throughout the website and they do give you a good example of that with the actual woocommerce areas so you can see you can do it before the the woocommerce cart before the products after the car and so on and so forth so you can add in any content that you want you can also make the blocks you can create content blocks and you can insert those content blocks anywhere you want on your website so you can use the page builder and insert content anywhere you want throughout the theme so essentially what they're doing here is like they're kind of basically making it so you can design every specific part of the website so you don't have to be using the page builder you can use the theme to kind of get around that so you'll see here how you can add in stuff pretty much everywhere right here so if you have a client and they are a total pain in the ass well you can insert content anywhere you want on your website so that's what the hooks is referring to and it just it gets like really in the nitty gritty and it just kind of like you know makes things a lot easier for yourself and your clients you can also create a custom 404 page with its custom footer roll conditions and so on and so forth so there's just a lot of things that you can do with the actual hooks and again that gets very very complicated so unfortunately i'm not going to go into every single one but you guys get the main idea here so all right next we have the mega menu all right let's go and take a look here so if you notice right here we have our menu and we even have this icon right here now you can add icon elements to your menu and you can also have a mega menu and then you can design this so i can change the color i can add little banners like this that says hots i can add icons and i can fully customize and design this now what you can also do here is you can use the page builder to actually be implemented on your mega menu as well so for example you see this example right here they are using i believe it's gutenberg and they have inserted a section of gutenberg so they've saved the layout and then they have uploaded it to their mega menu as well so you can do that with elementor or gutenberg i believe and i think you can with brizzy i'm not sure with brizzy but yeah so essentially what you would do is make a content block and then insert that content block on to your mega menu so that's basically how you get that done and then here you can see you have this menu item settings on your menus you can click on this and then you can make your mega menu full width or content with you can add a specific number of columns you can enable you know an item label you can add icons you can make the icons bigger and you can put the icon to the left and to the right and also add in this really cool uh like you know text or something and then you can change the alignment of that text and then of course you can design all of that now you can do that for each specific item or each specific page so you can see here how i added an icon to every single one and uh yeah that's essentially what you can do i might have another video on the um on the mega menu it is very diverse there's a lot you can do with this and i think making a second video for that uh would be a little bit more helpful because um we can talk about that for quite a bit of time next let's go ahead and yeah you guys got the fonts right so we got the three fonts all right next we have custom sidebars and this is actually a really cool unique feature i really do like with bloxy now let's say for example you go to your website right here i'll just go ahead and uh we'll just go to our website here like uh let's see there we go all right so i'll just go to my shop page let's just give you a crash course here now with the blogsy theme you can add a sidebar here so what i'll do here is i'll enable the sidebar alright so i enabled my sidebar here and you guys can see that we have our sidebar and we have elements on this right sidebar now let's say for example you want to have dynamic sidebars so what that means is i want to have a sidebar right but i don't want this to appear on my blog page you know i don't want this to appear on uh specific pages well you can actually make a custom sidebar for every single page that you want on your website so for example we have this uh we have this create a sidebar widget area now you guys can see i've already made one here but what i'll do is i'll just say custom sidebar and i will click on create a sidebar alright now we have custom sidebar so what i want to add in this sidebar right well i'll just add the audio and i will add in i don't know about me and uh we'll just throw in a quote here why not although in a quote right so we have this custom sidebar with a few elements we have the quote about me and the audio now here under sidebar settings i'll click on this and we can add a display condition and also a user condition so what that means is let's say there is a let's say you have a membership website you can add in a you know a person who's logged in or you can add in specific people that can only see this sidebar which is really cool right maybe you want to offer some sort of you know discounts for your students who are logged in well you can offer that so you can offer sidebars based off of user condition or display condition let me give you an example here so we have this custom sidebar but where do you want to display it at well i want to display it only on the product tag pages and that's it so if they get to the product tag pages then i want to offer a specific sidebar for that um you know for those for those users so you guess you can see here how like the woocommerce options just really just kind of like come into play here so you can add a sidebar for virtually every specific page that you want with bloxy now also let's go ahead and take a look at the uh what else they got here so they do add white labeling so you can go ahead and hide the block c logo and so on and so forth custom code snippets you guys can add custom code snippets on the header the body and also the footer for those devs out there and now we have the woocommerce extras now the woocommerce extras again does offer quite a bit of options so let's go ahead and go through some of these options here so first let's go back to this and i will show you the shop page and then we will get into the product page as well so let's go and drag this over here just to kind of make things easier for me so the first thing is you get the quick view option and here you can kind of just take a look at stuff and you can get a quick view of the products the next feature is the floating cart so as the user scrolling down you will then see that the product right here kind of like makes it so you can add this to the cart making it a lot easier so yeah so your view your visitors will always be kind of informed about your specific products so that is the actual floating cart the next feature is actually very interesting and this is the odd canvas filters and the off canvas carts now let's say for example you have a visitor that's shopping on your website and they are on a mobile device and they are on your shop page if i click on the menu right here you're going to see that we have this filter by price now you can add specific filters on your current off canvas menu when users are visiting on a mobile device and they are on the shop page now what's really cool is that if they go to a different page let's say they go to the about us page the filters and everything will disappear so now you guys can see that those options are gone so you can add filters specifically to make things easier when users are visiting your website on a mobile device on your shop pages is really cool and you can do that again with the you can add as many filters as you want and you can also add in like the cards icon there as well so they can kind of update their cart on the mobile device so that is a pretty cool and very unique feature next we have the single product layout so let's go ahead and check those out here i'll go ahead and i'm getting lost here here we go click on customize so i just opened up a bunch of tabs guys and just did this from scratch because uh it would be very hard to kind of close and open close and open so let's go ahead and go to woocommerce and go to single products now what's really cool is that you have different options here for the product gallery so here we have uh type one and then we also have type two right type two there we go wait this is the single product there we go so type two and we also have type three and i like type three because this kind of creates this grid look to it and it works really well in conjunction with the sticky summary and then you also have type 4 as well now you can also change the number of columns so there is just a lot of control that you get with this option so you can kind of go for that high-end iso look or you can kind of just choose something very ordinary and then you can adjust the gallery width and style and so on and so forth so you do just get a little bit more a lot a bit more a lot more options with the actual uh pro version when it comes to comparison with other wordpress themes so yeah that's that then we also have the gallery slider so the gallery slider will control uh it just creates like a little slider right here so it just kind of makes your products that you can kind of like you know slide through them it just adds a little bit more to your site and you guys can see on this product page it just looks really cool really unique and uh yeah so that's just a quick example of how you guys can design your single product pages and uh let's go back over here now the multi-step checkout and the distraction free checkout i don't have that's available yet guys so essentially you're just going to probably skip the cart page and just go directly at checkout making things a lot easier to purchase on your websites and lastly we have the enhanced footer builder now this is the same exact options with the header so i'm not really going to explain it however you can have a specific footer for pretty much every page you do also get multiple footers and you also get more elements on the footer so very similar to the actual header the same thing applies to your footer and there's more to come so you get the advanced blogging extension coming soon and all these other features that are coming soon so yeah that's pretty much it guys now if you guys do have any questions for me about the bloxy theme uh feel free to let me know in the comments below i do think it's a very good theme for woocommerce and blogging and again i have a 10 discount for all of you in the description below of this video i hope this tutorial helped you guys out i hope i was very clear and i if i went too fast i apologize i just wanted to kind of go over everything and make sure you guys fully understand the features with bloxy so if this tutorial helped you guys out make sure you guys give me a big thumbs up and let me know in the comments what you think about this wordpress theme in the comments below my name is darrell wilson and i will see all of you party people in the next video guys take care

Channel: Darrel Wilson

Views: 53,134

Keywords: blocksy theme, blocksy theme review, blocksy theme elementor, blocksy theme woocommerce, blocksy theme pro, blocksy theme tutorial, blocksy review, blocksy woocommerce, blocksy wordpress theme, wordpress, wordpress theme, best free wordpress theme, blocksy theme wordpress

Id: 8fhRyyAdWFk

Length: 94min 36sec (5676 seconds)

Published: Sun Mar 21 2021