Page Templates

Vivian comes with a multitude of templates, that have lots of customization options. All of the templates are very flexible and can be used for different purposes - front page, about page, services, galleries and more. When you go to Pages > Add New or edit an existing Page you can select a Page Template for it on the right side of the page under Template.

Default Template

The Default Template has one custom field Page Header where you can customize the header for it.

Template Background Segments

This is a Fullscreen Template, which can have a custom background image with an effect on it. There are four types of background effects that can be applied on the image.

Template Blog

This template is for displaying the blog posts of your site.

Blog Layout - there are three types of layout that you can choose from - Horizontal Slider, Vertical Scroll and Grid.

• Horizontal Slider - the Number of Posts is for how many posts are seen on the screen at a time. The Space Between is for the gap between the posts.

• Vertical Scroll - here you can find the two types of vertical blogs - Only Heading and Heading With Excerpt.

• Grid - for the Grid you can select the Number of Columns and the Grid Spacing between the posts.

Template Contact

You must have the Contact Form 7 plugin to use the template. The plugin is one of the recommended plugins that was installed on the first step. You can read more about the plugin here.

Contact Form 7 Shortcode - add the shortcode from the Contact Form 7 plugin for the contact form here.

More Information and how to style the form like the one in the demo can be found in the Creating a Contact Form section.

Location - here you can pick the location for the map on the page.

Notice: If you receive an error or the map is not loading, please check your Google API Key in Appearance > Theme Settings > General. You can find more information about the Google API Key here.

Template Curtain

The First Slide of the Curtain is different than the others. The image here takes the fullscreen and the text is centered on top of it.

The next slides are added via the Add Row button in the bottom right, after the First Slide Content field.

For each slide you can select the Layout - image on the left or on the right, as well as add a Heading and its Content. On the example above for the First Slide Title we have - "My Team" and for the Second Slide we have chosen the Right Image layout.

Template Fullscreen Slider

This is probably the template with the most options and fields, but don't get scared! We have made everything very straightforward and compact.

Slider Orientation - here you can pick the direction of the slider Horizontal or Vertical.

Autoplay Delay - this is for the automatic transition between the slides. The number is written in milliseconds - for example 5000 is for 5 seconds delay between the slides. You can put 0 here to disable the autoplay.

Number Of Items (available only for Horizontal Slider) - specify the number of slides visible at the same time on the page. The Auto option will make the slides width the same as their corresponding image width.

Space Between - the space between the slides defined in pixels.

Background Color - visible between the slides if there is any Space Between specified.

Enable Pagination - enables the pagination for the slider.

• Pagination Type - select the style of the Pagination.

Enable Prev/Next (available only for Horizontal Slider) - displays the Prev and Next buttons for the slides.

Mousewheel Control - allows the control of the slider by scrolling the mousewheel.

Enable Loop - enables the loop between all of the slides.

Background Effect (available only when one item is visible on the screen) - here you can select the type of effect applied on the background image.

Image Overlay - an overlay applied to all of the images in the slider.

Slider Content - select the type of content displayed in the slider.

• Portfolio Projects - choose the projects you want to be displayed in the slider from the Select Projects field.

• Gallery - select images that will be displayed in the slider. Images Info - this will display an Info Box for each image with its Title and Image Caption.

• Images with Text - from the Add Slide button in the bottom right you can add a slide where you can select its Image, Content Position, Title, Subtitle and Content.

Fullscreen Slider Examples

The above is an example of a Horizontal Fullscreen Slider, with 3 Items and Portfolio Projects.

The above is an example of a Horizontal Fullscreen Slider, with Auto Items and Gallery for the content.

The above is an example of a Vertical Fullscreen Slider, with Image with Text for the content and Background Effect for the images.

Template Fullscreen Video

You can add a Heading for the template and choose the Heading Color for it. You can choose between two Video Types for the video.

• YouTube - when selected you will have to put the link to the YouTube video in the YouTube URL field.

• Uploaded - there are two fields for the uploaded video. Most of the times only the MP4 Video URL is enough, but the WEBM is there for safety, as there might be a problem in some browsers with the video playback.

Mobile Image - it is loaded on mobile devices as currently there is no autoplay for videos on mobile, and they are not loaded properly.

Template Portfolio

The Portfolio Template shows all of your Portfolio Projects. You can customize the Header Style for this template - Custom Header, Only Title or No Header.

Hide Categories - select the categories of the projects you want to hide. For example if you have a Photography Category and add it, the projects in that category will not be shown.

Show Filter - displays the filter with all of the Portfolio Categories.

• Hide Show All - hides the Show All button in the filter. That way the page will filter all of the projects by their category and on page load the projects in the first category will be shown.

Items Per Page - defines how many projects are loaded when the page is opened. There is Auto Load for the projects - the same number of projects are loaded when the page is scrolled.

Aspect Ratio - The theme can automatically resize the thumbnails of the projects to the selected landscape or portrait aspect ratios. There is also an additional option available - Auto (Crop and Align Thumbnails) - this will make all portrait thumbnails to have height equal to two landscape ones.

Template Portfolio - Gallery

Most of the options here are the same as in the Template Portfolio. The new field here is the Show Titles - when selected all of the images in the gallery will have their titles shown when hovered.

Template Sliding Content

Each Slide for the Sliding Content is added with the Add Row button in the bottom right. For each item you can select its Image, Title and Content.

Template Square Blocks

There are two types of Square Blocks that can be chosen from the Square Block Type - Link To Other Pages and Content In The Same Page.

• Link To Other Pages - when you add a block from the Add Block button you can choose its Title, Subtitle, Background Image and Block Link. The Block Link is for the URL where the block links to.

• Content In The Same Page - you have the same options like the other type, but instead of a Block Link there is a Block Content for the content that will be shown when the block is clicked.

Template Vertical Shift

There are three types of Slider Content that you can select for the template.

• Portfolio Projects - choose the projects you want to be displayed in the slider from the Select Projects field.

• Gallery - there are two galleries for the two halves of the template Left Gallery and Right Gallery. From the Show Titles and Captions you can show the Titles and Captions of all the images in the sliders.

• Images With Text - after you Add Slide you have the option to select the type and content of the two halves. From the Content Type field you choose the type of the half - Image or Text.

Vertical Shift Examples

The above is an example of a Vertical Shift Page, with Portfolio Projects for the Content.

The above is an example of a Vertical Shift Page, with Gallery for the Content and with enabled Image Titles and Captions.

The above is an example of a Vertical Shift Page, with Image With Text for the Content.

• The Left Content Type is Text with Custom Left Color picked for the background.

• For the Right Content Type there is an Image without Image Border Overlay.