Webflow Tips & Tricks - 43 tips under 25 minutes

hey guys welcome to webflow tips and tricks and let's get started by adding first element to our canvas that would be section and this section is by default spread across entire width of the document this is how block element works in html however i'd like to spread it across the entire height of the document as well it means that i need to adjust the height however i always think when i go to this style pane i always think of the classes first of the selector if i don't have selector or i don't want to destroy any selectors that i have i always first use the most important keyboard shortcut which is command return if you press command return or ctrl enter on pc that's the same you basically going to create a new class here and let's give it a name blue and now i can tweak things without destroying anything in my previous classes so let's go to size and in height let's put 100 v h and vh is basically viewport height if you put 100 vh you're going to have this element spread across entire documents not only horizontally but vertically as well let's change the color and let's add another element inside of this section so for example let's use a rich text element and what if i want to center this element in the browser well obviously we're going to use flexbox right but this flexbox property needs to be applied not to the rich textblock element that's selected right now but to the blue section containing this element and it's oftentimes that i add elements like this inside my sections or inside containers and i want to quickly move back to the container to in order to set up the layout so what i do instead of clicking in navigator i simply press option on mac and then up arrow to select the parent element now the blue container is selected and i can go ahead in layout and apply display flex and align it to center as well as justify it to middle now what i like to do is select this rich text element and again i can use option and then down arrow now the rich text element is selected i want this rich text element to take 80 percent of the wider browser edge and what i mean by this is i need to change the width of this element and put 80 here however i don't want it to be 80 because then it would be 80 of the container of the blue container also i don't want to do vw which is viewport width and kind of closer because it doesn't take into consideration the height of the browser what i can do instead and you won't really find it in here so we have viewport width but we don't have something that i want to use is viewport mean or viewport max so for example if i say viewport max well this unit is based on the larger dimension of the viewport if the viewport height is larger than the width then the value of for example 80 here will be 80 of viewport height similarly if the viewport width is larger than the height the value of 80 will be equal to 80 percent of the viewport width so i'm gonna use uh vmax here okay now i have what i wanted but i forgot to create the class first with command return and the webflow now gave it a name of reach text block which i want to change just click on this name and change it to let's say cool and by the way using your mouse in webflow is not as much efficient as working with keyboard so if you'd like to do it with keyboard shortcuts you can press command return and then you can press delete and create new class then apply some properties as well okay now let's change the font for this rich text element and i want to select my favorite font however unfortunately it's not on the list so let's escape from here let's select the body of the document and there you go here is the god mode for webflow if you press iddqd which i think you know from playing doom you can go back to typography now but let's select this one and let's go back to typography and here it is let's select our favorite font and this will let you charge even more for your webflow project well done actually there are some fixed rules to apply in order to charge more money for your projects the first rule is make the logo bigger the second one is change typography to comic sense and the third one is obviously make the text blink so what if you've searched entire internet for this blinking text script and now you have it and it's all css based and you need to add it to your website well there are at least a couple of ways in which you can accomplish that for example if you go to your homepage settings and then scroll all the way down to custom code section you can put your script inside the headstock of this home page and then it will be executed the same thing applies to your project settings if you want to put the script to the entire page you'll use a custom code tab here however there is a huge disadvantage of this way of working because you won't see the effect in the designer you'd have to publish your page and then the text would be ready to blink however there's a cool way in which you can preview the changes to css code inside of webflow and it's as easy as adding another element to the body of your document and this is the embed component so let's click on the embed component this will let you inject some code into your page and as long as this is only css code and here i'm styling this cool reach text element and make it blink you are safe to close this and immediately your changes will be visible in the designer that's really great but maybe let's get rid of this html embed for now and for the blue background let's make it even a bit darker and let's go back to our reach text element and change its color so i can change the font color from here and i can change it to some white lighter color and i need it to be almost white maybe gray however i need to be wcg compliant as well and here you have the contrast ratio test now we failed it but if i start changing the color towards white you'll see that at some point i'll pass the test and for example here i'm almost white and i have passed this a a test i could probably even improve it by let's say making the font bigger and this is pretty cool that inside of webflow you have this contrast ratio checker it's um available for all your text fields and it's really really useful and will help you make your website more accessible all right onward to the next tip so you probably know that for reach text field you have those classes that can be separate from the basic html classes in your document for example if you select paragraph now you cannot really create a new class here but you can select all paragraphs and now you can click on this little plus icon to nest selector inside of cool it means that now those paragraphs will be styled this way only if they are nested inside of the school class however what you might not know is that this school class doesn't have to really be applied to reach text element only what i mean by this is if i change any settings for example i make the font bigger and it's getting even prettier now if you change the line height for example now you can use the same nested structure for all of these similar structures on your page so for example if you go back to blue and then add a div block here and inside this div block i'm going to nest a paragraph so i have the same structure like this reach text element and paragraph i have the same d block and then paragraph so if for d block now i apply the same class cool you'll see that the paragraph also inherits all the values so this will let you sometimes really not use so many combo classes but create different structures within your document and then reapply them as you did for the reach text element that's pretty cool as well and if we go back to this rich text element also now if we go to paragraph there's also a site tip for whatever classes you have here you have the count of the classes on the page so we have three classes like this working on the page and if you want to preview them this actually is clickable you can click on that and this will highlight all of the classes of the elements that have discussed applied so this is pretty cool if you want to add something to your rich text element so for example you're using editor or in cms or inside of the designer like this you can click on the plus icon and then use the little embed code element and this is really cool because you don't really necessarily have to embed music or google maps here but you can embed literally anything that you have on embeddedly list so embeddedly is the tool that webflow uses here and there are many different tools that you can embed from so there's a huge list and you can for example embed something like favorite ted talk it's as easy as copying the link of this ted talk and then pasting it here i'm gonna click ok and here we have it can you outsmart a troll by thinking like one great in many cases this is so much easier than using the embed code or the video element the background video element or a video lightbox you can simply use this rich textbooks in order only to embed something from from other places and this is really really cool great now let's say we want to duplicate this entire blue section what you can do is command c and command v to copy and paste it but another way which i use sometimes is press and hold option and then click and drag with your left mouse button and here you have the copy of the element that you've selected let's go ahead and select this second element let's give it a combo class let's say two and change the background color so that we can easily distinguish those sections and uh let's go to body right now and what if you want to create a button that will scroll to this second section well you can press a and then add and search for the button but the easy way is pressing command e and this is a really really great shortcut and webflow if you don't know it command e will let you search literally anything within your project so if you want to add a button you can use the first letters those are a bit unfortunate however if you press return you now have the button let's uh put this button to the top and the common way to scroll to some element is just selecting this section to get to its settings this is d on the keyboard by the way so let's say we want to add an id of section and if you've added the id now for the button uh you can scroll to this section uh to this id but in particular so now if you press command shift p which is a great shortcut for preview another one that i really recommend you to remember you can click on the button and it goes straight to the second section what if we want to change the behavior of the scrolling behavior what if we want to really slow down this uh scrolling there is an attribute that you can use for this target section so let's switch to blue and edit settings i'm gonna add custom attribute let's click on plus and the name of this attribute is data scroll time and this will let you slow it down if you enter any value above one so if you go with zero this will go immediately to this section then if you go for example like 0.5 or 0.75 this will be slightly faster than the default which is one but if you go above one so for example let's use 20 here and save it now in the preview if i click on this button i'm going to wait a little bit and it now starts scrolling it's super slow by the way if you go back from the preview mode right now in the designer it's scrolling as well so that's webflow on autopilot okay let's quickly scroll to the bottom and there's one more attribute that you can use on top so let's add another one this is data scroll without time and you can put different values here for example if you use mid that will make this uh blue section not to go all the way up but just to the middle of the screen so this is another cool tip that you can use all right next up there are two cool extensions that you can install to chrome and from web store you can first search for the one that will search google phones in the web flow and this basically will let you let's go to project settings and from here let's go to fonts so by default you have this really difficult to search and scroll list of google fonts but if you go ahead and add this extension to chrome and then when you'll be back and refresh this page let me do it and now go to fonts now you can easily type the name of google fonts so that you can search for them here it's super cool and easy the second extension that i'd like to show you is webflow chrome extension this will give you pretty cool color picker so an eyedropper that you can use for whatever color field that you have you can click on this little eyedropper icon and then you can select any of the colors that you have on in designer okay let's duplicate this section once more with option drag let's select the new one command return delete the combo class and create the combo class free so that we can easily change the color to some green color from there okay now what i'd like to do is delete the reach text element from here but inside in this blue section let me search for a container now i'm gonna search for a div block inside this div block we're gonna use image and inside also we're gonna put a paragraph okay now for the entire container i'd like to set the display to be flex command return to give this d block a name of card so i can use our favorite combo class cool so that the text is formatted as we love it and now let's copy and paste two times so that we have three cards now let's apply some marking to all of the edges and you can click on the value and then apply it or just type it from your keyboard also if you escape from there you can click and hold and then you can scroll your mouse to the left or to the right to change this value like so if you press and hold option you're gonna do it for both left and right margin you can do the same for top and bottom or if you want to adjust all of the size you simply press and hold shift instead of option and now you can add it to all of the sides of our cards and by the way if you later on decide that you don't want to use this marking bottom it's as easy as option clicking on its value and now it's been resetted you can reset all the values that you have in blue with option click in the style pane now a side tip would be previewing all the margins here and if you want to do it you can use this x-ray mode and web flow i usually do it and then i can hover or over the elements that i want to preview the margins for or i hover over them in the navigator pane this is really cool so let's go out this x-ray mode and what i'd like to do now is truncate a bit of text in here it there's a lot of text and especially when it comes from cms you might use something that's called light clamp i'm going to show you that in a second sometimes you just can make text a little bit more readable and by the way a side tip if you want to select something that's nested inside of this card so any child element it's as easy as pressing and holding command on mark and control on pc and clicking on this very element now i've selected the paragraph and if you want to change how it displays you can go to typography and here you have columns so sometimes it's as easy as applying two columns not everyone knows that you can have two columns for the text here and it's especially useful to apply it to responsive breakpoints so for example you can have desktop and tablet version with two columns and then on mobile you can switch back to one column anyway line clamp is about truncating some of this text in the paragraph all you need to do is use html embed so let's search for embed once again and a little bit of code that i have from css tricks so let's uh paste this code and let's create and apply it to a class so we want to target card and any paragraph inside of card now this line clap clamp property will let you trim it to let's say four lines or two lines or three lines and let's save and close there you have it i have a question for you now so how many times have you added a div block and then created a structure inside this d block only to realize two minutes later that it should have been link block from the beginning i've done it so many times and i had to delete the div blog then create link block and recreate the structure well now you can select the div block and right click on it on the canvas within the designer and simply click on convert to link block it's as easy and now you have this little link block working so no more holy shits at least for this one now let's talk about images if you want to add some dummy images sometimes i just go straight to a cms collection i just create a new cms collection so let's give it a name test and now the most important thing is to add an image field here i will be image and then save field and now if you create collection webflow will let you generate some sample items so let's say you want to generate 10 items and then you automatically generate 10 images that you can use so now let's uh go to a collection that we can add to our body of our document let's go ahead and paste it here and we're going to use collection source this tests and now for like inside we're going to add an um image and for this image we're going to get images from the image field as you can see you can easily load different images and web flow will automatically collect and fetch some images for you so you can use them as dummy images let's now undo it and sometimes i use this way sometimes i just use some dummy images and load them straight into webflow and by the way if you double click on an image you have this old text here so it says you can use all text from the assets or you can have custom description or even create something that's decorative there is no semantic meaning to this image and you don't have to set the alt text for this guy but if you use alt text from assets and then you go to assets you can now go to settings of this image and here is the alt text that you can put so this is pretty convenient because you can do it all at once for all the images that you're using that being said oftentimes in the projects you have much more images in the assets panel actually used so i'm going to show you a simple trick if you publish your website and by the way there is a shortcut shift p to go to this publish dialog menu but if you want to publish instead just press shift return this is a lifesaver so you are publishing a website right now what i'm going to do is i'm going to select all of the images and delete them well before you do it you can press command shift s and that would give you a backup so you can anytime you can press command shift s and save a backup of the current website so all the images will be there and now you're safe to delete them because if you delete those images they will stay in the designer and now if you press shift return so you republish the site and it's publishing let's press shift return once again if you republish the uh site and then refresh the designer so let's press command r and go back to the assets you'll see that the images are here again but only those images that you actually use in your project and now you can go to their settings and add those alt text or decide that this is just a decorative image let's scroll back down to the images in the fourth section right there now let's double click on this guy and as you probably know images in webflow are responsive by default and in 98 of the cases it works beautifully but sometimes you want to turn it off in order to do so press command shift o and then you'll get this extra item in the menu you can turn off responsive image also there's a new loading option and webflow automatically lazy loads your images this is brilliant because it means that the images is being loaded when it's scrolled into view and this tremendously speeds up your website however that's a new feature so in order to make your previously published websites work faster you have to open them and in the designer change these four images individually also it's good that you know it's here because if you want to go back to the old days you can select the second option and for the performance improvements as well you might want to take a look at your links and buttons if you press d to go to the settings now for the external links as well as links within your page you can select this preload method and you have prefetch and prerender here what they do is once your page is loaded they will automatically go and prefetch and pre-render those websites that you have links to and users don't even have to click them so once user clicks them they will be available momentarily and for uh very important cta actions you'll use prefetch because this will download the entire content and for less important you might use pre-render or nothing at all and just leave it to default so this is pretty crucial as well can you make webflow work even faster yes this is thanks to system flow a designer first framework that we've developed with my friend matt initially for our own needs and to make us happier and to make the delivery of our projects for clients faster but this is really game changing for us and i hope that you can also benefit from system flow as much as we do i don't want to explain it in detail but i want to show you three simple tricks the first one being uh the ready-made components that you can use from system flow so for example if you search for a nav bar you can select whatever navbar fits you and just click on the name of the nav bar then you go to web flow press command e command v return and here you have working component the same happens if you work with system flow for figma which is completely mapped framework for your design tool you have the same names as our components for different sections even if you pre-style them you can double click on the name and copy command e command v return and there you have another component filing these components is super easy especially as the framework has a customized page that will let you change the fonts the typography the text and colors globally to the entire framework so you basically map what you have in your design and for example if you want to change this primary color you can do so and you can edit the swatch and then change it to whatever color you have in the design save it and you can see that it changes across entire framework and one last tip that i have from system flow are design tokens so if you go to this design page you have design tokens for typography color for spacing and layout so those are basically hundreds of classes that you can use to apply some padding with a specific value or maybe color so if i go back to our home page and try to use these classes and by the way you'll notice that the homepage is now changed so colors are a bit different say i want to change the color of some part of the text as well so let's select it now and i'm going to wrap it into a span and now let's press command return and use one of the ready-made classes so that's color for the text and i'm going to use primary 60 color which is the pink that we've changed so here it is as easy as that let's say i want to select the heading you can see that we have this heading xl class and i want to change it to some smaller heading it's as easy as going from excel to l and there it is smaller but the margins and puddings adjust accordingly for example if i want to select the tagline and add some extra margin between the tagline and the header let's go ahead and create an extra class i'm going to use spacing margin and i want to use margin bottom and add 24 extra pixels to the bottom of this tagline so that's it it's as easy as it looks and if you want to check out system flow go ahead and navigate to systemflow.com but i also show you these tricks because i feel that they really help in my work so even if you don't want to explore system flow you can implement the same rules and the same tips that i've shown you into your own workflow and maybe create your own framework hope you had fun watching those tips there's more coming so please let me know what you think and also subscribe to the news i'll see you in the next videos

Channel: Learn UX

Views: 3,087

Rating: 4.8297873 out of 5

Keywords:

Id: YDacfaj1zfU

Length: 24min 27sec (1467 seconds)

Published: Mon Nov 02 2020

Reddit Comments

[u/LeetwootDizzi]

Great video!