Step 1 Creating a Video-Gallery

Video Gallery > Add New Video Gallery

• Add video link. Video links can be add from Youtube and Vimeo.
• Title. Wright a title to the video
• Description. Wright some information about video content
• URL.You can add a link to another page that is related to the video

Step 2 Inserting Created Video Gallery.

After you created Video Gallery on the right side find 3 blocks.

1. Views. In this block you can choose one from 5 unrepeatable views.
2. Usage. Here is located the shortcode Of your Video Gallery. By Copy&Paset up this shortcode can be inserted wherever you need in your post. Or it is possible to add the shortcode automaticly. On post window just pressing on add video gallery button the shortcode will be inserted into post.
3. Template include. Insert this code into your template,to make the inserting the video gallery easy for using in custom location within theme.

Step 3. General Options of Video Gallery

In this section you can modify your Video Gallery in more details. That will change the features of each view you choose.

3.1 Video Gallery/Content popup

Video-element Styles

• Video Video-element Width. Specify preferable width of your videos
• Video-element Height. Specify desired high of posted videos
• Video-element Border Width. Specify preferable width for surrounded border of the Video-element
• Video-element Border colour. Select preferable colour for surrounded border
• Video-element’s Video-image Overlay colour. Select a colour for the overlay on the video as you hold the mouse arrow on it
• Video-element’s Video-image Overlay Transparency. Determine preferable transparency degree for the video overlay
• Zoom image Style. Determine black or white colour for zoom icon

Popup Styles

• Popup Background color. Edit to set preferable background colour of popup in your
• Popup Overlay color.Choose preferable colour for popup overlay in your
• Popup Overlay Transparency. Specify preferable degree of background transparency in your
• Popup Close Button Style. Edit what colour for “X” icon would you like
• Show Separator Lines. Select to show separation lines between title and text in popup of

Popup Description

• Show Description. Select to show the description of the video
• Description Font Size. Determine preferable size of description font
• Description Font color. Set preferable colour of description text

Video-element Title

• Video-element Title Font Size. Edit preferable size of title font in
• Video-element Title Font color. Edit preferable colour of title
• Video-element Title Background color. Determine preferable colour of title’s background

Video-element Link Button

• Show Link button on Video-element. Select to show “View More” button on the video
• Link button Text. You can change the “View More” button text
• Link button Font Size. Choose preferable size of Link-button
• Link button Font color. Determine preferable colour of link font
• Link button Background color. Determine preferable colour for link background

Popup Title

• Popup Title Font Size. Determine title size of the letters of popup
• Popup Title Font color. Configure preferable colour for title in popup

Popup Link Button

• Show Link button. Choose to make Link-button visible in popup
• Link button Text. Edit the text of Link-button in popup
• Link button Font Size. Set preferable size of the letters of Link-button in popup
• Link Button Font Color. Change color of link button in popup
• Link button Font color. Configure the preferable colour for Link-button in popup
• Link button Font Hover color. Determine preferable colour of Link-button when you hover the mouse on it
• Link button Background color. Specify preferable background colour of the Link-button in popup
• Link button Background Hover color. Specify preferable background colour of the link as you hover the mouse on it

3.2 Content Video Slider

Slider Container

• Main image Width. This fixes the margin of the main image
• Slider Background color. You can choose preferable colour for slider field
• Arrow Icons Style. Specify black/white colour of arrows in slider
• Show Separator Lines. Choose to make the lines between text, title, and link visible

Title

• Title Font Size. Configure the preferable size of the letters of the title
• Title Font color. Configure the preferable colour of the font

Link Button

• Show Link button. Click to show the Link-button
• Link button Text. Write a text on link button
• Link button Font Size. Edit the size of the letters of the link text
• Link button Font color. Edit the colour of the link text
• Link button Font Hover color. Edit the colour of the link text while hovering the mouse on it
• Link button Background color. Determine preferable colour for link field
• Link button Background Hover color. Choose a colour for your link background while hovering on it

Description

• Show Description. Click to show the description of the text
• Description Font Size. Set the font size of description
• Description Font Color. Set the color of font in description

Link Button

• Show Link Button. Choose whether to display Show More button.
• Link Button Text. Define the text of the Show More button.
• Link Button Font Size. Set the font size for the Show More button.
• Link Button Font Color. Select the font color for the Show More button.
• Link Button Font Hover Color. Select the font color for the Show More button when hovered.
• Link Button Background Color. Select the background color for the Show More button.
• Link Button Background Hover Color. Select the background color for the Show More button when hovered.

3.3 LIghtbox-Video Gallery

Video-image

• Video-image Width. Specify preferable size of the video
• Video-image Border Width. Specify preferable width of surrounded borders
• Video-image Border color. Configure your preferable the colour for border
• Border Radius. Determine prefered radius of border corners

Title

• Title Font Size. Set the font size of the title
• Title Font Color. Set the color of the title
• Title Font Hover Color. Set the color of the title while hovering on it
• Title Background Color. Choose title background color
• Title Background Transparency. Choose the level of title background transparancy

3.4 Video Slider

Slider

