Naming Pages
Name pages with the following convention:
- Use a short name for the Page Name, which is only visible to you.
- The page name will automatically generate a Slug, which is used in the URL. Shorten it if necessary to keep it clean.
- In the SEO Settings, add the site name at the end of the Title Tag. Use | With My Own Two Hands to keep it consistent.
- Add a Meta Description if you want the link to have a description on Social Media. Leaving it empty is okay since it will not influence your Google searh ranking.
- Under Open Graph Settings, you can also specify a thumbnail image for social media sharing. You can upload the image to Webflow, then copy the URL of the image, and paste it in this field.
Color
Typography
Visual-Only Classes
Use these elements for styling text elements independent of their HTML tag. Note that these will reset vertical margins to 1rem or 0; consider using wrapper elements to provide additional padding instead of cascading the class names. Click to edit for preview.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.
Semantic Elements
Use these elements for proper heading hireachy and improved accessibility. Use Visual-Only Classes to stylize them instead of using heading levels only for visual purposes. These come with predefined margins as a safe fallback for CMS editorial content where classes are not applicable.
Heading 1
Heading 2
Heading 3
Heading 4
All paragraph elements are clamped at a width of 60 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
“Receiving water from WMO2H gave our community hope. It will bring a new future to our people.”
Controls
Images
Here’s a recommended workflow for uploading long-term images.
- Crop to needed aspect ratio: 16:9 5:4 6:5 4:6 2:1 etc. See predefined aspect ratio in the cropped-image class/selector. This will be decided by your art direction.
- Downscale to needed size, usually at a width of 1920 for full-width landscape, 720 for half page figure, 480 for 4 column lists. When available, use Preserve Details or Lanczos 3 Non-Separable algorithm for best quality.
- Export to jpg format at 85% quality.
- Strip all metadata, but keep color profile if possible.
- Rename file in kebab-case style, preferably with page structure implied, e.g., home-intro.jpg .
- Once uploaded, properly add alt descriptions for images that have crucial semantic meanings. Set non-semantic elements to Decorative: decorative icons and symbols, backdrop image with no particular narrative other than composition.
- For images that will be dynamically cropped, use the cropped-image container, and add a predefined combo class for aspect ratio locking, then add an image element inside with cropped-image__content. This will also automatically add parallax scrolling effect to the image. Inspect the example image below for reference.
