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
