11 Section layouts to make your website ultra UNIQUE

To me most websites look exactly the Same and this is probably because we all Use the exact same designs and layouts For every section of every website Usually it's just a basic two column Layout we might switch it left to right And then if we're feeling really crazy We'll throw in a three column section so We can show icons and a little bit of Text but outside of that we rarely do Anything unique and so in this video I Want to walk you through 11 different Section layouts that you can steal and Put into your designs to make everything That you build look super custom so Let's dive into it so these first couple Sections are your most basic these are Essentially the bread and butter of web Design and I don't want to ignore these In this video because they are so Essential and they work so well there's A reason that these are the most common And the most popular and so while it is Going to be important for you to utilize These and know when to utilize them we Just don't want to overuse them because This is going to get really exhausting For people and it's going to make your Websites look really basic so the first One we have here which is layout one This is just our basic two column Left Right layout where you can have the text And the call to action on the left and The image on the right or as you can see

In 1B here you can swap those things and Put the image on the left and the text On the right now what you're going to See a lot of times is people flipping These back and forth using this all the Way down their website until you get to The call to action and this isn't what We want to do we want to be able to Shake things up and bring in a little Variety into our website So that's where we have our section Layout number two and this is a basic Three column layout you're going to see This a lot of times higher up in the Website because this is a great way to Lay out your two three four most Essential points with an image or an Icon you can have them in these three Columns sometimes I'll see people use Four columns but if you do this You really have to shrink things down But this layout is going to give you a Lot of freedom to do whatever you need To now you can see in 2B here that I've Worked this more into like a grid where We've got an additional row and you can See that you can mix up the way you're Using that image or the icon just to Make sure that it doesn't feel so basic And so much like a template I do see Oftentimes where people will have nine Points they'll have a three by three Grid I would never go more than this and I even personally feel like six is kind

Of pushing it so just keep that in mind All right so moving down to section Three this is just a basic vertical Centered layout and you're going to see This a lot especially in like sales Pages landing pages and you can see in a Variation you really can put the image And the text in any different variation That you would like but at the end of The day these are all going to be very Similar because it's just the centered Aligned look so section layout 3 is a Great option all right so now we're Going to dive in to some layouts that Are a little bit more unique now this First one that I want to share with you This is section layout number four and This is a really cool way to utilize a Slider in a very small section so you Can see here in the example we've got Our header our subtext and our call to Action here on the left and then we've Got a couple elements that are built Into a slider and you can see that we're Illustrating the fact that it's a slider Because one of the elements is trailing Off the page and that says to me okay There's more to see so there should be Some way to slide and see those Additional elements now the one thing That we want to be aware of is if this Slider slides and we don't do something To make this element on the left Disappear that's going to bump right

Into the things we have on the left or Even worse is going to go right over the Top of it so we need to have some sort Of opacity or something set here in the Interaction where it makes the left one Disappear as the right one comes in the Other thing that we want to have is Unless this is set on a timer and it's Moving pretty frequently or if there is Something where you can have like a a Pointer a unique pointer that they can Click and drag people aren't going to Know what to do because there's not any Sort of clickable Arrow so for this Reason I sometimes try to avoid sliders If at all possible but this is a really Cool way to incorporate a lot of content In a very small section all right so Moving down to section layout five this One is a little bit out there and this Is something that I probably would not Use on every single website that I build But I do love how well this works in the Example here with a product they've got A product image in the middle and then They have all of these different icons And subtext all around the product now The thing that's cool about this is they Could have easily just used our section Up here right with the multiple columns And they could have had the icons the Header the subtext and then maybe a big Image of the product up above but I do Love that they got a little bit unique

Here and it just makes it feel like more Of an experience and it does make it Feel like a very custom website and so Doing things like this might seem Overwhelming because all of a sudden You're losing a lot of that control in Terms of alignment right it doesn't Really feel like things are very aligned But if you really broke this down you Would be able to align these things Pretty well you can see here that Basically they're just three columns and You can function with things that way Rather than having to Set position to you know absolute or Whatever and move it around the page and So this is a really nice layout if you Have maybe a product image and a lot of Different bullet points Hey if you're liking this video so far And you want me to make another one just Like this with all new section layouts That you've never seen before hit that Like button down below and if we get Enough I'll be sure to make another one Just like this all right let's jump back Into it All right so moving down to section Layout six I really do like this one and I think this is kind of a a newer Fresher way to display a lot of content Especially if you have great images or Even better if you have videos and so What we've got here is we've got our

Asset on the left and then we've got Over here three bullet points and you Can see that the two Below have an Opacity set showing that this one on the Top is the one that's active in our Example over here you can see that not Only does it have this text darker but It also has the bullet point highlighted In their brand color and so essentially What's going to happen with this is Either it's set on a timer or you're Clicking through and every new bullet That you click it's going to change the Image now I do see a lot of times where People are able to bring in really cool Interactions where when you click not Only does it just change the entire Image But it would basically keep this red Circle and the phone would slide out one Side of the circle and the next phone or Image would slide into the circle and so This is a really cool way just to keep People on One slider but also keep them Engaged and show them a lot of different Images and information now one thing That I would recommend is if you're Going to set something like this on a Timer there should be some sort of Indicator showing them that it's working Through it and then it's going to hit The next step and so in this example Even though this is a static image I Would hope that if this was set to say

