![]() Note: when adjusting width or height of an element, you can quickly jump up or down 10 pixels by holding down Shift plus the up or down arrows. Set the Max W (maximum width) to 450 pixels.Let’s also set a maximum width on the Heading: Choose a new Font (e.g., “DM Serif Display”).Let’s style the Heading with a different font: Now that you’ve updated some of the Body (All pages) tag default styles, which will be inherited throughout your project, you can style some of the individual elements you’ve added. Increase the contrast between the background color and the font color and choose a lighter font color (e.g., “white”).With the Body (All pages) tag still selected, let’s change the default font color to something more legible: Set the color to a dark gray color (e.g., “#141414”)īecause the default font color is also a dark gray, the current text on top of the dark gray body isn’t very legible.Click the default color swatch to open the color picker.Click the current font to open the Fonts menu.Let’s update your default project font to the one you just added: Now that you’re back in the Designer, choose the Body element again and select the Body (All pages) tag in the Selector field to continue styling your project’s default styles. Add top and bottom padding of 60 pixels.Let’s do this by changing the Section’s default Spacing values to add padding on the top and bottom: You can control the spacing around the Section using margin and padding to give your Section and the text inside it more breathing room. The text pushes right up to the edge of the Section. And there’s no margin - the space outside an element’s boundary. If you select the Section and look at its Spacing in the Style panel to the right, by default there’s no padding - the space inside an element’s boundary. The text elements you’ve added to the Container affect the height of the Container, and therefore, the height of the Section. Double click the default text to change it (e.g., “I elevate user experiences using telekinesis.”) If you’re not familiar yet, you’re going to love Webflow’s built-in slider (we don't call them carousels) component not least because it makes all these best practices super easy to follow, and actually adheres to most of them by default.Drag a Heading from the Add panel into the Container underneath the Text block.Double click the default text to change it (e.g., “Welcome!”).Drag a Text block from the Add panel into the Container. ![]() The Container keeps everything neatly bound inside that Section, so you’ll be dragging a lot of your added elements into that Container.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |