Scrollytelling sections are one of the most popular pre-coded components in Vev, and for good reason. Transitioning the background from one image or video to another while content glides across the foreground lets you embellish your storytelling and captivate your audience.

Step 1: Add scrollytelling sections

To add a scrollytelling section, open the + Add Menu or press shortcut: M, search for “Scrollytelling Image”, and click on the canvas to add it.

It’s important to note that you need to add more than one scrollytelling section to get the desired effect. In this example, we’ve used three scrollytelling image sections back-to-back. Add the second and third sections by either copy and pasting the first section or via the + Add menu.

From the configuration modal (double-click the section to open), you can also add a zoom effect to bring further fluidity to your design, as well as adjusting the transition between two scrollytelling sections.

Step 2: Add a background

You can change the section's background from the right-hand Style panel. Let’s use the same background image for the first and second scrollytelling sections (the image of Tine and Fredrik sat on the countertop), but add a black fill overlay over the top of the second section and reduce the opacity (this can be achieved by adding additional layers in your background). The first and second sections will now appear to get darker as you transition between them.

In the third section, add the background office scene image with the same black overlay on top.

Step 3: Add content

Next up: content! We’re going to leave the first of these three scrollytelling sections blank, but add content into the second and third.

In the second section, we’re going to create a text element with a video element beside it. For the video, we’ll be framing it with the same style as we did in all of the previous sections (in a ‘90s-style web browser window).

Add a text box and add an H3 header followed by a paragraph. Then set all fonts to be white, so it is readable against the dark background. For the H3 tag, use the “Vollkorn” font set to 42px, and for the paragraph use Open Sans set to 16px.

H3 copy: Trusted by world-class creatives to build impactful digital content

Paragraph copy: Whether you are a startup or large enterprise, our customers have used Vev to drastically scale their content, save time, and be even more creative. Now add a link button just below the text (you can copy/paste the button you used in the Image Gallery section above). Double-click the Link Button element to open the contextual modal and change the text to “Case Studies”, then group the text and button together.

For the video, copy one of the ‘90s web browser groups from the previous sections. Once placed, we’ll swap out the image for the video element. You can do this by selecting the element, right-clicking the image, and choosing “Swap”. This will open the + Add menu where you can choose a video element.

Note: For Vimeo or YouTube videos, use their respective elements. Once added to your canvas, simply double-click to open the configuration menu and paste the live video link.

Step 4: Create a Shared Style

With the fonts styling added, we can create a Shared Style that can be reused for future text boxes. This means you won’t need to manually set the styles for every text box using the same styles throughout the project. With the text box selected, you will see the “Style” field in the Style panel. Click the + icon, and give your Shared Style a name. Once, the name has been inputted, press the ✓ icon to save it.

Whenever you select a text element within the same project you will be able to select the saved Shared Style from the dropdown menu.

If you need to amend the Shared Style, make the necessary changes directly within a text element using the style. Whenever changes are made to a style, a refresh icon will appear next to the Style dropdown menu. Click this to update the Shared Style and push the changes to any text element using it.

Note: Shared Styles also save changes you make to specific device modes.

💡 Learn more about Shared Styles

Step 5: Auto Layout We can now put our text and video element into an Auto Layout frame, which will allow them to stack on smaller devices, ensuring you create a responsive design without putting in extra work!

To create an Auto Layout frame, select both groups and head to the Style panel. When more than one item is selected, the Auto Layout option will automatically appear—just click the + icon to create the frame.

This will give you a few additional options to choose from, such as alignment, padding, and the ability to “wrap content”. To ensure that these components stack on smaller devices, you will need to ensure that “wrap content” is ticked.

Step 6: Finish your scrollytelling sections

We can now copy and paste this auto-layout group over to the third and final scrollytelling section and change the content as needed. In our example, we use an image in this section so you can apply the same swapping technique we used in step two.

You can now hit preview (shortcut: P) and experience the scrollytelling transition between these three sections.

Onto our final collection of sections: horizontal scrolling. This feature is popular for changing up the flow of a page or creating an entirely unique experience from start to finish.

Step 1: Add horizontal scroll sections

We’ll start out by adding a “Horizontal Scroll” section onto the canvas via the + Add menu. Just like scrollytelling, you’ll need at least two of these sections back-to-back for the horizontal scrolling effect to work. When adding the first Horizontal Scroll section onto your canvas it will automatically add two sections. We’ll then want to go ahead and add the third section in.

For ease of design, these sections will appear vertically stacked inside the Design Editor, but just hit “Preview” at any time to see the horizontal magic in action.

Step 2: Add a background image

With these three sections added, we’re going to go in again and update the background image via the Style panel to the grid with the white background. This will already be available within your image library.

Step 3: Add content

From the previous scrollytelling section, copy across the Auto Layout frame with the text group and window frame, and paste it into each of the three Horizontal Scroll sections. Since we’re using a light background for this section, let’s make the text black. In these text elements we’ll be swapping out the H3 for an H4 tag and using the “Open Sans” font at 42px.

We recommend creating a separate Shared Style here to ensure that the remaining sections use black text without effecting the previous sections.

For the text for these sections, let’s use the following:

Step 4: Swap out elements

In each of the different sections, we are going to replace the element of the frame with 3D Object, Image Compare, and Image Carousel elements and ensure the heading in the text element matches appropriately.

🎉 Congratulations, you’ve built an interactive website in Vev!

In the next article we’re going to take a look at how we can take this project further by enhancing certain elements of this project with add-ons.