Style Guide

This Style Guide page contains styles and components used through the website. You can change any style from this page and it will be updated throughout the site.

H1

It's all about your story

H2

It's all about your story

H3

It's all about your story

H4

It's all about your story

H5
It's all about your story
H6
It's all about your story
Block title

It's all about your story

Block Subheading

From the very day you met to the plans for future — let us organise and held your event where every detail matters

Paragraph

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.

Paragraph Big

No matter your budget, we can handle it and bring your ideas to the next level

Quote
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.
Quote author
— Mila Thomson, CEO of Manê
Unordered Lists
  • No matter your budget, we can handle it and bring your ideas to the next level
  • No matter your budget, we can handle it and bring your ideas to the next level
  • No matter your budget, we can handle it and bring your ideas to the next level
ordered Lists
  1. No matter your budget, we can handle it and bring your ideas to the next level
  2. No matter your budget, we can handle it and bring your ideas to the next level
  3. No matter your budget, we can handle it and bring your ideas to the next level
Rich text element

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing.

For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

  • Here's a list element
  • Here's a list element
Image caption here
Text link
Text Link
All links
Text Link
Button
Button Text
secondary Button
Button Text

Helpful links

Instagram Feed Styling

This page contains instructions on managing and updating Instagram Feed symbol on your website.

Structure

Instagram Feed symbols consists of:

  • Section
  • Container
  • Vertical Wrapper
  • Block Title Wrapper
  • Block Subtitle
  • Instagram Grid Wrapper
  • Instagram Link Block
  • Thumbnail

To adapt it to your brand, you will need to update the following:

  • The name of your Instagram profile in the 'Block Subtitle'
  • The link in the 'Block Subtitle'
  • The links in each 'Instagram Link Block' element
  • The images in each 'Thumbnail' element

Instructions

  1. With the Instagram Grid symbol selected, click the 'Edit main symbol' icon.
  2. To edit your Instagram profile mane, click on @manewedding in 'Block Subtitle' element, and change it your profile name.
  3. To edit the link to your Instagram profile page, select the link element inside of the 'Block Subtitle' element or find it in the Navigator panel on the left sidebar. You can see a popup with the link settings appeared. There, replace the link with your Instagram profile page link and exit the popup. Your changes will be saved automatically.
  4. To edit Instagram Feed item, click any of the images you want to update. With an image selected, click the gear icon and then click 'Replace image'. You can select an image from the assets panel or upload a new image from your computer.
  5. Don't forget to update the link to the image in Instagram that you have just updated. To do this, select an 'Instagram Link Block' parent element of the Thumbnail you want to update. Then click the gear icon to open the settings popup. Replace the link with an actual link to your image. Click exit.
  6. Repeat the process for the rest of the images and link blocks. When you finish, unselect the Symbol element or click 'Back to instance' button near the top left corner of your screen.
  7. Your changes to the symbol will be reflected throughout the website. Publish the website to see them on a live site.

There's the Instagram Grid symbol below on this page for your convenience, try editing it yourself.

If you need help with it, feel free to reach out for support.

We've Planned Our Own Reel Wedding

AND FILMED MANY MORE

Check Out Our Top Tips for Planning Yours
@reelweddingco

Options

There's another way to integrate Instagram feed to your Webflow website. Check out the link to the Webflow university:

StoriesAboutContact
Reel Wedding Co © All rights reserved