GeneratePress Theme Customization | GeneratePress & GenerateBlocks

today we're going to be exploring generate press and generate blocks and i'm going to show you how to get started using this powerful combination for this example i will be using the premium version however you can get away with the free versions to cover most of what i'm going to go over in this video however there are some aspects you will need the premium version for but the free version should give you more than enough to feel exactly how this all works and then you can decide if this is a combination you want to explore a little further so we're going to be using generatepress the premium version and generate blocks this is a great combination for building fast loading optimized websites so let's go ahead first of all and take a look at how i've got everything set up choose the different options we need to get started and then take a look at setting up the basics before we start building and designing things okay so once we've installed generate press we can come to the appearance section inside there we've got generate press options all you need to do is pop in your license key and this will give you access then to all the options that you have as part of the premium version and as you can see there are quite a lot of different modules available so we're going to enable most of these so i want everything pretty much except for the option for the secondary navigation this example and i don't need the site library so we'll choose all of those to activate those extra features that this gives us you also see underneath we've got the start customizing option which allows us to jump immediately into the customizer for the identity color options typographic system and the layout options and so on you can also export all your global colors or your typography so you could very quickly and easily make up a global setup to get you up and running much quicker if you're designing similar looking sites or you use a very similar starting point so tap into those options should you need them so before we actually start setting things up let's take a quick look at what we're actually going to be creating this is the sample page we're going to be working on now it's nothing complex but it will introduce you to some of the core skills you need when working with this combination of tools so if we scroll on through you can see we've got a very typical layout with a range of different options we've got some nice styling options inside you a consistent color scheme typographic elements and so on write the way down until we get to the footer section where we've got all our copyright links and so on so a very simple starting point but it should go over the key things you're going to need to understand so to start off with let's work through our start customizing section so we can configure what we need let's go into the site identity first of all this will open up the customizer and take us into the relevant different sections so first of all let's just change the title of this let's set this to be the creator network we're going to say we want to hide the tagline so we can ignore that now obviously if you had a logo you could upload that at this point and set any configuration options for that for the size and so on i'm going to leave it just a text for this example but use whatever you want and also you could upload your site icon or your favicon which i would recommend doing on a live site now that we've done that let's hop back out our site identity section and let's come into colors and we can start to set our global colors now one of the things i really like about working with the tool like generate press is it gives us a lot of really simple options for colors and typography where we want to use them and so on and we can set things up relatively quickly and easily we can set up our global colors and as you can see there's a selection already created which is being used in the design however we can change any of these and also go ahead and add additional colors in should we need to all you need to do is click on the relevant color chip and choose the option for the actual color itself the opacity of that if you want to add variable names add the color and so on so i'm going to quickly go and set up all my global colors that i've already created previously just get started working with this so once you've set up your colors you can now go ahead and start adding those to various different parts of the site design there's one little quirk that i found when working with generate press is you set your accent color and while it shows up as an option in the main global colors when you go to select it it's actually not available to you there the old color is still showing up so we need to do is simply hit on publish we'll quickly refresh the customizer and open back up the same section and now if we expand any of these out you'll find our color link is already set up inside there even though it changed inside the actual preview window on the right hand side so now we can go ahead and start customizing the look and feel of this and as you can see each of these different sections allows you to set either a custom color or use one of your pre-designed colors so for example we may want to set the background to this darker color we can do that directly inside here so now what we need to do is go through the various different sections inside you and set up the colors that we want so i'm not going to bore you by making you watch me add all the color chips in i'm simply going to go ahead and set those colors using my range of global colors that we've already configured at the top for the various different parts of our site design okay once we've configured all the colors that's that aspect of it then now you may be thinking this looks a little bit rubbish but don't worry we're going to override a lot of the different things you can see including things like the widgets on the right-hand side those kinds of things so let's come back out of here now let's come into typography now for ease we're going to be using the font manager so what we're going to do is we're going to come in say add font and now we can go ahead and we can search for our fonts now for this example we are going to be using google fonts and i would recommend you take a look at making sure you have these offline and don't use them with a connection to the google font server i'll put a link in the description below to a video about generatepress and how you go about doing it it's a little bit long-winded and not something i want to cover in this kind of introduction video so make sure you do that to make sure you're compliant and don't have any issues further on down the road so we'll choose the font that i want which you're going to go in and search for fonts i'm going to do a search for quicksand we'll choose that option from there we're going to say to use the google font but like i say make sure you do these offline we can add that font and we can add extra fonts should we want to by simply click on the add font underneath however for this example we're going to be using this for pretty much everything so i'm going to delete that option inside there and we're going to stick with just quicksand and now we can do is we can choose to add the typography so this allows us to control where and when that particular font is going to be used if we want to have different fonts so if we add typography for example if we expand this out you can see we've got all the different options so your html which is your base tags and your body so if you want to set them globally this is the way to do it you can set different ones for your site title and description different ones for your primary navigation your sub menus and so on different ones for your buttons your headings and all those different kinds of things including all your different widgets your footer of canvas menus and anything you want for custom so let's go ahead and set that up for this example we're going to choose the body option cut out our font family and choose our font that's listed inside this we can choose quicksand and you'll find out pretty much everything on the screen changes over to quicksand we can if we want to adjust the value for the font weight and the text transform so we want to make this heavier across the inside site we could do that however it's much better to kind of leave this as default and then set the values up independently using any of the other tags you may want to attach them to your headings your those kinds of things so we'll leave all this the only thing we're going to change on here is set the font size value to 16. now what this does is it allows us to set the base value which most of the time is going to be 16 and then we can reference that using either m's or rams further on down the line we want to make sure we get easily scalable sizing when it comes to typography and so on so that's our base typography value set up now if we want to though we can come in and change this so we may want to make all of our headings heavier it says open up the typography come into our search elements option and we're going to come down and you can see we can choose all headings so we can apply a value to all of our headings or we can go ahead and choose heading 1 heading 2 heading 3 and so on if you want independent values for each of those so headings all headings we could say we want to make those heavier so we may want all those to be something like 500 and then anywhere this headings they will be heavier than the typography that's being used in other areas and the same thing goes for any text transformation font size and so on however bearing in mind that you're doing this on all headings so all of your headings will be set to the same size which generally isn't what you want to do so again what i'm going to do is i'm going to set up the values for the various different typography settings that i want just using exactly what i've just shown you using m's or rems when it comes to the sizing to take the values from that base 16 pixel value we set on the body tag so let's go ahead and do that the first one and then i'm going to do all the rest behind the scenes just to speed things up so coming to add our typography let's come in and let's just choose this time our h1 we'll choose that we're going to leave everything else as it is and what we're going to do is we're going to come down to our font size and you can see this is set to 42 pixels however we want to change that so we need to do is click on the pixel value and you can see we can choose m's rems or percentages now because we want to reference back to the base value of 16 pixels we're going to choose rems and we're going to change this to something like 4. so what that's going to do is that's going to take the base value of 16 and multiply it by four then anywhere i would design it uses that we'll use that size and obviously we can change that on an individual item basis or we can come back and change this at any point should we need to so i'm going to quickly run through all these different typography settings that i want to set up and then we'll carry on from there now the beauty of working in this way is you are globally affecting all of the different typography color settings and so on the spacings the sizings and everything inside your design then if you want to make any changes afterwards you can simply hop back over to the customizer and tweak them should you need to with those base values set up we're going to click on publish just to get the basics in line so we've now got our basic typography values set up our basic color scheme set up the next thing you want to do is go ahead and set up any of the layout options to make sure this actually lays out the way that we wanted to just come back out of here all we can do is we can come into the layout section and now we've got control over various different aspects of our layer our container header footer and so on so we're going to come into our container and inside here you can see we've got options for content layout you can see we've got separate containers we're going to set this to be one container so we don't get any separation between these various different parts leave everything else set up inside there if you want to adjust the container width you can do and if you want to adjust the spacing between those different columns if you are going to be using sidebars you can do that as well we're not going to be doing that so we're going to come back out of that come down to sidebars and inside there we can now choose where we want to use sidebars if we want to use them at all in three key sections the sidebar layout for the main content for your blog sidebar and for your single post for this example we're going to set all of these to content no sidebar just to make sure that we just have a blank template that we can use full width and do whatever we want in our own design again though you've got all options inside here for padding left sidebar width and so on if you're using those options so now we've kind of created the basic setup for our layout we can now start to go a little bit further and a little bit deeper into various different aspects of our design so let's come back out of the layout option let's come down now this time into general we're going to enable smooth scrolling because i like to have that smooth scrolling effect and one thing you'll notice is pretty much all our links on our site have underlines on them we can remove that if we want to or we can set it for various instances i don't like to have the underline in my designs or at least if i do i want to have control over it for this example we're going to change this from underlying links and we're going to say never but you could set it on hover if you wanted to however you want to set it up and you can see now our links no longer have the underline let's come back and do this one more time let's come down to our homepage settings and inside there we're going to set a static page now we've already created several blank pages and they are literally just blank pages so to come into a static page we're going to set our home page to be the home blank page that i've set up and we're going to create that entire page in a moment once you've done that we've basically set up the starting point we can now come into our menu structure and inside there we can create a new menu so create menu we're going to call this main menu we're going to set this to be our primary and off canvas menu and we click on next and now we can go ahead and we can add any of our items we want so let's just choose to add the relevant different sections so we want the home page in there we want the about page and we want the contact page and that's basically all i want in this example if i want to move them around i can simply drag and drop them into the position that i want but they're perfectly fine with the home about and contact sections we're going to come back out of this we're going to hit publish to make sure that everything has been saved and our changes are all saved let's come back out of our customizer this time we're going to go into our pages and we're going to open up our home page so now that we've got our blank page open we're going to start off by creating the hero section right at the top of the page for this example we'll build everything from scratch so i can demonstrate some of the options you have as part of generate press and generate blocks so first of all let's go ahead and add in our container record to the plus in the corner we're going to click on container this is going to put a container inside you and this is where we can set up background images content set the sizing spacing and so on so as you can see we now have this white rectangle with a plus in the center if we open up the option to see list view you can see this now shows us our container we can easily go ahead and configure various different aspects of this so first of all you can see we've got the option for the alignment if we choose this option we've got three different settings we can use inside you we're going to choose the full width option and what this is going to do is it's going to give us the ability to have a full width background for our hero image with that being said if we come over to the right hand side you can see we've got the container the inner container the inner container width and also the tag name these are four key parts whenever you create a container inside generate blocks so first of all container being full width as i've just said is going to give us the full width of the browser however the inner container where our content is going to sit will still be contained and that will be set to 1200 pixels we can set that globally throughout our entire site inside the customizer and the settings for generate press or we can manually adjust it directly inside this panel on a page by page or section by section basis finally we've got the tag name so you can see we can open this up we can apply one of five different tags and this is good for semantics we're going to go to too much detail with this but you can see you can set it to be a div if you're going to set it up as a header or a footer you can set that up and this is then inserted into the html code and it's very good for the semantic site of creating content and layouts and so on for this example we're going to set this to be a section and we've set up everything we want inside here so now we're going to go ahead we're going to come down until we get to the bottom options and inside there we're going to choose background we're going to click on browse i'm going to choose an image i've already gone ahead and uploaded so we'll choose this one we'll choose select on there and you can see now we get this little thin sliver of our background image now obviously we need to correct the spacing on this and a few other things but we'll deal with that in a moment if we scroll down underneath you can see we can choose what size image we want to use so depending upon the size of the actual layout we can choose what size image we want large in this example or full will probably be perfectly fine so we'll leave that set as full underneath that you can see we've got the selector and inside there we've got element and pseudo element this allows us to choose how we target various different parts of our design now what we want to do is we want to change the opacity of this to create a kind of overlay effect to do that we're going to use this image opacity option but keep an eye on the selector you can see currently it says element and we can't apply this image opacity to the element so once we adjust that you'll see it automatically changes to pseudo elements so even if you don't know what you're doing here when you adjust this that will automatically adjust and change it to a pseudo element so we'll set this to around about 20 ish that should do for now and if we scroll down you can see we can also manage how the image is displayed so if you want to move things around based upon the focal point and those kinds of things you can do that you want to create a kind of parallax effect you can use the attachment scroll option set this to be fixed and so on if you want to for this example we'll leave it as it is so let's come back up now let's come into our spacing section inside you we're going to add a little bit of padding to the top and the bottom we can adjust this afterwards if we want to without any problems we're going to set some sort of arbitrary starting point values so we'll choose 150 pixels for the top 150 pixels for the bottom but like i say we can adjust this should we need to you can even go ahead and choose whether you want to work with pixels m's or percentages so depending upon how you want to lay things out you can use whichever value is the best for you okay so with that being said we've now created the very first part insert our container so the next you want to do is insert a grid and we're going to use this so we can position content and have spacing and those kinds of things so we're going to do is we're going to cover the plus one more time we're going to choose the grid option and inside there we can now choose what type of grid we want we're going to choose this one as you can see that now gives us the options for a sort of like 30 70 split but unfortunately it's in the wrong place so let's come back up to our list view let's open up the container and let's drag our grid inside it now we can expand that out you see our grid now sits inside and inside our grid we've got two more containers so all those same options are available for the containers we saw in the main container itself however all we're going to do is we're going to come into the very first one and inside there we're going to drop a heading inside so click on plus one more time we'll do a search and we're going to choose headline which is one of the integrated generate blocks widgets so we're going to choose that option from there and you can see that now pulls in some basic placeholder text we're going to change this to h1 because this is going to be the primary heading on our page and i've already copied a little bit of text that i want to use for this section so let's go ahead and just duplicate that so we're going to just click in the corner and we're going to say duplicate or we could use the keyboard shortcut and then we're going to insert another subsection of text inside below and there we go so we need to change this now to a more relevant heading so we're going to set this to h2 so we can make sure we have a nice structured hierarchy so now we're going to do is we're going to go ahead and we're going to customize the actual text content the layout because what this is doing is this is picking up those default values we set globally for our design and we want to override those in this instance for our hero section so first of all let's go and select our first headline we're going to come over to the typography settings and inside there we're going to change this to a different font so in the font family we're going to just choose the options from there and this example we're going to use montserrat so we've got a separate kind of cold action that still fits in nicely with our main text our entire site so we're going to do next is we're going to change the weight of this and we'll set this to be 800 and then we can go ahead and we can set the font size and again we can use pixels m's or percentages for this example we're going to set this to be m's let's start off with something i try like five that looks pretty good i like the look of that you can then go ahead and set your line height and your letter spacing and we can choose to either put in one of the default arbitrary values of small for example or medium or large whatever or we can click on the little settings option and customize this to our heart's content for this example though we're simply going to go ahead and set this to be medium that looks perfectly fine scrolling on down you can see we've got use the google fonts api i'm going to override that we're going to use the local version of our font you can see that changes things a little bit and that's perfectly fine this example so now we've set up the two key components for our header section or hero section we've got one final thing i want to do and that's insert a button that allows someone to click to go and do something so again let's just come underneath our headline click on the plus which is the option for buttons and what that will do now is that we'll insert a button group and inside the button group we can have multiple buttons by default there's only one but you can insert additional buttons should you want to for this example though one is all we need just need to double click inside there and click and type learn more so we can go ahead and we can style the button any way that we want to you can see if we go to the right hand side we've got our colors border radiuses all those kinds of things now i'm going to leave this as it is for now because i'm going to show you later on in the video how we can do something that speeds up the whole design process when you've got similar styles you want to apply so we leave that as it is for now but basically that's our header or hero section set up if you want to make any changes we can simply come in and change any of the values but what you can see is it's actually very simple and quite a page builder-esque kind of design experience is a lot closer to what we're used to than it has been in the past with gutenberg okay that's the hero section completed let's now go ahead and move on okay so various different parts of this we're going to be using some of the pre-built templates and then we're going to customize those because this is a very quick and easy way of building up good-looking pages that are optimized without having to get stuck in but what it's going to teach you is the fundamentals of how these different parts are built so we're going to click to add the plus we're going to come to our patent library we're going to come down and we're going to choose the content option and from there we're going to grab this workout so what we've done is we've basically created another section using the template which we can now come in and start to customize so first of all we want to just change this image because it doesn't make sense so we'll expand our options on the list view we'll choose our first container we'll come over to the right hand side i'm going to come down to our backgrounds and inside there we're going to browse for our image i'm going to choose this one and we'll select it that now inserts that into our design and now we can simply customize any aspects of this obviously the orange color doesn't make any sense because that's not the color or colors we've set up so let's go ahead and address that first of all so making sure we've got the right container selected or the correct container i should say we're going to come over to our colors and you can see there's our border and our border color is using this orange we can just choose one of our global colors and bang it's now being set up if you find that that is in the wrong position you want that line to be at the bottom all we really need to do is come over into the options for spacing and inside there you can see we've got the border size we can change that from 10 on the top and we'll just change that to 10 on the bottom and we've now changed the position simple as that and we do the same thing with any other parts of our design so for example we can select this header section we can clear this icon or we could change the color for this example i don't want this and i'll remove it we can come over to our button we can make sure that's selected color to our colors one more time change our colors on here we're going to change the colors to this global green color and bang you can see now we've just quickly changed over the colors inside there so really quick and simple one thing i need to do is come over to my container currently this isn't taking up the full width so we're going to come over to the container itself select the option for full width and there we go that's now set that up if you want to change the background color we can do that to make sure it's using our global color so we can select the container come over into the option for colors and you can see background is set in there and we'll set this to our global color which is our first option to make sure that everything is tied into that global color scheme and again if you want to change things like the text colors and so on they're going to be used based upon this container you can do that inside you if you want to as well now if you remember back we've got this button which doesn't look the same as this button and this is the button that we want to use so we're going to do is we're going to select our button we're going to come up to this option which allows us to copy and paste styles we're going to choose this we're going to choose copy styles making sure that the button is what's selected scroll back up choose our other button so again make sure that's selected choose the same options and this time choose paste styles and bang we've now created an exactly the same style button with the hover effect and everything included the only thing that's missing is the little chevron symbol that we have linked there so we can adjust that simply simply come up choose our button one more time come over to the icon option on the right hand side and inside there we can choose to either insert the code for this or we can come in and choose from our general option or we can choose from any of our social media options so for this example we want to use the same chevron so we'll just select our first button we'll come over we'll copy this content from there and simply come over to our first button at the top in our hero section and we'll paste that code inside there and there we go we've now got an identical button pretty cool really easy to do and as you can see hopefully if you're new to working with tools like gutenberg and generate blocks and so on it is relatively simple and straightforward to do all of these kind of things okay so let's just compact this down a little bit less again update this and as you can see our design is now starting to take shape so we're going to do is we're going to add a couple more elements inside here i'm not going to bore you by showing you the same thing again because it's literally repeating the same kind of process we're going to simply come over come to our patent library and start adding in a couple more components okay so we've basically finished creating the main part of our page as you can see everything is in place i've updated this and let's go ahead and preview this to see what we've currently got to preview this in a new tab as you can see all the different component pieces are in place however we still have a pretty rubbish looking header and footer which we need to address so to do this we're going to come back over into our design we'll hop back out of this into our dashboard i'm going to come into one of the other features that we have as part of generatepress pro and that is the elements option now if you consider elements as being templates either whole templates or component pieces for example a header or it could be a footer or it could be just a blog header all those things can be made up from elements so we can hook those into various different parts of our design so it's a pretty cool way of working and it opens up a really powerful way of creating custom designs for various different parts of your site and applying conditions to them so let's take a look at how we use that to create in this example to start off with our footer so you click on elements we can either click on elements at the top or we can come up to appearance and choose elements from inside there or if you're on the front end you can choose the elements option as well and we'll take a look at that in a moment we're going to add a new element for this example we're going to be creating the footer so we're going to grab the option for a block element and we'll click on create so that now takes us over to gutenberg but you'll notice we've got some extra options at the bottom and these are our display rules in other words where and when do we want to use them so first of all let's create our design again let's keep this really simple and grab ourselves one of the pattern library pre-designed footers so we're going to grab an option for a footer we'll choose this one and we just need to quickly tweak that to get what we want so let's open up the panel from the left hand side again and expand this out so we can see what we're working with i don't want this top section so we're going to simply select that and we're going to just choose to delete it to remove that from there we've now got our container with the various different grid elements and container elements inside there so we can tweak this if you want to first you want to do is select our container and change our background color so we're going to do that by coming over to the right hand side coming down till we get to our colors and we're simply going to grab our basic background color if you want to adjust that slightly we could do that we could sort of highlight it a little bit make it a bit lighter with darker whatever you kind of wanted to do for this example though we'll leave it as it is and we're going to do now is we're going to make sure that we've got a nice strip at the top of that to give us some visual separation to do that what we're going to do is going to come and choose a border option i'm going to set that to be green and then what we can do is we can connect our border size and we can set a value at the top and we'll set that to 10 pixels like we did with the image as you can see that now positions that at the top of our footer if you want to adjust any spacing or padding we can do that so we'll select our container for example you can see we've got this little line at the top of that we don't want that so let's just remove it from there we can adjust any margin so we'll remove that margin from there to sort of close things up a little bit we'll reduce our padding down to say maybe 25 and that now gives us our basic starting footer so now that we've finished configuring our design the next thing we need to do is tell it where and when to use it throughout our site so the first thing you want to do is come over to the element option on the right hand panel and you can see we've got the block element so we're going to come down and we're going to change this element type from hook and we're going to choose site footer once you set that up we've basically configured our custom footer to be used now we just need to tell it where we want to use it so we come down to the underneath section where the display rules are you can see we've got location exclude and users for this example we only want to use the location rule we can click and you can see inside there we've got a lot of different rules so we can get really granular in exactly where we want to use this but because it's a standard footer for the entire site we're going to set this to be used on the entire site so choose that option from there we'll publish this and now we can go ahead and we can take a look at our site one more time so now if we scroll down our page when we get to the bottom you can see there's our new custom footer all set up ready for us so pretty cool and easy i also noticed that i say at the top here when we're on the front of the site it shows us the elements option if we've got the title bar displayed at the top of the screen and it tells us exactly what component elements are being used in the page that we're looking at in this example there's only one the site footer but if we create a custom headers maybe custom template files or a blog or for a custom single post template all those different elements will be available inside here and we can simply click and that will take us straight into the editor for that particular element which we can start designing or adjusting that element directly inside gutenberg so it's really easy to work with but it's incredibly powerful okay so the next thing i want to do is create a customized header section to kind of merge with the image that we've got at the top on our home page to do that we're going to add another element in so you can say add new element this time we're going to choose the header option we click on create and we now give us a name first of all we're going to call this hp header for our home page and you see this now gives us some basic options we can choose merge with content so in this example we want to say we want to merge so by choosing the merge option what this does is this will merge with the page or pages that we set up using the conditional rules that we just saw in the previous example so now we've set up the basics i told you to merge we just need to tell it where we want this to happen so we're going to open up the display rules option and inside there we're going to choose the location and we're just going to set this to be front page if you want to add additional rules you can do that by clicking add location rule and you can add a second third and so on so you can create as complex or comprehensive as you want to using these options for this example though we're going to keep this just for the home page we'll click on publish we'll hop over to our front page and as you can see things are almost there we still need to deal with this extra little bit of space that we have at the top and that's relatively simple to do so quick and easy way to deal with that is just apply a little bit of negative margin at the top to do that just hop back over into your design for your page select the top container which is our hero cut our margins and we'll just pop in so like -50 that'll move things up a little bit save that refresh and there we go so we've got most of the things that we need into our design now obviously there's a ton more things you could do there's one more final thing i want to show you is how you go about setting up and configuring the various different mobile responsive views and how you tweak things again if you're coming from a tool like elementor or anything like that this is all going to feel very very familiar let's come back over into a design let's choose our container and just focus on the one element just to demonstrate how it works if we come over to the top right hand side you can see we can switch into the different modes so we switch into the option for tablet view switching the mobile you can see it set up inside here so what we need to do now is go ahead and adjust any values that we need to for example the typography may be a little bit too big so we can come in and we can change that so let's just set this to something like four line height if we want to we can come to the second headline element select that and we can adjust that inside there and set that to be maybe two so you can see it's no real difference we just literally come in and tweak and configure the various different parts to make sure that they look good on any of the designs devices we can just space in padding margins text sizes all those options are available to us it's relatively simple and straightforward you want to change the spacing you can just select the entire container for example inside there we can now adjust things so we may say we want to be 100 at the top on a smaller screen and 100 at the bottom you can see we can adjust that if we need to adjust the margins we can adjust that as well so all the options you'd need are inside you while this is a relatively simple and straightforward overview of using these tools you can get really creative and create some really unique designs very quickly and easily and if you'd like me to cover that in more detail and show you how to build more complex designs let me know in the comments section below as always all the applicable links are in the description my name is paul c this is wp test and until next time take [Music] you

Channel: WPTuts

Views: 73,084

Keywords: WPTuts, GeneratePress, generatepress theme, generatepress tutorial, generatepress homepage design, generateblocks, GeneratePress Pro, generateblocks pro, generate blocks tutorial, generate blocks 1.5, fast wordpress website, quick wordpress website

Id: 4SpxBwWUal0

Length: 33min 35sec (2015 seconds)

Published: Mon Jul 04 2022