• Video Behaviour. Choose “resized” to stretch and fit your videos to the size of Slider
• Slider Background color. Set preferable color of the vacant part of slider field while images has its natural size
• Slideshow Border Size. Specify the size of the border in your slider
• Slideshow Border color. Choose your prefered colour for border
• Slideshow Border radius Determine preferable radius for slider border

Description

• Description Width. Select the width of description text box
• Description Has Margin. Determine if description need to have margin
• Description Font Size. Specify the size of the letters in description
• Description Text color. Determine preferable color of the description text
• Description Text Align. Specify the location of the description in the box
• Description Background Transparency. Determine background transparency degree for description
• Description Background colour. Determine the colour for description field
• Description Border Size. Specify preferable size for the description border
• Description Border color. Specify preferable colour of description border
• Description Border Radius . Specify preferable corner’s radius of the description box
• Description Position. Specify where to posite the description on the slider view

Title

• Title Width. Determine the width for title box
• Title Has Margin. Click if you’d like the title to have margin
• Title Font Size. Edit to set preferable size of the letters for the title
• Title Text color. Edit to set preferable colour for the title
• Title Text Align. Specify the place of the title in the box
• Title Background Transparency
• Title Background color. Determine preferable colour of title background
• Title Border Size. Specify preferable size of the title border
• Title Border color. Determine preferable colour for the title border
• Title Border Radius. Specify preferable radius for border corners
• Title Position. Specify preferable position of the title

Navigation

• Show Navigation Arrows. Click to show navigation arrows in slider
• Navigation Dots Position / Hide Dots. Choose where to locate the dots, or choose to remove them
• Navigation Dots color. Choose the colour for navigation dots of slider
• Navigation Active Dot colour. Determine preferable colour of moving dots in slider
• Navigation Type. Determine preferable type of your navigation arrows

3.5 Thumbnails View

Image

• Video-image Behavior. Click to Determine behavior of video image
• Video-image Width. Allows to specify preferable width of thumbs
• Video-image Height. Allows to specify preferable height of thumbs
• Video-image Border Width. Allows to specify preferable width of the border between thumbs
• Video-image Border color. Determine preferable colour of the border between thumbs
• Border Radius. Allows to specify preferable radius of the border
• Margin Video. Allows to specify the distance between each thumb

Container Style

• Presence of a background. Click to have background for thumbs
• Box background color. Specify desired colour of surrounded box
• Box shadow. Click if you’d like to have shadows in the box
• Box padding. Specify desired distance between box and video

Title

• Title Font Size. Specify preferable size of the text font
• Title Font color. determine preferable colour of text
• Title Background Transparency. Specify the degree of background transparency
• Link text. Wright desired text for the link

3.6 Video Slider

Slider

• Video Behaviour. Choose “resized” to stretch and fit your videos to the size of Slider
• Slider Background color. Set preferable color of the vacant part of slider field while images has its natural size
• Slideshow Border Size. Specify the size of the border in your slider
• Slideshow Border color. Choose your prefered colour for border
• Slideshow Border radius Determine preferable radius for slider border

Element Styles

• Image height. Set the height of the images/videos in tape.
• Image margin. Set the distance between each image/video in the tape.
• Image Justify. Select to make the width of all image/video up to 100% in container. So all them together will fit the container of your theme, and tick off to bring each of them with it’s natural size.
• Image Randomize. Select to show your images randomly.
• Opening With Animation. Choose to see the tape of images/videos appearing animated.
• Opening Animation Speed. Select the speed of the animation.

Element Title

• Show Title. Choose to show the title or not.
• Element Title Font Size. Choose the font size for the title of the image/video.
• Element Title Font Color. Select preferable colour for the title of the image/video.
• Element Title Background Color. Choose the colour of title background.
• Element’s Title Overlay Transparency. Select the level of transparency for the title overlay.

3.7 Blog Styles Gallery

General Styles

• Container Width. Choose whole gallery item container width.
• Video Width. Choose video player width.
• Video Height. Choose video player height.
• Video Position. Decide where to place the video.
• Content Position. Set content position within page container.
• Video Arrangement. Decide where to place the video among description and title.
• Space Between Containers. Set padding level between each item container.
• Separator Line Style. Pick up one style for separational line, which will divide your gallery items.
• Separator Line Size. Anjust separational line size.
• Separator Line Color. Choose a color for separational line.
• Video Per Page. Decide how many videos to display in each page.
• Pagination Font Size. Choose font size for pagination numbers
• Pagination Font Color. Change color for pagination font.
• Pagination Icons Size. Decide the size of the icons on pagination
• Pagination Icons Color. Change the color of pagination icons
• Pagination Position. Decide where to place the navigation of pages

Title Styles

• Show Title. Select, if you need to display the title of the project.
• Font Size. Choose title font size.
• Font Color. Decide font color for the title.
• Background Transparency. Adjust title background Transparency level.
• Text Align. Choose text align for title .

Description Styles

• Show Description. Select whether to see the description text or not.
• Font Size. Change the font size for the description.
• Font Color. Pick up font color for description text.
• Background Color. Change color for description background.
• Background Transparency. Adjust description background transparency level.
• Text Align. Chose the text align for description