Skip to content

# Home v1 via Gutenberg

Home v1 of Vodi is built using Gutenberg.It has 10 blocks.

## The Details

### 1. Movies Slider

Settings

Field | Type | Description | Default
--- | --- | --- | ---
Search Post | Text | Search the movie by id or name. | None
Pick an Background Image | Media | Upload slider background image | None
Pick an image | Media | Upload slider thumbnail image | None
Style | Selection | You can select style version | Style-v1
Gallery Title | Text | Enter gallery title | Todays Recomendation
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. Movies Section Aside Header Block

Settings

Field | Type | Description | Default
--- | --- | --- | ---
Section Title | Text | Enter the section title | Popular Movies to Watch Now
Section Subtitle | Text | Enter the section subtitle | Most watched movies by days
Action Text | Text | Enter the Action Text | view all
Action Link | Text | Enter the Action Link. | #
Background Color | Selection | You can select Dark and light BG | Default
Style | Selection | You can select style version | Style-v1
Movies Attributes | Panel Body | Select the movie attributes from the below options | –
Limit | Range Control | Drag the slider to set the total number of movies to be displayed | 5
Columns | Range Control | Drag the slider to set the number of columns to be displayed | 5
Order By | Select Control | Choose the order of your movies, either by Title, Date, Id. | Date
Order | Select Control | Choose the order of your movies to be displayed either in Ascending or Descending Order. | DESC
Search Post | Text | Search the movie by id or name | None
Search Term | Text | Search the movie by category slug | None
Featured | Checkbox | Check to show featured movies. | None
Top Rated | Checkbox | Check to show Top Rated movies. | 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

### 3. Movies Carousel Aside Header Block

Settings

Field | Type | Description | Default
--- | --- | --- | ---
Section Title | Text | Enter Section title | Romantic for Valentines Day
Section Sub Title | Text | Enter Section sub title |
Action Text | Text | Enter action text you can add more action text | View All
Action Link | Text | Enter action URL you can add more action URL | #
Header Position | Selection | You can select Left and Right header alignment | Right
Background Color | Selection | You can select Dark and light BG | Default
Style | Selection | You can select style version | Style-v1
Movies Attributes | Panel Body | Select the movies attributes from the below options | –
Limit | Range Control | Enter the number of products to displayed | 8
Order by | Text | Defaults to ‘Date’. One or more options can be passed | Date
Order | Select Control | Choose the order of your movies to be displayed either in Ascending or Descending Order. | DESC
Search Post | Text | Enter the name of the movie name and select to show. | None
Search Term | Text | Enter the name of the category name and select to show. | None
Featured | Checkbox | Check to show featured posts. | None
Top Rated | Checkbox | Check to show Top Rated. | None
Carousel Args | Panel Body | Select the movie attributes | none
Slide To Show | Range Control | Drag the slider to set the total number of movies to be displayed | None
Slides To Scroll | Range Control | Drag the slider to set the number of movies to be scrolled | None
Arrow | Checkbox | Check to show carousel arrows. | 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

### 4. Featured Movie

Settings

Field | Type | Description | Default
--- | --- | --- | ---
Search Post | Text | Enter the name of the movie name and select to show. | None
Feature Movie Action Icon | Text | Enter the feature movie action icon class. | None
Pick an image | Media | Upload the image | None
Pick an background image | Media | Upload 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

### 5. Movies Carousel Aside Header Block

Settings

Field | Type | Description | Default
--- | --- | --- | ---
Section Title | Text | Enter Section title | Action & Drama Movies
Section Sub Title | Text | Enter Section sub title | none
Action Text | Text | Enter action text you can add more action text | View All
Action Link | Text | Enter action URL and you can add more action URL | #
Header Position | Selection | You can select Left and Right header alignment | right
Background Color | Selection | You can select Dark and light BG | Default
Style | Selection | You can select style version | Style-v1
Movies Attributes | Panel Body | Select the movies attributes from the below options | –
Limit | Range Control | Enter the number of products to displayed | 8
Order by | Text | Defaults to ‘Date’. One or more options can be passed | Date
Order | Select Control | Choose the order of your movies to be displayed either in Ascending or Descending Order. | DESC
Search Post | Text | Enter the name of the movie name and select to show. | None
Search Term | Text | Enter the name of the category name and select to show. | None
Featured | Checkbox | Check to show featured posts. | None
Top Rated | Checkbox | Check to show Top Rated. | None
Carousel Args | Panel Body | Select the movie attributes | none
Slide To Show | Range Control | Drag the slider to set the total number of movies to be displayed | None
Slides To Scroll | Range Control | Drag the slider to set the number of movies to be scrolled | None
Arrow | Checkbox | Check to show carousel arrows. | 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. Movies Carousel Aside Header Block

