Vivian
- Subsolar Designs
- Official Site
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to contact us via the Support tab of the theme on ThemeForest. If you are happy with the theme, you can rate it. This will helps us a lot! Thank you so much!
Installing Theme
Unzip the downloaded package. You can install the theme in one of the following ways:
- FTP - copy the non-zipped folder in the /wp-content/themes/ directory in the WordPress installation of your server.
- Upload - Go to Appearance > Themes in the Admin Dashboard, click the Add New button, then Upload Theme and choose the zipped file with the theme.
If you get a style.css not found error, make sure you are uploading the correct file. It's important to know that the file you have to install is the one inside the downloaded package.
After that go to Appearance > Themes and click Activate on the theme. After the activation a warning about the plugins that are required will be shown at the top:
Click on Begin Installing Plugins.
Vivian Options Panel and Content Shortcodes are powered by the awesome Unyson Framework. After installing and activating it, go to Unyson in the Admin Dashboard and install the 2 extensions - WordPress Shortcodes and Backup & Demo Content.
Notice: After you install and activate the Unyson Plugin, you can go to Appearance > Theme Settings and click the Save Changes button so that the initial options and styles are saved and applied.
1 Click Demo Install
You can install the initial dummy content so you get your site up and running faster than ever. After doing the steps above, click on Tools > Content Install and install the dummy data.
Warning! All your existing content will need to be replaced with the demo content and thus it will be deleted.
It will create some sample blog posts, placeholder images, navigation menu and pages built the way it is shown in the demo.
Notice: If you receive a timeout error or it takes way too much time to install check your server timeout settings. Please configure it and increase the server execution time. If you don't know how, contacting your server provider is strongly encouraged. Thanks for the understanding.
If you receive a Page Not Found error when navigating the site, make sure the permalinks are correct. Go to Settings > Permalinks and select the Post Name option and click Save Changes.
Theme Options
Navigate to Appearance > Theme Settings in the Admin Sidebar.
The options here are very clear:
General
Here you can add a logo or title and also choose the type of navigation. You can also specify the text in the footer and select the position of the social media icons - in the navigation or in the footer. The Google API Key field is for the Map Shortcode as well as for the Contact Page. The last option is for the Sidebar in the blog and its blog posts.
Styling and Layout
You can style the 404 Error Page here. It can be with a custom background color or a background image. Here you can also change the main colors of the theme and write Custom CSS in this section.
Typography
Select the Heading, Subheading and Body fonts of your site.
Social
The URLs written here will show an icon of the corresponding social network in the footer or navigation, depending on the choice selected in the General tab. These icons are also used in the [Vivian] Social widget for the blog.
Setting Up the Menu
To customize the navigation menu go to Appearance > Menus and customize it as you'll normally do on a WordPress site.
And don't forget to check the Theme Location at the bottom to be Main Navigation after creating your menu.
If you want to add additional pages to the menu like Portfolio click on Screen Options in the upper right corner of the page and check the types that you want to appear as selectables for the menu navigation.
When you are done, click Save Menu.
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.
Creating a Portfolio Item
These are the items that will appear on the page with a Template Portfolio. You can choose them in the Vertical Shift and Fullscreen Slider Templates as well.
Go to Portfolio > Add New. On the Right Side from the Portfolio Category you can add Categories for the current project.
Below the Content you will find the following fields.
Thumbnail - This field is mandatory. This is the thumbnail that will be displayed in the Portfolio Template or any other Template that can have Projects to display (like Vertical Shift and Fullscreen Slider).
Project Color - this color is used in the Vertical Shift Template.
Text Color - color of the text for the project in the Vertical Shift Template.
Project Synopsis - the text displayed in the Vertical Shift template for the project.
The above image is an example of how a project is displayed in the Vertical Shift Template.
Header Style - here you can choose the type of Header for the Project Page.
Project Page Type - the type of the Single Project Page.
- Combined Project - different elements can be combined for a Fullwidth Vertical Content - like Text, Grid Galleries, Gallery Slider, Video and more.
The Add Row button has Two Options - Gallery and Content. For the Gallery you have three options for its Type - Image Wall, Slider and Grid. For the Grid the options are similar to the ones for the Template Portfolio and Template Portfolio - Gallery. When you select the Content Option for the Add Row you can write text and insert shortcodes for it. That way you can customize and reorder your Projects however you like!
- Two Halves - on the Left Side the content is Fixed. On the Right Side you can choose the Gallery Type.
The Content for this Type of Project is written in the WordPress Content Field (the one below the Page Title). For the Gallery Type you will find the three options like in the Combined Project - Image Wall, Slider and Grid.
Image Wall - Simple list with images that follow one after another.
Grid - Grid gallery with the images. You can select the aspect ratios of the thumbnails and a couple of more options. The images will be opened in a lightbox.
Slider - Inserts a slider with images.
Creating a Portfolio Page
There are multiple Templates that can display Portfolio Projects - 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. Those Templates are:
- Fullscreen Slider
- Portfolio
- Vertical Shift
You can read more about the templates in the Page Templates section of this documentation.
Creating a Contact Form
The theme uses the Contact Form 7 plugin for the Contact Template. The plugin is one of the recommended plugins that was installed on the first step. You can read more about the plugin here.
The shortcode for the Contact Template can be found in the Contact Tab on the left on the Admin Panel, and then add new or use an already created form.
To style the Contact Form as the one in the demo, you can place this code in the Form tab when you edit the Contact Form:
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="field-text">
[text* your-name]<label for="your-name"> Name<sup>*</sup></label>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="field-text">
[email* your-email]<label for="your-email">Email <sup>*</sup></label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="field-text">
[text* your-subject]<label for="your-subject">Subject<sup>*</sup></label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="field-textarea">
[textarea your-message]<label for="your-message">Message<sup>*</sup></label>
</div>
</div>
</div>
<p>
[submit "Send"]
</p>
Blog Page
Go to Pages > Add New, write the page title and select Blog from the Template dropdown on the right. You can read more about the Template Blog in the Page Templates section.
Then click the Publish button.
Make sure that the page is NOT selected in the Post Page menu in Settings > Reading in the WordPress Admin Dashboard.
Click Save Changes.
Shortcodes
Vivian Options Panel and Content Shortcodes are powered by the awesome Unyson Framework. After installing and activating the plugin, make sure that you have installed the 2 extensions - WordPress Shortcodes and Backup & Demo Content.
After that you can use the Unyson Shortcodes from the corresponding button in the Content Editor.
The shortcodes are self explanatory and are very straightforward to use.
Tips, Tricks & FAQ
Using a Child Theme
A child theme is a theme that inherits the functionality of another theme, called the parent theme. Child themes allow you to modify, or add to the functionality of that parent theme. A child theme is the best, safest, and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can create a child theme and override within. You can find more information here.
The Theme comes with already created child theme ( vivian-theme-child ). If you create customizations, it's recommended to use that instead of the parent theme.
How can I select categories for the Gallery Images?
The Images use the Portfolio Categories. When you go to Media > Library on the left side of the Admin Panel and select an image you can add a category for it in its options. The Category is the last field on the right - you can pick an already created category or create a new one from there. New Portfolio Categories can also be added from Portfolio > Portfolio Categories on the left side of the Admin Panel.
I can't find a Frontpage Template, where is it?
There isn't a template that is created only for this purpose. All of the Page Templates can be customized and styled so they can be used as a Frontpage. When you are done creating the page, make sure you select it from Settings > Reading > Front Page. Keep in mind that you don't have to select a Posts Page.
I have added widgets for the sidebar, but it is not displayed.
In Appearance > Theme Settings > General make sure you have selected the Show Sidebar option on the bottom of the list with options. You can also specify the Sidebar Position from here - left or right.