Five seconds and then it would turn to Step number two it would have maybe a Reddish orange line that kind of starts To come down and then when it hits the Second bullet point it then moves to Step two and changes the image so this Is something as well that you could have Left right aligned or right left aligned It doesn't really matter and technically You could do this vertically as a Regular kind of tab slider but at the End of the day this is a really cool way To lay out your information especially If you have great images to share Alright section layout number seven this Is basically just taking a kind of a two Column right left align and then within One of the columns you're adding a two By two grid and within those then you Have vertical aligned icons and so You're basically just taking a variation Of a couple different layouts and Squishing them into one now here's a Really cool example you can see here That they've used really cool like 3D Icons and then they've got their content Over here on the right and then down Below they have their social media icons Now the thing that I do love about this Is this just shows how easily you can Bring together multiple different Section layouts and and templates and Basically just do whatever you want with Them another thing that I do like about

This is we are oftentimes a little bit Hesitant to put our content over on the Right and this is another thing that I Would do very sparingly because you know As humans we read left to right and so Typically this is where our eyes are Going to go first but if you have some Really good bullet points to share up Here it may not be a bad idea All right so going down to layout number Eight this is probably my favorite out Of all of our layouts that we have in This and the reason is it's basic but it Just looks really really clean this is Something that we see on a lot of Websites especially like Tech websites Like this example that have really cool Illustrations they have icons they have A lot of information websites like Stripes website does a really good job Of this but essentially what they're Doing is they are just getting a Combination of vertical and horizontal Alignment and then just nesting it Inside each other and so if you look at This at its biggest element this is just A two column right you've got your Column here on the left with information And your column here on the right with An image but then within your left Column you have vertical aligns you've Got your div up here with the header and Subtext and then down here you've got Another horizontal kind of Icon layout

And so basically you're just nesting Like vertical horizontal vertical Horizontal all the way down to your Smallest elements and you can do this in Any way that you would like again this Can be left right aligned or right left Line you can make this vertical whatever You need to do but one thing that you're Going to see a lot in different section Designs is the more variation you can Have between vertical and a horizontal Layouts the more complex and custom it's Going to look so a lot of times on Template websites we just see that Standard two column horizontal layout Right but if we can start to incorporate Different images icons text blocks and Then again going from horizontal to Vertical to horizontal to Vertical it Just makes it feel so much more custom And so any chance that you have to do That definitely take advantage of that All right so going down to layout number Nine this is another great example of What we just talked about you've got the Image on the left and then on the right We've got a four column layout this is Again another great way to kind of Utilize your need to maybe highlight two Three four five six different bullet Points and instead of just putting them In bullets or a very basic column layout You can throw an image on the left add a Header up top and then again we're just

Nesting horizontal vertical horizontal Vertical and giving it a really complex Feel Section layout number 10 this one is a Little bit more unique and I actually Really like this at first when I look at It it makes me a little bit Uncomfortable because it feels like Nothing is really aligned but the more You look at it they actually have Aligned things really well they just Have given it a little bit more flow and It is While it might be uncomfortable to look At design wise I think it's done pretty Well and it is engaging and so you can See here that if we had things left Aligned we've got our header and then Our second bullet is aligned here and Then our first and third images are Aligned with the text here and so Basically what they've done is they've Just add some space or padding to the First and third one just to slide them Over and it does just kind of feel like It takes you back and forth as you go Through the steps so again this is Another unique way to approach this Problem of just having these three Bullet points with three images or three Icons and it's going to be really really Useful for you to look for different Ways to display this other than always Defaulting to just that three column

Look And finally our section layout 11. this One is done a lot especially recently I Feel like there are a lot of great Companies that are doing this and Essentially what they're using is just a Grid and they are just resizing and Making each different grid element a Different size and then you can show Priority of which one is most important Of course by putting on the left maybe Adding color and then making it the Largest grid area but also it just gives You a lot of different ways to lay Things out and you could continue this Layout all the way down and maybe right Below this you flip it or maybe the Center one becomes the largest but using This type of grid and then just putting Your images and text inside of div Elements this is a really cool way to Just be unique while also having your Layouts be about as simplistic as you Can and so I'll show some examples here Of companies that are doing this but I Really do like this layout and this is Something that I need to push myself to Incorporate more into my designs because Sometimes it feels like it's too basic And too much like a template and once You do it right it actually looks really Good alright so I hope that you can take All of these layers that we covered Today and start implementing them into

Your websites it's going to improve your Work so much now if you want to learn More ways on how to make your websites Feel custom and unique I recently posted A video on a ton of different variations Of hero section designs that you don't Want to miss so you can click that video Up here in the top corner I hope you Enjoy it thanks for watching and we'll Catch you in the next video