Video List Section

Add a Video List Section on a page to easily add your YouTube/Vimeo videos that will be playing on the page. This is a great way to keep your website visitors engaged.

Pixpa supports embedding videos from YouTube or Vimeo. You cannot directly upload a video to your website. Apart from this section, you can also add your videos to Gallery or a Banner.

Pixpa enables you to share your YouTube or Vimeo profile in the social links. You can also add your music files hosted on Soundcloud in the Music section.

Points to be noted:

• You can hide your videos from the public (on YouTube or Vimeo) and use the URL here to show them on your website.
• You can upload a .gif file wherever videos are supported.
• In case the video you have added loads a lot, click on the play button and pause it for a few minutes. Then, resume the video. This way, it loads better with less buffering.

In this article:

1. What is a Video List?
2. Adding a Video List section to the page
3. Add and edit list items
4. Sequencing list items
5. Deleting list items
6. Changing section layout
7. Style options
8. Add a Music Section
9. Add Soundcloud music
10. The Full Card and the Text card

1. Video List

Video List is a collection of videos where you can add a description for the video and add a link or button to connect the video list with any other page on the website or any other link.

2. Add Video List Section

• A section can be added to a page. You can either add a section to an already existing page or create a new page within your website.
• On your page, click on the blue + icon to add a New Section to your page.

• You will now see the section categories on the left side.
• Click on the List (1) tab and Video List (2).
• Now, you will see different layouts of the Video List Section (3).

• Choose any section layout and click on it to add it to your page.

3. Add and Edit List Items

Add Video List Item

Once you have added the section

• Click on the Edit Video List (1) button to open the List Item Panel.

• Click on the Add Item (2) button to add a new list item.
• You will have the option to Duplicate and Delete (3) the list items.

Edit Video List Item

Click on the list item that you want to edit. It will open the particular List item editing options.

• Add your Youtube/Vimeo video link (1).

• Set the video to play in a lightbox or on the page only (2).

• Upload an Image (3) for the List Item.

• Add a Title (4), Subtitle (5), and Description (6) of the List Item. You may not find the option of Subtitle and Description in particular list items depending on the layout you choose.

• Click on the Link Builder icon of the Title Link (7) to open the link builder to link the list item title to any page.
• Set the Link to open in a new tab or in the same tab (8).
• Add any type of Link (9) to the list item. You can add a Button/Image link/Social Icon/Text Link. Learn more.
• Save (10) your changes.

See editing a video list item in action:

4. Sequence List Items

• You can easily drag and drop the list items to change the sequence.

5. Delete a List Item

Once you have added a list item, you can edit the same and delete it.

• Click on the Delete icon next to the Video List item.
• Click on the Delete button in the confirmation popup.
• Save your changes.

6. Section Layout

• Click on the Manage Items button to open the Video List editing panel.
• Choose the Layout tab.
• Select the Layout for your section and save your changes.

7. Style your Section

• Click on the Manage (1) button to open the Video List editing panel.
• Choose the Style (2) option.
• Change the Style for the section elements and Save (3) your changes.

You will have multiple Style options for the section:

1. Style Options 
2. Text Style 
3. Hover Colors

Style Options

Items 

1. Choose to Show Items in rows and columns or carousel 
   • If you have chosen the rows and columns option, the list items will be arranged in rows and columns. In this case, you need to specify the number of rows and columns.
   • If you have chosen the carousel option, the list items will be presented as a slideshow. Know more.
2. Set the number of columns for the video list. You can choose from 1 to 10 columns.
3. Specify the Space between columns of the list items.
4. Choose the Content Order i.e., the images of the list items to be displayed first or the associated text.
5. Align the content in the Video List. You can set them to be left, right or center aligned.
6. Choose to Loop the Carousel or not.
7. In case of the Carousel, choose the Navigation Controls. You can choose between No Controls, Arrows – Bottom Center/Top Right/Bottom Right, Chevron, or Dots.

Images 

8. Choose the image crop for the list items. You can set the images as Square, Circle, Landscape,  Portrait, and Dynamic.
9. Choose to have a common corner radius or different corner radius for each side of the list items and set a number (in px) for the corner radius of the list item images. Know more.

• In case you have chosen split corners, you can set different corner radii for each corner.

On Image Hover 

10. Choose the Image Hover Color to be the accent color or to be specified. If you have chosen the accent color, then specify the opacity.
11. If you have chosen the specify color option then set the Base hover color and opacity for the list items.
12. Set the Elements color for the list items of the section.
13. Choose to animate the list item images on hover by clicking on Yes. Check this feature on a live page.

Size & Space 

14. Specify the Image Width for list items.
15. Specify the Content Width for the list items.
16. Specify the Space below Section Headline in px.
17. Specify the Space below images of the list items (in %).
18. Specify the Space below the titles of the list items (in %).
19. Specify the Space below the Subtitles of the list items (in %).

Text 

20. Click on the Change Text Style button to visit the Design section and manage your font sizes and styles. 
21. Set the Title font style for the list items of the section.
22. Set the Subtitle font style for the list items of the section.
23. Set the default Description font style for the list items of the section.

Cards 

24. See how to manage cards.

Shadow 

25. Display – Choose to show the shadow behind the list items always or on hover only.
26. Style – Choose from existing presets or create a custom shadow.
    In case you have chosen the Custom option, then visit this Box Shadow Generator to create a custom shadow. Finally, copy and paste the box shadow CSS.

27. In case you have chosen the presets option, then Choose Shadow Styles from the dropdown.

Buttons & Links

28. See how to manage the styling of buttons & links.

8. Add Music Section

• On your page, click on the blue + icon to add a New Section to your page.

• You will now see the section categories on the left side.
• Scroll down and choose the Video and Music Section (1) option where you can choose from the different layouts.

• Choose any section layout (2) and click on it to add it to your page.

9. Add Soundcloud Music

• Click on the Soundcloud thumbnail.
• This will enable the Embed button, click on it.
• You can add your SoundCloud embed code in the embed box.
• Click on Save.
• That’s it! Your SoundCloud music has been added.

See in action:

10. The Full Card and the Text Card

When you turn on the Full/Text Card over your video list, the list items will have an outline and background with the card color that you have selected in the Design section.
Also See: Website colors and spacing.

Full Card

When the full card option is selected, the card color is applied to the whole card i.e., the video thumbnail and the text with it.

Have a look: 

Text Card

When the text card option is selected, the card color is applied only to the text present with the video thumbnail.

Have a look: