Kadence Blocks: All About Row Layout

[Music] hello everyone this is carissa with summerlin studios and this is part of a video talking about the various cadence blocks and cadence pro blocks and some ways to use them and today we're going to talk about the role layout block which is arguably the most versatile block and also sort of the backbone of everything else and if you've used a page builder plug-in or theme in the past and there's a concept of sections or blocks this is essentially the same thing it gives you more control over the layout and spacing and padding between your various elements and as well as giving you columns to work with so to start off we're going to click our plus button to add a block you'll see i have row layout in my recent blocks because i just used it if it's not there you can just start typing it in and it'll pop up for you now right off the bat you'll see we have a couple things to talk about the first one going in order by icon here is the alignment now you have a couple options for how wide you want your block to be and some of this is going to depend on your theme and exactly how it sets the various widths i prefer to use a full width one unless i know i want it to be smaller because it's a little easier just to choose fill with and then go ahead and adjust exactly how wide it is later so i'm going to go with that we can also talk about our vertical alignment and that has to do with if you have more than one column um how things line up against each other so like if there's two columns and you want them to be the same at the top and then they just kind of continue down the page until they stop you can align at the top the bottom would align them at the bottom and they would start at whatever height they need to to do that and align center is going to line them up in the middle so they might not be exactly the same as the top and bottom but they would line up so the centers are the same and right now since i don't know exactly what i'm going to put in here i'm going to leave them aligned to the top but that's something i might want to come back and change later and the next thing we can change here is how many columns we have in our row layout now realize that you're not locked into this you can always come back and change your number of columns later and you can change the percentage of the widths and all that so this is basically just getting us started and then we can come back and change it if we want to so for example i'll just choose two to start and you'll see it pops in our columns here now the other thing to notice is whatever is outlined in blue and the icon here is what you're currently editing so it pops me right into one of my columns and if i look over here i'm editing my column now i'm not editing the row anymore and i want to be editing my rows still right so i'm going to come back up and click right above my column and this isn't an exact science sometimes you have to click around a little bit until it comes back to your row but now i'm back to editing my row layout so it's always something to be aware of if you're changing a setting especially some settings are you know that the exist in both like your padding or something make sure you're actually editing the block you think you are and you didn't you know pop yourself into a column so i'm back in my row layout and you'll see i have the option here that i can add or remove columns and then it gives me some default layouts so if i know you know i want to have something smaller on the left and then like maybe an image and some text on the right i can start with this but you also do have the ability to drag them too so if i come over here on hover you'll see you get this little icon with the two arrows and i can come in here and drag my columns and make them exactly the width that i want them to be so those are just sort of layouts for you to start from and then you can always come here and customize it one thing to be aware of too is if you start say you started with three columns and you realize at some point in your editing you really only want two if you have content in your third column and you go down to two that content goes away with the column so make sure you move it and then go down to two columns so you don't lose anything that you just were working on so i think for the purposes of this demonstration let's do [Music] two equally wide columns for now and then we'll come down and our next option has to do with the column gutter and what that means is the space between the columns so by default they set it to a standard 30 pixels which is sort of a little bit of a gap you can change it so that there's no gap at all or you can make it a little wider depending on the look that you're going for we'll leave it like that for now the other thing i want to point out while we're here too is you'll see these little icons at the top and these refer to your different screen sizes so this is desktop tablet and mobile and what that means is you can customize some of these values for the look and feel depending on your device size for the most part right now we're editing our desktop whatever we put in here for our values it's going to copy down to the tablet and to mobile and sometimes that's fine sometimes we'll want to adjust it if you know as you go that it's going to be something you want to change you can do it as you go or depending on your workflow you might just want to work through and fix your whole desktop page and then come back in and kind of customize it for the others i do want to point out the one thing that by default is different on mobile and that's how the columns are stacked so you'll see right now we're working with two columns next to each other but if i pop over to the mobile layout by default and this is sort of a basic responsive layout you're probably used to seeing it on your phone it's going to stack the columns on top of each other most of the time that's fine occasionally you might still want them next to each other on your mobile layout so just be aware of that and come in here and change that if you want them next to each other i will say the only time i i sometimes use that would be if i had say two vertical images next to each other because if they're stacked on mobile that can kind of be like a lot of image to scroll through so sometimes if they're not something you need to see close up you might want to put them side by side and then the other thing that i i love this feature that they have because a lot of page builders don't is you can change the order that the columns collapse so if you do want them to collapse on mobile and to be on top of each other but you want this one to go first then you can change the order from right to left and they'll collapse in that order instead so i think that's a really handy thing to be able to change so i'm going to come back to our desktop and that's mostly what we're going to work on for right now and for the moment i'm going to skip over padding and margin and go right into our background settings since i think what you set here sort of drives how you want your padding to be depending on what you're using for your background so we have the option to come in here and set a background color and if you're using the cadence theme it's going to pop in your theme colors here so you'll see these are all the ones that you defined in your theme in the customizer so you can use one that you know is the correct values here or you can set it any color you want it to be and then if you don't want to use a color you can also choose an image a slideshow or a video so if you're using a video you can put a link to an external one from vimeo or youtube and you have some options to customize it here you know if it's a background you might not want them to be able to pause it and you might want it to just play on a loop on mute and then you can also do a slider for your background um and you have some various options as far as your auto play speed and how you do your transitions that's sort of normal slides that show transition options here and then we also have the image background and this is probably the most popular use for something like this if you're doing say a header or you know you're doing a section and you want to be able to put an image in the background behind some text so we'll choose a nice horizontal image here then before we look too close at these other options and for the most part these would apply to a slideshow also i think it's important to note that we need to figure out how tall this is going to be first and um you a couple of ways that you can do this if you come in here with your you'll see you have the little arrows again so you can change the height and this is going to set it to exact pixel heights for your padding values so if i pop in here padding and margin you'll see when i drag and drop this it's changing your padding based on the value that i put here now that might be fine um if you're more of a visual person you can kind of see how it looks at least on your desktop size by doing that um [Music] so that's one way to do it if you wanted say you know a little bit taller and put some text in here you also a lot of times i do this by percentage instead of by pixels i obviously don't want 457 percent maybe i want 20 and by default it has the head the height of 25 on the top so that's one way to do this um in this case i'm going to keep the left and the right at zero because i don't know exactly how i want the rest of my layout at this point i'm just concerned with how tall it is so i can do it by height there the other thing you can do if i set these back to zero is we're going to skip down to the structure settings and here we can set the minimum height you might not know a minimum pixel height unless it's a specific picture that you're trying to show with size if you're talking about showing this on various screen sizes a pixel height might not be your best bet because it's going to look very different on a big desktop than it would on a phone but what you can use is your view width or view height and what that means is the height of your screen that's the plane displaying the site so for example if i choose view height and i come in here and i say i want this to be the full height of my browser window you'll see now that it's lining up to exactly what the height is so i'll open this in our page so we can look at it and you'll see now if i scroll down it's making it exactly the height of my visible browser so that can be a handy way to do it if you don't know um you know exactly what your padding settings are to get it right or you don't know exactly the pixel height and you say all i care about is when they come to my site maybe this is your sort of splash screen on your website this is the top the first thing you want them to see you want it to be the height of your whole site that's a great way to do that you could also make it a little smaller if you're saying i really want it to be a statement image but i want it to not be quite the whole height because i want to make sure they know to scroll down still you can set it to 80. and then this can also be another one that you want to set on your mobile settings so if we come over here and preview like a phone screen um in this case 100 view height on a phone it's going to be quite tall whoops so if we come over here and we look at the mobile view obviously 100 view height on your phone is quite different than it is on a browser so this is a really tall sort of awkward section if you're looking at it on a phone screen size so maybe that's not what we want on a phone right so we could come in here and customize the mobile height maybe we want it to be 50 on a phone and that's much better so you know you could play around with that a little bit but you get the idea it's important especially when we're talking about height to look at your various screen sizes to get it exactly the way that you want it to so i'm going to actually change this um i'm actually going to take this off for now now that we know how that works i think i'm just going to use padding to show you this example so i'm going to come back here and use my padding percentages and i'm going to use 20 for the top and bottom the other important thing to note is that by using the padding the same on the top and bottom i'm centering my content here if i wanted to change this i could get the same height overall for my background but move my content one way or the other by making it only 10 at the top and 30 at the bottom or vice versa if i wanted to move things to the bottom um but if i put it the same on the top and bottom it essentially centers them in the middle so i'm going to go ahead with that for now because we're using percentages but not the view height i'm going to leave it on mobile also i think that's probably fine we'll refresh it to see how it looks i might need to add a little bit extra on mobile to make it taller we'll go ahead and see what our content looks like before we make that decision so now we've got our padding and we can kind of see our image in the background we'll go back to our background settings and sort of tweak a couple other things one of them is this little circle on the image here and this is telling it essentially what the important part of the image is that it should try to show on the screen so you realize with everyone's browser being slightly different their screen size slightly different it's not going to look exactly the same every time so if i had you know a person's face here and i'm saying all right it's really important to show their face i will put this over their face in this case i don't particularly care so i'll leave it about the middle the other thing is that by default it's going to use a cover value for your image size and what that means is it's going to take your image and cover your entire row layout with the image if you wanted to show your complete image because right now obviously i'm cutting some of this off right you can't see the top and bottom of my image if i wanted to make sure you saw the whole thing but i didn't want it to be really tall and make it the size of the screen you can use this contain option and what it's going to do is it's going to center your image but shrink it down so you can see the whole thing and then if there's a background color it would show that behind it so if you set your background color you know to white it would essentially just look like your image is centered in the screen so it depends on what kind of look you're going for the other thing is by default it's going to be on scroll which means the image scrolls with your screen which is how you expect it to behave now if you wanted to have it so that your content scrolls with your screen but the image doesn't you can use either your fixed or your parallax value to do that so if we set it to fixed you'll see that now my content which is just right now these empty columns are scrolling and the image isn't so it allows you to see different portions of the image as you scroll so now i'm going to close my background settings and i'm going to go to my background overlay settings now in this example i have this really contrasty image in the background and i'm thinking anything i put on top of this is going to be competing with it right it's going to make it hard to read or hard to see another picture so what i can do is put an overlay on top and maybe in this case i want to use a white overlay and then i can control the opacity of exactly how dark or light the overlay is obviously all the way up to a complete white or i can do it as a gradient choose my other color if i did a gray and a white and you know you have options about where your gradient exactly is for the top and for the bottom um [Music] so you can kind of see it moving around you can do a linear gradient or a radial with radial will be the circle and you have lots of options basically to kind of customize this and make it look exactly as you want as a gradient in this case i'm going to leave it as a normal solid white overlay and i think that's enough i'm going to put a background behind any text i add so i think this is enough to make me happy right now the next thing we can look at is um and you're probably starting to realize why this is such a powerful block because there's really settings for so many different scenarios and i always suggest i talk about this as page builders too if you're coming in have an idea of what you're going to do because if you don't and you have all these options out there and you start scrolling through every time you see oh i can do this it kind of gives you another little rabbit hole to go down so it's good to kind of see what your options are but then when you come into customize have an idea of where you're going in your head so with that said we're going to look at our dividers and what this is is it basically has a shape to your row that acts as a divider between that row and whatever is above or below it so we're looking at our bottom divider right now so these these are some of the shapes that i can use and it just kind of gives it a little effect and you can see you know if i had something below this it would kind of add a nice transition from this to what's underneath i'm going to leave that one off for now i think it can be a little distracting we're trying to go for something simple for an example but you'll see you can do the same thing on the top and again more options than you'll ever never need to use we can set this divider and then we can change the exact height of the divider the width of the divider um change the height change the width really you know completely play around with it until it's exactly how you're trying to get it to look so the next option we'll talk about is text color settings and you'll see right now all of these are blank depending on your theme those colors are normally going to be set by your theme so if you want them to be consistent with what you have set you know for your header one header two your paragraph text for the most part we're not going to worry about that because you've already decided it for your theme you want it to be the same on every page but if you did want to change it overall for everything that you put within this lit this row layout you can come in here and change those usually you can change them on each individual block also but this would make it so that everything within this block so for example if you know that you know you're going to have a dark background and all the text within that block needs to be white then you can go ahead and just set it to white here and then that will flow down to everything else that you put in there and then next we have structure settings and we looked at this a little bit when we were looking at the view height so that is where you set this you can also set your maximum width here i talked about that before so um you know depending on your page if you are putting in a section and you don't want it to be full width if it's going to be text it can be hard on a desktop to scroll your eyes all the way across the screen so you can come in here and set your maximum width and you'll see it's resizing my inner content it's not changing the actual width of my block itself just just what's inside of it and again you can do that by pixel you can do it to 100 by percentage so i'm going to leave it at 100. and the other thing we care about here is your inner column height and you can't tell the difference until i go ahead and put some content in here but what this does is it forces your columns to be the same height so if i have a background on one of my columns like i'm going to it makes it look a little bit cleaner i'm going to leave it off just so you can see the difference when i do change it later and then lastly visibility settings you have the option to hide this complete section on different device sizes if you don't want it to show at all on your mobile you can go ahead and hide it and vice versa also if you have some sort of membership site you can control whether people have to be logged in to see it and lastly under advanced we have an html anchor and what this is is it allows you to link to a specific spot on your page so for example on my home page i have some content about family photos specifically that's about halfway down so the family photos link in my menu links to halfway down my homepage rather than the top so this just gives you the ability to name this spot so that you can link to it later on and you can also add a custom css class if that's something you're interested in doing adding some custom code about the display then this is where you would add that class name so you can reference it later in your code so we've gone through essentially all the settings in our role layout and what we're going to do now is go ahead and put some content in so you can see how it works and then we'll talk a little bit about the settings in the columns because remember we're still customizing just the row itself and at some point we want to customize the columns that are inside of it all right let's add some content so let's say i want this section to be an image and then some text maybe for my about page or for a section on my homepage so i'm going to come in this plus button adds you to allows you to add a block just like you normally would so i again i have image in my recently used so i'll add an image grab one from my media library and now i have an image in here and you'll see by default because of how we have all of our padding and everything set it's pretty big and probably i don't want it to be that big so we'll handle that in a minute um just a note for the image block you do have a um caption underneath it it's a little hard to read here because of my background but you can add a caption down here too so over here let's say i want to add some text so i'll add a paragraph block and i'll put some text in and then notice right away we have two problems here right one is that obviously i can't read my text and two is that it's sort of floating up here while my image is extending all the way down there and it looks a little awkward right so first we're going to handle the fact that this is sort of too big for the page right it's hard to see the whole image it's going to be hard to read so remember we have two options on how we can handle this we can add padding or we can set a maximum width um in this case if it was all text i would probably set a maximum width because even if someone was looking at a really huge monitor or tv screen i would want it to stay a set with because i don't want it to be too hard to scroll across because it's in a paragraph it's not that wide anyway i'm not really worried about that so i'm just going to set it with some padding so i'm going to make sure that i'm editing my row now i click back up here to get to my row and i'll come back in here and say i want maybe 15 on each side maybe even 20. it's a little better and this is one that i'm realizing 20 off of each side on my desktop looks nice right if i go ahead and look at it here on my desktop size looks pretty good if i'm going to look at this on mobile that's a lot of padding right like this is a strangely narrow column words are getting cut off i don't really want that right so that's one where i know i'm going to change my padding and i'm probably on tablet too and i'm okay with the image being essentially the full width of the screen on my tablet and my on my mobile so i'm gonna set my right and left padding to just five percent on my tablet and on mobile and you can see the difference it still gives you a little bit of breathing room and now my text is a little bit more readable obviously i need a background behind it still but it's a nice nice width to be able to read it so i'll come back to my background setting and now i want to deal with the fact that i can't read my text so i'm going to click in here to get to my column settings and then notice columns have a lot of the same settings that the row does where i can set my text color and my background visibility things like that and i'm going to change my background color and i'll just make it white for now so now my text is readable and this is where you'll notice see how this is this is awkward it um my my text is not the same height there's this weird little gap here that i don't like um even if i was to come up here remember our setting on our visibility we can align it in the middle that's a little better right now there's space in the top and the bottom it's still sort of weird because they're not the same height it just it doesn't look you know sort of finished and elegant so i'm going to come back down here i'm still in my row layout back to my structure settings and i'm going to check this inner column height 100 and it doesn't show it very well in the preview here but if we come back to desktop you'll see that now the background color on my column is showing that the columns are actually the same height see how much cleaner that looks just by checking that box and next i realized that there's a background color behind my text but it looks squished it goes too close to the edge it doesn't look nice so i'm going to click into my column i'm editing my column now and now i want to edit the padding for the column not for my row but this specific column and again it's by on pixel by default i prefer to use percentage so i'm going to come in here and say maybe i want five percent padding all around it yeah maybe even eat that's starting to look nicer right so now if we come back here see much nicer that looks now we have some breathing room we're able to read it um but everything still lines up nicely side by side and probably eight percent is okay on mobile but we'll take a look just to make sure that we're happy with that and i think that still looks fine so i'm pretty happy with that on my desktop and mobile at this point but i am realizing now that i have some content in here my 25 padding on the top and the bottom feels a little bit too much right and normally that's something that i wouldn't recommend setting until after i set it beforehand just so we can kind of see how the padding controlled it but now i'm realizing that that's a little too tall so i'm gonna come back into my cup my um row layout go back to my padding and maybe i want to set it to 10. oops that was the left top and bottom i want to be tapped so let's see how that looks i think that's a little better now there's still some breathing room space all right and one last thing i do want to cover because it's in the column settings but not in the row so i'm going to click into my column here i'll see them on the column and down at the bottom we have this animate on scroll option and what that means is it gives movement to your column as you scroll down the page so if i set it to slide up for example you'll see it slides up as the page loads if this was further down the page it would slide up as you scrolled to that section and you'll see you have various options like you can change how long at the duration it is how quickly it comes in how long until it starts basically a lot of options here one of those things that can be useful can also be overdone so use caution but it is an option do you do have that's inside your columns here one other thing i want to cover just before i'm done um i didn't mention as we went because i didn't really need to change it for this but something i do hear people ask for often especially when they're doing a header is i found this image that worked really nice as a header column for my desktop site um you know what let me just do do a quick example here so say we're doing a row layout that you want to be the main screen of your site that people see when they come in right so we're going to do an image background and say we set it to be by view height we want it to be 100 and then maybe on mobile we wanted it to be say 70. now this looks really nice on desktop and on mobile with this particular picture it looks fine because there's no subject in this picture now a lot of time that i hear is say you're a newborn photographer and your big splash image here is of a newborn and once you're looking at it on mobile um you're seeing you know a slice of a newborn's face or body or something like that which obviously isn't ideal what you can do is you can come back into your background settings and if you go to the mobile layout mobile background you have the option to set a custom background for mobile so if you can't find an image that works and you just don't like that option at all you can always set it to a color um of course no image would just set it to a solid color but what you can do is come in here and say i want a vertical image just on mobile and again i can tell it you know what's the important spot and maybe i still want it to scroll with the page so now if i come back you'll see on my mobile image only i have a different background in here so that can be a good option in the case where you're trying to use this as kind of hero image for your site at the very top and you want a different image where it's not getting cut off you can change that right here and again you know set your overlay and everything else like you did on desktop so i hope that's helpful i hope it demystifies the row layout a little bit i hope it shows you all the options and control that you can have if you ever got frustrated using some of the other blocks and you couldn't change them to look exactly the way you like you can drop them into a row layout and probably have all the control that you need so if you like this video go ahead and subscribe to my channel click the notifications so you see all the new videos and there will be more coming soon about other gutenberg and cadence blocks if you have questions and um about this video drop them in the comments and i'll take a look if you have requests for specific blocks that you find confusing or you can't figure something out go ahead and do that too and i'll try to add those to the top of the list for blocks that i'm going to cover next have a great day

Channel: SummerLyn Studios

Views: 3,904

Keywords: wordpress, wordpress tutorial, wordpress tutorial 2020, wordpress tutorial 2021, wordpress blocks, kadence, kadence blocks, row layout, photography website, gutenberg, wordpress theme, wordpress for photographers

Id: SSDwCqL0e68

Length: 31min 44sec (1904 seconds)

Published: Tue Feb 23 2021