Typography
You'll see that these typography elements don't have classes. That's because on this page, we want to edit the styles after selecting "All H1 Headings" for example, so that it will effect all the elements on the site. To do this, select the H1 below, click where it says "Select a Class or Tag" and select "All H1 Headings" at the bottom of the list.
If you edit styles here, they will change across the site
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
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.
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.
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.
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.
Lorem ipsum dolor sit amet
Image upload protocol
Before upload
Here's what we recommend for future uploads:
- Resize images down to 3000px at their largest side (3000x2000 for 3:2, 948x3000 for tall 6x19 images, etc.)
- Run them through a program like ImageOptim (that's what we use most often)
- Thoughtfully rename photos with location, activity, and a searchable title
Alternately, this can be accomplished in a Photoshop or Lightroom Export for Web by setting the pixel constraints in step 1 and exporting at 70% quality.
When uploading
- Check image size. We try to keep things under 400mb so Webflow's got space to optimize for all typical sizes.
- Add alt text. Describe the image in a sentence. This will help with SEO and performance.
After upload
Check the image placement and make sure it's loading in quickly. If so, you're all set!
Color
These colors have been created using Global Swatches. If you edit the Global Swatch color, it will change every element that uses that color swatch.
Primary Colors
Secondary Colors
Neutral Colors
Logo
Rich Text
Rich Text 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.
Heading two
Animations
