Blog Post

Roni Landau • Oct 13, 2020

10 Gorgeous Video Sections

Ready, set, action! You've got 10 great Video Sections, newly added to the editor. Located between the Gallery and Events categories, the new Video category has 10 striking designs that are perfect for a range of site styles.





Scroll down to see all the new Video Sections. Immediately below these images, you'll see  step-by-step instructions for recreating one of them on your own.

You can use these Sections as Hero images (with video background), for testimonials (show people giving feedback via video), for services, store categories and so much more.

Remember: You can now upload videos directly to the editor - no need to upload them first to an external platform. This makes adding videos to your sites that much easier!






Hero Video Sections

  • Slide title

    Write your caption here
    Button
  • Slide title

    Write your caption here
    Button
  • Slide title

    Write your caption here
    Button
  • Slide title

    Write your caption here
    Button
  • Slide title

    Write your caption here
    Button

Testimonial Video Sections

  • Slide title

    Write your caption here
    Button
  • Slide title

    Write your caption here
    Button


Text & Video Sections

  • Slide title

    Write your caption here
    Button
  • Slide title

    Write your caption here
    Button

Shops & Services Section


How-to Guide for Recreating A Section


To recreate this Section on your own, follow these steps. 


  1. Add a
    row. Set the row background color to white, set the right and left padding to 40px, and the top and bottom padding to 100px.
  2. Add another column to the row so you have 2 columns.
  3. In column 1, add 3 widgets: Title, text and button.
  4. In column 2, set all padding (top-bottom-left-right) to 50 px.
  5. Add a background image with shapes in png (so you keep a transparent background) and set the position to “Full image”.
  1. Add an inner row (with 2 columns):
  2. In column 1: Add a background image and set the position to cover.
  3. Add a spacer widget and set it to the 200 px.
  4. In
    column 2: Add a background video, enable video in loop, set horizontal and vertical position to 50%.
  5. Add a spacer widget and set it to the 215 px.
  6. Hover the spacer until you see a small blue square in the bottom right corner. This square enables you to change the spacer’s dimensions. Drag the square inwards to make it more narrow than the column.




  1. Set the column spacing: set the left and bottom margin to 50 px and the top margin to -50 px.



1. Copy the inner row and paste it immediately below.

2. Replace the image with a video, and the video with an image, to create variety. 


Adjust for Mobile

To set the mobile version of this section, open the mobile view and adjust as follows: 

  1. Open the row editor: Choose the two row layout.
  2. Reverse the column order so the gallery displays above the text.
  3. Reset all spacing to 0px.



Open the inner row editor:

  1. Reset all spacing to 0px.
  2. Change the inner row layout to 2 columns.


  1. Set the spacers on all the columns (both background images and videos) to 150 px.


Remember: If you've built a section and love it, you can save it and use it over and over again using Team Sections. Your teammates can also use it. Just click Save as Section, give it a name, and it will be saved for future use. 




LATEST POSTS

Three squares with icons on them and the words `` more design power ''.
By Liron Hilb Horev 02 May, 2024
Alternative image on-hover, plus 3 more updates you wanted.
A blue background with the words seo overview on it.
By Tal Levi 30 Apr, 2024
A new way to instantly see and solve SEO issues, built right into the platform.
A picture of two cards with the words ``6 new store updates '' written on it.
By Ofri Baram 25 Apr, 2024
Sync the catalog with Google, add an image or text block to product pages, and more.
Show More
Proudly built on the Duda Responsive Website Builder
Share by: