All Collections
WEB PLATFORM
Design
How to Use the Video Landing Page Builder
How to Use the Video Landing Page Builder

Learn how to design your own custom landing page using Covideo's new video landing page maker.

Katherine Deighan avatar
Written by Katherine Deighan
Updated over a week ago

Create, save and reuse endless designs with Covideo's new video landing page builder. Select your layout, style, colors, fonts, and more. Use your logo, images, and graphics to build your perfect page and then share your masterpiece with other team members to use inside Covideo.

Use our video landing page builder to:

  • Cobrand landing pages for client presentations, projects, and proposals.

  • Customize pages for specific events, webinars, and conferences.

  • Or use them to promote new products, features, and collaborations.

You're in the designer's seat now with full control to customize and configure your landing pages, your way, for your look.

Learn how to use Covideo's video landing page maker in the video below or following the step-by-step guide.


How To Create a Custom Landing Page

To create your own custom landing page, navigate to the design page in your Covideo account. You’ll be brought to your landing page library. Click “add new design” to begin.

Step 1: First, choose a starting layout for your landing page. This will just determine the general starting placement of your logo, contact information, video player, CTAs, and social links. These can all be changed later. Then click, “continue”.

Step 2: Now select from the starting styles that most closely matches your style. Again, everything can be changed later. Click, "continue."

Step 3: Here is where all of the customization capabilities begin. Your default CTAs, social icons, and contact info will auto-populate the landing page viewer.


Editing Sections of Your Video Landing Page

The sections tab will show all of the various sections on your landing page. Their order will slightly differ depending on which layout you choose, but will look generally the same. Hovering over a section title will show which section is being affected in the viewer. The sections can be rearranged by clicking and dragging any section.

Clicking into any section will open it’s customization options. On every section will be a hide button, to hide the section, and a delete button, to delete the section.


Section: Header -- Background Color or Image

Under this “header” section is the option to change the section’s background color. Or upload an image to display as the background. If an image is uploaded, you can choose between “fill” or “fit” and the alignment of the image in the section.


Section: Header -- Logo

Step 1: Under the header section of this layout is the Logo and Text sections. In the logo section, go ahead and delete the placeholder logo.

Step 2: Then click to upload a new logo.

Step 3: The size of the logo can be edited either by changing the dimension or switching to width percentage and selecting a different percent. “Position” determines the alignment within the section.


Section: Header -- Text

In the text section, you can edit the content of the text box like any other text editor, including hyperlinking parts of the text. Then edit the text style by choosing a font, weight, size, and color. As well as the position of the text within the section.


Section: Video Player

Step 1: To edit your video player, click into the video player section.

Step 2: To edit the color, style, and position of the play button and the video progress bar, toggle the switch to "override appearance".


Section: CTAs

Step 1: The CTA section is where the appearance of your CTA buttons are edited. Whatever CTAs you have on default is what will populate here.

Step 2: You can select the color of the button(s), change the text style, and choose the shape of your CTA buttons.

Step 3: If you want to change the color of the CTA button and text for when your mouse hovers over the button, toggle the switch "Add style on mouse over." Then select your button and text colors.


Section: Social Links

Step 1: In the social links sections, you can also change the shape style, position, and section background of your social icons.

Step 2: To add, edit, or remove social links from your video landing page, select "edit social links here." Then, you can edit your social links accordingly.


Adding Additional Sections

Step 1: In addition to the default sections, extra sections can be added by clicking “add section”.

Step 2: There are several options to choose from including text, embed video or playlist, photo, and links.

Text section

Includes all the same options as the section previously shown with your contact information and is great for adding company slogans or any other extra info.

Embed video or playlist

This allows you to embed additional videos onto your landing page. These can easily be pulled from your Covideo library by switching to the embed tab in the video sharing dialog box. Find the video(s) you want to add in your Covideo library, then copy the embed code, and paste it into the box. If multiple videos are added, they will show as a playlist that can be toggled through.

Photo Section

In the photo section, you can add multiple photos to your landing page. This is great for showing off official product images. Just click “add photo”, then “upload image”, and browse your computer for the photo. Click “add photo” for each photo you want to add. Grid size determines how many photos are in each row. Clicking on a photo opens a preview of it on the landing page.

Links Sections

The “links” section works similarly to the “CTA” section. Click “add link” for each new link you want to create. Type in the display text and URL for the button. Then customize the buttons with the various color and style options.


Pages: Editing the Entire Landing Page

Switching to the Page tab with show options that affect the whole landing page. “Change layout” switches to a new starting layout. Same with “change style”.

“Main Color” will change the color of any section whose colors or background have not already been edited. Same with the background image.


Previewing and Saving Your Video Landing Page

Click the “preview” button to get a preview of your landing page in progress. Then press escape to exit the preview.

Once you’re done with the landing page, click “save design”. Then give the landing page a name. Flip this switch to share it with your whole company, then slip this switch to set as default for everyone in your company. Click “save design” when done.


Accessing Your Custom Video Landing Page

Back in the landing page library, you can search for your new landing page or flip the “Only show my custom landing pages” switch. On the landing page, you can set it as your default, preview it, edit it, or delete it.

Did this answer your question?