GeneratePress & GenerateBlocks - Full Website Conversion from Elementor (with Commentary)

hello and welcome to this special little video where i'm gonna recreate this entire site which the one you're seeing here is the original it was built with elementor a couple years ago uh it's having a little bit of trouble when we do updates and stuff so i just figured the time was good to go ahead and get this rebuilt with generate blocks so what i have here is my starter site which is what i start all my projects off with it already has all my plugins and everything installed and some default settings inside of generatepress and generate blocks so the first thing i usually do is go in here and get the navigation setup and i found that uh using the customizer to set up the navigation here is a quick way to add all the pages without having to go to the back end and go to pages add new one at a time if you do it here through the customizer you can get a lot of that stuff set up really quickly and already have those pages set up and ready to go for you now this last one is actually going to be a button so i'm going to give it an additional class here so i can target that later and turn that into a button next thing we'll do here is drop in the fonts in this website we're only going to be using one font across the entire website which is dm sans the original website actually has a different font on it uh but i do have some concerns on the licensing of it so i've changed this over to a google font where i knew i would be safe with the licensing now i do go through here and make a few little changes to the typography at this point but you'll see me later in the video i'll be coming back and doing some refining with that over time now the next part is all the global colors so inside of my starter site i have a system of global colors already set up off screen here i'm pulling up the old site and grabbing some of the colors you might see my mouse disappear for a while and that's when i'm just in my other window grabbing some things so i have all these default colors set up there's things like the body colors section colors text colors link colors button colors hover colors all kinds of things so i set up a lot of these by default and i found that having this generic palette works in most cases a lot of times i don't end up using all of these colors and sometimes i have to add a few more but for the most part this will get me through most simple projects now here for the text color i wanted to find something that was a little bit less saturated and something closer to black so i did jump there into xd so i could use the color picker and try to find the right colors now this is a website this tint and shade generator that i use all the time you'll see me come back to this a few times throughout the website what's nice about it is it will give you uh tints and shades of a certain color so if you kind of want to stay inside that family but get something lighter or darker it's a really quick and easy way to do that so we'll spend just a few more minutes here getting this color system all set up and that process does take probably the longest out of anything inside the customizer but it's one of those things that once it's set up you know that you have everything in the right place you can pull all those colors dynamically throughout the entire website and you don't have to worry about dropping in random hex values in case you ever want to change something in the future now here on the original site we had this light blue color but i was worried about the color contrast on it so i did go here to this color contrast checker and just find the closest shade i could to that color that would still work on white and pass some accessibility standards uh so i did go in there and make a few tweaks to the colors on here just while we're in the process of updating this we might as well make it a bit more accessible in that process this back now i realized that i did make a few changes to the color palette later on i had grabbed some of these hex values incorrectly so you will see me jump back into this later on as i adjust some of these colors again with this tint and shade generator i can grab a really really light blue for the backgrounds of some sections i don't know that i ended up using this anywhere on the site other than some svg icons that i put our kind of backgrounds that i put in the background of some sections but in case we ever need to use that in the future at least these colors are hard-coded into the color system and somebody can grab those directly from the palette rather than making their own decisions and coming up with something that doesn't match the rest of the site now thankfully with this site i'm pretty familiar with the way everything was laid out so i didn't have to do a lot of jumping back and forth to figure out the colors since i already kind of knew how that color system was being used within this site here we're going to upload the svg support i uh plugin so i can add their logo as an svg here which i'll be grabbing from off screen i was able to download the entire media library off the old site and i actually started completely from scratch rather than cloning the existing site i just didn't want to worry about any leftovers inside the database from the old elementor install you'll see here i sized up this logo kind of just by eyeball on the desktop but later we're gonna have to go in here and write some media queries because that logo is so wide it didn't work really well inside of the mobile layout and here i do have some of these colors already set up inside my starter theme to connect to certain colors within my palette but i did want to make some tweaks on this one and i think i even go back further and tweak a little bit more later on luckily i have a bit of freedom in this project to do some of these updates without having to do a bunch of approvals and back and forth i could use my better judgment on most of this and now we're going to start writing the css for the button that goes inside the free quote item inside that menu i do have this saved somewhere so i can just copy and paste that starter bit of css in there and then go out and make some changes i do try to add comments to all the css tweaks i add in here just to make sure i know what they are when i come back later on and usually i'll do all of these css tweaks here inside the customizer so i can see them live in real time as i'm developing the site and then once i get the website completely finished and have finalized all the css i will go back and dump it all into my child theme so later on if somebody comes in and gets inside the customizer they're they're not going to easily be able to tweak those things uh accidentally and i imagine if somebody knows to go look in the child theme then they probably know what they're doing and of course we need to create a hover state for this button i think i did have a little bit of trouble here getting the text to go the right color on hover and i might have had to use an important tag i think i went back and fixed that up later but just for the the sake of getting this rapidly developed i don't mind an important tag in there temporarily box shadow is one of those css properties i always have trouble remembering exactly how to ride out but i think i got it right on the first try on this one and now we're going to go up and set some of these global styles inside generate blocks that way i can pull in things like buttons and later you'll see me work on headings and use those global styles so i can make changes globally throughout the site if i ever want to make tweaks to those things later so i've kind of come up with a system of setting up global styles for buttons and for headlines and for sections which i don't think i use too much inside the site maybe just a couple of them but the buttons is definitely one you want to go ahead and set up in the beginning that way anytime you drop a button in you can make sure you're consistent about all the styling and you don't have to make a ton of tweaks i usually end up with three different button types which i've labeled primary secondary and tertiary on this side i don't even think i use the tertiary button and then also some what i probably label as text links although i do use the button element for it you'll see it here those ones at the bottom that have the arrow i do use those um sometimes so that might kind of work in the place of the tertiary link in this design system we'll go ahead and get the home page set up as the home page of the site and get started building on that as the first page you'll see throughout the entire build of this site a lot of things i do kind of at the first pass are just a rough draft of getting everything all the content onto the page and then i'll come back and do refinements later i have tried to get in a good habit of one section of time doing desktop then tablet then mobile just to make sure that everything's responsive as i'm going but you'll see sometimes i forget to do that have to come back and worry about the responsive settings for multiple sections at a time and here you can see me using those global styles for the first time on the buttons which definitely comes in handy and is a huge time saver i realized here that i needed to do some of the hover effects here on the buttons like i did in the button inside the navigation i want to make that transform up just a little bit when you hover over it and also add a shadow to it so i'm going to go through and do all those settings inside the global styles here so it will work across all the buttons as i develop out the site now that button's working perfectly here we'll work on some of the responsive settings which i'll come back and clean up a little bit more later typically i don't like to override any of the typography settings here on an individual element basis however a lot of times for the home hero section i do like to do something different with the h1 so i'm not so worried about that here on this one section but i will go back and make tweaks to the h1 h2s and h3s later on as they pertain to the rest of the site now on the original site which i realize you can't see right now some of these words have a highlight on them where it's just underlining the word with the yellow underline and so i'm going to circumvent the highlight system inside of generate blocks here to create that highlight so we'll just write a little bit of css and tap into that highlight system that's already inside of generate blocks i do i do prefer to use rims for text sizing if i can however i don't always do math really quickly in my head so sometimes i have to flip back and forth between pixels and rims and make sure i'm getting it all right now i do typically keep the customizer open throughout the build that way i can jump in there and make changes to the fonts the colors and all that without having to reload it every time plus i can see all the responsive previews nice inside the customizer i'll admit this layout for their best of awards isn't the best in the world but it gets the job done and at least shows off that they've continually won this award year after year so i do play around with the layout a bit on this uh before i get it finalized but it ends up working all right when i was uploading these pictures i finally remembered to add some alt text to it so i went back here thinking i could add it in the uh in the media library but since i've already placed them on the page i'll have to go do it on that individual page too but at least if i reuse them on the site it will be in there the next time i import it into a page on the elementor site i was able to do this next section using a photo gallery but here with generate blocks uh since i don't have a generate blocks photo gallery block and i would have to rely on the gutenberg one i decided to just do this with four containers in a grid that way it gives me the same layout nobody would really know the difference but i have a little bit more control over the styling than i would if i just use the gutenberg gallery block of course we're gonna have to make some changes to the height here i wish i had done this when i made the first grid inside the container so i wouldn't had to do it four times but i seem to never learn that unfortunately the block editor still has this glitch when you go from mobile back to desktop view it screws up the whole layout at the back end so you have to refresh the page so you'll see me do that quite a few times throughout this build here i was just copying and pasting this uh preheading but what i remembered later was that i have a global style set up for this and i'll go back and set this up as a global style later so i can reuse it throughout the site with consistency this section here is a little three column card layout and what i typically like to do is get one of the cards completely built out just the way i need it and then duplicate it for all the other instances i need so i don't have to go back and make tweaks uh throughout all three of them so here i'll get most of that styling done on the first one before i start duplicating but i do have to go back and make a few tweaks later on this is one of the tough things about these three card layouts is what you do on tablet and mobile when you can't stack three next to each other on tablet or they get a little squished mobile is okay because you can do just one across but it gets a little funky when you get to the tablet view you don't know it but right now the fact that those three columns don't line up perfectly that the last one is a line longer than the others is absolutely driving me crazy and i'll come back and fix that later with a few adjustments to the text at least it will look right on desktop again with the highlight technique so that way i can reuse that style across the site and keep consistency the original design here has an image on the left hand side and i've styled the image to kind of look like a polaroid a lot of our community that this pool company serves is an older generation and we talk a lot about um the pool creating memories for your family so i thought the idea of making this image look like a polaroid image played well with that messaging on the site now when i did it in elementor i had to write a lot of css to get it all working uh and i started to go that route here on the blocks build but what i realized is i had all those controls right here inside the editor so you'll see me get this all fixed up eventually though i do stumble over it a bit the other thing that's nice about this section is i ended up using an aspect ratio for the image which you won't see till later when i think of that so i could keep the aspect ratio of the image the same no matter if it's on desktop tablet or mobile but you can go ahead and laugh and watch me struggle with this now this is the moment i realized that i could do all of this inside of generate block settings so i go ahead and work on that here obviously that height is not going to work well for my polaroid luckily later with the aspect ratio i'm able to fix this problem sometimes what i'll do and it's a trick i picked up from mike oliver is on these tablet sections that i don't quite want to go full with i'll make them 75 width and then center align everything so that way it doesn't doesn't get too wide across the screen but isn't too smushed either obviously in this mobile preview my h2 heading is a little bit too big so i will have to go back and work on some of that typography later and of course inside the customizer it doesn't look exactly the same as it does on the back end of gutenberg which is obviously frustrating but happy compromise and i will go back and check all this on my phone as well i already have these aspect ratios baked into my star my child theme so i'm able to just grab those from here i'm just going to grab the css actually and manipulate it a little bit because the aspect ratio i'm going for on this isn't exactly one that i already have built in but what's nice about this is now i know it can stay consistent across all the different views and that was a much better solution i'm also going to scale this down just a little bit while i'm already here now i could have done this inside to generate blocks of course so i will go back and do that here but just to keep it from being too big inside that container i think bringing it down to about 90 looks a little bit nicer i do have some max width classes set up inside my starter site which comes in handy sometimes uh on this actual section i think i was able to just bring that container within and fix that but you will see me later use that max width and margin auto on some sections so i can bring in the width of text and it not span the rest of the section i struggled a bit what to do with this phone number i definitely want it to look big and bold like a heading but i didn't want it to have the semantic tag of heading and i also struggled a little bit since it was a link some of the default theme styles were overriding the styles i wanted this to have with the underline so i do go back and forth here a few times trying to figure out exactly how to get this working right but eventually we get to that point when the phone number is not linked it's working fine but when it's linked i'm not getting the yellow underlined and it hasn't dawned on me exactly why that is yet but here in a second you'll see me figure it out presto i actually took this picture for the client one day i was just driving by the outside of their building and noticed the american flag out in front of it waving and it actually covered up the tenant next to their building quite nicely so you can't see the other tenants sign very well so i've used this picture throughout the site in a few different places they didn't have much photography of their location uh so this did a good job for them just having something that shows where they are uh they are located on a really busy road so if people have drove by it before they would recognize it just doing some double checking here i noticed the menu is messed up uh and there's a few other little tweaks i'll come back and make but i think this is all the sections for the home page so just cleaning up a little bit of this before we move on to some of the interior pages a lot of times i'll go ahead and have my mobile menu show up on tablet so the desktop menu is only for desktop so i'm just going back here and checking what those widths are by default so i can go ahead and make sure that that breaks a little bit sooner now you can see my logo is a little bit too wide and i needed just a tad bit smaller to fit nicely inside of mobile so i thought i was just going to compromise and leave it small on desktop there but later i'll go back and write a media query so it can be a little bit bigger on desktop but still fit next to the mobile menu on mobile now i tend to use this off canvas setting inside of generatepress which i really like so we'll go ahead and do some tweaks on that while we're here but i don't think a whole lot's gonna need to be done to give them a functional nice menu next we'll go ahead and tackle the footer so in here i'll use the footer element inside of generate press generate blocks and create this footer i do actually have a section that goes above the footer here which is kind of a testimonial type section that i want to display on every page of the website so i'm going to go ahead and just put that inside the footer and i'll mark it as a section and then the actual footer as a footer tag here in a minute when i go back and do that but i do since this section is going to show up on every page of the site i might as well just drop it into the footer and make it all one piece which makes that nice and easy i'm realizing now that the color blue i chose when i was switching it out was for a white background but i don't think it's going to work very well on this dark background so i did go with yellow here but i believe i changed this up later to match the light blue that i have on the existing website and now we'll get to the actual footer portion of this which i'll need to set up this footer is really really simple it doesn't even have a menu just a call to action and some contact information so this one doesn't take long to set up foreign i don't know about you but footers are one of my least favorite things to build out i don't know why i have such a mental block on them but they're never something i'm extremely excited to build look i did get another use out of that light blue color i'm glad i added it to the global styles so i didn't have to go hunt it down again you'll see i often use the headline block instead of the paragraph block just because i have so much more control with the generate blocks blocks than i do with the default gutenberg one so you'll see a lot of times even though i'm just typing in a paragraph i will use the generate blocks headline block and then change the tag to paragraph which just gives me more control over the styling of course the image block inside of gutenberg has a lot to be desired too so i decided to just give it a class and then i'll go in here and write some quick css to make sure that the max width is no more than 100 of the container that it's in it's a simple fix you and here's where i'm going to go ahead and write that media query to get the logo size just the way i want on desktop and mobile just double checking here which selectors i need to grab though i've gotten a lot more comfortable with css i still have to double check myself quite regularly and make sure i'm not making a foul of things that looks a whole lot better it was definitely worth going in and writing that little bit of css just to fix that for good especially for elements like this that are going to appear on every page of the website i try to start out with a good system for typography but a lot of times i find that i just need to go back and make tweaks kind of by eye just to see exactly what i need now we're going to start working on the interior page heroes and what i'm going to do here is set up some custom fields because inside of the hero section of all the pages i want a separate headline i want a separate sub headline and then i need a call to action button that might vary from page to page and instead of just creating a section on each one of the pages and putting in the content statically i like to do the design as dynamic as possible this means that later on i can go back and make changes to the page hero that will apply to the entire website instead of one page at a time and having to go back and make changes on each one of those instances so here i'm just setting up a custom a few custom fields for the page hero and then we're going to create a um a generatepress element for the page hero which you'll see in a second i'm just going ahead and filling in this text that i'll need for the about page custom fields so when we go create that element i have everything already there and in place so here we'll go into this page hero block and that's when we'll start doing our styling to create these page heroes so for the headline we'll use the post meta and we'll grab this custom field that we made and drop that in there unfortunately you don't get a preview on the back end so you have to trust that you're doing these things right and then go double check yourself on the front end so there's our secondary text and then we'll also need a background which i'm going to drop a default kind of fallback image in there and this is actually going to be the image that shows on most of the pages however i do set this up dynamically so you can use the featured image in here which i do on a couple of the pages that i don't want the same background on but at least by default it will have this pool image which is used throughout the site i do want to contain this bit of information so on mobile and tablet it doesn't spill across the entire page on mobile it will but on tablet it won't so i am containing this inside of a grid and inside of a container just so if the title is really long it doesn't span the entire width of that hero section now what's nice about these dynamic buttons is i can have a different field for the text of the button and the url i think i ended up using the same call to action on most of these pages in the same url but if you needed to change those on a page-by-page basis you do have that ability to do that with the custom fields and what's extra nice is i wanted to use the same page hero on the contact us page the get a free quote page but i didn't want to have the button on there and if you leave those fields blank generate blocks will just not show that element so that way i don't have to worry about and going in there and trying to hide it if i didn't actually have custom fields in there all that just happens by default so now you can see that page hero is showing up on all the pages it just doesn't have any of the custom fields filled out yet so i'm going to go ahead and start adding all that information into the custom fields for all the pages so i'll have all the hero sections done before i go in and start creating all the page content this is a simple copy and paste job from the existing website which i have opened up inside another browser window so now you can see the custom fields are working i had left the featured image to be shown inside of my default page layout so i'll have to go back and change that here in a second but all those fields are working and the background image is pulling the featured image when you set a different featured image for the page see on this one i left the button blank so the button doesn't even show up on the page which is exactly what i wanted no use calling them to the page that they're already on now here we'll make sure that it's not going to display the featured image in the actual page so when we refresh that you'll see it goes away now the elements inside generatepress are really really powerful but it does take a while to wrap your brain around them so now we'll go ahead and start building out the page content for this about us page i am going to do each page separately here but i do have some reusable sections as well as some sections that i can kind of copy and paste from one to the other here we're going to use that max width utility class i have set up as well as the margin auto which my brain was not working when i was trying to figure out why this wasn't centering but if i throw that margin auto class on there that i have set up inside my starter theme it will go ahead and center that in the container those things don't come with generate press or generate blocks but they're things that i use so often that i've just gone ahead and put that css into my child theme so i can call on it whenever i need it glad i went ahead and put in all that alt text there because now it's already coming in this is when i realized i could have used this preheader global style so i went ahead and copied and pasted that style in there now it's saved to this global style and i can use it throughout the site with consistency like i should have been doing on the home page so now instead of copying and pasting styles i can just use this global style and i'm good to go again we'll use the max width and the margin auto here it doesn't work on the default generate or excuse me on the default gutenberg block but when i change this over to the generate blocks headline block it does work i think it would work on the front end either way but it doesn't work inside the editor and i like to have it there and see it if i can here we're just going to set up these cards i did have some icons that i was using from font awesome on the original site but since font awesome is such a huge library i didn't want to bring that in on the new site just to improve performance so i'll show you a place where i get some of these svg icons that are really easy to just copy and paste the code straight into generate blocks and have your icons in there the set is a little bit more limited they're bootstrap icons but i was able to find some that match close enough for this design i wasn't too worried about it i could always go back and make some custom icons for this but the budget really wasn't there for something like that on this kind of project go ahead and grab these bootstrap icons now which what's nice about this is you can just copy and paste the code directly from the site which you'll see me do here in just a second and then paste it right into generate blocks as the icon inside the heading widget which after a quick refresh will be able to do paste that code right in you get the icon place it above and then set the color and you're good to go now i can copy and paste this style i could have set up a global style for this but i think i only have these sections in a couple parts of the website so it didn't seem worth the extra effort on this now finding the exact icon i want was a little bit more of a struggle since this library is more limited but like i said i was able to find ones that i think work good enough just to convey the idea of whatever the headline is and if i ever have a little bit of extra time on my hands i can go back and rebuild some custom icons for these sections now i just realized i put this custom class on this card on the home page and then i forgot to add the effect i was meaning to so the bottom of these images just have a little yellow underline and i'm going to use an after pseudo element just to create this little yellow border on the bottom of these images it had just dawned on me so i apologize for jumping back and forth into different parts of the site but i knew if i didn't do it right that minute that i wouldn't remember to do it at all so sometimes you just got to jump over and get those things done there we go now they're finished and they look like they did on the existing website two more sections to go on this about page one is a little bit of a section about meet the owner i was hoping to have a picture of the owner but unfortunately he was never able to supply me with one so we just had to do a little bit of a different layout but it works okay for this situation keyboard shortcuts come in handy too i use ctrl shift d to duplicate things and alt shift z to delete them so if you see things duplicating on the screen or suddenly disappearing it's just because i'm using keyboard shortcuts to do that getting in the habit of that definitely saves a lot of time from trying to find exactly where the the duplicate button is or the delete button so since i wanted to have an image in this section and didn't end up having one just a little bit of a background image here helps give this a little bit more visual interest since there's no photograph which you might be expecting in this section again i'm going to go with 75 percent width just so that text isn't too wide on tablet here i went ahead and used one of the global styles i had set up for my section widths i was kind of racking my brain on exactly how i wanted to contain this section but i had some defaults already set up so i just went ahead and went with that now there's this call to action section on the home page and it's going to be reused throughout the site so i ended up just making this a reusable block so that way i can just pull it into the pages on an as needed basis and if i ever make changes to it in the future it will update dynamically across the site so it's one thing that's handy about when you're rebuilding sites like this is if you see sections that you're reusing throughout the site taking advantage of the reusable blocks or global styles is definitely something that will save you a lot of hassle in the future when you have to go back and make changes to those sections now here i got kind of frustrated with the spacing of this section it didn't look quite right and i wanted that blue background little pool looking thing to overlap the other sections so i had to go back and forth here for a little bit and mess with the margins and padding between these sections to get it to work exactly the way i wanted to you're just seeing me scroll through here agonizing a little bit over i know this doesn't look right but should i spend more time on it so you'll see here i do make quite a few adjustments to this to make that blue background kind of overlap the section above it which i think was worth it in the end because it helps that page flow a lot better still not my favorite section in the world but it does the job with all those tweaks done on the about page we can go ahead and move to the next page which is going to be the custom pools page i went ahead and left the about us page open because i knew i'd be able to copy and paste some sections to give me a head start on some of the layout same thing with the home page i'm going to go ahead and crack that open in case there's anything i need to grab out of there this first section is pretty similar to what i have on the home page so by copying and pasting it at least i get a head start on making sure i have the structure right and all the responsive settings i just realized that image was a stock image we had pulled from somewhere so i wanted to use one of their actual images instead of something overlooking a big city knowing that uh here in flat rural texas we don't have any scenes that quite look like that so no use on using the stock photo when i have hundreds of actual customer supplied photos on this one again we'll go ahead and copy and paste a section here that way we already have some of that structure set up and ready to go now it's just a matter of copy and pasting some content and we'll have to go find some icons again which is always a fun challenge so let's see how good my googling skills are now the next section of this page is a huge photo gallery that the client has sent me i think there's something like 40 something pictures in it so i will just use the default gutenberg photo gallery in here which isn't my favorite but i do have a little plugin which you'll see me install in a minute that allows you to open up those gallery images in a light box which definitely helps out with the functionality and you might see this video pause here in a second i realized some of these photos were duplicates and the editor froze trying to upload all these at once so i had to pause the video and go back and re-upload these without the duplicates in there so my apologies for that but i didn't figure you wanted to sit and watch me fix all of my mistakes though i did leave quite a few warts inside of this so hopefully you're getting a good chocolate all the mistakes i've made and you haven't damaged your screen throwing things at it yet and here we go with that reusable block section at the bottom i was able to just quickly throw that in there and be good to go those images froze up loading and this is when i'm realizing it and i'll pause the video here in a second and get all that squared away for you i noticed that you couldn't tell much of a difference between the big headlines the h1s and the h2s so i did go in here and do even some more tweaking on the typography okay through the magic of editing the gallery is fixed now and what i realized was none of these images had alt text now i should probably write some much better alt text for all these in fact i know i should but there's really not a budget in here to do a ton of accessibility work i didn't want them to be blank so i did just copy and paste the same alt text for all of them so all of you accessibility people just please forgive me on this one i had to make a compromise on something like this hopefully there will be budget in this project later to go back and give this some better alt text i probably could go back and do a little bit more uh work on how i want those images those image gallery to work responsive but that can be for another day i'm going here i have this blog post with all the plugins i've used for blocks and there's this one for lightbox for gallery and image block so i'm gonna go ahead and install that plug-in on this website so at least with the image gallery if people wanna see a bigger view of it uh it will pop open in a light box there's not a whole lot of customization options to it but it definitely does the trick i couldn't remember exactly but you do have to set the media uh the images to link to the media file in order to get it to work but luckily you can just set that here on the gallery and then it should work perfectly from there on it's simple but it does trick now the screen rooms page is going to be very similar to the custom pools page we just have to switch out some content so this should be a pretty quick page to get through which is nice about kind of planning out doing all these pages in order because you know what you're going to repeat uh and then that way you can make use of your time as best as possible to not have to go back and redo things multiple times i forgot i had this background image on the original site just to give the background a little bit of texture so i did play with that a little bit to get that in there before i copy and paste this section over to the screen enclosures page it is nice to copy and paste these things but you definitely want to have it right before you do it so you don't have to go back and fix your mistakes twice okay again we're just going to copy and paste the alt text on these just so they're not blank this page is pretty much done after just a couple little sections so now we have this contact page it also is the same page as the get a free estimate or free quote page that's linked to as the call to action throughout most of the website here on the left we'll put in all their contact information and on the right we're going to have to build out a form on the original site i was using an elementor form so we'll have to go in here and build out a fluent forms form which is the form builder i use on all my generate blocks websites so on their original site they have a google maps embed but just for performance reasons i decided against embedding the google map and just took a screenshot of that part of the map and i'm just going to embed that as an image and link it to their google my business listing so if people click on the map to try to interact with it at least it will take them over to where they can interact with that map i guess it's not quite as good from a user experience perspective but it does save a ton on performance so i decided to just go ahead and go that route on this one i want to call a little bit of attention to this form so i'm putting it inside one of the containers that matches how we did some of the other little card containers on other parts of the website now we'll have to go in here and create this form it's a pretty simple little form uh i will pause and start the video a couple times in here just because i didn't want to put all my clients contact information here in this video so if you see things jump from one part to another here that's why another thing i like about my setup with fluent forms and generate blocks and generate press is i have all the default styling for the forms all the css already in my child theme so these come out looking pretty good straight off the bat this is actually something that mike oliver posted about on his youtube channel he's done lots of content on generate press and generate blocks so if you haven't checked that out definitely do that but he posted a bunch of his css that he uses for forms so i took that and adapted it for my own so i still have to do you'll see i have to go in there and customize a little bit to match exactly what this customer's branding but for the most part the form comes out in pretty good shape just as it is so as you can see we already got pretty decent styling on the form but i will go in there and make some changes the button has some of the wrong colors and that background color on the form fields is a little too strong in my opinion for this so we're going to make some changes to that css inside my child theme style sheet right now remembering all these css variables for your colors inside of generate blocks is very handy or inside of generate press excuse me that's one thing is setting up that default color palette that i use on every site all of those have the same variable name so i'm able to kind of memorize what some of those codes are and easily be able to put them in without having to look them up not all the time but a lot of times and it helps just because i have a set of default colors that i'm using on every site here's where we'll set up the notification my customer will get when somebody submits the form this is where i'm going to drop out some of this information here in a second just so it's not all made completely publicly available and sometimes the cash on here holds things up so a couple refreshes gets that page back in order and it's looking pretty good while we were off screen i did test the form as well to make sure that the submissions were coming through fine everything seems to be working in good order so at this point i'm just doing a kind of final walk through on all the mobile responsive designs in here just to make sure i didn't miss anything here you can see there's a little bit too much space in between these sections so i'll go in here and do a few extra little tweaks on things i might have missed when i was just first starting these pages that you know might have been cleaned up later in my design process so we'll go through all the pages one by one desktop tablet and mobile and make a few of these tweaks just to make sure everything is nice and uh consistent across the site so the next few minutes would just be me doing that going through all these pages and looking for inconsistencies or ways i can improve the design before we get into our pre-launch phase here i'm noticing that that hero section is the text is spanning all the way across and where it's going over the top of that picture it's really hard to read so i'm gonna go in here and make some tweaks to that hero section to make sure on tablet that it doesn't quite stretch all the way across that helped but we still have a little bit of the image is not perfectly faded in the background so i'm going to add just a slight gradient overlay to this hero section just so we can better control how that top part fades out and you'll see here it looks quite a bit better it's a whole lot easier to read now and i'm just double checking some of the other pages to make sure those background images look good as well those don't look good stacked next to each other so i forgot to check the mobile settings on this one when i was doing uh the development of this page here we'll do that same trick making it 75 the width which looks pretty nice on tablet and go back and double check it inside here in the customizer preview need some space in between those columns maybe but otherwise this is looking pretty good one thing i forgot is this customer has one blog post that was posted many many years ago so i am gonna have to go ahead and import this blog post in as well as create the single post template for the blog so just pasting this blog information in here is pretty simple you might have noticed i put that under the category general i go ahead and in my starter site i change the uncategorized category to general inside of my starter site so i never have any posts that default to uncategorized at least general sounds a little bit better so this is when we're doing the single blog post template so this is going to be a pretty simple little thing it's going to look very similar to the other pages on the site i'm going to do a slightly different call to action section in the sidebar here just to get them to try to request a quote but other than that this is pretty much all default information like we did on the rest of the site i close that a little bit too soon because i didn't even check the responsive settings so i'll have to go back in there and work on that a little bit more again i'm going to put that headline just inside of a little bit of a container so it doesn't get too wide i could do that with css too but the container is something i'm just used to doing that works pretty well full width i'll add a little texture behind that call to action section just to make it match the rest of the site since we've used this image in so many places hey all right it looks like the blog post template is just about done here so we're getting really close to getting this website ready to launch so one thing we need to go in here and do is add a button to that blog post since they don't have a blog feed anywhere on this website there was a button here just on the home page under this section that linked people over to that blog post so that's something i left out of the initial design because i didn't have that blog post ready but i need to remember to go back and get this inside here so all right at this point we're just going to copy and paste all the title tags and meta descriptions from their existing website i had that open in another screen so i could just quickly copy and paste those i did have their four years running for winning their award that i needed to change to five on a few of these but for the most part it was just a copy and paste job from the old site to the new site and i didn't run this through the setup wizard through seopress not doing anything fancy as far as the seo here they already rank number one for just about all the things they would want to be found for here locally so as long as we got the basic information in there everything should be fine on the site double check all the perf matter settings to make sure that everything is optimized the way it needs to be i have a lot of those set up by default already but always good to just double check those before we go in and publish this site and start running all of our performance tests as part of the pre-launch so i'll go ahead now and get some kind of benchmark score using web.dev which i like to see about the performance the seo the best practices and accessibility just to see if there's things i missed during the process which there's almost always things i miss during the process of building it especially when i'm doing it quick and fast like this so there's some issues on my server not responding quickly but i did have this on a development server so i'm not too concerned with that but i think those things will work themselves out once i clear the cache on here and get everything set up correctly for this application now that i disabled that varnish caching i'm going to go ahead and run this again and see if that doesn't fix the performance numbers and it looks like it did we're only getting dinged for the site being set to no index which is default on this development url through cloudways so that will be fixed once we get this website published on its domain so at this point what we really need to do is start working on our pre-launch sequence so i'm gonna go through a number of things on here just to make sure that everything's done with the website uh and running like it's supposed to here's i'm adding the favicon for the site which i had forgotten to do but i am going to run through a checklist here in a second which would remind me of all these things these are just a few that are popping up in my head as i'm looking at the site so for my pre-launch checklist i installed docket wp which is a plugin i created with my buddy andre and inside of this plugin you can get access to some pre-made checklists so one of them that i use all the time is this launch checklist i'm gonna go ahead and check off all these things i know i already did so i'll usually make a quick pass at this i've used this checklist so many times i'm so used to doing it that a lot of times i'm doing these things as we're building the site so once we get to actually opening this checklist i don't have too many items left you can see that 16 of them already marked as completed so we'll set a default open graph image i think just an image of a swimming pool would do fine if this gets shared on facebook people will know what it is pretty quickly if there's a picture of a pretty pool so i'm just going to go through here and try to find a good looking picture of a pool for them to use for the social share image double check and see what they're using on their live site now maybe i want to just use the same one i was just using a pool image so i'll do the same on the new site all right we'll check and make sure the robots txt file is there double check and make sure we have our site map set up correctly and we do some of these things we won't be able to do until after the launch and some of these things i don't even need on the site for instance the client doesn't have a privacy policy on this website they've been offered one but they did not do it i'm not going to use google analytics i'm going to use fathom analytics but i'll do that after the launch again disabling search engines is something for after the launch so i'm just making some quick notes here to myself to make sure that i do these things once the website launch is complete i'm pretty sure web.dev would have flagged me if the site wasn't mobile friendly but it never hurts to try it again just to make sure that all these tests come back passing and as i mentioned i already test the form submissions off-camera just to make sure that those were coming through fine so at this point i'm going to log back into my server here and get this website launched so i need to i took off the existing website off of their server and now i'm going to add this development site as the primary domain for their website so here in just a second that will be live we'll refresh this here and there's the brand new built with blocks website ready to go just double check and make sure everything changed the urls like it was supposed to looks like everything was replaced perfectly should be good to go we'll turn those varnish caching settings back on this application now so i can take advantage of the server side caching this is a program called website auditor which i use to do a lot of like on-page auditing so i'm going to run the site through this and it's going to catch if i have any broken links or anything like that and i did actually end up putting a url in here incorrectly that i had to go back and fix i can't remember if i fixed that on camera off camera uh but this test did help me realize that there were a few urls i think it was contact hyphen us it used to just be contact instead of the hyphen with us so there was a few of those little things that uh came up inside of these tests that i was able to go back and fix as soon as i got the website launched so it was within five or ten minutes of the website being live i was able to fix these errors and it was it was those custom fields i had put in there i had hard coded in contact but the url is actually contact hyphen us so i'm going to open up all those and double check that they're right in all of them we'll go ahead and hit rebuild project and this will run the audit on the website again make sure that these errors went away it looks like the only thing i have is a two big page which has to do with that uh swimming pool gallery which obviously has tons of pictures on it i'm not going to really overly concern myself with that at this point but we will go ahead and install breeze for caching just integrates so well with my cloudways server and connects into my varnish immediately so i just use that on most cases even though i'm not doing a whole lot with the breeze plug-in it is nice to be able to clear things out locally now that the website's live i'll go ahead and run a test on web.dev again and see if we come up with any errors this time and we're getting almost hundreds across the board uh most time i would freak out about that 99 and try to get it to 102 but i think we're doing pretty good on this site to get those scores so another quick little once over and we will wrap this up hopefully you learned something watching this today and i definitely want to do more of these i have a lot of sites i need to rebuild that we're done with elementor that i want to get done with blocks so if you enjoyed this definitely give a like to this video leave a comment down in the bottom if you will i i will do my best to reply to all those answer any questions you have if you are trying to get more familiar with generate blocks mike oliver has a fantastic course and that's how i learned how to do most of this myself but i definitely think you can make some websites a lot easier as you can see in this we built this site in about three hours total running time this video is sped up two times speed but in about three hours i was able to complete this entire website and we're getting excellent performance scores so i just really am enjoying building out these sites with generate blocks that makes things so easy uh to get exactly what you need out of a website last thing i'm going to do here is install fathom analytics which is what i've switched to here recently really love their dashboard how easy it is to set up being able to share the analytics with clients and it's super privacy friendly too so it's a real easy setup to just paste in these codes don't worry i switch the codes later so those aren't the live ones anymore but we'll um go ahead and clear that cache make sure that this is working properly i'm loading it up on another screen here in a second to make sure it's all working and once we're done with that we'll be just about wrapped up with the site i do use blog vault for managing all my websites this was this site was already connected into blog vault but obviously when i took the old site offline it disconnected the plug-in so i do have to go in here and reconnect this i'm going to do that by just downloading the plugin they have an automatic installer but sometimes it can be kind of finicky when you're replacing an old site so i'll just download the plugin here and install it into my website make sure that that's syncing again that way i can get all the security benefits of blog vault as well as be able to manage all the plugins from my blog vault dashboard might as well run a page speed insights test on here if i can copy the right url uh go ahead and run that and then we'll wrap this up let's see what google has to say about this we can go ahead and run a gt metrics test as well so we can look at the total request and all that i'm getting a 98 on mobile and 100 on desktop which is fantastic and we'll double check here what gt metrics has to say i like using it for the waterfall and the total requests so here you can see we're getting everything loaded in under a second we have 37 total page requests this website is doing pretty well from a performance standard all right guys this will wrap it up i hope you enjoyed this rebuild and i look forward to seeing you on the next one

Channel: The Admin Bar

Views: 19,604

Keywords: WordPress, Gutenberg, Blocks, GeneratePress, GenerateBlocks, Block-Based Website, Convert from Elementor, Website Performance, Full Website Build

Id: tSX74ExgFDQ

Length: 93min 48sec (5628 seconds)

Published: Thu Apr 07 2022