Settings

Field | Type | Description | Default
--- | --- | --- | ---
Section Title | Text | Enter Section title | Funniest Comedy Movies of 2018
Section Sub Title | Text | Enter Section sub title |
Action Text | Text | Enter action text you can add more action text | View All
Action Link | Text | Enter action URL you can add more action URL | #
Header Position | Selection | You can select Left and Right header alignment | Left
Background Color | Selection | You can select Dark and light BG | Default
Style | Selection | You can select style version | Style-v1
Movies Attributes | Panel Body | Select the movies attributes from the below options | –
Limit | Range Control | Enter the number of products to displayed | 8
Order by | Text | Defaults to ‘Date’. One or more options can be passed | Date
Order | Select Control | Choose the order of your movies to be displayed either in Ascending or Descending Order. | DESC
Search Post | Text | Enter the name of the movie name and select to show. | None
Search Term | Text | Enter the name of the category name and select to show. | None
Featured | Checkbox | Check to show featured posts. | None
Top Rated | Checkbox | Check to show Top Rated. | None
Carousel Args | Panel Body | Select the movie attributes | none
Slide To Show | Range Control | Drag the slider to set the total number of movies to be displayed | None
Slides To Scroll | Range Control | Drag the slider to set the number of movies to be scrolled | None
Arrow | Checkbox | Check to show carousel arrows. | 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. Featured TV Show

Settings

Field | Type | Description | Default
--- | --- | --- | ---
Search Post | Text | Enter the name of the movie name and select to show. | None
pick Background image | media | Upload background image | none
Is Light Background | Checkbox | Enable to set background as light | 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

### 8. TV Shows Section Aside Header Block

Settings

Field | Type | Description | Default
--- | --- | --- | ---
Section Title | Text | Enter the section title | Popular TV Series Right Now
Section Subtitle | Text | Enter the section subtitle | none
Action Text | Text | Enter the Action Text | none
Action Link | Text | Enter the Action Link. | none
Background Color | Selection | You can select Dark and light BG | Default
Style | Selection | You can select style version | Style-v1
TV Shows Attributes | Panel Body | Select the tv show attributes from the below options | –
Limit | Range Control | Drag the slider to set the total number of tv shows to be displayed | 10
Order By | Select Control | Choose the order of your tv shows, either by Title, Date, Id. | Date
Order | Select Control | Choose the order of your tv shows to be displayed either in Ascending or Descending Order. | DESC
Search Post | Text | Search the tv show by id or name | None
Search Term | Text | Search the tv show by category slug | None
Featured | Checkbox | Check to show featured tv shows. | None
Top Rated | Checkbox | Check to show Top Rated tv shows. | 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

### 9. TV Episodes Carousel Aside Header Block

Settings

Field | Type | Description | Default
--- | --- | --- | ---
Section Title | Text | Enter the section title | Featured TV Episode Premieres
Section Subtitle | Text | Enter the section subtitle | none
Action Text | Text | Enter the Action Text | none
Action Link | Text | Enter the Action Link. | none
Header Position | Selection | You can select Left and Right header alignment | Right
Background Color | Selection | You can select Dark and light BG | Default
Episodes Attributes | Panel Body | Select the episode attributes from the below options | –
Limit | Range Control | Drag the slider to set the total number of episodes to be displayed | 6
Order By | Select Control | Choose the order of your episodes, either by Title, Date, Id. | Date
Order | Select Control | Choose the order of your episodes to be displayed either in Ascending or Descending Order. | DESC
Search Post | Text | Search the episode by id or name | None
Search Term | Text | Search the episode by category slug | None
Featured | Checkbox | Check to show featured episodes. | None
Top Rated | Checkbox | Check to show Top Rated episodes. | None
Carousel Args | Panel Body | Select the episode attributes | none
Slide To Show | Range Control | Drag the slider to set the total number of episodes to be displayed | None
Slides To Scroll | Range Control | Drag the slider to set the number of episodes to be scrolled | None
Arrow | Checkbox | Check to show carousel arrows. | 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

### 10. Movies List

