Switching from the Genesis Framework to Beaver Builder Theme – Live Changes

thank you so much for watching the press Avenue YouTube channel my name is John and today we're talking about how to switch from an old Genesis theme to the beaver builder theme with the beaver builder plug-in so here's our YouTube channel here and here is me go ahead and click that red subscribe button if you want to see more WordPress tutorials like this also we'd love it if you'd share this content out if it was helpful for you give it a thumbs up or provide feedback below on our videos so we can help you better we can answer any of your questions and we'd love to hear if this worked for anyone thanks for watching alright so here we are on YouTube we're gonna skip over we have a website pres Avenue com you can see the latest tutorials here and search for them a little better what we're doing today is switching from a Genesis theme to essentially beaver builder just to update a theme and show you how we do it so here is a Realtors website in Colorado they are using an older Genesis theme I will go ahead and login and show you what it is I do think Genesis is fantastic I do use it quite a bit for the needs of this client's beaver builder theme will be a lot better so hold on what we login alright so here we are on the back end just gonna show you let's go go to themes so right now it's using the education theme it should look like this on the left and all we have done is installed the child theme as you can see here with a new logo and then you can see Genesis this education themes the child and then Genesis over here is the parent same with beaver builder we have the beaver builder child theme and then this one I believe is beaver builder yeah so we've already named it pres Avenue and we put their logo over here and that's actually in another video back which I'll put a link in the description so that's how we've done there's other stuff in here that we'll go through and change so Genesis is active one thing to note with Genesis is if you're switching between them there may be plugins that our Genesis dependent so if we look here these are typical but Genesis news extended Genesis featured widget see if there's anything else and that's it so these two are dependent on Genesis actually being there so I'm going to go ahead and deactivate I will say go ahead and back anything up before doing any of this and also it's ideal to do it on a staging server so what that means is you switch it to staging and you do all the things there that you need to do and you switch it back we're actually doing it live which is called either cowboy coding or just not doing it well but we're still going to do it live just because it's alright to do so on this site on bigger sites maybe not so Genesis e-news extended is now off and this is now off so that does break some functionality on the site itself so the widget thing disappears etc so when you do it live keep in mind that things may be pulled apart and break as you're doing it live because you're not using a staging server so I look here this is the front of the website still looks the same there used to be a slideshow here and that no longer works so it's a big reason for the change next to go to appearance and I'm gonna switch to the beaver builder child theme actually getting ahead of myself I'm going to install beaver builder and then switch so it's not installed going to add new to get beaver builder you go to WP beaver builder calm and it is a premium plug-in but it is well worth its price so the agency plug in I also have a video on that if it's worth it or not if you do a lot of agency work I actually think the beaver builder pro plugin is just fine right labeling the name out isn't a big enough deal alright so we look here says a plug-in folder already exists so I go back and check and it is not there so give me one moment and so this is actually good you can see that not everything works live out of the gate so what I've done that I've left you out of is I went into my control panel which is on WP engine and then I created an FTP user and a password then I used a program I use on Mac called forklift and which is an FTP client there's also FileZilla cyberduck those work PC and Mac anyway you put in your FTP credentials username and password and you log in there's a few things that I want you guys to see over here on the left so that's why it's cut off on the left well what it is is right here in this box is I've logged into the WordPress site via SFTP which is secure FTP and this is WordPress so I'm going to go to WP content I'm gonna click plugins and you see here the beaver builder plug-in already exists and that's why it's giving me that error for whatever reason that's not showing up so I'm going to go ahead and delete it and you can see the other plugins in here so there's a plug-in slide deck used to be really great three years ago it's definitely become very lacking and not work so that's part of the reason we're kind of changing things over and updating it more than just the slideshow so go ahead hit delete and I look here and it says preparing to delete and it's going a little slow so we'll give it a moment to finish right so now we have the beaver builder plug-in installed you can see right here it says page builder all the agency does is change this title not a big deal I actually think if it says beaver builder it's just fine because there's a hundred other plugins in here as well but that's the white labeling feature that we have another video on so here's the builder itself under appearance we'll go to themes struggling tonight and we're going to beaver builder theme so if I go to activate it just activates it if I go to live preview that's essentially clicking customize I'm so I'll click live preview and things definitely do break when you go between themes just because it's set up differently so here's the site here and then in another tab I have here's what the site used to look like if I make it bigger I'm kind of jumping ahead but what I do is I leave the old site open in a tab and I just don't refresh it so I can see this is what they had in the menu these are the big buttons that they had this is the call to action that they had if I want to carry that through to the new setup so I just leave it because people say I mean I love those buttons that were there and now they're gone like oh yeah the buttons were there you can see here he has kind of a different title and address well we'll change that and fix this up so it's a lot cleaner so here we go through the beaver builder child theme presets I usually ignore there's a function where you can just completely turn this off which I will add later general layout I leave except that I go to the framework and I do full bootstrap for and I do fun awesome five so I like the newest and the best of the best so there we go changes a couple things let's see background color no accent color the new logo is I believe it's red yep so I have this little tool here called sip so click this I know it's on another screen bear with me and it is Rudy red so I go here I paste it in and hover color and I go here so black in red is the new kind of theme so I give a minute to load and you'll see here it changes all that stuff I'll go back headings I'll make the main h1 heading red which we might change later we probably will change later it's a lot of read the text the default text for beaver builder is 80 80 80 I always change it to threes just because I think it's easier to read there's more contrast for older eyes let's see do not update it doesn't seem like it's dark enough the rest I leave buttons now I leave the buttons social media so let me go back to his other site and see if there's any social media there is so there's a Facebook so I'll just paste that in there get rid of this there's a Twitter Google+ is gone but Google my business so it's not googling my business it's Google my business I would definitely have if you want to get local traffic and clients to your site it is absolutely fantastic so I'm copying links from another window or another monitor I should say copy/paste alright so they don't really have the rest but again you can add anything else in here that you want I'll go back and again this is a realtor website so that a header you see will probably chop up this menu and do a top bar so do a to column top bar will do text on one side and a menu on the other so there's the top bar there and it says choose a menu which we haven't created yet a phone number let's see should be on here we'll see there's a phone number right there so I got a top bar put in a phone number if you want it to be clickable you do a ref equals do that then I always finish it off because I forget inside the quotes here we do tale for telephone then the full number with the country code 2 1 3 0 8 9 3 now this link if it's clicked on a phone which a lot of this stuff is it fills it in the phone box and they can call him so I think that's great all right so you go back to the style we're gonna make the background color I believe it's jet black could it be wrong it's just double check sorry will do less than that other window once we get this kind of details out yeah so it's all zeros which is just black six so the background color is black but now we won't be able to read the text so further down we'll do the text in white which is just for F's I mean six excuse me and then the link color I also do in full white and then the hover I usually leave it on white in the top bar if so you can't see a hover but you can see a line so that's kind of for me a header layout we're going to do navigation on the bottom because there's this absolute ton of navigation and we are going to break this up a little bit so haven't decided how we can definitely take out home and then here it gives you some options so once you move the navigation to the bottom and freeze up kind of a widget area here which they don't actually call it that somebody's gonna sip here so you can put a phone number it automatically pulls in your social links which I might leave actually Mabel do the phone number up there so you can see there it is again um typically that's not working I want to say I really just go back and copy it from somewhere else I have already written it out once and I like things to be as easy as possible so it's one guy so will you do his name alright so there's that I can go back think hold on a minute yes this is new so as a beaver builder a couple of days ago so right now it's April 2019 if you go to general and then social links you used to only be able to choose branded which is the branded colors of each social network so give it a second here so there's branded which i think looks really good monochrome which is just the I thought it was the accent color doesn't appear to be it's something else or custom and custom is brand new of beaver builder it's a new feature so here we are under custom we can choose the shape round or square the background color the icon color so I'm gonna make the background color white I can make the icon color the red that we pulled so I like that color palette thing I'll put a link in the description the hover color I'll switch it to red but then I'll drag down and make it a little darker just so you can see a kind of difference when you hover over it again it doesn't seem to be updating so it could be anything there's weird there's weird stuff on this site as far as plugins alright so next we are going to change the header so the layout is on the bottom we've done that the style background color was going to remain white it's kind of a black and white and a red logo let make it easier to read the text color I guess we'll leave it at black the link color and then the hover will just black it all out the logo so we're gonna do an image it's going to get rid of all this text um wow this is huge let's see so I'm going to pause and just Photoshop this to be correct alright so I paused I I said I photoshopped it actually use affinity photo um it's for Windows and Mac and what I did is you can see here it's grey basically removed all the white except for in the windows I left the windows just how it is so the logo they sent they don't have the the transparent version so I just removed the background pretty easy the title is already set always set the alt text don't be lazy set the alt text so there's the regular I might actually make that's huge so I'll set this as the retina it is 501 by 500 edges just under 5 by 5 and I'm going to basically shrink this down to half the size in Photoshop in just a second so the reason I do it in here over beaver builder forcing it is beaver builder is not the best at crushing images so there it is there okay so this is super zoomed in on a 4k monitor that's why it looks a little fuzzy so if i zoom out tech so that's a hundred percent so I'm gonna resize we will say we'll do two hundred I wish I was at one ninety nine point six so then it zooms it back in which is annoying so we are at that's a hundred right there just fine I wish we can crop it a little bit let's do that crop you bring this in just one it's gonna be hard all right file probably didn't quite do exactly what I want I want to move on so the height still 197 which might be a little big anything with text I would save it as a ping and it's 44 kilobytes which is fantastic so let's see like see the other ones technically 2x so I'll just say this one's small so I go back go to select an image go to my downloads there we go let it upload copy the title choose all right now it's still pretty big but it is a very tall logo so I'm actually gonna leave it for now no I don't think I can leave that it's too big so go back export let's say 100 export so now I'll just name it 100 which I should have done before px go back change at least I'll have a couple versions to get in let it load copy copy copy choose all right so that's way better and you can still technically read it um so the retina pulls in which is huge for retina display screens the screen I'm zoomed 200% on the site because it is a 4k monitor otherwise you wouldn't bill to read anything um fade in logo if you drop the site down you scroll down you can have it fade in or out you can have it fixed you can change the logo for mobile and you do a bunch of stuff navigation layouts let's see so we don't want the search icon we don't for a real estate site you do unless you're producing a ton of content um you don't want the search icon because people assume you're searching houses when in fact you're searching blog posts so let's go clean up the menu that'll really help navigation style and it will change this to white hover so the navigation I do do change it so when you hover over it's a slightly different color I should be able to do that red I'll see how that looks I need to change the background it's black belts we'll put a black belt on it alright and we'll go to menu this is just kind of how we go through and change things the main menu get rid of this I will say I'll just say blog property surge color on the corner in contact so if I gotta clean this up yeah that's also news all right so these are all categories property search about blog contact so you put contact in the top so create a new menu and I'll name it exactly what it is top bar menu or top header menu and beaver builder names at top bar so I just name it top bar because there it is so I go next and I'll say add items and we will add contact about she'll mean this Jeremy's content maybe do that just little personal flavor in there all right so this reduces the main menu down because contact is now on the top and then the blog part is on the top actually we can put it also under News if you see her I put it under news which I don't actually see but there's no drop down and we will add that in so you see that there all right so that's good we'll go back to the header I'll go to nav style and then it says submenu indicator will turn that on give it a second we're in a second you see here these arrows show that looks really nice in the black in the red and then up here we'll need to style this a little differently so go back style link hover I still have that red it's now in a hover it matches just like it does here so you see that alright looks good and then what else we got so it's just a basic blog layout just like it was on the previous site a lot cleaner logo well see if I can clean this up a little more let's see logo it's not there padding so I'll take some of this padding out clean this up okay so there's some padding so now we're gonna do a homepage so we're gonna activating publish so again this is all live so everyone just sees it live immediately but again it's the same as the site was before just style differently um so go back close so we're closing out of the customizer which is also the live preview I've changed the kind of wording of that so it's publishing this live and we're closing out there we go so the beaver builder child theme is live and the genesis theme is no longer life jetpack I don't recommend anymore I recommend turning it off it's bloated they're gonna put ads in it I just get rid of this while you can there are plenty of plugins to replace what's in here if you have any questions about what you can add go ahead and ask additionally we have a group on Facebook facebook.com slash group slash press Avenue and you can see here you can go ahead and come in here and ask us a question at any time and we'll answer it with either a video or just letting you know or a link or whatever you need so go ahead and ask to join and we'd love to help all right where were we alright so we're going to go to pages see if there's a home page there is not so we'll go to add new we're gonna title this just home our home page whatever you want this one has the classic editor installed so you see the classic editor here of course in Gutenberg you can do the same thing so go to page builder which is actually beaver builder and then here we are we're gonna add a slide show at the top I actually recommend a hero image but on this particular one we're doing a slide show based on wants and needs so this is an I stock photo so we go add update so we get more gallery images for this actually maybe I will do a hero image so we'll drag in two columns we'll make the background so I'll do full width I know I'm going fast I want to get this done because it is live and then background color whoops background photo that will select that same photo where are we right here let's select and then it's kind of fuzzy but we'll fix that repeat none I always do Center and if the your photo doesn't look right you can change the position you can see how it looks by clicking here on the phone etc phone tablet computer this image is huge but it's still this is super a super wide monitor so technically most people wouldn't have a problem viewing this um but I always do the scale usually as fill most people's monitors are shrunk down like this background type I'm actually going to do an overlay will try the new red and see what it looks like I'm a copy there's the red they're not sure I like it but I am gonna add it to the palette and the presets and then black is just should already be in there nope so they're the presets here one two three four six zeroes is black so there's their color scheme there I wouldn't do it quite like this I would fade it down so I'll take some transparency in here so we can read the text so we're gonna put over it so I'm gonna check out the old site it really wasn't a call to action on the old site but we will add one okay so next there were three buttons where are my buttons I asked search about articles and contact these were done with images we are going to use icons so I'll put them right here so for a row of four go to modules icon our first one was search so I'm gonna go to I don't know if there's real-estate ones no there sign sign over here we go looks like a real estate sign got a style I'll Center it I'm gonna make a humongous I'll do even numbers 90 I will make it red I'll make the hover black background I'll leave no gradient text spacing I'll leave the rest I should do text directly under it then I need a link semi link sorry I'm looking at my other monitor again copy link address there we go I'll hit save so it's updating alright done so I just duplicate this three times and I drag now I have this style I just drag the icons over and I change the icons to what I want so this is a next one this for about maybe a person man there's a snowman people I don't know how they title some of these alright we're down here at the bottom we're going to choose [Music] no I don't like that I might need to look around for different icons that's not bad and this is going to go to the about page so search for about there we go save next icon is articles replace see blog no writing no paper I'll choose this one and then the last ones contact so this particular articles is going to the blog and then the last ones contact just they wanted a phone that phone select contact save save all right so those are icons next to go to text editor drag it below and then on this one I just title it search you could do a heading but search about articles in contact for this particular site isn't really relevant feels like property search or real estate articles or contact to real estate something like that and make more sense so style now I just fill in the visual editor and something on this side isn't quite working with this editor you can see some brokenness here which we still need to clean up but search I just type in the word now you go to style so instead of using the tiny editor here that you've used in the past you just go to style I'm gonna make this red I've got a font align it to the centre make it larger get rid of some of this padding go back to style so that's kind of how I do it here you change the font family and the weight if you want but I'm gonna leave it as is so there it is there and then I'm gonna put a link for this so these search goes to so I'll copy the link Don safe then again I duplicate this three times once before yep strike it over you this one is about edit search for about I don't see it all right let's copy this trying to do it the easy way save this one is articles and blog there it is enter save this one is contact so I know it did work alright next they have a call to action about having a question about real estate so drag into here we're going to make this one full width in the red you modules text-editor the red is pretty sharp we'll see and this little green thing is grammerly works really great I enjoy using it um color will do white I usually save white and black or white and dark grey as a preset just so I can just access it quicker Center I'll make this way bigger I'll change the padding level this out then I'll duplicate now this over you calling me now this isn't me by the way if you call this it's not me or contact so the contact me is a link to the contact page so by default links are not so you can see the link has gone red the links are not underlined if you want them underlined there's a snippet we have on press Avenue comm under code snippets that you can add to your beaver builder theme to make everything underlined except for the navigation and the header that's entirely up to you so this right here I highlight say te L one seven one nine two one three oh three nine three so by putting that in that is now highlighted look at that and style that's not in here save I go back to here and I will say link color is white because it's carrying through from the theme that the link color would then be red I mean if you do want this underlined the other thing you can do as well is highlight it and control your command you puts that line at the bottom I'm going to change this to a light and changing both to light you can see how you just kind of go through this clean it up seems a little big I'll to play with a little bit more then under that they have their blog and then a sidebar take out the sidebar so now we're going to add a blog so we go to plus and then we go to posts and this is basically the post grid so under posts I'm going to say columns I'm going to do equal Heights I undo three across so you can see them right here there is a share this coming through this is jetpack so jetpack has Google Plus as Google+ has shut down it's crossed out you should have just removed it so we will cut that out image so I'd love it if there was an image but there isn't one so I'll have to change the featured image author Ally because it's his name but typically turn it off date I'll leave you can change the format comments hide terms are hidden contents I'm gonna do or you just do 25 maybe 50 depending on what it is and then the more link view um see I don't know how to spell and we'll go to contents our peg nation we're only going to show three posts and then we are not going to show more we're gonna put a button and then I don't I turn off the search so save and then wide a footer so I'll say I've searched subscribe a widget I need to grab testimonials follow us I didn't really have a footer but we'll add one so there we are done publish again this is really zoomed in zoomed out on this monitor looks like this you just reload this okay so it's not actually set to the home page so we will do that so that's what it looks like on this page that's why I'm zoomed way in and some things come out a little funky so make it huge again I'll zoom in 200% we'll go to customize go down to settings homepage settings right now it's sent to your latest posts which we don't want go to static page the home page is now home so it switches from that latest post which shows here to the home page we just created we need to clean up the hero image obviously and then the post page is the blog and so the news page now I'm going to publish I'll let it think for a minute again if you have questions go ahead leave them in the comments below additionally we have that Facebook group which is facebook.com slash group slash press Avenue and I'll put a link below and then if this was helpful in any way from switching from Beaver excuse me Genesis to beaver builder go ahead and give it a thumbs up if you know anyone else that would find this helpful please share it with them and let us know in the comments how this helped or didn't help so we can try to help you out more alright so we'll continue to clean this up go to page builder let's have a questions a little large time actually can put at the top I shall lose drag it up here so I'm going to give this some padding so this shows more like a hero image let's do let's try 55 yeah it's a little better it's a lot better so you should actually do the padding in she do this right and here so I'll do the top is 88 in the bottom to 88 then I'll go inside back to this just change this to 20 if you ever have it where one side is not the same height you can go to the column settings change this to equal Heights and then Center everything across the board so it brings that down because it's has different padding but just to show you so I'm gonna change this to no cuz it's the same so again it's hard to read so I'll copy this go here and I'll actually gonna get a picture of this guy and put in I have to request it so it won't be in this video I'm gonna put it over here so row settings so let's flip this yeah it's way better well darken the black so you can actually read it so you gonna keep contrast in mind when you're doing some of this stuff so I should turn this down a bit alright so we'll leave the call-to-action like that this bar here I'm going to request a widget a real estate we did that they haven't put it in here also for these the featured image should be at the top but it doesn't have one so this is your job to educate the client or yourself and adding this in and lastly we're going to change the footer down here and we're gonna use themer to do that so I already have it installed so say new theme er layout again it's beaver builder theme ER and I'm gonna say footer and then the layout type is the footer say add then under the location I will say under entire site I'm gonna leave it at that um you can set categories but I don't for footer I don't typically do that so now we have our header our content area which is blank and then the footer it always adds it it in purple it just is what it is so I'm going to change it to black and then I'm gonna change the bottom - I would either do dark I'm gonna do red you save if we go in here the default is 2017 and it's 2019 now but there's actually a short code if you brackets FL year which just takes the current year so then your copyright is the current year forever and you don't need to keep changing it so there's the copyright all changed get in touch we'll change this to the phone number I like it to match Oh 8 9 3 um you can change the link here to tell copy this cuz I'm lazy add the country code delete this other stuff and I actually copy this and do it again here so this is for the icon which is a phone I'll say tell whoops enter save the address is the address the link would go be do a Google map I'll add that later save and then I don't post the email directly say contact copy this link enter the reason I copy doesn't put it up here for the icon if the icon is clicked then the about us I put a snippet here with a link to the about page the snippet I'll grab later because this has been long so I'll just say learn more highlight this content or excuse me about I don't think I could find it before it's somewhere in here just enter safe now I go to done publish now it brings us back to the live version of the template but if I click here there is the site we built this red bar doesn't make any sense until there's a widget in it but it's fine for now and then down here is the new footer so if this was helpful in any way go ahead and give it a thumbs up if you'd like to see more WordPress tutorials beaver builder tutorials or genesis tutorials please subscribe to our site or to our youtube channel by clicking the red button additionally we again have that Facebook page where you can answer questions it's been really helpful for us just to have everything in one on one spot but you're welcome to ask them below thank you so much for watching you so much for watching the press Avenue YouTube channel right below me is a square that you can click to subscribe or really quick next to it's a circle to bring you to our website for more information over here on the right is our most recent upload video and the one right next to it is a video that's just for you that YouTube recommends thanks for watching Press Avenue