What is the 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 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 prior to 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 be using 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, 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” to 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 modules many elements. You can also apply custom CSS classes and IDs to the module.

CSS ID and 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 with 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.

Visability

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.