Adding a Flourish element

Embed your custom data visualizations made with Flourish Studio

Lewis Bowen avatar
Written by Lewis Bowen
Updated over a week ago

Add data visualization to your project directly from Flourish to bring a whole new level of interactive content to your design.

Flourish element in Vev

Adding a Flourish Element

As an Element

  1. From the top menu bar, click on the Add Menu (Shortcut: M)

  2. Search for and select Flourish

  3. Click and drag the element onto your canvas

As a Section

  1. From the top menu bar, click on the Add Menu (Shortcut: M)

  2. Search for and select Flourish

  3. Press and hold the Alt (Windows) or Option (Mac) key

  4. Click where it says Add section here

Embedding your Flourish project

  1. Double-click the Flourish element

  2. Paste your project link in the Flourish project link field

Your Flourish project will show up in the preview mode and when published.

Styling a Flourish element

  • Spacing top: Add padding to the top of the Flourish section in pixels or % to keep spacing between sections

  • Spacing bottom: Add padding to the bottom of the Flourish section in pixels or % to keep spacing between sections

  • Width: The width of a Flourish section can't be altered, it'll always be set to cover the 100%

  • Height: Set the height of the Flourish section in Pixels, % or set it to Auto so that it grows as you add content to it

  • Min H: Sets the minimum amount of height pixels a section can be. A red stippled horizontal line inside your section will reflect the minimum height

  • Clip content: Toggle to hide the content that goes beyond the section's edges

  • Resize to fill vertically: Click to set the section's height to 100%

  • Border: Set a border color, opacity, and line weight for the element's container

Configuration options

Parameter

Description

Flourish URL

Where you can paste your project's link.

Enable Scrollytelling

Toggle on to enable a scrollytelling effect. It's mostly used when adding the element as a section (only works with Flourish stories).

Did this answer your question?