Be sure to keep your classes generically named, clean, and as minimal as possible.įor example, instead of naming something “Black Hero Text,” try creating a combo class of “All H1 Headings” + “Black Text” instead. I wrote a lot more about this in my series showing how to build an agency website, which might be helpful. It’s super easy to start, but it can be challenging to keep things clean in larger sites. Styling your classes is both the easiest and most difficult part of Webflow. I’m not going to go into best practices for grids here, but Webflow's landing page tutorial using grid will get you up to speed if you want to explore grid. You can also use the grid element (or set your div’s display property to grid) on your site, if you want to. I usually do this by adding a color-block div, and then changing its color over and over until all of my swatches are in Webflow. If you have one or two, this is a quick process, but if you have a lot, this can be tedious. Once the basic styles are defined, it’s a good time to add all your custom colors. If you’re using the Figma team styles, it’s helpful to keep things organized in a similar fashion. Just define everything on the page to match your Figma file. If you’re using the template I recommended, this should be a snap. A couple hundred kilobytes may seem like chump change, but it’s best to cut weight whenever possible to get that load time down. Pro tip: Fonts are large, so if you want to optimize the performance of your site, select as few weights as needed. If it’s not a Google Font, upload the TTF or OTF file and to select the weights you want. Speaking of custom fonts, if the one you’re using isn’t in the default list, now’s a good time to jump into the project settings and, if it’s a Google Font, select it from the list.
0 kommentar(er)