Settings

Field | Type | Description | Default
--- | --- | --- | ---
Section Title | Text | Enter section title | TOP 9 this Week
Action Text | Text | Enter the Action Text. | 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
Movies List Attributes 1 | Panel Body | Select the movie attributes from the below options | –
Limit | Range Control | Drag the slider to set the total number of movies to be displayed | 9
Columns | Range Control | Drag the slider to set the number of columns to be displayed | 1
Order By | Select Control | Choose the order of your movies, either by Title, Date, Id. | Random
Order | Select Control | Choose the order of your movies 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
Featured Movie with Movies List | Panel Body | Choose the Featured movie id and movie attributes | none
Section Title | Text | Enter section title | Newest Movies
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
Search Post | Text | Enter the featured movie | The Leisure Seeker
Movies List Attributes 2 | Panel Body | Select the movie attributes from the below options | –
Limit | Range Control | Drag the slider to set the total number of movies to be displayed | 8
Columns | Range Control | Drag the slider to set the number of columns to be displayed | 1
Order By | Select Control | Choose the order of your movies, either by Title, Date, Id. | Random
Order | Select Control | Choose the order of your movies 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
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

Output

###### Contents

- Welcome
- Getting Started
  - Introduction
  - Download & Installation
  - Demo Content
    - One Click Demo Import (Recommended)
    - Manual Import
  - Updating the theme
- Set Up Pages
  - Home v1
    - Home v1 via Gutenberg
  - Home v2
    - Home v2 via Gutenberg
  - Home v3
    - Home v3 via Gutenberg
  - Home v4
    - Home v4 via Gutenberg
  - Home v5
    - Home v5 via Gutenberg
  - Home v6
    - Home v6 via Gutenberg
  - Home v7
    - Home v7 via Gutenberg
  - Home v8
    - Home v8 via Gutenberg
  - Home v9
    - Home v9 via Gutenberg
  - Landing v1
    - Landing v1 via Gutenberg
  - Landing v2
    - Landing v2 via Gutenberg
  - Contact
    - Contact via Gutenberg
  - Coming soon
    - Coming soon via Gutenberg
- Blocks & Sidebars
  - Header
  - Sidebars
  - Footer
- Set Up Movie
  - Adding and Managing Movies
  - Managing Movie Genres, Tags and Attributes
  - Manage Movie Playlists
  - Movie CSV Importer
- Set Up TV Shows
  - Adding and Managing TV Shows
  - Managing TV Show Genres, Tags and Attributes
  - Manage TV Show Playlists
  - TV Show CSV Importer
- Set Up Videos
  - Adding and Managing Videos
  - Managing Video Categories, Tags and Attributes
  - Manage Video Playlists
  - Video CSV Importer
- Theme Options
  - Header
  - Footer
  - Blog
  - Movies
  - TV Shows
  - Videos
- Gutenberg Blocks
  - Active Videos
  - Movie Section Aside Header
  - Videos Slider
  - TV Shows Slider
  - Movies Slider
  - Videos Carousel Aside Header
  - Movies Carousel Nav Header
  - Slider Movies
  - section Hot Premier Block
  - Section videos live coming soon
  - Video Section Block
  - Videos with Featured Video
  - Featured Video Section
  - Comingsoon Launch Section
  - Movies List
  - Single Featured movie
  - Blog List Section
  - Blog Grid Section
  - Blog Tab Section
  - Blog Grid with List Section
  - Movies Carousel Flex Header
  - Section Movies Carousel Aside Header
  - Recent Comments
  - Videos Carousel Flex Header Block
  - Event Category List
  - Banner With Section Videos
  - Landing Hero banner
  - Landing Featured Section
  - Landing Movies Carousel Block
  - Landing Tabs Features
  - Landing Featured Video Section
  - Landing Features Section
  - Landing Faq Section
  - Episodes with Featured Episode
  - TV Show Section Block
  - Landing Viewcounts Section
  - Featured Movies Carousel
  - Featured Movie Block
  - TV Episode Carousel Flex Header Block
  - Featured TV Show Block
  - TV Shows Aside Header Block
  - TV Episodes Carousel Aside Header Block
  - Full-width Banner Block
  - Banner With TV Shows Block
  - Videos Carousel Nav Header Block
  - Featured Post Block
  - Vodi Section Playlist Carousel
- Navigation
  - General Guidelines
  - Menus & Locations
  - Creating Megamenus