Creating A Blog Landing Page With Divi

okay in this video i need to add a blog section to a client website so this is the website we've got a client that runs an excursion business that takes people around to breweries and distilleries and wineries in ohio and he's gonna put a blog up eventually so today i'm gonna build out the blog section where all his blog posts are gonna go the first step to do that is to create a blog landing page so this site has the divi theme installed on it so down here at the bottom of the left side menu in the admin area you can see there's a link to divi so i'm going to go to the pages section and the first thing i'm going to do is make sure there's not already a blog page in here and i don't see one so i'm going to create a new page i'm going to go up here at the top and click on add new and i'm going to want to edit this page with the divi builder but before i do that i need to give the page a name and whatever i put in here in the ad title area that's what will end up being the permalink for this page so if you go over here you can see this permalink area right now it says 290 but when i put something in here and then publish it it's going to change to whatever i put in here or whatever i put in here it's going to show up over here where this 290 is so i'm just going to call this blog and you can see that blog shows up over here in the permalink area and the permalink is what shows up at the end of com so in your url you'd have your website address dot com slash the permalink in this case it would be slash blog so the next thing i need to do is click publish or save as draft i'm just going to click publish because there's no link in the navigation menu for this page yet so nobody the public's not going to be able to see this page so i'm going to click publish and the next thing i'm going to do is click on use divi builder right here so it's going to open up the divi builder options as far as how i want to lay the page out so i can build from scratch i can choose a pre-made layout or i can clone an existing page so what i'm going to do in this situation here just to get the same margins and padding that i have on other pages throughout the site is i'm going to clone an existing page so i'm going to click choose page it's going to open up this view here that has all the pages that i've got on the site listed and i can copy any of these by clicking them so it's going to click everything that's on that it's going to copy everything that's on that page and put it on this new blog page so i'm going to just click about us it doesn't really make any difference they all have the exact same layout on this site so now i've got the right dimensions on here as far as this distance the page heading is from the nav and all that stuff so next i'm going to get rid of some of this content that i don't need like this photo right here so i'm going to click this garbage can and get rid of that then i'm going to click on this row editor or column structure editing panel here and i'm going to change the layout of this column so right now it's two columns i'm just going to make it one full width actually i'm not going to make it one full width column this is a blog section so generally you have categories and tags on the right but i do want a larger section on the left so i'm going to look down through here and see which one of these sections meets my needs i think i'm going to go with this one right here so i'm going to select that and you can see that it moves this over and creates a new column a narrower column over here so before it was 50 50 now it's about uh 60 40 probably so the next thing i'm going to do here is change the heading so inside divi any black boxes are content so to change content i want to hover over that content in this case it's the heading for the page and then i want to click on the sprocket inside this block inside this black module settings area and i'm going to change about us to blog and then i'm going to go over here and click on this green check mark to save that to the page and then i'm going to go down here to this green save button and click save to lock it in so this text section here that came over from the about page i don't need that because the blog posts are gonna stream into this area right here so i'm gonna click on this garbage can right here and delete the module and then the next thing i'm going to do is i'm going to hover over that blog page heading and got too much stuff going on here underneath of this green section there is a black plus what that you use to add a new module one of the challenges with divi is sometimes if you've got a limited space all these blocks can show up on top of each other so you can do different things to prevent issues related to that you can you can lock this so that you don't accidentally change it or something but i'll usually just mess around with it until i can get the either the settings area or the plus button that i want so i'm going to click on this add new module button that's hiding underneath of this gray column settings block and i want to add blog section here so i'm going to click on i can click on this blog button right here a link or i can just type blog in here if i can't find it so i'm going to click on that it's going to bring me in here to the blog settings and this is where i put where i set up my layout for my blog page and all the blog articles articles will come from the post section in the wordpress admin writing a blog will be exactly the same as it is on on most wordpress sites this is just going to cause those what i set up in here is going to cause those blog posts to show up on this blog landing page the way i want them so i don't usually stay on this on these settings for too long i just throw in general settings you can always come back later and refine things i'm going to leave the post count at 10. let's put 10 in here and it's going to be posts like i said the blog articles are going to come from the post section you can feed in stuff from pages media projects and products on this site because we've got woocommerce installed so i'm going to leave this as posts uh you can select specific categories to feed in if you have multiple categories and say you want to create a categories landing page you can just select that category in this case i'm going to select all categories like i said i can always come back in here and adjust date format right now it's a month day year i'm going to leave that as is but you can put whatever format in here you want a content length i'm going to have show excerpt so i don't want to show the entire post on this blog landing page i just want to show part of it so i'm going to use the post excerpts i could specify a specific excerpt to use in here i'm just going to leave that as is for now and then down here underneath the thing that a lot of people forget about when they're setting up a divi landing page for a blog or the elements that you want to have showing up with each post so you're going to want some of these sometimes and sometimes you might not want some of them but the show featured image option here for this particular site i'm going to leave that as yes so if the post has a featured image that featured image will show up with the listing here on the blog landing page a read more button i'm going to click that to yes because i'm showing an excerpt i'm not showing the entire blog post so there's going to need to be a link there that people can click to see the rest of the post show author i'm going to leave that there for now show date i'm going to leave that i'm going to click no for show categories because we're showing all categories here so listing the category is not as important and on this site we don't have multiple categories show excerpt is oh is yes a pagination or pagination some people call it is when you have those numbers at the bottom where you can or the next and previous links you can use to get to other pages of the blog so i'm going to leave this as these i think for now and i don't think i'm going to change anything else at the moment you can change the way these items here look by going into design and messing with the title text the text the body text in the image but i'm not going to mess with that at the moment we're just setting up this blog landing page in this video so i'm going to leave all that as is and check this and click on this green check mark button over here so now you can see my test blog post is already showing up in here the only thing i have to do to make sure that that stays the way it is i got to click the save button over here in the lower right so now when i go into the back end of the site click on dashboard here when i log in to the backend the admin part of my wordpress site and go to posts you can see and i'm on a small screen so it's got everything kind of jammed up in here but you can just go into add new like you normally would this is my test post showing up in here the formatting is messed up because of my laptop screen being small if i click add new to write a new blog post all i do is put the title in here for the blog post so i'm going to put test post 2 in here since i already have one test post and then if i check the permalink over here for post you can see it leaves it like this if i click publish publish again and then i click this x to get rid of that you can see that it changed my permalink to what i put in up here so inside the posts for blog posts the permalink doesn't automatically update like it does over in the pages section now when you're writing a blog post of the way we have this set up in here you don't need to use the divi editor or the divi builder you can just use the default wordpress editor in here so i'm just going to click use the default editor and then you can see gutenberg opens up which is the default editor on this site and i can write whatever content i want in here so i'm just going to put lorem ipsum a test post too and i'm actually going to go to a different site here and get some actually i'll go to the front side of this site and get extra content from let's go to the about page and just paste some content in here so we can hopefully get uh get the read more button to show up over on the blog landing page i'm to highlight all this go back in here to my blog post and i'm just going to get rid of this i don't really need it i'm pasting content from the home page or from the about page so now all i need to do is click update and then sometimes this site has woocommerce or it has woocommerce installed on it so some extra options but it also has a an seo plugin installed which is some of the stuff you see down here if you have an seo plugin installed and you're writing a blog post you might want to adjust this stuff to optimize the seo effectiveness of your post one of the main purposes of writing a blog post is to help your website show up in web searches and you can make it even better post by entering the stuff down here the way it needs to be to best meet the requirements of search engines like google i'm not going to mess with that now since we're just focused on making this blog landing page i'm going to leave this as is click on this wordpress button up here in the top left this icon to go back to the dashboard you can see with my messed up formatting here on this small screen that i've got another test post in here so i'm going to go back to pages and i'm going to go to this blog page right here that i made and i should see two blog posts on here if i go to edit with divi actually i should be able to just go to preview here and check this out so we're gonna hit preview and i'm gonna actually that's just for previewing the layout so let's see let's click update and down here this thing comes up i can preview the page so i'm going to right click on that and click open a new tab so it doesn't take me out of the back end here you can see my blog page opened up in this second tab here so i can click on that and see the actual page so you can see i've got read more links in here and everything and my blog post title and author name and the date so now i've got the blog page set up all i have to do is go in here and add this blog page to my navigation menu which i'm not quite ready to do on this site so i'm not going to go through that in this video but that's basically how you set up a blog or how one way you can set up a blog landing page using the divi builder so let me click on these let's read more and take me to the full article here so i'm gonna go back to the main landing page now i need to add widgets into this area over here but uh that's pretty easy also let's go in and check out how that works so i'm gonna go back in here to the admin go back out to the wordpress dashboard area go to patch actually i'm going to go back into pages go back to the blog landing page i decided i'm going to go ahead and set this up before i see what widgets have been added to the column that we're adding so i'm going to go ahead and click edit with divi and then i'm going to click this black circle with the white plus in it which adds a new module that's the thing i clicked to put this stuff over here that was hidden under this green column editor editing menu so i'm going to click on this and there is a widget in here called sidebar or a module called sidebar so if i type inside it'll show up and i can click it i'm not going to mess with any of the settings in here we're just going to add this sidebar stuff in so then click on this uh green check mark button and there's no widgets in it i was about to go see if there were widgets in the sidebar before we came in here before i changed my mind and decided to come back to this page first so what we need to do now is click on this three dot circle with the three white dots in it to get the menu to open up and then click save to make sure that your module changes save to the page and then i want to go up here where the name of my website is and go down to dashboard to get back to the wordpress dashboard so click on that if this shows up and you've made changes you should always click save and exit i probably didn't wait until it was done saving so now that we're in here if you want to add widgets to the sidebar you go over here into appearance and then down to widgets and you see this sidebar area here that's the same sidebar that shows up on the blog page most wordpress websites have a sidebar as part of their template the theme template where you can where stuff's supposed to go next to the blog articles or just next to page content so this particular setup that i'm working on here has a sidebar and then it has six footer areas that it that widgets can be placed in so we're going to put the typical blog widgets in the sidebar so usually see a categories widget in there this particular site doesn't have categories but i'm going to put this in here anyways and then you might have an archives let's scroll down here and see what else we've got there's a tag cloud we'll put that in there there's actually two tag clouds in here because we have woocommerce installed so there's a product tag cloud but we just want the regular tag cloud so i'm going to put that in there just trying to put some stuff in there so you can see what uh shows up i think that's probably all i'm gonna put in there see anything else so when you pull something over in here you don't need to click save for widgets so i can just go over here to my blog landing page and refresh and you see that the widgets i put in here are now showing up but they need they need some formatting work right now they look kind of ugly so i got to go back to my blog landing page and go in here and edit this stuff and by editing the module that i put in it's like this border over here on the right i can move that over here to the left or i can completely get rid of it if i want to so there's a few things i can do by going back to that blog editing page which i'll do right now so i'm going to the blog page here instead of clicking on this and then clicking edit with divi i've got all the stuff done that is on the page you end up on if you just click on the word blog so instead of doing that i'm going to bypass that and go straight into divi by clicking edit with divi so now i'm back in here in the editor and if i highlight over this section here you can see i get this module editing panel so i can edit edit the module some stuff about the module this first icon here is for drag and drop you can drag this stuff around click on this and drag it wherever i want i want it over here though so i'm going to leave it there i can duplicate it if i wanted to create another version of the exact same module this third button here or third icon duplicates and of course if you mouse over this stuff a pop-up shows up and explains what it is so save module to the library i might want to do that if i need to use this module repeatedly throughout a website that way i can just select it from the library got the trash can here which is the delete so if i want to delete this module i click that and then there's a three dot menu here that i can click on to get even more stuff that i can do some of that's duplicate stuff so i'm going to edit the formatting of this by clicking on the sprocket or the gear icon takes me in here and if i go to the design tab which is the second tab i've got a whole bunch of different things i can go into and change different characteristics about that sidebar area so i've got layout right now i've got the alignment on the left and the border separator is showing up that's the uh this gray thing right here that i was having a little bit of trouble figuring out how to explain there so if i want to get rid of that i can just click on this and it goes away so you know if you've got a big screen you can see your stuff in real time i'm doing this video on my uh my macbook so if i want to show that and then i want to switch the alignment of the content to the right that will show the border on the left so this alignment thing moves the content onto the other side of the separator i actually usually like to leave the separator over on the left like this and put the content on the right so title text would be this categories label so i can change that here right now it's got default font but you can actually change it to some other font if you want to inside divi i'm not going to do that font weight's regular you can make it light semi bold bold or ultra bold in here you can change the font style from you know you make it italic you can make it all caps you can make it all caps but some the first letter large and the other the following letters small in a word underline strikethrough i've never really understood why strikethrough is available all the time i rarely use that but it's always it always seems to be there you can change the text alignment of the title text color the text size so right now it's 18 and i think it looks a little goofy with the blog post being so much bigger so i'm going to make the size a little bit bigger i'm just going to drag this and up to like 21. so you can see it got bigger i'll actually show you i'll do some blatant so you can see it gets bigger and smaller and then of course you can just go over here and type in what you want so i'm going to type in 21. you could change the letter spacing if you wanted to the line height you could add a text shadowing effect and then underneath that is the body text so you know you'd adjust that right here pretty much the same process i'm not going to change any characteristics of the text itself so i'm just going to keep scrolling and the options are pretty much the same as what the title text was i'm gonna go on down here to spacing so spacing is the margin and the padding and you got top bottom left and right margin and padding that's the space that's all around this stuff make some more space here so let's say i wanted to add some margin margin is outside of the content container so you know if i added 25 pixels of margin in here you can see that it pushes categories down i think i'm going to make that 20. let's make it 15. oops 14 15. i want to try to make it sort of in line but not completely in line with the blog title over here on the left let's change it to 10. i think 10 looks alright let's leave it leave it at 10. i don't think i'm going to change the padding or the left or the right stuff here at the at the moment so i think that's it in here then you got another tab that's advanced you can do some fancier stuff using this advanced tab scroll effects positioning changes you can do transitions even has built-in transitions so ease in and out ease ease in ease out linear some stuff in there never easily mess with any of this stuff you can set things so that they're not visible on everything or only visible in certain things using the visibility setting which is available in most of these modules and then you've got css id and classes so if you wanted to assign a css id or class to this particular module you can do that here you can actually put custom css in before after or within the main element from right in here you can actually put css in for the widget the title it's a lot of stuff you can do with this divi editor without really knowing that much about code that's kind of why direct customers who want to update their own websites to divi once you get the hang of it it's pretty easy to do a whole bunch of things and the learning curve is kind of steep and it's intimidating to some people but once you get the hang of it you can do almost everything a regular website developer does without touching code and there are a few exceptions so now that i'm done messing around with all this stuff i think i'm ready to save so i'm going to click the green check mark button here i'm going to click the three dot circle the purple three dot circle at the bottom then i'm going to click save and that is how you would create how one way you could create a blog landing page using the divi theme and builder and of course other ways you can do it you can actually make your posts but you can use the divi editor in your posts but this is the way we're going to do it on this particular site and uh it's a pretty common way of doing it you

Channel: Tom Broadwater

Views: 36

Keywords:

Id: firuhBpF8oU

Length: 28min 59sec (1739 seconds)

Published: Thu Jul 08 2021