Creating Blog Posts Layouts with GeneratePress & GenerateBlocks (LIVE)

hello hello hello just going to make sure that everything is working correctly here before we get started and it looks like we're all good all right fantastic so I have never streamed from my MacBook before so I'm trying that today so if there's terrible problems at least I'll work them out on this one uh and I thought today we would just I was looking through a couple little blog posts um and blog posts happen to be some of my favorite things to design and create so we got this one here that's on the Dallas Cowboys website they got a w last night so checking that out for sure and then uh this one here on zoom's blog which has kind of a different layout with a little sticky sidebar for the social sharing stuff so I thought we'd take a few minutes this morning and try to recreate both of these layouts using generate press and generate blocks so hopefully that's something everybody can uh enjoy and learn a little bit of something from so I think we'll just dive in here and get this going uh hopefully we'll have some more people join us here on the stream uh if you do have any questions just holler at me I'll be glad to take questions during all this I do have the chat pulled up so I should be able to see it as we go so yeah happy to stop down and go down any rabbit holes we need to but for now we'll just uh flip back and forth between these two layouts and go through everything and see what kind of damage we can do so I think this first one we're going to do here is on the Dallas Cowboys website so I think we ought to start out by just going through all of this and kind of mapping out in our head what we'll need so I'm not going to worry about any of this header stuff in the menus and all that we're just really worried about the post layout itself so kind of starting from where this white background is so up here this is kind of uh I've seen on other posts this is kind of like their categories here it just has this hashtag but we'll use like a category thing for this this I think is where they have sponsor sometimes we might just leave that alone we got the H1 of the post the time it was posted the author information with a link to their social media some social sharing we might just fake that for the time being or maybe we can install um install a plug-in to handle all that social sharing Force we got a big featured image here and you can see it spans a lot wider than this top section here and it spans a lot wider than the content as well then all the content of the post and then down here at the bottom we have this related content section this does actually use a slider I'm not going to use a slider on this but we'll put four similar cards down in the bottom of it so this gives us an idea of where to start and we'll just go ahead and jump in here and do it so we're going to do is we're going to head to our elements we're going to add a new one for this blog post layout we'll call this a block element and we'll give it a title we'll just say uh Cowboys blog I don't know where my cap lock is on Cowboys blog and we'll change the element type to content template and then make sure this editor width is set to a hundred percent here and of course it sounds like my dog's about to go crazy I think the delivery driver's here all right so inside of here the first thing we need to do is go ahead and get us a container for this top information here you can see they've they've narrowed this down quite a bit in fact we'll just use hoverify here to go and see about how wide it looks like this container is about 800 pixels wide I probably won't do everything because I'm perfect in this but we'll get it close enough so go ahead and say that there's a 800 pixel width to this and we need to give it some padding so we might say 40 from the top I usually do 24 on the sides just to keep it in a little bit from the edge in case the browser isn't too wide all right so that gets us started there all right so the first thing we need here is kind of this category tag here in this underline so I think to do that I'm going to go ahead and add a container inside of this and we'll give it a bottom border and change the color to a light gray color and then we can add in a headline here we'll just change this to probably a div and we'll put hashtag Dal what did they have we might need not need to do this exact first Detroit and let's style this up just a little bit like I said I'm probably not going to go for Pixel Perfection here but we can get it at least a little bit close all right so we also need a thicker underline under this one so we'll say maybe three pixels looks pretty decent and we need this to just be the width of the text so to do that we'll just go here uh it's under the spacing settings and we'll change this to inline width and now that underline just goes right here all right so that looks pretty decent to start us off with that like I said they're using uh I think on this page it's not linked or anything so I don't know that this is coming in dynamically but I know on some of the other posts that is so if you wanted to do this as Dynamic content we could actually go in here to the dynamic data and we can change this to list of terms and although this isn't going to show anything right now it's actually going to pull in the category here so we'll go ahead and leave that chances are if you're doing this you want to do it Dynamic anyways while we're at it let's go ahead and pull one of our posts up I have a few dummy posts in this install we first need to Target it so I'm going to go here under the location rules and we'll change this to show on all of our posts whoops posts all posts go ahead and update that and if we refresh this now we can see this is the or the category this blog post is under which is just general and we have our faint little underline here all right so let's see underneath that we need to get a little bit of spacing then we need the H1 title so to do that we'll probably just let's see I'm going to get my list view out here um we'll probably just go ahead and grab a headline we'll change this to H1 and we can just give it some top margin I apologies if you can hear the dog barking all right we'll change the font weight to bold the font size looks yeah it looks pretty decent theirs actually might be a little bit smaller so maybe we'll reduce that a little bit and we're going to use the dynamic content on here as well to bring in the H1 of the post so we'll change this to title now I'll go ahead and update this and check it in the front end we'll see now we're getting in the title of our post here which is perfect all right all that is easy enough what do we got up next we have the date that goes underneath there so we can do that pretty easily we'll just put in another headline block we'll change this to a div and we're going to go in here under our Dynamic data and we'll change this to post date now in theirs it looks like it's actually pretty small I'm going to guess that's like 13. let's see here we'll try with header if I see what we get so 12. so we can go pretty tiny with that although I don't like to typically go that small with any of my font sizes so we can change it to 12. I'm going to bump it up just to 14 just to make it a little bit easier to read and we'll go in here and we'll change the text to kind of a lighter gray to match theirs and we have quite a bit of space how much space do they have that looks okay all right and underneath that we have this set up here which is going to have the author image some author information their Twitter link and then some sharing for this post so I'm going to set some of this up it's kind of dummy content we won't connect everything dynamically now if we have enough time maybe we can go back and do that but we'll at least get the layout looking good all right so to do this let's see I'll probably want to go ahead and drop a grid in here and I think what I'm going to do is drop a two container grid we'll have one for all this information on the left and another one for all this information on the right um we do need a little space here so I'm going to grab this post date and we'll give ourselves just a little bit of margin there and inside this one let's go ahead and do another grid we'll do another two column grids so we kind of have these two things for the image and then the information so on this left container I'm actually going to change this to a zero percent width so we'll just delete it out of there and then in the right hand container I'm going to change this Flex grow to one so it fills up all the space and over here in the left container we'll just go ahead and drop an image block we'll go down here to Dynamic data and we'll pull in the author Avatar now let's see here looks like theirs is probably I don't know between 50 and 80 pixels we'll try 80 here and see how it looks and we can change the Border radius we'll just give it a big value so it goes to a circle update that and take a look at it that looks pretty decent sized gonna work all right and then over in this column we need a little bit more information so I'm going to go ahead and grab another headline here we'll change this to paragraph and we're going to bring in the author name dynamically so we'll go over here to Dynamic data and we'll change this content source to name all right so we can see these are touching already so we need to go back to this this inner Grid in here and give it just a little bit of Gap we'll go with 24 pixels for now and we probably want to go ahead and vertically align all this to the center all right and underneath that we're I'll just duplicate that and this is actually the the person's title I'm guessing so what we could do is use something like Advanced custom fields to go in and create a an extra field in the author uh meta information and put in their title I think for now we'll just copy and paste some of this and just do it static instead of dynamic just so we can have the design down like I said maybe if we have enough time for that we'll go back and clear that up to the end and go ahead and just paste that in and then underneath that they have a Twitter little button so we'll drop a button in here and let's see we'll go in and give this the Twitter icon and we're going to go ahead and remove the text as well so we just have the Twitter logo and it has a border on it so go ahead and give this a border one pixel and again we'll just give it a huge value here so it goes to a circle and we'll have to just even up all the padding around so that should get us all the content we need in there obviously we've got too much space here so we might drop this down to zero this one looks okay but maybe a little bit too much in fact now that I'm seeing that we probably need the these two stack are not stack but aligned to the top all right so I think these are quite a bit smaller we might just go with our 14 again might leave the author name just a little bit bigger maybe go with a little bit Bolder font all right let's just update that and take a look at it all right so in comparison to the real thing obviously they're they're font's a whole lot smaller but I kind of like it a little bit bigger so I think that works so for the link for this Twitter kind of same thing that we'd need to do here for the title is use some kind of dynamic content so I've done this in the past with uh ACF just gone in and added like a Twitter link to the user profile so then that way I could put in their Twitter Link and Link it dynamically for now like I said maybe we'll go back to that at the end I'll just put a link in there for now we need to see this gets lighter when you hover it and these ones get darker hmm I kind of like it getting darker when you hover better so we might just make those consistent this does look a little bit big too so let's go ahead and change this icon size we'll go to maybe 0.7 to make it a little bit smaller and we can change the color let's go with this lighter one and then darker on Hover and we'll do same thing for the text so the icon does the same yeah I like that all right update that take a look all right so that takes care of that now we need to get our social images on the side so I think what I'll do is just grab this button here and copy it 'll go in this side here add a button and paste that in now we do want to right align these and let's see we have Facebook Twitter email and then a link these are quite a bit bigger so we might just put this back to 1M and we have Facebook duplicate that and we have Twitter but we need some space in between these so I think what I'll do on this Twitter one I'm just going to add some left margin to it so maybe we'll say eight pixels I don't know how to do it and then duplicate it again and we need an email so we can go with this envelope and then our last one is a link button and I don't think I have an icon handy for that so we'll just do a heart now like somebody could favorite like I said um I usually do this with a plug-in it's by the same people that do perf matters they have a plug-in called Nova share that allows you to do social sharing stuff so that's probably what I'd use if this was a real website is to just use the social share plugin and put in their short code here but for now we'll just mock this up so it looks good although those those social sharing things aren't going to work out of the box let's save that we'll Refresh on this end all that is looking pretty decent all right what do we have next next we have this big featured image which breaks out of this smaller container so I think what I'll do for this is go ahead and add another container after this first one and we'll do container and we'll just leave it whatever my container width is now which is 1280. and we'll drop an image in here and we'll go to the dynamic data and turn the image source into featured image so if we save this now we should see this featured image come across and like there's it's a whole lot wider it's pretty tall too now we can control the height of this image here in the image settings on this image block but one thing I don't like about that is the way it scales as you go across mobile breakpoints you keep having to change the height and sometimes that looks a little bit funky so I think what we might actually do let's give this image a class so we'll say Cowboys featured image I'll go ahead and copy that update it and we'll open this up in the customizer and write a little bit of CSS so you'll have to ignore everything that's in here already this is a little sandbox install that I've put a bunch of stuff into all right so what we're going to say is this cowboys featured image we're going to do an aspect ratio I'm going to start with 16 by nine yeah and that we're gonna have to fix the squishing problem so if you do object fit cover that will make sure that it's not being squished it's being shown proportionately so I think that's actually a better size and the benefit to this is that now when we go to tablet and when we go to mobile it's still going to say the stay those same proportions of 16 by nine which is like the you know the YouTube image size or video size which is pretty common so I think that will work we'll go ahead and publish that check on the front end that does look a little bit smaller I do like that better all right easy enough for that now we can go on to the next thing which is the post content here so we'll just go ahead and add in a new container insert this after oops all right so like that top container we need to constrain the width on this so we're going to go with 800 again need a little bit of padding go 40 and 24 on that and then in generate press here what you need to do is drop in the dynamic content block and change this to post content and as soon as we do that and refresh this front end we should see all the post content coming in so perfect these are just dummy posts here with some different headings and text and block quotes and all that so all that looks pretty decent I see some tweaks we might want to do with some CSS here but we'll check on that in a second all right and then lastly on this page they have this section with related content so we'll go ahead and dump this in here insert after and we'll do another container and for this one we're going to do a lighter gray background color so we can do these White cards on it and we need to give it some spacing as well so we might go with maybe 80 and 24 and we're going to use kind of the same setup we have here so I think what I'm going to do is just grab this container and copy it we'll go in here and make a container and just paste it in now we don't want to use the dynamic content here so we can turn that off and say related posts I don't know what it said related content all right and actually this container had that light gray border but on this light gray I'm using the same color here so we might need to darken that just a bit all right so that's looking pretty decent now now one thing I want to be careful of here is how they're using their headings so let's check that out um these post titles are all h3s so I'm guessing this is an H2 yes so this is actually an H2 in this section so we can go ahead and change that in here so we make sure we keep everything in the right order change that to an H2 and we'll go ahead and get rid of the bottom margin here so it butts right up against that line all that looks good um I think on this one I'm going to grab this container that's holding it and give it just a little bit of bottom margin so our query Loop underneath it won't butt right up against it all right so we can go back to this container and we'll add our query Loop and for here we'll just start blank we'll take a look so what we're going to do is four different postcards across here we're going to not worry about the slider so we'll do four postcards we have an image we have a category we have the title we have an excerpt the card's got a white background it looks like the entire card is linked so we should be able to do all that all right so what we need to do is drill in here to this query Loop and here in the post template since we want four across we're going to make these 25 percent uh we do need a little bit of gap between these we'll just start with 24 pixels and see how that looks uh we want to go ahead and give this card a white background so we'll jump in here to the colors and give it a white background and let's go ahead and put in our image and we'll use Dynamic content again and bring in the post featured image and we can see this website already has like five other blog posts on here so we need to restrict this query Loop to just four posts so if we click on the query Loop we can change this post per page to four and we won't have any pagination on here and we probably want to go ahead and exclude the current post so it doesn't show the posts we're on so if we go to exclude post it's the first option here is exclude current posts and that way it won't show the post somebody's already looking at now these look tiny but I think that's just because all this UI is in the way looks pretty decent there let's compare it yeah that's looking okay all right so I'll get all our controls back here and inside this post template the next thing we want to add is a headline block probably change this to a div and we want to bring in the category of these posts so we'll enable the dynamic data and under the content Source we'll go to list of terms and we'll select categories now in theirs I know it is all uppercase it's probably pretty small I think the font Loop was a little bit bigger and the color was a little bit lighter usually when I do all uppercase like that I like to add just a little bit of spacing in between the letters all right so we can see that this is all butted up against the card now we want the image to be at the edge of the card but we don't want all the text to be so there's a couple ways you can do this you could just go ahead and add margin or padding to everything that's inside of here what I usually do though is just go ahead and add a container in here so I'll insert this after we'll do a container and in this container we'll give it maybe 16 pixels of padding you could probably just do M's here say two say one all right and then we'll drop this I want to stick something in there temporarily we'll drop that list of terms inside the container and the reason I really like to do this is one more container inside this card isn't going to kill performance and now I don't have to go manage the spacing around everything on individual elements it's all kind of contained in this one area and I can control all that spacing a little bit more globally all right so we'll go ahead and drop in a heading and they had these as an H3 go to our Dynamic data and change this to the title this looks a little bit big so I think we're going to drop this down to maybe 20. Maybe 22. it looks pretty decent and we'll go with a bold font again now generally I'm changing all this typography here locally generally I'm going to set all these things up in the customizer but since I'm not building out a full site I'm just kind of doing these local adjustments for now they'll give us the same same desired outcome today just if you're doing a big project you probably want to do all this globally so you can manage it all globally scale a whole lot better that way all right so we need a little bit of space in between those and then we need an excerpt so to do the excerpt I'm just going to do another headline we'll change this to paragraph and we'll go down here to our Dynamic data and change this to excerpt now those are quite long maybe we'll go with 24 characters and we'll get rid of the read more link let's go ahead and save this and take a look on the front end and see how we're doing all right and in comparison to those ones it does look like their font's a lot smaller here which we can go back and fix other than that it's looking fairly decent it looks like the text might be a little bit all closer together so let's go ahead and grab this text and make it a little bit smaller again they did really really small 14 it's about as small as I want to go it was lighter in color so grab this lighter color we have what else did we say we wanted to change it's a little bit spread out here so we might go ahead and just get rid of all of this margin and maybe we need eight pixels save that take a look I think it changed our size here there we go so that's looking a whole lot closer now we need to add the links here so I'm going to go back to this post template uh container and we'll go down to the dynamic data and the link Source will do single post now this is where you have a couple options here you have the hidden link which seems to uh work pretty well it just basically makes a empty container in here that fills up all the space that makes the link the problem we have is alt text so or excuse me like uh what the screen reader is going to read when it brings it out so we when it reads it out so we can't you all we can put in here is a static Aria label so we couldn't put the names of these posts dynamically that's something I've talked to generate blocks about is being able to somehow bring in this Aria label where we could bring in the name of this post dynamically which would be a huge help there is all the also the option for the wrapper but that's going to make all these things inside of it uh links and sometimes like if you want this tag to link somewhere else sometimes that's a problem so I'm just going to leave this on hidden link for now and we'll just uh we'll realize that we have some improvements we can make on accessibility of this we'll refresh this and now all of that links now we can see these images are all about the same size but this one gets a little bit taller so we have a problem with consistency on that so let's see um we could probably just reuse this cowboys featured image class although the name's not going to make sense anymore but if we put this on the image it's going to constrain that to the 16 by 9 aspect ratio let's see they're all the same size now which looks a whole lot better so it might be better to go go back and rename that class to something you know more generic to cover all these cases but that pretty much works and of course these all link to the next blog post now I didn't notice but on theirs there's no real indication that you're hovering over these other than your pointer changing and they have these real sharp edges on everything I tend and we'll go off script here we'll change their design a little bit I tend to like to put just a little bit of rounded corner on these and we'll go with four pixels of Border radius and we'll do the same with this featured image up here just to make it match save that and you can see now just with that slight little radius on it first it just makes it look a little bit cleaner same thing on these cards they just look a little bit more polished I think with the rounded Corners compared to these straight corners but that's a that's a personal preference more than anything so the other thing we could do here and something I'll often do is we can grab this post template and we can give it a little bit of a shadow on Hover so it's more apparent that we're hovering over something so go to the effects here this is all in generic blocks Pro uh we're going to say this is on Hover and Target itself probably go with zero pixels offset offset on the horizontal 5 is probably okay on vertical and maybe we'll make it real wide and then we'll just screen back this color a lot more it looks pretty decent uh we do need to add a transition here so it's not so quick and change this to ease and out and I'll usually go with like 0.3 seconds and now when you hover over these it's a little bit more apparent that they're links let's refresh that take a look at what we did so yeah I do like that a little bit better it makes it a little bit more obvious that you can click on these things when they when they glow like that all right so I think that's you know there's a few things I like doing on some of these we'll go ahead and write a little bit more CSS because there's a few little tricks I like to do when I'm doing these blog posts that I think is really helpful so the first one is um to refresh this first one is when you drop an image Block in here you have to remember to add bottom margin to it otherwise your text underneath it is just crammed right up against it and what I don't like about having to do that on a one one-off basis you got to remember every time you put an image inside of a blog post to add margin that's kind of a pain in the butt and inevitably you're going to forget so a lot of times what I'll do because I'm going to do a few different tweaks here I'm going to go back to this container here that holds all of our all of our Dynamic content we're going to give this a class just so we can Target things inside of this so we'll just say uh Cowboys post wrapper go ahead and copy that save it we can refresh this again in the customizer all right so what we'll do is we'll Target that Cowboys post wrapper and then we can say images so IMG so that's basically going to Target any image that's inside this post content area now it's not going to Target this featured image here because that's inside of another container that doesn't have this class but what we can say is just uh margin bottom and we could say one in maybe even two and so you can see there's that much space in between there I think my default right now is set to like 24 pixels um there might be a little bit more down here maybe we say 1.5 just to even that out a little bit so there's that spacing and now because this is just done in CSS it's just going to happen globally across our site and we won't have to remember to do that the other thing I like to do um and this is real Handy having that that class on this container is when you're looking at blog posts like this these headings in here look like they just kind of float they're about as close to the content above them as they are below them and just in proximity it makes it hard to tell what these things go with so one trick that I'll do a lot of times see we'll do our H2S we'll do our h3s I don't know why it's giving it a border and we'll do our h4s and what I'm going to do is do margin top and we might do like 1.5 m M and so what that does is just give all these headings a little bit more top margin so they're further away from the paragraph that precedes it and closer to the paragraph that they're connected to and it's a subtle little thing but I think it does help with the readability of the blogs we might want to go ahead since I'm not going to mess with all the customizer settings here we might just go ahead and make the font weight on all these bold just while we're looking at it but I do think those little things help out quite a bit just in the the readability here all right so the next thing we need to tackle is the responsiveness on this so I see we got quite a few people watching here so if y'all have any questions or you want me to shut up just tell me here in the chat be glad to do that all right um so we could go through and see exactly what they do but I think this is going to be fairly obvious let's take a look in the customizer first I like to preview all this in the customizer because we can flop back and forth between desktop and tablet and mobile real easily so the image now is going all the way to the edge I do feel like we need a little bit of padding there this text is brought in but when we bring this image in I kind of still want this text to be a little bit more narrow in fact while I'm looking at that text looks like all this text is pretty small in comparison so again we could do this through the customizer settings but since we already have this class set up I might just say font size 1.25 m and line height we'll do 1.7 so that bigger text should help make this a little bit more readable as well all right back to what I was saying um we'll bring in this image sum so it's not right up against the edge but I still think the content in here should still have that same look of where it's more narrow than the the featured image so I think we might have to give this some more padding on tablet and then when we get down here to these posts we probably just want to go with a two column grid and all of this looks pretty decent still all right so let's tackle this so we're going to go into this top container I'm going to leave this with the same but when we go to tablet here I'm actually going to change this padding to maybe something like 96 on the left and right and then we'll have to do the same thing here on the dynamic content section 96 96 and here were our featured images I just want to give that a little bit we'll say 24 and 24. and then what we say down here on our featured our our related post down here we'll go and make the container width for these 50 so they go to two side by side but now we need some vertical Gap as well so we'll just match that 24 and 24. go ahead and save this and if we just open up another post that should refresh it here we go okay so now you can see this this section that was kind of inset on the desktop it's now in set here on tablet as well with the image going a little bit further and I do like that better um this section here is actually wrapping to two lines so I think we need to address that this content area looks pretty good and now the related content works pretty well so let's see what we can do about this here um so we'll get back to it's going to be this grid here these are set to 50 50 I believe I wonder if we do 66 and 33 but that fixes it so there we go so now all that's on one line and we still have room for all our social icons so I think for tablet that's pretty good now I know we'll have some changes we got to make on mobile obviously this padding is way too much here I think this padding is even too much on the image this is stacking kind of funky and then these probably just need to go to a single column so let's go tackle that first I'll jump here to mobile we'll grab these post grids and we'll change this to a hundred percent so those take up all the space and then in this content section will change I usually go with 16 pixels left and right on the content areas we'll do the same here on the image actually you know what we might go with eight on the image and then go with 24 content and 24 on this top one as well let's take a look at that that way we can still kind of have that effect of the content areas being a little bit more narrow than the featured image so yeah it's it's subtle but you can see it comes in a little bit narrower I don't know if that looks like it's on purpose or an accident hey Mark no I'm not using uh a social share plug-in right now uh I was saying earlier I might go back and use novashare to actually set all these up if we have enough time here I do have kind of a hard stop uh so I just put in buttons for the time being but I'll go back um if we have time here I use Nova share anytime I got to do this social share stuff it's really easy to set up it works really well and it's made by the same people as perf matter so you know the performance of it is all good all right so we need to tackle this top section here I actually think obviously these buttons need to be left aligned but I think these buttons need to come before the author and I think that the name still has plenty of room to go to the side so what we'll do here is we'll grab this container with the author and we're going to change the order of it to two and change the order of the social share buttons change the order to one so they stay above and we can grab these buttons and left align them and we probably need to go to this grid and give it some Gap in between so we might say something like 40 pixels just to give those some space and then here in this grid this is going to full width now so I think I want to keep this fairly contained we might go with 25 percent and 75 percent let's save that and take a look at it just open a new post so it refreshes okay well obviously that's not looking great now but I do like these social shares kind of connected with the blog title and then the author there's probably too much space here and we got to fix my messed up image now so let's see I wonder if we just change this to a hundred percent and get rid of a height I don't think that's gonna work either so what if we just did like 40 pixels and 40 pixels maybe 60 and 60. looks like that's going to shrink it too so maybe 1550. so that's better for sure still now there's too much Gap here we could fix this by how much Gap is in between it just to make sure they don't hit each other we could do eight that might be enough to get us across looks the same Sue let's see we could go back to zero and then make sure that Flex grow is on I bet that will do it by giving that second column Flex grow it should get all the way across there so yeah that looks pretty decent I do want to fix the amount of space in between here so we can grab this container here which is now the second container and we make sure we remove the vertical Gap there and I think that should help let's see the outermost container it has 40 maybe we'll go with 24. open another post so it refresh and it doesn't look any different hmm no that's right this is the one we want to remove vertical guy font so it's this container here which is now moved out of order into the second place that's where our extra 40 pixels were coming from here so open this back up so that's better then we go into our post content and then our related content all this is linked so yeah I think that's just about it on this one go ahead and hit publish on that refresh it on the front end take a look at our work foreign comparison to the original looks pretty dang similar it's definitely a layout I like I think kind of has everything you need obviously the post title date the author information share information is great if you get some shares on your blog this trend of having the you know obviously you want the content fairly narrow down here just so it's legible if it if it spans all the way from the left to the right it's really hard to read but this effect of the image like a big featured image being wider is something that's you see on a lot of blogs now and it's I think I have it on my blog as well it's something I really like but I think this one is just about done so we will uh we'll put this one in the books and we'll take a look at the second one we want to do so the second one is on zoom's blog uh I picked this one because I thought it had a lot of the same things but it's definitely a different layout we also have uh of course the author information over here on the left but this social share stuff kind of sticks to the blog here which is a nice effect and then we have some related posts at the bottom as well but they do these a little bit differently so we'll go ahead and Tackle this one next so to do that I'm going to use this same install I'm just going to take off the display rules here so it no longer uses the Cowboys one we just did it's going back to how I have it defaulted and we'll go set ourselves up a new element all right and we'll call this Zoom blog template we'll change the element type to content template make sure the editor width set to 100 and let's take a look at what we got so um what we have here is kind of a two column layout this I'm going to get rulers here so we can really look at this so This left column aligns with their logo here so everything's perfectly on the left but on the right you can see this is the edge of their container way over here but this post doesn't go quite that far it's actually here and well my there we go uh you can see there's nothing really in this right hand space and I'm sure that's to keep this content from being too wide still I think this is probably too wide for legibility purposes but um we'll do something similar here all right so go ahead and drop in a container we'll put some padding in it maybe 80 24 80 24. and we're gonna have to drop in a grid so what we're going to want is a two column grid I think this first one we can probably start off with maybe 25 percent and then the second one will do 66 percent you see that's not going to add up to 100 in fact we might even be able to get away with 50 50 looks a little bit narrow we'll play around with it but because we have 66 and 25 we're not adding to 100 so like theirs it's not going to go all the way to the right Edge now we do need a little Gap in between both of these so we'll set a horizontal Gap up here maybe 40 pixels for now let's take a look at everything we need I'll go ahead and close that one out and close these out so we need the categories up here the H1 and then the date so in here we can add a heading and change this to a div and we'll enable the dynamic data change the content source to list of terms and again this doesn't show up in here it's just a a flaw in here right now but it is going to pull in the categories these do have a blue color I don't have a blue color inside my palette so we'll just uh we'll just make one up for now I think when you hover it gets lighter yeah so we'll grab the same blue and we'll go with kind of a lighter color on it and we can change this in the dynamic data I'll also link to those term archives so you can see it automatically puts the underline in here that's the way I have my theme set up one thing I do I have kind of a list of helper classes I put into my child theme so one of them is one that's called No underline and I'll use that uh I just basically have a CSS rule that says if it's a link and it has this class don't make the text decoration none that way I don't have the underline under it so if we publish this and go look on the front end we should see oh I gotta Target it to the right posts so go to post all posts update it again and refresh it and we see it doesn't have the underline here on the front end because that CSS is kicking in so on theirs it is all uppercase so we'll change the text transform to uppercase might be able to go with a little bit smaller change the font weight to bold I'll add just a little bit of leather spacing in there all right my Blues don't match but you get the point all right so now we need the H1 in there so we'll change this to headline H1 will make it bold I know it's a lot bigger so we'll try like 56. and we'll change this to Dynamic data and bring in the post title and there's no space in between here so what I'll probably do is just put in a little bit of top margin here maybe 24 pixels and we'll save that refresh it all right that looks pretty decent obviously fonts don't match but I'm not gonna I'm not gonna fool with that all right and then underneath this we need to add another headline for the date change that to div as well and enable Dynamic data and change this to sorry I was reading comments here change the content source to Post State where is post State there it is uh that needs to be a little bit smaller too so we might go again with Maybe 14. which might be a little bit bigger all right Roger says uh can you do one with a cover header is that even possible with g generate press genre box Roger can you help explain what you mean by cover header if you post a link in the chat here I'll pull it up we could take a look all right so now we got that date in there it does seem like there's some more margin in between those so I might change this to maybe 32 just to space it out a little bit all right and then they have the featured image here so we've done that before we'll do an image block and we'll change the dynamic data to featured image we will need some space in between there let's see what theirs is like maybe 24 pixels on the top and update that and take a look all right that works just fine now our post content so again we'll type in Dynamic content change this to post content we do need some space in between those and because I don't have all the block controls on this Dynamic content I'm just going to go to the image we'll just give it 24 pixels a bottom margin as well that should space it out evenly and now we have all our post content here uh we'll have to add all that CSS again or I don't remember what I called I think I called the other one Cowboy something so uh yeah so we could actually go to this container here we'll open up the list view the uh the container that has all this post content in it we'll go ahead and give that a class again we'll call this Zoom vlog all right Zoom content wrapper copy that all right uh pin two is asking about the cloudways blog this is a cover header without the sidebar and with and with a sidebar I'm not sure what you're talking about Roger if you posted a link it didn't come through here so you might try it without the.com or something I don't know if if YouTube's blocking a link if you're posting a link I can't see it all right uh so I just added that class we'll refresh this and we can say I know we had a few things we'll just do it all again um we wanted actually how should we do it we can just add this in here add that space on the image just like we had on the other one and then that should do it for now we might want to go ahead and change that font size too so we'll add that rule in here to make the font size bigger I think that looks pretty decent all right so now we need to tackle this sidebar over here on the left I'll go ahead and get rid of my rulers all right so we have the author image it's linked to the author archives the author names linked to the author archives and kind of like the other one where we had a title and we have a follow button so I'm not sure how this works see what happens it brings up a pop-up we're probably not going to get to all that but we can at least put the button in there and then we have this section here which is sticky so we're going to write some CSS for that but let's go ahead and just get all our elements in there so the first thing we're going to do is drop in an image we'll go to the dynamic data and we'll change this not post meta we want author Avatar this one we might want bigger maybe 100 pixels and they have that border radius on the top right and bottom left so we'll go ahead and save that and take a look see how close we are all right and in comparison they're pretty close sized we do have a lot more space in between these so we might have to bring in this column a little bit more narrow but we'll go ahead and get some more information here before we decide I got a long last name so all right so we'll change that to a paragraph because we don't need it to be a heading and we'll change this to name and I know we want this to be bolder and probably bigger maybe 24 pixels save that take a look at it theirs might even be a little bit bigger and there is a little bit of space here so I'm gonna grab this we might say 20 .6 and we'll give it just a little bit of margin above it maybe 16 pixels we'll close this at the bottom because I know we're going to put they have again we could use ACF to bring in some Dynamic data and put in some kind of uh field inside the user for their title but for now we'll just copy this and do it static content oops paste that in there it is a lot smaller I'm going to change this to generate blocks and we'll do 14 again we'll change the color to that lighter gray all right save that and take a look now that we got this coming out so far these look close enough but theirs is definitely skinnier so maybe on this column we can change this to like 20 percent update that take a look at it yeah that definitely looks better all right so underneath that we have this follow button like I said I'm not sure exactly what they're they're using a pop-up there we'll just put a button in there for the time being say follow and we can give this a little bit of Border radius and we'll change the Border color maybe to a lighter gray and a darker one on Hover I don't know what theirs does exactly ah there goes blue okay easy enough so we'll grab this blue color that we used here I'll say on Hover we want the text to be that darker blue color and we want the background to be the same color except we'll just tint it back to maybe 10 percent or maybe nine percent if my fingers won't get us there so now when we hover over it it should change colors like that and it's like we don't even want a border color say white I think that's about what theirs is doing it's pretty close anyways do you feel like the padding's a little bit big so we might change the top to like eight the bottom to eight take a look on the front end Leonardo thank you very much I'm glad you're enjoying it sometimes it feels odd talking to myself so I'm used to having somebody else on here to talk to so I feel like I'm completely boring all right um so that pretty much does it for that oh we do need to go back and Link things so there is too much space there I think theirs is about the same we're probably okay but we do need to link this image so we'll go to the dynamic information here and we'll link this to the author archives and we'll link this headline as well to the author archives and again this my theme set up to put an underline under the link so we'll just use this utility class I have of no underline that should fix it on the front end and now that's linked and that's linked let's see what there's just turns blue on Hover so we can think I still have that blue color in my clipboard so we can just say link on Hover change it to that blue color should be good there all right so now what we need to figure out is doing this sticky sidebar information here so let's see here what I'm going to do okay so let's just go ahead and set all this up uh I'm going to add a container in here that's going to hold all this I'm going to give this some top margin we'll say 80 pixels just to move it quite a bit of ways away and then inside here we're going to have buttons so this first one will set up I think the first one was Facebook we'll go in here to our icons we'll change this to Facebook and we'll get rid of the text and these had kind of a gray background we'll go with our light gray here maybe darker on Hover maybe there's turn blue that's that same blue thing okay so on Hover scale this back to 10 percent and the text we'll change it to that blue color we want the padding all the way around to be even so theirs was fairly decent we can say 16. and then the Border we'll just put in a big value so it's a circle and we hover it turns that blue color give it a placeholder now so that should work for the buttons now you can just put multiple buttons inside of this button wrapper but it's going to stick them next to each other and you can go here and stack them vertically so that'll work but we will have to put some margin in between them so go ahead and just say 16 pixels there and we'll just put in some other social platforms for now say Twitter duplicate that huh put the margin on all of them before I get crazy duplicating all right so Facebook Twitter what do we need LinkedIn and we'll do another one for email change that to a little envelope all right so let's go take a look at that on the front end here all right obviously it's not sticking but the rest of it seems pretty decent and in comparison to zooms theirs might be a little bit smaller but we're we're pretty close I think all right so now we're gonna have to set up some classes and write some CSS to make all this sticky so I put these buttons inside of a container for this reason because I want this whole container to stick so we're going to call this um let's see here we'll do sticky social wrapper and then the container that holds all of it we're going to give it a Class 2 and we'll say uh sticky social track because that's kind of the track this is going to stay along let's go ahead and update that we'll publish our changes in the customizer and refresh all right so what we're going to need is we're going to need to make that track make sure it's a hundred percent of the height now when you add a container and generate blocks it adds a container but it also adds an inside container and we need that inside container to be 100 and by default it's not so what we're going to do is say sticky social track which is what we named that and then the GB inside container which is a class that they automatically put on the inner container inside of it and what we'll have to do is we're gonna have to say it's a height of a hundred percent and just so you can see what I'm talking about we'll just change the background color so you can see it for now so you can see this whole container here is red that's the track these are going to sit on um let me get rid of that I'll say position relative and then we need to grab our sticky social uh what did we call it wrapper and we can say position sticky top for m and so now when we scroll those will just stick to the top and it's actually Four uh four M's away from the top in fact I can see that was just doing it a second ago I did test all this earlier and I think I had some of that in there so let's do that again just to make sure I didn't screw anything up so uh this sticky track just again so we can see it background red uh you can see that whole track runs the length here but the icons as we scroll don't stick so what we need to do is do sticky social wrapper that's going to grab that container that's holding all these buttons and we say position [Music] sticky and then we got to give it a Top Value so it's not crammed right up against the top so we'll say 4M and now as we scroll it's just going to say sticky inside of there until we get to the bottom of this container now there's it's there's nothing below it for us to continue going but here when we add the related posts there will be so we can get rid of that background red on there and now all that's working we'll publish it check it on the front end and as we scroll everything sticks so that is perfect if you'll hold on just one second bear with me foreign there's somebody outside my house laying on their horn okay so the next thing we need to tackle here is these related posts so this is going to be very similar to the one we just did it's just got a couple a couple differences so again we're going to add a container at the bottom here so we'll just insert a container after do container give it some padding maybe 80 24 80 24. and we need to work on the colors the background is kind of a light gray and there says you might also like so we'll do the same thing we'll leave this in H2 you might also like and then we have our post grid so theirs is three columns it's got the image the tags the title and then the author information all right so we'll jump back in here we'll do a query Loop we'll start off blank we'll drill down on this so we know we're gonna have to give it a gap there's got a pretty big gap so we might go with 40. we're going to change this to 33 percent and the first thing we're going to drop in there is the featured image so we'll get image change the dynamic data to featured image we'll go back to our query and we'll say we just want to show three and we want to exclude the current posts so we can go down here exclude posts current post okay and then inside this container we want to have the categories so we'll do this as a div paragraph probably doesn't matter enable the dynamic data change the content source to list of terms and we'll do categories now styling wise these look basically the same as this up here so we'll just cheat we'll grab this and copy it I'll paste these styles except there's her blue oh it's because it's not linked yet so we need to link this to the term archives now it's blue and we'll need to add our no underline class to it it's pushed up against the image pretty close so we can add some top margin there maybe eight probably good and we'll do a heading block again we'll change this to an H3 since it's nested under this H2 and we'll do Dynamic data the title these look a little bit big and they need to be the Bold font so that will go with like 24 I need some top margin on them as well maybe 16. and then the author information so this is going to need some bottom margin on it too I'm gonna do like 32 because it seems like that grid is pretty far away from it do a grid again we'll do two columns on this one we're going to change that we're going to zero it out and then make sure Flex grow is on in the second container so it fills up the space we'll do an image and we'll change the dynamic content on here to bring in the author image and it defaults when you do that it defaults it to 50 pixels that might be just fine we do need to add some space in between of these 24 might be too much yeah we probably need to go with like eight Maybe 16. so drop in a heading we'll change this to a paragraph or div I think there's this kind of bold yeah the name is bold it's a little bit smaller and we'll change the dynamic content to name and then underneath that they probably have titles again right nope they have the post date so we'll do another headline change it to paragraph or div doesn't matter again this needs to be smaller maybe go with 14. and we'll change the color to the slider Gray and dynamic content and bring in the post date now we have too much space in between these and that's from this margin on there we might be able to just zero that out completely and I do think these should probably be Center Line let's see what theirs is yeah it looks like it's centered in fact the image might even be too big we'll go back to this grid as you can see here we're on the grid and we'll change this vertical alignment to Center so that'll Center those up uh once we get rid of the bottom margin on here uh so this text we want zero bottom margin update that come take a look on the front end all right so we need to give it a border radius to round It Off this probably needs a little bit more space let's see there's our spaced out pretty evenly between these two all right so let's see we'll go ahead and click on this image and just give it a big old Border radius so it's round and then I think I gave this 16 and I gave the other one eight I wonder if we just go with eight with both of them so that's better for sure uh these images you can see I think they're a tiny bit different proportions so we need to do our little trick again I'm just going to say I'm going to call this one something a little bit more generic so we'll just say uh blog card image copy that update it jump in the customizer here and refresh and just to make sure these are all the same proportions I'll say blog I've copied it no I didn't blog card image aspect ratio do 16 by nine again I'm going to make them all the same size and we need to do object fit cover to make sure they're not squished that works pretty well let's see I want to check their sizes on this because mine just looks funky so these are 22 and this is 20 that can't be right saying this is 22 but this is 20. I don't think that's correct let's go back here I'm going to change this make it a little bit smaller 14 maybe make these 24 it's better publish those changes on the customizer okay and we need to make that bold oops bold all right and then the other thing theirs does is when you hover over this image you get these rounded corners on the image so we'll have to write some CSS I think for this but we could do it let's see let me do blog card image since we already have that class and we'll do hover say border radius and it's going to be zero pixels maybe 40 pixels zero pixels 40 pixels and now we get that same effect except we need it to transition so we'll do Transition all 0.2 seconds ease in out so now those do that nice and smooth all right let's see what they link here so the image is linked to the post these tags are linked to their or these categories are linked to their archive pages of course the post title is linked to the Post and the author image and title is linked to the author so let's go link all that up we can grab the image here go down to our Dynamic content and change this to link to the single post we'll have these categories I think they already linked to the term archives we'll have this link to the single post again that's going to put the underline they don't have it so I'll do no underline which I just have set up on my CSS for the author we're going to change this to author archives again no underline and the image we want to link as well to the author archives so if we update that refresh it oh maybe we didn't save this okay so now we have our little hover effect this links to the post this links to the category archives this links to the Post this links to the author archives all right so that pretty much takes care of all this on desktop uh what's the name of the browser add-on to see all the details of elements this is called hoverify uh it's been back I bought it like over a year ago on appsumo but it was just back on appsumo it is a really really handy extension it does all kinds of good things so yeah it is uh it is on sale on appsumo right now for 49 so you can do like I just did and inspect elements and it'll tell you all about them which is Handy uh it will also do a little color eyedropper so you can pick colors from the page you probably already have something that does that what I found is this extension lets me get rid of like five other extensions uh assets you can click that and download all the assets from a page including images svgs videos PDFs all that um oops you can see these responsive views so you can see it across different device devices which we got to work on the responsiveness of this page including one tablet down here at the bottom uh you can also do some debugging it has built with built into it so you can see all the technology you can also do screen shares or screen captures which is Handy and inside this inspect there's a lot of other things you can do too so one thing I'll do often is hit this grids button excuse me the grids one so I can see where all these grids line up which is really handy sometimes but yeah it does all kinds of stuff I would definitely recommend it all right so now we got to work on the responsiveness of this one so I have a feeling this one's going to be a little bit more difficult than the last so let's just see kind of where we're at right now we'll jump in the customizer scroll to the top and we'll go to tablet so in tablet I think we could probably still keep this two column maybe just make this column a little bit wider and finish this out to whatever 100 percent is and I think we're good with this still being sticky I think we're okay there um the three I think we'll probably just leave three columns there it's a thing that gets hard when you're kind of stuck to these finite numbers is if we went to two columns but we have it's only showing three posts and we have an uneven amount which is kind of annoying uh so we'll probably just leave it three on tablet and then go down to one on mobile that's just kind of a concession all right so let's see here we're gonna go to this first container change this to tablet and I think instead of the 20 we have we might go with 25 I'll change this one to maybe 75 let's just take a look at that kind of guessing numbers at this point we can go back to tablet that's okay yeah kind of cramps this but maybe if we made my name smaller that might actually be all right so maybe on tablet this goes down to like 18 pixels I think would probably be okay at that point I'll just click another one of these posts so honestly I don't know I don't hate it I don't love it let's see what Zoom actually does so we'll use hoverify and we'll go into responsive go down here to the tablet so they actually don't keep the two columns here so this gets a little bit tricky I probably should have looked at this before because if we want to do this we're going to actually have to change the way some of this is laid out um thinking now because all this is over on the side but it needs to go in here so I guess we we could kind of cheat so we could just say this container here we'll do that in a second what we'll do is we'll let me see did they they made the picture around they put the posts okay so what we're gonna do we're gonna cheat we're gonna go in here and drop in a grid two columns in fact it's basically going to be this same grit here so let's just grab this one and really cheat copy that go up here to this grid and we'll paste it in okay so what we're going to do is actually we're going to put that inside of a container too this is probably not ideal but I'm too far gone on this to go back and fix it all now all right so what I'm going to do is put in this author information here as well and on desktop what we'll do is just grab this container that I put this author information in we're going to Advanced and we're going to hide this on desktop and then we're going to go into tablet and we'll make sure that it's shown on tablet and mobile but we'll grab this left column and we'll just hide all this on tablet and mobile and we can go to the column with all the content in it and just go to 100 percent so now if we update this open a new post so refresh yeah I'm with you TJ the the tablet version might look better all right we'll refresh it it's taking forever so on desktop we have the sidebar and then on tablet this is kind of jacked up so I'll have to fix that um oh we need to hide this date too so this date actually needs to be hidden on tablet and mobile and why are these not aligned so a margin on that and it should be go to the grid should be Center aligned refresh that now all right so I go to tablet we have these all funky and I'm not sure why [Music] all right let's refresh it and try to figure it out all right so we get to tablet I have my tools kind of off screen here so that's why you can't see them all right um come on now all right I might have to dock this again why is this I don't know why we have this extra vertical space right there hmm if we change this to top does it change anything it does I don't know why it's doing that though because it should be centered but not gonna argue it worked so like I said we kind of cheated here to just show and hide things but uh it's okay I don't know what happens to their social sharing buttons so that's what I was talking about when we go to when we go to two columns here it gets uneven and there's just this Blank Space which drives me crazy okay so then they have don't forget to share this post so we could cheat on that again we could I'm just gonna grab all these buttons here copy that go to the bottom of the post whoa I think I refreshed so we'll say buttons we'll paste that in there and we'll change off this stacking vertically grab all of these they don't need bottom margin but we'll give them some left and right just to make sure and there was also hey don't forget to share this post and we can make that a headline Center align it I think that's kind of what they had right so then we can just go back on here again and Advance we'll hide this on desktop and we'll hide that on desktop but when we go to tablet they'll all be here get rid of Stack so to show it here when it's in tablet we might want to add a little bit of margin here okay that's that's decent it's a compromise like I said that's kind of the cheating way to do it um we do have some of that content in there twice but showing it hiding it based on on device size isn't the worst idea I guess uh and it will get us by all right so let's see here we'll go ahead and update this we'll refresh it in the customizer and take a look again so we know our desktop's okay when we go to tablet there might be too much space there but we could fix that let's see here put it on this I'll just say eight um that's okay featured image is good post content's good we'll leave this three columns even though I don't love it we could go two columns like they do but then we have that empty space thing so if we went down here open my list view back up post template we could change this to 50 go back to our grid and give this some vertical Gap as well update this and I like the size of these posts better now but I really don't like this empty space so that's why I try to go with even numbers it just makes my life easier but we'll do it like they did it all right so now when we go down to Mobile so I think we're okay here this could be smaller so we'll just kind of do these changes as we talk about them so this instead of 56 again I would set this in the customizer we might go with like 32 38 . this container has too much padding so 24 on the sides is too much we'll go 16. all right um well that's okay that's uh this might be a little bit too much space we can fix that change that to maybe 16 pixels at the bottom uh these buttons keep going back to Stacked we don't want them stacked this can probably be smaller and then it's post template we can make these 100 refresh that and take a look again we'll take a look at the cloudwise blog here in a second but I I don't know what it looks like off the top of my head so we'll just have to look and see um all right so all that's good this shows up on mobile and then all of our posts so I think we're pretty well done on this one too again I would probably go back in and do some of those tricks like we did before with the making the font weight well we can go fix font weight in the customizer but uh giving these some extra top margin these headings in here like I did on the other one just to space them out a little bit in fact since we're not even looking at the other one anymore I'll just borrow this there we go so yeah I think that one's done as well and we've learned a little trick on making the sticky sidebar which I think is nice all right publish that take one more look on the front end get rid of the inspector and we're pretty much good to go we can go across any of these posts and we should have the same same layout here it looks pretty decent all right so you want to take a look at the cloudways blog Cloud Waze blog I'm guessing they're all the same all right so we got it kind of Center aligned here these didn't these kind of appeared didn't they yeah all right yeah I don't think this is a a huge issue so give me uh give me your word Hannah chat do you want to see me try to build this one out is there something specific about this layout that you like or you just want to see how this one's done let me know and we'll we'll see what we can do here while we're at it might have to obscure in fact let me drag this out of the way for a second I'm going to install a plug-in and I don't have to show everybody my license and have to go blur it out um what I'm going to do is install the Nova share plugin so we can do some of the social share stuff on this one foreign if you can try this kind of headings please hey a deal if you'll uh maybe take the.com or whatever out of the URL I think uh YouTube is blocking any of the comments that have a URL in them because you're the second person to reference something but I don't see the actual uh I don't see the actual URL so if you'll try to just send that where I can add the uh add the.com or whatever it is in there I can do that all right I'm just adding this plug-in license here and then we'll take a look all right should be good so all I did was install the Nova share plugin and get it updated all right so we'll go back into our elements we'll disable this Zoom one so we can work on the cloudways one um pin two I think you were the one that that suggested the cloudways one if there's something specific about it you wanted to know about let me know otherwise I'll just try to recreate it from what we see so I've got elements add new choose block I'll do Cloud ways blog change this content template change it to 100 I'll go ahead and say all posts okay all right so let's go examine what we got here so again we'll ignore all the menu stuff we have this little tag for the category the H1 the author information the featured image all the post content down at the bottom we have the author let's see they have a couple things probably brought in here dynamically I'm guessing some of these ctas are done dynamically or done inside their post content but we can do this share this article maybe this little uh call to action the author bio and then they have some more cards here as well all right so first thing I want to see I want to see how wide this section is so this is like 780 pixels with some padding gets down to 750 so 15 will go 16. uh so we'll drop in a container here give ourselves some padding just for breathing room and we'll say this goes to what did I say 7 80. all right so first thing they need in here is this heading and then we'll just make it on nh6 make it a div and we're going to bring in hey a deal again if you'll if you'll try to like put in the the URL you're talking about but without the.com or with something to make it not a URL I think YouTube is just blocking the links in the comments so I don't know what page you're talking about all right so for this we're going to do list of terms and we'll do it's going to be a category um and we want to make it this little badge so I'm going to fake the colors because I don't have the patience to go do all that right now but this is all uppercase it's pretty small give it just a little bit of letter spacing and what we're going to do is give this a background color go with this blue again I'm just going to make up a blue but we're gonna screen that back as I plug in my PC it's or my Mac it's about to die we'll screen that back to about 10 percent and we'll give the text color that same blue color and what we want to do is change this width so instead of the regular width we want to go in line width so now it's only the like the max content width we want to do some padding so we might do eight might be a little bit much do 6 16 6 16. yours might be smaller theirs does look pretty small I'll go for 12 or 12. all right and then it has some border radius we'll eyeball it maybe something like that and now we need to center it so to do that we actually have to grab the container and Center align the things inside that container so now we should have that that kind of set up there obviously my colors aren't the same but you get the idea all right now we need the H1 so we'll change this to an H1 we'll give it maybe 24 pixels of top margin enable Dynamic content do the post title again we'll change this to bold and let's go take a look at the front end all right so obviously theirs is way smaller that's really bugging me all right inspect it it's 12 point font so on ours we'll just do the same to match 12. and then we have the post title and then now this two minute read thing I would have to install a plugin to do that so I'm not going to worry about that but we will put the post date and the author here all right so what we probably need is one two if we're going to do the dash we might skip the dash just so I don't have to do all that extra work all right so we're going to do a three column we're going to make this first column we're going to zero it out and then we'll do Flex grow on both of these and it should grow equal amounts so in here we'll do an image turn on the dynamic content and do the author Avatar it's going to go to 50 50. let's see here what was theirs there's this very tiny it is 30 pixels so we'll go in here and make ours 30 30. we'll change the Border radius just a big number and they actually have a small border around there so I'm going to turn on the border and we'll give it a border color we'll give that that same blue color there's actually lighter so and we'll go with the lighter blue let's update that take a look at it all right so now it's got that in there so now we need the author name so do a headline I need to left align that get rid of the bottom margin so it's centered evenly in fact we need to go here and set this to vertical alignment center all right um that should be a paragraph I think this is old 16 Maybe and we'll go to Dynamic change this to name and we need to give it a little bit of space in between so we'll go with like 16 pixels of Gap actually we need this one to shrink too because the hmm now I'm rethinking how I did this because we need all of this to Center let's go ahead and see how far we get that's a good one I don't think I've had to do that before so we shrink that one in and this one huh I might be scratching my head 16. no bottom margin we'll do post date let's just go see what kind of mess this is on the front end yeah so let's go back to our grid and we want to Center align it right I didn't take the girl off of that I don't think that's going to help us any though it's still going to be off to the side right now yeah maybe in line with everything I don't know if I can inline with the image though that's my only hiccup is the image in there because I could stick these two things in the same same container delete that container and do in line width for that inline width for that that put those two next to each other that might have fixed it right there there you go Dan Saves the Day thank you Dan all right um they did have so that's one thing when you use the dynamic data here in the generate block settings you can't put before content but if we did it here with the generic press settings and did post date we can actually do before text so we could do this little Dash and maybe add just a hair of margin on the right to this and get that little Dash in there too much so that would work good call Dan on the inline yes put them all in a container oh and now you said you don't have to we don't have to do more of the cloudways blog you just want to see The Heading okay well there you go there's the heading uh so yeah that might need to be optimized a little bit but I think that definitely works I mean to be fair the rest of this on this uh this layout is basically what we've done before except for the social share stuff why don't we go ahead and get this content in here and then I want to play around with Nova share so I'll go ahead and put in the featured image give this a little margin on the top margin on the bottom and then we'll add the dynamic content post content and we want all this to be left aligned so I'm actually going to stick this in a container and make this container left aligned all right so that should fix that we should be looking good now okay so let's talk about the social share stuff so um we won't go to all the trouble of building out everything else since uh they didn't want to see the rest of it but we can play around with um Nova share all right so what we're going to want in Nova share here is this floating bar option so I'll go ahead and enable it let's see on the cloudways one they have Facebook Twitter pin sticker Pence Pinterest and Linkedin I really mixed all those up uh Facebook we need Pinterest okay we're going to show this on the posts the button position it's default it's going to be left breakpoint will leave alone we might want to hide this below yeah we're going to hide it in Mobile breakpoint so the top offset we'll just stick with the 25 percent that they kind of default in here and this is going to offset it off the edge of the page so this is where we're going to run into this is a little bit different than what cloudways has but we do want this show on scroll and the scroll threshold this is going to be how far down you scroll before this shows up so for now let's just say I don't know 600 pixels all right and so for the button Style we'll say solid I don't even remember what theirs is now oh it's outlined I don't know what inverse is we can go look at all this um so inverse is kind of what we want uh button color theirs is kind of this grayish color so we'll leave it that gray button hover color will go darker gray uh we'll invert it on Hover what is theirs do theirs turns blue so we might have to write CSS for that um we'll say eight pixels in between them we don't want the share count on and we'll save it let's just go see what kind of damage we did uh posts all right so as we scroll down 600 pixels you can see now they're showing over here on the side so on cloudways they're right up here next to the container which I actually really like because they're close to the content you notice them and on here they're not so I'm not sure that I can hack my way around that um that's a good question we also don't have the option to give these like a border radius I don't know that you all want to see me struggle trying to Target all these things and write the CSS but let's just see how complex it is all right so no share buttons wrapper whoops Nova share button so we put on here Porter radius running out of ring [Music] I have to figure out what is giving them that border and this is definitely where you all don't want to see me writing CSS border none on this it's the wrapper hmm so yeah I don't know I don't think it's worth me uh y'all watching me sit here and struggle with the CSS I'm sure all that's possible um but this is what I use most of the time when I want social share functionality Let me refresh this so it's not jacked up but if you click on these it's ready to go and Nova share is super lightweight so you don't have to really worry about any of the uh performance issues with these um but you can do these floating buttons kind of like they have here or you can do them in line and you can place it like above the content or below the content or you can just do it with a short code so you can stick them inside your template wherever you want which is typically what I do but is the first thing I notice when I noticed on this cloudways one it doesn't show up until you scroll a certain percentage down and then it's here so that's one nice thing that's just built into uh Nova share is those don't shoot you can set that scroll threshold so all right we have been at it oh my God for an hour and 47 minutes so I think I'm gonna end this for now hopefully we learned a few things in the process today seems like my Mac did just fine stringing so I can uh I can do that with confidence now I didn't have all my camera and stuff set up so just the screen share for today but if y'all run across any uh any Pages like this you'd like to see rebuilt I love doing this kind of thing so just leave a comment on this uh video and I'll be glad to go back and do it in the future so hopefully everybody learned something today uh if y'all have any questions holler at me I'll be glad to help I love talking generate press and generate blocks uh and I hope you guys have a great Monday and a great week and we will talk with you soon bye-bye

Channel: The Admin Bar

Views: 11,621

Keywords:

Id: 1oaoml3LagE

Length: 108min 4sec (6484 seconds)

Published: Tue Oct 25 2022