Home v4 via Gutenberg

Home v4 of Vodi is built using Gutenberg.It has 13 blocks.

The Details

1. Videos Slider

Settings

Field Type Description Default
Search Post Text Search the video by id or name. None
Pick an image Media Upload slider background image None
Design Options Panel Body Adjust the block by margin and padding values None
Padding Top Range Control Enter number pixel to add padding top. None
Padding Bottom Range Control Enter number pixel to add padding bottom. None
Padding Left Range Control Enter number pixel to add padding left. None
Padding Right Range Control Enter number pixel to add padding right. None
Margin Top Range Control Enter number pixel to add margin top. None
Margin Bottom Range Control Enter number pixel to add margin bottom. None
Margin Left Range Control Enter number pixel to add margin left. None
Margin Right Range Control Enter number pixel to add margin right. None
Additional CSS Class Text Enter additional class name. None

Output

2. Section videos live coming soon

Settings

From the block list choose Layout Elements –> Columns block then choose 2 columns then go to Advanced tab and give class name vodi-8-4 section-videos-live-coming-soon in Additional CSS Class input.

In the first column click add block icon from the block list choose Vodi Blocks –> Section Live Video Block 

2.1 Section videos live block


Field Type Description Default
Live Title Text Enter live title Live
Footer Action Text Text Enter footer action text  View All
Footer Action Link Text Enter action URL #
Video Limit Slider/Input Enter the number video Limit 3
Video Columns Text Enter the number of columns 1
Order by Text Defaults to ‘Date’. One or more options can be passed Date
Featured Checkbox Select featured video Disable
Top Rated Checkbox Select top rated video Disable

In the second column click add block icon from the block list choose Vodi Blocks –> Section Coming Soon Block

2.2 Section Coming Soon block

Field Type Description Default
Coming Soon Title Text Enter coming soon title Coming
Footer Action Text Text Enter footer action text  View All
Footer Action Link Text Enter action URL #
Video Limit Slider/Input Enter the number video Limit 3
Video Columns Text Enter the number of columns 1
Order by Text Defaults to ‘Date’. One or more options can be passed Date
Featured Checkbox Select featured video Disable
Top Rated Checkbox Select top rated video Disable

Output

3. Full-width Banner Block

Settings

Field Type Description Default
Pick Banner Image Media Upload Banner Image None
Link Text Enter Banner Link #
Design Options Panel Body Adjust the block by margin and padding values None
Padding Top Range Control Enter number pixel to add padding top. None
Padding Bottom Range Control Enter number pixel to add padding bottom. None
Padding Left Range Control Enter number pixel to add padding left. None
Padding Right Range Control Enter number pixel to add padding right. None
Margin Top Range Control Enter number pixel to add margin top. None
Margin Bottom Range Control Enter number pixel to add margin bottom. None
Margin Left Range Control Enter number pixel to add margin left. None
Margin Right Range Control Enter number pixel to add margin right. None
Additional CSS Class Text Enter additional class name. None

Output

4. Videos with Featured Video

Settings

Field Type Description Default
Section Title Text Enter the section title. Popular Replays
Action Text Text Enter the Action Text. Today
Action Link Text Enter the Action Link. #
Plus Button Click plus to add more action text and action link. None
Minus Button Click minus to remove action text and action link. None
Background Color Select Control Choose the background color Default
Pick an image Media Upload background image none
Style Select Control Choose the style of the block Style 1
Header Style Select Control Choose the header style of the block None
Featured Video Text Enter featured video none
Video Attributes Panel Body Select the video attributes none
Columns Range Control Drag the slider to set the number of columns to be displayed 2
Order By Select Control Choose the order of your videos, either by Title, Date, Id. Random
Order Select Control Choose the order of your videos to be displayed either in Ascending or Descending Order. ASC
Search Post Text Search the video by id or name None
Search Term Text Search the video by category slug None
Featured Checkbox Check to show featured videos. None
Top Rated Checkbox Check to show Top Rated videos. None
Design Options Panel Body Choose the design options None
Padding Top Range Control Enter number pixel to add padding top. None
Padding Bottom Range Control Enter number pixel to add padding bottom. None
Padding Left Range Control Enter number pixel to add padding left. None
Padding Right Range Control Enter number pixel to add padding right. None
Margin Top Range Control Enter number pixel to add margin top. None
Margin Bottom Range Control Enter number pixel to add margin bottom. None
Margin Left Range Control Enter number pixel to add margin left. None
Margin Right Range Control Enter number pixel to add margin right. None
Additional CSS Class Text Enter additional class name. None

Sample Output

5. Videos Carousel Flex Header Block

Settings

Field Type Description Default
Section Title Text Enter the section title. None
Nav Action Text Text Enter nav action text you can add more action text None
Nav Action Link Text Enter nav action URL you can add more action URL #
Plus Button Click plus to add more action text and action link. None
Minus Button Click minus to remove action text and action link. None
Background Color Select Control Choose Background color Default
Style Select Style Choose Style Style-1
Footer Action Text Text Enter the Footer Action text icon None
Footer Action Link Text Enter the Footer Action link #
Video Attributes Panel Body Select the video attributes from the below options.
Limit Range Control Drag the slider to set the total number of videos to be displayed. None
Order by Select Control Choose the order of your videos, either by Title, Date, Id. Random
Order Select Control Choose the order of your videos, either by Title, Date, Id. ASC
Search Post Text Search the video by id or name. None
Search Term Text Search the video by category slug None
Featured Checkbox Check to show featured videos. None
Top Rated Checkbox Check to show Top Rated videos. None
Carousel Args Panel Body Select the video attributes none
Slide To Show Range Control Drag the slider to set the total number of  videos to be displayed None
Slides To Scroll Range Control Drag the slider to set the number of  videos to be scrolled None
Infinite Scroll Checkbox Check to infinite scroll carousel. Random
Design Options Panel Body Adjust the block by margin and padding values None
Padding Top Range Control Enter number pixel to add padding top. None
Padding Bottom Range Control Enter number pixel to add padding bottom. None
Padding Left Range Control Enter number pixel to add padding left. None
Padding Right Range Control Enter number pixel to add padding right. None
Margin Top Range Control Enter number pixel to add margin top. None
Margin Bottom Range Control Enter number pixel to add margin bottom. None
Margin Left Range Control Enter number pixel to add margin left. None
Margin Right Range Control Enter number pixel to add margin right. None
Additional CSS Class Text Enter additional class name. None

Output

6. Videos Carousel Flex Header Block

Settings

Field Type Description Default
Section Title Text Enter the section title. None
Nav Action Text Text Enter nav action text you can add more action text None
Nav Action Link Text Enter nav action URL you can add more action URL #
Plus Button Click plus to add more action text and action link. None
Minus Button Click minus to remove action text and action link. None
Background Color Select Control Choose Background color Default
Style Select Style Choose Style Style-1
Footer Action Text Text Enter the Footer Action text icon None
Footer Action Link Text Enter the Footer Action link #
Video Attributes Panel Body Select the video attributes from the below options.
Limit Range Control Drag the slider to set the total number of videos to be displayed. None
Order by Select Control Choose the order of your videos, either by Title, Date, Id. Random
Order Select Control Choose the order of your videos, either by Title, Date, Id. ASC
Search Post Text Search the video by id or name. None
Search Term Text Search the video by category slug None
Featured Checkbox Check to show featured videos. None
Top Rated Checkbox Check to show Top Rated videos. None
Carousel Args Panel Body Select the video attributes none
Slide To Show Range Control Drag the slider to set the total number of  videos to be displayed None
Slides To Scroll Range Control Drag the slider to set the number of  videos to be scrolled None
Infinite Scroll Checkbox Check to infinite scroll carousel. Random
Design Options Panel Body Adjust the block by margin and padding values None
Padding Top Range Control Enter number pixel to add padding top. None
Padding Bottom Range Control Enter number pixel to add padding bottom. None
Padding Left Range Control Enter number pixel to add padding left. None
Padding Right Range Control Enter number pixel to add padding right. None
Margin Top Range Control Enter number pixel to add margin top. None
Margin Bottom Range Control Enter number pixel to add margin bottom. None
Margin Left Range Control Enter number pixel to add margin left. None
Margin Right Range Control Enter number pixel to add margin right. None
Additional CSS Class Text Enter additional class name. None

