How to move from Divi to the WordPress Block Editor (Gutenberg)

hi in this video i'm going to show you how you can move your content from divi to guttenberg we're seeing quite a few clients at the moment who are moving from divi to the block editor primarily because of the improvements in page speed and website speed they're seeing and this is especially important because of the upcoming google core web vitals ranking update the wordpress block editor has also improved massively over the past year with now true drag and drop and really really powerful page layout options so i'm going to show you how you some practical tips on how you can move your content across into the block editor from divi and i'm also going to show you how you can recreate your divi modules using the gutenberg editor because i've mapped the core divi modules to the blocks you could use when you're recreating your pages i've also put together a free divi to gutenberg cheat sheet that i'll link to in the description below okay i want to start by looking at the container block with divi which is kind of one of the cornerstone blocks really when you're looking at page layout now the gutenberg editor has a columns block which is uh lets you do columns this is a bit like you know divi esque i guess and you can choose your proportions here so i can say right one half and half i've already created this one down here and you can put blocks within the each of these columns so let's say i want to add a paragraph in there i can just add a text block in that side and i can do the same with this one but i could put other things in there like buttons and images if i wanted to so that's the kind of standard uh columns block that comes with gutenberg you can do other stuff with this like you can um add a background color and things like that but it's a bit limited to compared to what you get in divi but there are some plugins that give you greater control over your columns this is one we've built called gutenberg pro but there are other ones available with ultimate add-ons for gutenberg i know they have a container block we have one in our caxton plug-in i know that cadence have one as well so there's a few of these let me just show you quickly some of the things we've built in addition we've basically taken the columns block and added extra functionality into it so it gives you more control so with our with our plugin which is called gutenberg pro you can do things like add a background color so just pop over here in the block customizer and you can add a background color to each of these columns like so very easy to do you can put in custom colors here you can also change the um the gap between here you see how you can just control your gutter in there and you can also add some inner padding if you want to so you can just add some padding the other cool thing that you can do with this one is you can add a background image to each column you can add that to the whole column if you want to but for each column let's add a background image here and you can change the opacity on the block so you can see whether you want that to show or not and you can also you know drag the image around to place it how you want to let's increase uh the decrease the opacity and of course because we're using gutenberg here we can add other blocks within this so if i want to add a heading block i can do that and of course because it's gutenberg we can move them around the page very easily like so and do all our formatting things and again because we're using gutenberg we can add blocks within this so if i want to to add the button block within this i can do it so but the core principle i want to show you here is that you can add these lovely columns and containers now within gutenberg which is kind of what the the um and you can swap them around and cue stuff like that as well which is kind of what the container block gives you uh within divi so that's just looking at the columns block which is kind of the replacement for the container block right next up i want to look at the call to action module that comes with divi here's um an example there's a couple of examples they put on this um example page this one up here and then a second oh there's actually three one with no background so that's pretty easy and then this one here uh with a line left and right now this one down here you can actually just achieve with the standard wordpress columns block you could add two columns in the left hand column you could stick an image block and on the right one you could have a heading block paragraph block and a buttons block those are just core wordpress blocks that you don't need any additional plugins with this one here is slightly more complex and i'm going to use a really cool block for that which is called the cover block so the cover block is a really cool block again this is just a standard wordpress block you just add it into your page here and you can add a background color or a background image if i want to replicate this one though i can just add a background color so let me just add the background color and then you can just write your text in so if i flick back all they've got here in fact what i'm going to do is steal their text here we go so i can just add my text in here and you know you can format this stuff because this is just using the block editor again underneath here i think there was just a paragraph so i can just drag and drop the paragraph block over again this is just a standard block you don't need any plugins for this whatsoever and i've just managed to copy and paste exactly the same text which i didn't want to do so let me just add the paragraph underneath and then finally under here we had a button now the other way to add blocks is to hit return and then forward slash and type the name of the block you want to add if i could spell correctly then that would have worked there we go there's the buttons block and then i can just add my button and i can align that button in the normal block editor way so there's my uh replication of that uh again if i wanted to change things like the radius and the and the color of that button i can do all that sort of wizzy stuff just with no plugins needed just standard gutenberg stuff if you want to change the height of it you can just drag it up and down so you can be quite precise about it the other cool thing especially for things like call to action blocks is that you can actually with gutenberg you can save that block as a reusable block and you can save it to your library um by using this these three dots here you can add it to your reusable block library and then you can use that on multiple pages as well so let's look at how you can replicate the divi call to action module using no plugins just the core wordpress block editor okay next up we're going to look at the slider module so here's an example on the screen of the slider module and it slides and you can have different images and different text and here's one i've created using the wordpress blog editor this is using a plugin so if you do want sliders you'll need a plug-in at the moment this is called guten slider it's a very easy to use free plugin that you can add to your site if you need sliders let me just show you quickly how this one works but it's pretty straightforward to set up and it has lots of nice customization options built right within it um so you add it let me just start one from scratch here so you it comes as a block so you just add your block in the normal way it's called gut and slide i'm going to add it into my page you can start with an empty slide or choose a background image i'll choose an empty slide just to be quick um that's my text and then if i want to over on the right here i can add a background color and of course we because we're using the block editor as the canvas to our sliders we can add any any blocks within this at all so if i want to add buttons or anything any third-party blocks i can add them into my slider so you're not limited to anything really you can you can add whatever you like in here then when you if you want to add another slide into this the trick is you have to make sure you're at the top level and then you'll just see this option here to add another slide um let me just add some text and you'll you'll see these build up as this is how you basically construct them uh let's add a different color and it's only once you publish them and go and view the page that you will see them do their slidey business there we go see that's the one i just added and it will automatically slide and your sliders have lots of nice options to customize them as well let me just show you quickly a few of the things you can do with good and slider again you just need to make sure you're at the top level to see these options so these three lines here will always give you the hierarchy of your blocks so to edit things like the animation and how it fades you you have to make sure you click on this top level and then you see all the options over on the right so you can you know you can change the animation you can say whether you want it to auto play or not you can make it the full full um height full screen of the website which is quite uh cute this option here you've got some auto play settings you've got settings to customize your arrows that appear these left and right arrows so you can increase the sizes of them like so you're seeing on the screen and you you know if you're using dots you can also see change the dot size and dot color so it's very configurable so it should be a pretty much straight replacement um for your divi slider module right next up we're going to look at the accordion module which is this one here and what happens is you get a list of questions on the page and when you click on them they expand they've also got an example here that you can use them in columns so it's the same principle with the block editor if you want to put these in columns you can just use the columns block first and then you can put the block i'm about to show you within columns so you've got complete control here's one i just built using the codeblocks plugin which is a free plugin which comes with its um this block here which is an accordion block it's incredibly simple to use so let me just show you how i set this up in my egg example and so i'm going to delete this one to start with let me just remove this one so i'm going to add the accordion block which is just a block so i'm going to drag it across again this is a free plug-in written by koblox and then you write your title in here so this is my question essentially how to boil an egg let's try that and then you just pop your answer in below if you want um let me just grab some dummy text here if you want more questions then you simply add the plus sign here and write your um next question and on and on and on so let me just i'll stop at that now over on the right here uh you've got some options so whether you want a display is open to start with and you've got some color setting controls as well um so it's pretty simple but pretty easy to use i'll just update this and show you what happens but it looks you know looks pretty cool and there we go there's a inbuilt and accordion and again if you wanted to you could add that into columns so next up we're going to look at the testimonials module which is a module that comes within divi and again hopefully they've given us some examples on the divi website of what the testimonials module looks like and they've put some examples here so we've got two testimonials in columns here then here's another example in one column and at the bottom we've just got some different colors so these are pretty easy to recreate using the block editor and you you have a number of options here's one that i built so again in the description below i will um in the cheat sheet if you look at the cheat sheet um i've listed some ways you could do this and some plug-in alternatives the way i'm going to show you how i built this one on the screen is using the columns block which is a standard wordpress block and our gutenberg pro plug-in that adds some extra whizzy functionality into the normal columns block so let me just show you how i built this it won't take long and i'm going to start just by removing our existing testimonials section so i'm going to start by adding the columns block so i'm going to click on the plus sign up here and i'm going to search for columns and that will find the columns block there it is and i'm going to drag it across into my page okay and then i'm going to set how many columns i want now you can choose you can change how many columns you want at a later point but i'm going to choose i just want two columns here so i'm going to select that option and that sets my grid essentially here so now i've got my nice two columns ready for my various elements within it so if i just flick back to what we're about to create what we've essentially got here is we've got a column with an image and then a paragraph and then looks like another paragraph frankly so let me recreate this for you so i'm going to start by adding the image block now within columns if you want to add blocks within it you'll see you've just got this plus sign that's how you started off so you click on the plus and if you don't see your block within these then you can search here or you can browse all but i'm just i can see image here so i'm just going to add that in and then it's going to prompt me to upload one on or choose an image from my media library so i'm going to choose media library because i already have one and i'm going to choose that one now when you're if you want your images to be round perfectly round you need to make them proportionally square before you upload them to your site otherwise they'll be kind of oval so there's my image and i'm going to select it and it'll come into the page now again it's slightly too big and i probably would have wanted to resize it before i uploaded it but i can actually just do that now in wordpress i can just drag it smaller which is kind of cute and then over on the right here you see over on the right this is where i can make it round just these two options this is in the customizer here if you don't see these options then just make sure you haven't clicked on this cog up here because that's that hides the block customizer options for you so now we've got it round and then the final thing really it's still a bit big but actually i quite like it quite big i'm going to align it and you can align it with the toolbar at the top here and i'm just going to align it center okay so we've we've we've got that bit that bit done and all underneath here really we've got is a paragraph and i'm just literally going to copy that just for speed today and i'm going to paste that in and obviously we're using the block editor so you could add social icons in here there's a social icons block anything you like really now the other the other thing we need to do here is we need to set a background image to make the sort of testimonial stand out now this is where our gutenberg pro plugin comes in because normally in the wordpress columns block you can't add background colors or images per column you can do it for the whole you know the whole columns all your columns but you can't do it per column so i'm just going to select the column okay if you're ever in any doubt about which column you selected you can choose these three lines up here because that will show you the hierarchy of your blocks and your columns so i've actually selected the the correct column i want to style the background and to style it we look over here on the right and this where it says columns block pro settings this is what we've built in addition to the normal block this lets you add a background image or a background color so i'm just going to style it here as gray and the only other thing i need to do here is i need to add a little bit of padding to each block that's within my columns and again this is part of gutenberg pro we've added the ability for you to add padding within your columns like so okay so we're pretty much there slightly different but i quite like mine now all we have to do now is really duplicate that and make the changes so i could go off and recreate it but a quick shortcut for you is just to duplicate it so make sure you selected the entire group of blocks and click then you click on these three dots up here and you will see this nice duplicate option that's really cool so you just click duplicate and it's just going to add itself across there now you'll see it's added an extra block but i can just whiz in there and delete that if i wanted to or if you wanted three you could keep it and duplicate it again and then delete one the other nice thing here in fact let me do that just so i can see you so you can see exactly what we've got so if i wanted to make any changes here i just click into the block and you'll see a replace option at the top here and you can choose your next image and again if you want to make one particular one stand out which i'm not sure you would for testimonials but you could do you can change the color per block as well so you've got you've got um loads and loads of freedom the other thing that you can do with um the gutenberg pro plugin which the normal columns block doesn't allow you to do is you can actually change the columns gap as well like so so you can create these really nice testimonial pages really really quickly the other cute cute thing that's going to help you as well is that you can you can duplicate entire blocks so there i've created um you know two rows so if you've got a page or multiple testimonials you can just duplicate once you've got the first one right you can duplicate it and then go and make your changes the other thing that you can do is you can switch these around so if you want to switch these columns around within the editor you know you've got that sort of functionality as well so there we go there's a look at how you can recreate the divi testimonials block using just the standard columns block that comes with the block editor and our gutenberg pro plugin right next up we're going to have a look at the tabs block that comes with divi this is an example of it that we're seeing up on the screen now and it has these nice tabs that run along and run along the top here again this is pretty easy to create recreate using the block editor uh we're going to be using a plugin called editor plus which is a great plugin again it's a free plugin and here's what here's the tabs i've created um in just a few minutes actually so let me show you how this one works it's pretty straightforward though um so this is the one i created i'm going to leave that alone i'm just going to add a new one into this page and we'll see there's the block itself i'm going to drag it across and it's pretty straightforward so you write your tab tab label in here so let me just write my label you can obviously write whatever you like and it's pretty customizable as well and this is where you this is where you put your content and again because we're using gutenberg or the block editor we can use any content types we like in here or any third-party blocks so you could put images in here sliders anything you like galleries then i can add another one here you get the idea hopefully i'll just add two just type your i spelt that wrong again just write that in click on the plus sign add the paragraph block but i could you know if i wanted to i could any add any block at all if i wanted into my you know if i wanted to add a counter block in here i could do that as well anything you like because we're using guttenberg you can use you've got full access to any third-party blocks also this block comes with a whole ton of options to customize it they're all shown over here on the right again just make sure when you're trying to see the options on the right that you're you've clicked on the top level this level here because if you click down here then the options you show will relate to the block you're focused on in that instance the paragraph block so if you want to edit you know the background stuff or the specific stuff that applies to the block like the styles you need to make sure you've clicked at the top level so we've got this tab style option over here so we can have them the bottom or you can have them on the side see how they're now on the left or you can have them on the right uh you can show subtitle if you want to i haven't got any of those you can have them auto play and then you've got some design options as well so you can change the colors and all that kind of stuff and put drop shadows in so there we go there's a look at the tabs block um it's a pretty good replacement for the divi tabs block the style of the block as well be will be largely dictated in terms of you know your fonts and the style of the lines and things like that will be dictated by your theme so this will work all across any theme but the styles might look slightly different depending on what theme you're using right so next up we're going to look at the divi blog module here's an example on the screen of what it looks like and it basically brings in your posts onto a page of your choosing it could be your blog page but it could be any page it could be your front page and it creates this nice little grid layout and you can recreate this as i've done here using the block editor and no plugins whatsoever so you won't need any plugins for this one there are plugins that give you more options to change the design but this is the way i'm going to show you now is just using the standard latest post block that comes with the block editor so let me show you how i recreated this grid layout there's a few there's a few tricks to this so um let me just show you what those are i'm going to start by removing the block so you click on the blue plus sign and then you're going to be looking for the latest post block which is just a standard block so you don't need any plugins for this one and i'm going to add that into my page now i'm adding adding into this page but this could be on your front page under your you know nice banner or it could be anywhere on your site now when you add it it's not going to look particularly exciting it's just gonna list your type uh post titles but we can configure this over on the right so i've just got to make sure i select the block itself so again click on these three lines just to make sure you've selected the latest post blog and as soon as you do that you'll see the options to change the layout and the design over on the right so there's a few things we need to do first before we dive into the right hand customizer the most important one being we're going to change it to a grid layout so at the top here you've got two different views of this block list view which is what we've got and grid view so we want grid view because we're going to create a nice grid now at the moment it's just pulling in the titles which isn't very exciting so we need to make a few little tweaks and they these are all done over on the right in this block customizer so the first thing we're going to add is some content we're going to show some content from the posts so if you haven't hand set an excerpt it's just going to grab the first bit of content in your page if you have handcrafted an excerpt or snippet for each post that's what it'll show and then over here you can also change the amount of words to show just by using this slider or you can type them in this little box here to get the exact number so we're kind of getting there the the only other thing really we need to do on this well two more things actually the first is we need to choose this option here display a featured image so if we select that option just by clicking this toggle that will pull in your featured images that you've set when you've created your posts the other thing that we're going to do here is we're going to increase the number of items that we want to show so this is post an item is a post i'm going to say right i want six items you can also filter these by category so if you wanted to have different sections within your blog page you could you could have you know you could choose those different sections and then it would filter the posts by that specific category and only show posts from that one category you can also change the columns down here as well so if you want to have more or less columns and the only thing i want to show you there's a few other options but the only two other things i want to show you quickly is you can set an author name you can show the author name here which will just go under here and you can set a post date of what as well if you want to or you can turn those off and again if you want to go back to list view you can just click on that and it's going to show you a list view of it but i think probably for the blog page you're probably going to be using the grid view so that's the how you can recreate the divi blog module just using the block editor and the latest post block okay we i'm going to turn to woocommerce next and divi has a number of woocommerce modules that lets you both recreate or customize the woocommerce product page but also your shop pages as well but you can do exactly the same thing now using the gutenberg block editor in fact we've built a number of plugins especially for woocommerce and the block editor which i'm going to show you now so the first one i'm going to show you is called woo builder blocks and it lets you customize the normal woocommerce product page using the block editor so you can create any layout you like with it really i'm going to give you a really short demo today but i will put a link in the description to more to a much more in-depth tutorial if you really want to um take a closer look at it uh this what we're looking up on the screen has been created using it um and we've got a website called woo builder blocks where you can go and see some other awesome demos as well of the type of layouts you can create with it but let me just show you how it works so i've got a normal woocommerce product layout here so at the moment this hasn't hasn't been customized and i'm going to go to the edit screen and i'll just show you the process of how you turn this into a block builder plugin and um you'll see over on the right here we have this new button that says enable woo builder blocks that's the plugin so you just click on that and that will turn your normal woocommerce product into a editable gutenberg product so there's three options here you can start from scratch so you're going to rebuild it entirely from scratch and we've built a whole bunch of blocks that let you reconstruct your product page and i'll show you those in a second you can pick a template this middle option here so we built some pre-configured templates that will save you time some nice designs or you can use your own template so you can create a design using woo builder blocks and then save it out as a template and then use that on multiple products so that's very powerful and again if you check out the links in the description below they'll give you more information on how to do that but i'm just going to show you really quickly how you start from scratch so i'm going to click on that option and you'll see when i click onto that option it's now going to turn this page for me into a page that i can edit with gutenberg so we're starting essentially with a blank page here and when i click on the plus the blue plus sign over here uh you'll see and i scroll down you'll see there's a woo builder block section and in here are all the blocks you need to reconstruct your product page now you might not need all of these you might not want them all but some key ones are things like your product title the add to cart button your product image maybe um we've got related products we've got short description we've also got some additional blocks in here that will help boost the sales on this product page like we've built this sales countdown block so it's got this lovely sales countdown timer so if you do have a sale it encourages your customers to purchase we have a stock counter as well again just incentivizing people to purchase your products so we've got some some cool stuff in here so you could just you know if you wanted to lay out your page you could add the columns block in first and set your grid and then put each of these blocks within the columns you wanted so there's no limit on the type of layout you can create i just want to show you one exciting block we've built which is called the wu builder cover block which works in a similar way to the cover block that comes with gutenberg and what it'll do let me just add it so you can see what it'll do it'll grab your product image automatically and set that as the background and then bring in certain blocks automatically so we bring in the product title the price the short description and the add cart block if you don't want any of these you can remove them because they're just blocks and you can do snazzy stuff like you can change the height of this like so you can change the text in here so you can customize the font size and all that kind of cool stuff you can also add an overlay color to this if you want to and you can also set this to be full width so you can make it you know beautiful full width um image and loads more and again because we're using uh the block editor you can use the party blocks in here so you can use any third-party blocks you like within the product page layout so that's a really quick look at we builder blocks but essentially we are just recreating the woocommerce product page using the block editor i want to move quickly now on to not the product page but the shop page or listings pages so again the um divi comes with a shop module and you can replicate the same thing now pretty much uh using the block editor there's two plugins i want to highlight to you today uh one actually is part of woocommerce now and it's called woocommerce blogs it comes with woocommerce so if you have woocommerce you'll have this let me show you this first so these are just a whole bunch of blocks that woocommerce have built that are just now part of woocommerce you'll find them in your block library here there's all sorts of things i'll just show you a couple of these so this one's quite cool this is hand-picked products and that lets you basically choose products here and then they'll bring them into a grid within your page like so and you have some options over here on the right uh to customize the layout of these okay so this this is useful for grid layouts and they have some other ones in here let me just show you one more actually which is quite cool which is one of my favorites this one here is cool this is feature product so that lets you basically choose a product to feature and it sorts the layout for you automatically and again you can change the overlay color over here on the right and cutesy stuff like that okay so these are these are equivalent to the divi shop modules um so that's that's the woocommerce blocks there's quite a few in there they tend to be fairly generic in terms of the layout of them and they still don't quite allow you to do things like customize the actual shop page so you can add them to your front page and specific pages but they wouldn't necessarily let you customize your shop page or your category pages and that's where our plugin called storefront blocks comes in that does let you customize the shop page and your category pages now again we've built a whole bunch of blocks in here that you can add into your pages some more sort of elaborate and more stylized ones we've got a whole bunch of them in here let me just show you i'll just show you a few and again i'll put in the description i'll put a link to some more demonstrations of these so you can dive into more detail if this is of any interest but let me just show you a few of the really cool ones so we've got this masonry one here this is going to bring your products into this lovely masonry grid and over on the right here you can actually select the products you want to bring into that grid and it's going to build that grid dynamically if you want to change the order of these these are drag and drop over on the right so i can just drag them up and down and the order will change you can also do things like show the price you can change the fonts you can change all sorts you can change you know the the height of them like so just by dragging them up and down you can change the grid gap if you want to so loads and loads of options to customize it um what else we got here you can also this is quite cool you can change the layout for mobile so you can have a certain number of columns on desktop and a different one on mobile okay let me just show you a few other cool blocks here that we've built into storefront blocks another cool one is the product card once but i'm not going to show you that i'm going to show you the product flipbook this this creates these lovely flip books like this which is really cool and again over on the right here you can change the um you can change the layout so that's called storefront blocks um you can create some really beautiful shop pages and category pages using it it lets you customize the shop page and the category page so actually you can do more with these modules because you're using gutenberg then you can with the divi shot modules they're far more extensible actually i just want to show you one more thing in here we've also got some other layouts which might be of interest so we've got two which i want to show you these are quite different so we've got the product list that's going to list your products in a nice list form like this so that's quite cute this you know that's certainly applicable to certain product ranges and we've also built in here a product table where you can let me just show you this the products table so this is great if you want people to you know order multiple products in one go and you can configure this all over here on the right so you can actually change which columns you show above here just by dragging them up or down like so or you can remove the ones you don't want and lots of other things as well so that's a look at woocommerce blocks and storefront blocks two great plugins that will help you customize your woocommerce shop pages listings pages category pages but you can also use these on any pages so if you want to highlight a product in a post you could do that or you could add these to your front page if you wanted to so i just want to finish off by talking about the process of migrating over to using the block editor so there's two general approaches you might consider when you're migrating from divi to the wordpress block editor one build your new website completely from scratch or two migrate pages one at a time so i'm going to just talk you through briefly how you might approach each one and we'll start with build web your website again from scratch so sometimes this is definitely the cleanest approach but obviously requires quite a bit of work um if you go down this route then you've really got a number of options the first is some hosting companies will provide you with a staging website where you can build a new version of your website and then push it to live once it's complete on the staging so ask your hosting company more and more are offering this now and they might they might have that but you might not realize it if your hosting company doesn't provide you with a staging server then you could use a staging server plugin and i'll put a link to a few in the description below or alternatively you could build your website on a new install of wordpress under a temporary domain name and once you finish your new website under the temporary domain name then you can re-point your domain name to your new server ip address it sounds complex it's really not i've done a tutorial on this one and again i will put a link to that tutorial in the description below so that's the first approach the other approach is you could migrate your pages one by one so you could leave divi running but you could turn your pages into block based pages one by one with divi you do have an option to use the default editor when you're creating pages so if you go down this route it's important to make sure of a couple of things firstly that your page titles are the same and also your permalinks are identical to your pages so you might need to rename these once you've finished your replacement pages so just bear that in mind that's very very important for maintaining your search engine optimization so there we go i've looked at some of the um the key modules not all the modules um in divi i'll put a link to the post where and a link to the cheat sheet where i do list all the modules and and their equivalent um mod their equivalent block in the block editor or a plug-in if you require a plug-in to achieve the same thing um i'll put a link below to the cheat sheet and to the original article that inspired this tutorial as well if you have any questions whatsoever uh please put the comments down below this video isn't intended as a rant against divi you know divvy is still great in lots of circumstances but if you are looking to move away from divi hopefully this has been of some help to you so thank you very much for watching

Channel: Jamie Marsland

Views: 2,131

Keywords: best gutenberg blocks plugin, block builder, block editor, css grid, divi builder, divi extra, divi to gutenberg, divi tutorial, guten, gutenberg collapse 2 colonnes, gutenberg product comparison, hiw to migrate divi website, how to drag and drop in divi, kadence blocks, page builder, pootlepress elementor, wordpress

Id: PAV5vrVv9Is

Length: 36min 23sec (2183 seconds)

Published: Tue Mar 30 2021