How to build a business website — Layout (Part 1 of 6)

today we're going to build a website for a business that's practical like a law firm in space it's like a normal law firm only better the site is filled with clever prose the likes of which we haven't seen since Conrad wolf and Dostoevsky which coincidentally is the name of an actual law firm we're going to move fairly quickly and some of this might seem tedious showing every single change to every single value but we're fanatical about making sure we don't brush over anything you can skip around this content or speed it up mute it if you'd like if that's your thing we've all done it it's okay Dale at its most of this most of the audio on his system on mute and you're kissing on five main things we're covering five core parts layout how we're designing styling and developing for all devices right on the page using the designer will cover the CMS however managing content collection pages will design full pages for each team member practice area and blog post collection lists will use these to link to those full pages and finally we'll do organization how the site is structured and linked together how we set SEO titles and meta descriptions and when we're done with that as a bonus we'll build the rotational parallax we see here on the homepage which of course responds to the position of the pointer and as we're covering these topics keep in mind we have tons of detailed videos and guides for everything from the basics of flexbox to advanced triggers and animations and typography and SEO all of this is on web flow University so if you need to brush up on anything or reference some of the more advanced content out there it's always at your disposal but let's start today with layout this is a blank project and our goal is to turn this into a not blank project so we can go over to the ad panel and we'll go down and drag in a section and that's it we've turned this into a not blank project let's keep going now before we go any further let's make sure to drag in some assets these are two images a logo and a background image we'll be using later in the project but for now with our section selected let's create a class and we can call this home hero and for our home hero section let's give it some type of height you can do this in pixels like 500 pixels or we can do it and other values like VH 60 VH here and what we can do once we've set that value is put in a heading we can drop any elements inside in this case we're double clicking to edit the heading and we're calling this a firm specializing in legal matters that are out of this world which is a pun a space pun let's continue by putting a button in our section we can create a class for this as well call it button and once that class is tied to the element we can duplicate we're just copying and pasting here so that each of these button elements has the button class applied let's name these we're double clicking to name each of these we have learned more practice areas and of course a third button for contact us alright so once this is done we can select the section and start setting up our layout in this case we're using flexbox to vertically align to center all of our content but before we continue let's make a critical change to our body this is our body all pages tag and changes to our style panel here changes to styles in the body all pages tagged won't just apply to this page this particular page in the project but it will apply as a default for all pages that we end up creating in this project so let's continue in this case we're making changes to the font color this is the font color for the body all pages tagged and we can select from any number of fonts in our project but we can also go to our project settings and from our project settings we can always navigate on over to the fonts tab and here we can use Adobe Typekit or custom fonts in this case we're gonna scroll down and select one of the google fonts and once we make our selection we can select variants we'd like to include for that specific font here were selecting a number of different font weights and font styles once we're done making our selection for fonts we can go back to the designer in this case we're gonna go back to our body all pages tagged why because we're not done switching away from Arial yet and so we can solve that by scrolling down and making the selection of the new font we added from google fonts once we do that that changes our default font throughout the project let's drag in a div block here this div block we're going to create a class we're gonna call it home hero wrapper we're gonna use this to organize some of these elements we've already created we'll drag in our heading we'll drag in our buttons we'll do these one at a time keep in mind as we drag in buttons everything here is visual so that means if we need to reorder any of these buttons we simply drag and drop right into position so once we have our buttons organized the way we want our buttons organized let's select our home hero wrapper and we can use flex layout on these as well in this case we'll select vertical layout and we'll make sure everything is justified and aligned to Center now for our buttons we can create a separate div block for those as well we can create a class call it button block and in this case we'll drag our buttons right inside that means it's immune to those flex layout properties we just set on its parent element so we have learned more we have practice areas we have contact us in its own button block let's style our buttons we can start by making a change to the font color let's make the font light gray we can make an adjustment to font size just like you'd expect using up and down arrows to adjust things like letter spacing character spacing we can also go and make changes to margin making margin changes is as simple as dragging to the left and right but we can hold down option or alt and drag to adjust opposing sides at once and we can do the same thing for padding adjust the space on the inside in this case we're adjusting the top and bottom padding and now we're adjusting the left and right padding again holding option or alt to adjust opposing sides at the same time let's make a change to the background color and we can choose black for now we can also make adjustments to opacity bring it down to about 60% here and let's go ahead and create an outline and this outline we can use a white color for some contrast and we can drop the opacity on that as well and it's not just the none state that we're able to style here we can make a number of changes to various states for various element types based on the styles we're setting here in this case we're going to make changes a number of changes to the hover state now the hover State is based on the nun state so we're inheriting those styles we just set on our buttons in this case on hover we might want the text color to turn to white so when we hover over it now turns to white let's add another effect here we can do a text shadow and in this case we're gonna use a shadow color of white to add a subtle glow effect that way on hover we're able to create a glow around each of the text characters let's set the blur to something a little bit wider like 12 and now on hover we can see not only does the text color turn white we get the glow as well let's make adjustments now to the outline so on hover we want our outline to become full white problem is in the designer right now these element edges are visible so we can actually toggle those element edges and now we can see that our visibility does indeed look great and put the element edges back on going back to our Nunn state we can add transitions now a transition is going to create a state change that covers a particular period in this case we can adjust that it's 200 milliseconds by default but we can animate over 500 milliseconds really can put anything we want in there and we're creating a number of changes in this case we're creating another one for our text shadow we're doing a different transition for each style that we've affected so now when we hover over our buttons we can see that the text shadow and the text color are indeed transitioning over 500 milliseconds let's keep going we'll add another transition in this case we're going to affect the border and we need to adjust that 200 milliseconds again here to 500 milliseconds and finally if we go to preview this if we go to preview mode we can see our hover effect in action each of the buttons responds just as we've styled them let's continue by selecting any of our buttons and going back to the hover state in this case we might want to make a change to the background color as well remember we created a 60% opacity at first we can just crank this to a hundred and on hover we can see now that it becomes 100% full color but the transition hasn't been added if we try to add the transition in our hover State we can't so let's go back over to our Nunn State and will create a transition this time we'll scroll down and affect the background color since we made a change to that background color and we'll close out of that transition all of our transitions for all of our styles that we just created have been set let's select our heading and in this case let's style our heading we'll create a class we can call the class something creative like big heading and from here we can make a number of changes to typography in this case we're selecting a light variant of this font and we'll make some adjustments by using the up and down arrows on font size same thing with line height here and we can move on to more interesting things such as character spacing we can just type in a value we can adjust all caps and we can also make adjustments to the element itself for instance shift-enter can knock down a bit of text to a new line and we can highlight any bit of text and wrap it with a span the span of course lets us style independently in this case we'll call this one mega focus will call this span mega focus and for mega focus we're going to make a font selection we'll create extra bold weight here and we'll also increase the font color brightness to full white and we'll go ahead and select our home hero section to Center the text of course that's going to pass down that will be inherited by its children text objects let's make an adjustment to this button block we're gonna add some top margin here to give it some breathing room some space and on our home hero we can set a background in this case a background image and we're going to pop in that image we dragged in before one of those assets we dragged in before and we can make a number of changes to this background image in this case we're going to Center it and set it to cover and now it's sized perfectly quick note about flexbox is it enables us to set properties on its children lets us set styles layout properties on the children so we can make adjustments here and actually align to the bottom and then add some padding so that we're able to control this home hero wrapper we created in terms of layout now when we make changes to something like line height you can see everything happens from the bottom it respects those flexbox properties let's continue by adding now navbars and sir main hero section is completed we'll drag into navbar which we can do anywhere in this case we're gonna drag it right into the body right at the top of the page and we could go over and create a class for this but in this case we'll go ahead and make a change to the background color we'll set the background color for our navbar to black and by doing that you can see our navbar class was automatically created classes are automatically created once we style an element let's continue by dragging in a logo and our logo is now inside this brand link block and we can just grab it and resize just eyeball to see what looks right now we also have three nav links they're not very visible right now let's instead of creating a new class let's build based on our button class the one we created for each of the buttons below and we can apply this manually to each and every button that comes set with the navbar but in this case we'll create a combo class a combo class lets us style on top of the button class using the button class as a base and it won't modify none of the style changes we'll modify the original button class so let's duplicate we're just copying and pasting here and just like the buttons before every single one of these elements every button here is holding the button class with the nav combo class we're just going in double clicking and making changes to the text so we have each of our five main sections for our website with any of these selected we can adjust top margin and we can also go down because we don't need it and get rid of the border change the style on the border to none which will be much more fitting for the navbar now keep in mind if we select any of our original buttons because that's the base class changes to this like font here will actually show up in that combo class as well keep that in mind as we're styling using combo classes for now let's continue making other changes like selecting this container here we'll call it nav container and create a class called nav container and we'll set a minimum on this to 100% that's going to let us take full width for the content inside that navbar and we can grab the navbar itself and with the nav art self selected we can make changes to padding we can do independently as you see here or we can just hold down shift and drag to adjust all sides at once in this case adding enough breathing room about 30 pixels seems just right we can do the same thing for our button nav our combo class and make sure the spacing looks great there too finally on the nav bar let's create a lower border we can affect just one side and we can choose a color that works great here and rather than guessing at this color every time we can go ahead and create a swatch we can check to make this a global swatch which means if we end up changing this color in the future any place that we've used this swatch if we change that swatch color will also be affected by the change in color let's continue with our footer footer in this case we're using just a simple div block setting a height of 300 pixels just it's a standard right now let's drag in from the add panel let's drag in a text block this text block is going to serve as our copyright notice in this case we're going to use flexbox on our div block our footer here to Center the content we can double click to edit the text and type a copyright in this case copyright Astro lawfirm all rights reserved basic copyright notice here and we can actually grab from our asset panel we can grab our logo again which is unbearably large so let's resize that and by default our Flex items are being arranged horizontally because we never chose vertical under flex layout so let's choose vertical under flex layout let's continue by grabbing a text link from our ad panel we'll just grab a text link and drag it in we'll use this for some of our footer links now you might notice that nothing right here is visible we can double click and edit this text and write Facebook but you really can't read this and that's okay it's time to style the text link and in this case we can use our button class again for button we are seeing an underline right here with the text link so we can turn that off for all buttons to make sure we don't get underlines but we'll do what we did with the nav and create a combo class here in this case we'll call the combo class footer and we'll set the background color to transparent now if we go on over and States over to hover we can see that transparent now carries through there as well so we don't have to make any changes to our hover State in terms of background and if we turn off our element edges we can still see there are some outlines visible so let's turn the element edges back on with our button selected we'll go over to style border style and we'll turn off our edges we'll turn off those borders now let's copy and paste again the button class with the footer combo classes applied to each of these and we can double click to make changes to each of these of course in addition to Twitter and Instagram we have MySpace law firm and we can make the last one a contact us button which when we build it will route us to our contact page so we're making a lot of progress here with our footer let's drag in a div block to organize some of these buttons will drag in facebook will drag in Twitter will drag each of these in one by one so that we can horizontally align everything and we can use this div block we can use this div block that now contains each of our buttons we can use it to add some breathing room so in this case we're gonna add some padding to both sides the top and bottom and that way everything breathes a little more we have some blank space and we can of course select any of these buttons with the combo class the footer combo class applied and we can adjust spacing there as well for our footer copyright we can make changes to typography in fact it was Albert Einstein when working as a patent clerk that originally pioneered the tactic of lowering the brightness on a footer copyright let's grab our footer and you can see we can make color changes to this choose any color in this case we're gonna do a solid black color for really high contrast and just like we did to the nav bar let's set an upper border and we can use our hairline color that we used for the nav bars lower border and that looks great keep in mind we did set a height before we can go into the height and remove that style and we can have the height automatically calculated based on padding we can add some padding to the top and bottom but where this gets really interesting is when we start looking at different views in this case we're in tablet view and we can grab the edge here and take a look at responsiveness based on different browser widths different device widths and we might want to grab our bit cutting here and make changes to font size or line height and we can kind of grab the edge here and see how that responds making micro adjustments visually and as we do that these changes are affecting tablet they're affecting mobile landscape and they're affecting mobile portrait but they're not affecting the styles we made on the desktop view earlier let's select one of our lower buttons in this case we might want each of these footer buttons to take up its own line and of course we can Center the text based on this we might want to adjust the tap space inside the target on tablet we might not need that much so we can decrease that inner padding on the top and bottom of course if we select our div block the div block of course serving as that footer and we can make adjustments to padding there as well in this case we're making changes to the image here is lower logo and 110 pixels seems good now that we've given attention to our footer let's give some attention to our navbar let's specifically look at the menu button now the menu button works if we go into preview mode here by pressing the menu button in tablet view we get a drop down menu let's go back out of preview mode so that we can make some changes here and we can select open menu and grab any of these elements to style in this case we're going to grab our button each of these buttons is the same button we styled in our navbar of course on desktop view but in this case we're going to make changes starting at the tablet breakpoint so let's make changes starting at the tablet breakpoint starting with turning off top margin setting that to zero can also select our nav menu our nav menu is what holds each of these buttons and our nav menu right now is set to a gray color we can go down to background and choose something like black and as with other styles we can adjust the opacity so we can have a slightly translucent menu bar as that comes down we'll set that opacity here to about 77% really it's based on what looks right of course here we can make a change to a darker gray color more of a slate and we can also make changes to the buttons themselves the button selected we can make them transparent so we can see right through the buttons they're still clickable they're still tappa below so if we go in and preview this and press our menu button we can see right through the button and everything works as expected let's go back back to the designer out of preview mode and select our menu button we can actually style the menu button so let's create a class called menu button we can press open menu and go back over to the style panel and from the style panel we can affect things like the color of the menu button I'm making it black here in fact we can go down and make it transparent completely transparent and as we go in and toggle under navbar settings as we open and close our menu we can see that the menu button stays transparent and also make a change to the duration that's going to affect how long it takes to open and then subsequently close the menu so let's go back out of preview mode let's go over to our navbar settings open our menu again and from our navigator we can select our nav menu why because we can add a little breathing room above and below where those buttons are by adjusting padding simply eyeballing to see what padding value looks right now we have a little more breathing room when this opens and closes and before we go too far let's grab by the edge of this tablet view let's grab our edge and test the responsiveness of course this is looking a lot better now our nav menu is looking a lot better but we can grab any of these buttons and align it for instance so it looks a little bit closer to our logo you can see each of these buttons is affected if we go into mobile landscape and of course mobile portrait we can see that we might need to make an adjustment to the padding on each of those of course changes to mobile landscape don't go back up to tablet but they do go back down to mobile portrait changes cascade down in terms of view not back up let's add a box shadow and what we're gonna do is add a little bit of blur to this box shadow so that we have a nice bit of differentiation between the nav menu and the background objects 28 looks pretty great we'll go back in make a slight change darken this up a little bit really eyeballing it to find out what works best visually let's go into preview mode and in preview mode we'll take a final look at how this menu bar drops down and looks great and how it comes back up same thing in mobile landscape you can test it out in mobile landscape as well finally we'll do the same thing in mobile portrait what it looks like on portrait mode on most mobile phones so let's go out of preview mode and make some more changes because we're not done quite yet let's talk height and we set 60 VH as that minimum height to start with but we can really put anything here so for tablet we might want 400 pixels or a little bit more than that we can eyeball it and for mobile landscape we'll change that minimum perhaps a little bit lower to something like 380 pixels really this is based on what works best for each device range of course make a change to padding lower padding down to 24 or so looks a lot better than that thicker padding did a moment ago and we can also change our buttons by changing the display setting to block these buttons each are on their own line this is very similar to what we did in the footer and set the width here on the button block to a hundred percent that's maybe a little wide for mobile landscape maybe 60 percent more fitting and we can make adjustments to our lower margin that provides that gap for the buttons but keep in mind because those are the base buttons we're going to undo that margin for everything we applied a combo class to that of course includes our footer and our nav combo classes we're simply setting each of those the value for that bottom margin to zero test that responsiveness it's looking pretty good now our home hero section that image we have in the background we can simply add an overlay to increase contrast now that overlay can be any color we want in this case we're gonna keep it black and have an opacity just over 50% that looks pretty good and we can see the text against that background now we can also adjust our flex layout we'll make sure to Center this and because we've done that we can get rid of that padding we put at the bottom when we had everything aligned to the bottom and of course we can adjust our height maybe the minimum can be something more like 330 pixels for mobile land scape and we can bring some padding back to release space this out and eyeball what looks great with our big heading selected we can make a change in mobile landscape perhaps decreasing the font size decreasing the line height and we can go and see how that looks in mobile portrait now in mobile portrait everything's bunched up because we had set 60% in mobile landscape but 60% worked fine and mobile landscape but that's really tight in mobile portrait looks a lot better at 100% we test that responsiveness we're seeing good results everything's responding as we've expected to based on the values we've set in the style panel the values we've said for each of these views all the way from desktop down to mobile portrait now in mobile landscape you might think that navbar has a little too much breathing room we can decrease that breathing room in mobile landscape and a mobile portrait we might want even less and mobile portrait we might want something really ridiculous like 2 pixels of padding on the top and bottom maybe in mobile portrait we can just eliminate that left and right padding altogether if we test responsiveness it's looking a lot better so let's go into preview mode and take a look through each of these views if we're in mobile portrait our drop-down menu looks pretty great unless of course text alignment is your thing because if you look at the bottom you might notice that the text is aligning left and it would look a lot better if we centered it so let's go in and Center it will grab the footer copy right go to typography and make sure that our alignment is set to center finally on our footer let's create a hover effect and to do that we're going to use a diff lock another diff block and we're going to drag in all the major elements all the major elements in our footer into that div block and we'll do this one by one once we do that we'll select that div block and we'll create a class we're going to call this class footer hover and this is what we're going to apply the effect to first let's do our flex options make sure that we're vertically aligning and make sure that everything is centered looks pretty great and the way we're going to do this effect is simple we're gonna set the opacity the standard opacity on the none state when we're not hovered over this to about 45% and when we hover over it when we hover over the footer hover div block we're gonna go all the way up to 100% and if you test that you can see it goes from 45 to 100 works fine let's add a transition and that transitions going to effect opacity and we're gonna want a larger value here maybe 1,500 milliseconds and if we go to preview mode we can see that the footer isn't as distracting but when we hover over anywhere inside that div block we get a nice transition into a full 100% let's keep going with layout and create a new page in this case we're gonna create a page for contact this is going to show up blank at first that's as expected and what we can do is recreate our navbar let's drag in our navbar and we'll restyle everything except no we won't let's delete that instead we'll use what we've already created on the home page let's select our navbar and with that navbar selected we can right-click on the label and press create symbol we'll name the symbol navbar when we press create symbol everything inside that symbol the symbol itself the navbar and all of its children elements are simple now it's about time this div block at the bottom is named footer so let's double click that class and rename it main footer and we'll right-click on the main footer label and create a symbol will call the symbol footer and now the navbar and the footer are symbols in our project we can use them on any page anywhere as many times as we want and to do that we'll just add a symbol we'll drag in our footer and that's it the footer has been added we'll do the same thing with our navbar the navbar has been added and third we'll add a section section in between the navbar and the footer we'll call this section and on this section we can add some healthy padding inside some top and bottom padding again we're holding down option or alt and dragging to adjust both sides at once and from here we'll add a container the container of course sits inside the section and we'll create a class main container and this class we can style independently we'll create a light gray color and we'll set a radius on our border here so we have rounded edges and for our main container inside of this we can give it some company let's put in a heading and this heading is whatever we want it to be double click to edit and we'll make this contact our attorneys and from here we can select that heading and create a class but we've already created that big heading before let's go in and take a look at where that color is coming it's currently being inherited from body all pages that's fine we can override that in a moment let's give that heading some company and drag in a paragraph that paragraph and that heading now live inside our main container now with our main container selected we can adjust the font color and it's affecting its children as well those children are inheriting the font color from their parent and will create dark text as a global swatch so we can use that on different types of text objects as we're styling throughout this project and this main container can have a variant we're creating a combo class called centered and will do just that we'll make sure that the typography the alignment is centered we'll also create some padding on the left and right and some more padding on the bottom and maybe some more padding on the top and we're spacing this out so that this main container can be used not only on this page but on other pages as well let's add in a contact form we'll drag in a form block from our add panel and in this case we'll delete the field labels that come with that form and instead add our own element in this case we're going to use a text area element and this is going to help us give people the option to add comments if they have an optional comment they want to add so we'll go into the input settings by double clicking and we'll change the placeholder for some of these to simplify everything in this case we'll make it required their name is required the second text field will go in and change that placeholder to your email again this is already required and for the third one this text area will make sure that the name is updated from a generic field to comments and for the placeholder we can also write comments but will indicate that it's optional in this case we're not going to press required because it's optional so for each of these text fields just like all the other elements we've styled we can create a style we can create a class that's used to style each of these elements and we're using the same one here for all three of them text area and changes to any one of them will affect the others in this case we'll edit the placeholder text color the font color and make it perhaps dark text that looks pretty good on white while we're at it let's go in to our main containers background color and brighten that up just a little bit so that we get that low contrast we're looking to achieve here and for the submit button we've already created a button class in fact we called it button so let's apply that class here as well now we can create a combo class just like we did for footer just like we did for nav in this case we're creating one for forum and we can set its own properties its own style properties here in this case we'll do 100% width but it also has five pixels margin on the left and right we can get rid of that so that it's a full width object full width button in the forum upper margin here creating some nice whitespace lower margin on each of these text area elements is looking very good as well let's add another asset to our project in this case we're going to grab from Jeremy Thomas this extraordinary photograph which is going to upload right into our assets panel and now that it's in our assets panel we can access it so on our section we'll set a background we'll use that image we just uploaded as the background we'll set it to cover and center and it looks really great behind our main container now to add a little bit more contrast between the container and the background we're adding a simple drop shadow we're gonna make it super blurry like 40 pixels and we'll drop the opacity of that dark color on that shadow to match now our form button is unique to this page again it's it's own combo class so let's go in and use the eyedropper to pull one of the colors from the background and that looks pretty good we can adjust that using the color picker to get it just right and once it's done we can make some other changes like getting rid of the border and maybe increasing the font color to a full white so that the contrast looks really good and on hover we're still getting that glow we set on the original button so that our contact page let's link up the home page and the contact page to the actual links in this case the home page we want us to take to home and the contact page we want us to take to contact but notice on contact it turned blue that's because it's the current page we're currently modifying that link that link takes us to the contact page now notice how when making that white every single button nav turned white what we want to do is make a higher selection we're selecting the current state and in that case we'll make it white so every time we're on a page in this project every time we're on a page using that button of the current page will turn white if we select home home is white if we select contact that font color is also white let's look at this on different views in tablet it's looking pretty good and mobile landscape there's a little bit of crowding that's fine but we might want to make a change to our paragraph first in fact let's go into our all paragraphs tag in all paragraphs we can make changes to the way all paragraphs in our project behave by default without adding a class and so we're making adjustments here of course we can set line height in terms of a number it doesn't have to be pixels so we can set that based on our drop-down and we'll set it to something like 1.5 1.4 1.5 looks great let's go down to tablet and perhaps we want to make a change to the font size there 14 same thing in mobile landscape mobile portrait perhaps we want to decrease the font size there so it's more practical we can fit more text on the screen mobile portrait down to 12 pixels so we have each display each view using a different font size while we're in mobile landscape let's adjust the padding on the left and right we'll go over to tablet back to desktop things are looking really good now we can get really specific with this so if we want to adjust the padding on the top basically removing that padding or adjust some of that padding on the bottom removing that padding just really tighten things up so we're not losing valuable screen real estate on mobile devices we can do that too in this case we don't even need that section visible so we'll completely eliminate the padding for a main container remember we have those rounded edges that radius let's turn that to zero so the main container is taking up the full dimensions of the section so looks great on all screen sizes can affect some of our lower margin there on the text area objects that looks good beautifully responsive on each display type that is layout

Channel: Webflow

Views: 193,984

Keywords: web design, webflow, responsive web design, graphic design, web development, cms, content management system, build a business website, small business websites, make a website for a small business, How to build a business website, create a website, build a website, business website, how to design a website, get your business online, build free website, how to create a website for business, make a website, how to create a small business website

Id: yJ3vsAnbi_o

Length: 35min 56sec (2156 seconds)

Published: Mon Feb 05 2018