Output

7. Blog Section Block

Settings

From the block list choose Layout Elements –> Columns block then choose 2 columns then go to Advanced tab and give class name vodi-blog-section-2-columns__reverse in Additional CSS Class input.

In the first column click add block icon from the block list choose Vodi Blocks –> Vodi Blog List Section

7.1 Vodi Blog List Section

Settings


Field Type Description Default
Section Title Text Enter section title Action Life
Action Text Text Enter the Action Text. View All
Action Link Text Enter the Action Link. #
Plus Button Click plus to add more action text and action link. None
Minus Button Click minus to remove action text and action link. None
Style Select Control Choose the style Style 1
Hide Excerpt Checkbox Check to hide excerpt Unchecked
Enable Divider Checkbox Check to enable divider Unchecked
Post Attributes Panel Body Select list of post attributes  
Limit Range Control Drag the slider to set the number of posts to be displayed 5
Order By Select Control Choose the order of your post, either by Title, Date, Id. Random
Order Select Control Choose the order of your post to be displayed either in Ascending or Descending Order. ASC
Search Post Text Search the post by id or name None
Search Term Text Search the category None
Sticky Posts Select Choose the dropdown options Show All Posts
Design Options Panel Body Choose the design options none
Padding Top Range Control Enter number pixel to add padding top. None
Padding Bottom Range Control Enter number pixel to add padding bottom. None
Design Options Panel Body Adjust the block by margin and padding values None
Padding Left Range Control Enter number pixel to add padding left. None
Padding Right Range Control Enter number pixel to add padding right. None
Margin Top Range Control Enter number pixel to add margin top. None
Margin Bottom Range Control Enter number pixel to add margin bottom. None
Additional CSS Class Text Enter additional class name. None

7.2 Image Block

Settings


Field Type Description Default
Image Settings Panel Body Enter Image Settings
Alt Text Text Enter the Alternative Text. None
Image Size Select Control Select the image size. Full Size
Image Dimensions panel Body Set Width and Height of the image. None
Width Text Enter image width. None
Height Text Enter image height. None
Link Settings Panel Body Enter Image link None
Link To Select Control Enter link to image None
Open in new tab Radio button Enable to open in new tab Disable
Link CSS Class Text Enter link class name. None
Additional CSS Class Text Enter additional class name. None

7.3 Vodi Recent Comment Block

Settings

Field Type Description Default
Section Title Text Enter section title Recent Comments
Action Text Text View All Movies
Action Link Text Enter the Action Link. #
Plus Button Click plus to add more action text and action link. None
Minus Button Click minus to remove action text and action link. None
Number of comments to show Panel Body Choose number of comments to show
Limit Range Control Drag the slider to set the number of comments to be displayed 5
Design Options Panel Body Choose the design options none
Padding Top Range Control Enter number pixel to add padding top. None
Padding Bottom Range Control Enter number pixel to add padding bottom. None
Design Options Panel Body Adjust the block by margin and padding values None
Padding Left Range Control Enter number pixel to add padding left. None
Padding Right Range Control Enter number pixel to add padding right. None
Margin Top Range Control Enter number pixel to add margin top. None
Margin Bottom Range Control Enter number pixel to add margin bottom. None
Margin Left Range Control Enter number pixel to add margin left. None
Margin Right Range Control Enter number pixel to add margin right. None
Additional CSS Class Text Enter additional class name. None

In the second column click add block icon from the block list choose Vodi Blocks –> Vodi Blog List Section

7.4 Vodi Blog List Section

Settings

Settings

