Video Module

Want to add some additional excitement and interactivity to your pages? Adding a video will not only make your landing page more memorable, it will also give you a higher percentage of conversions from site visitors.

Adding the Video Module to a Landing Page

To add a Video Module to your landing page, click the grey (+) button in the landing page builder. Once the module has been placed in the row of your choosing, you’ll be met with three sets of customization options:

• Content

• Design

• Advanced

Content

The Content portion of your video module is where you can designate the video used, the image you’d like your visitors to see before pressing play, and the administration label your team will use to identify your video.

Video

In this section, you will decide which video you’ll use in your module. Upload your video using MP4 and Webm files that you’ve uploaded to the Net-Results Asset Manager.

Overlay

Here you’ll be deciding which image your website visitors will be seeing prior to pressing play. This can sometimes be referred to as a video thumbnail. You can choose an overlay from a screenshot in your video, or you can upload an image file from the Net-Results Asset Manager or your computer. Don’t decide too quickly here, this overlay is crucial in encouraging your visitors to press play on your videos. Make sure this is inviting but accurate to the content within your video.

Admin Label

This will change the label of the module in the builder for easy identification by you and your team.

Design

Videos are very powerful and visually engaging modules that can either entertain visitors or crowd your landing page. In this section, you’ll control exactly how your visitors view and interact with your video.

• Play Icon: You thought we’d leave you stuck with a generic play icon? No way! You now have the ability to change the color of this icon to match the tone and feel of your landing page. No more big red buttons (unless that’s your thing of course)!

• Sizing: This is the sizing for your entire video module. If the size goes below 100% on the slider, options for aligning your module left, center, or right will automatically appear.

• Spacing: Add customized margins or padding here to help locate your video within your landing page.

• Border: Does the Mona Lisa get hung up without a frame? Of course not! Nest your work of art inside of a border to give it an elevated look. Using this section will allow you to set the border-radius, style, width, and color of your video module.

• BoxShadow: Add a shadow behind your module using one of our 7 pre-built options.

• Filters: Define your color saturation, and the contrast of light and dark areas, add a sepia filter, or blur your entire module. We’ve included an abundance of options for filters in this section. Blend Mode allows you to modify how your image blends with any other layers beneath it. Choose "normal" or return to the default option.

• Animation: Pick an animation style to enable animations for your video module. Each animation will allow you to customize it further, controlling duration, direction, and intensity. Remember that your video needs to be the focus of the section it is nested in within your landing page. Be careful that you don’t make your video look more like an image and less like a video or you may hurt your views!

Advanced

Within the advanced tab, you will find options such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the module's many elements. You can also apply custom CSS classes and IDs to the module.

CSS ID & Classes

Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling or to create links to particular sections of your page. Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated by a space.

Custom CSS

Custom CSS can also be applied to the module and any of the modules internal elements. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons.

Visibility

This option lets you control which devices your module appears on. You can choose to disable your module on tablets, smartphones, or desktop computers individually. This is useful if you want to use different modules on different devices, or if you want to simplify the mobile design by eliminating certain elements from the page.