Field Type Description Default
Section Title Text Enter section title None
Action Text Text Enter the Action Text. View All
Action Link Text Enter the Action Link. #
Plus Button Click plus to add more action text and action link. None
Minus Button Click minus to remove action text and action link. None
Style Select Control Choose the style Style 1
Hide Excerpt Checkbox Check to hide excerpt Unchecked
Enable Divider Checkbox Check to enable divider Unchecked
Post Attributes Panel Body Select list of post attributes  
Limit Range Control Drag the slider to set the number of posts to be displayed 5
Order By Select Control Choose the order of your post, either by Title, Date, Id. Random
Order Select Control Choose the order of your post to be displayed either in Ascending or Descending Order. ASC
Search Post Text Search the post by id or name None
Search Term Text Search the category None
Sticky Posts Select Choose the dropdown options Show All Posts
Design Options Panel Body Choose the design options none
Padding Top Range Control Enter number pixel to add padding top. None
Padding Bottom Range Control Enter number pixel to add padding bottom. None
Design Options Panel Body Adjust the block by margin and padding values None
Padding Left Range Control Enter number pixel to add padding left. None
Padding Right Range Control Enter number pixel to add padding right. None
Margin Top Range Control Enter number pixel to add margin top. None
Margin Bottom Range Control Enter number pixel to add margin bottom. None
Additional CSS Class Text Enter additional class name. None

Output

8. Vodi Event Categories Block

Settings

Field Type Description Default
Section Title Text Enter the section title. None
Nav Action Text Text Enter nav action text you can add more action text None
Nav Action Link Text Enter nav action URL you can add more action URL #
Plus Button Click plus to add more action text and action link. None
Minus Button Click minus to remove action text and action link. None
Columns Range Control Drag the slider to set the number of columns to be displayed. 4
Limit Range Control Drag the slider to set the total number of categories to be displayed. 4
Order by Select Control Choose the order of your categories, either by Title, Count, ID, Slug, Term ID, Term Group, Description, Parent. ID
Order Select Control Choose the order of your categories, either by ASC, DESC. DESC
Search Term Text Search category None
Hide Empty Checkbox Check to show empty categories also. Checked
Design Options Panel Body Adjust the block by margin and padding values  
Padding Top Range Control Enter number pixel to add padding top. None
Padding Bottom Range Control Enter number pixel to add padding bottom. None
Padding Left Range Control Enter number pixel to add padding left. None
Padding Right Range Control Enter number pixel to add padding right. None
Margin Top Range Control Enter number pixel to add margin top. None
Margin Bottom Range Control Enter number pixel to add margin bottom. None
Additional CSS Class Text Enter additional class name. None

Output

9. Videos Carousel Flex Header Block

Settings

 

Field Type Description Default
Section Title Text Enter the section title. None
Nav Action Text Text Enter nav action text you can add more action text None
Nav Action Link Text Enter nav action URL you can add more action URL #
Plus Button Click plus to add more action text and action link. None
Minus Button Click minus to remove action text and action link. None
Background Color Select Control Choose Background color Default
Style Select Style Choose Style Style-1
Footer Action Text Text Enter the Footer Action text icon None
Footer Action Link Text Enter the Footer Action link #
Video Attributes Panel Body Select the video attributes from the below options.
Limit Range Control Drag the slider to set the total number of videos to be displayed. None
Order by Select Control Choose the order of your videos, either by Title, Date, Id. Random
Order Select Control Choose the order of your videos, either by Title, Date, Id. ASC
Search Post Text Search the video by id or name. None
Search Term Text Search the video by category slug None
Featured Checkbox Check to show featured videos. None
Top Rated Checkbox Check to show Top Rated videos. None
Carousel Args Panel Body Select the video attributes none
Slide To Show Range Control Drag the slider to set the total number of  videos to be displayed None
Slides To Scroll Range Control Drag the slider to set the number of  videos to be scrolled None
Infinite Scroll Checkbox Check to infinite scroll carousel. Random
Design Options Panel Body Adjust the block by margin and padding values None
Padding Top Range Control Enter number pixel to add padding top. None
Padding Bottom Range Control Enter number pixel to add padding bottom. None
Padding Left Range Control Enter number pixel to add padding left. None
Padding Right Range Control Enter number pixel to add padding right. None
Margin Top Range Control Enter number pixel to add margin top. None
Margin Bottom Range Control Enter number pixel to add margin bottom. None
Margin Left Range Control Enter number pixel to add margin left. None
Margin Right Range Control Enter number pixel to add margin right. None
Additional CSS Class Text Enter additional class name. None

Output