VIVIAN THEME INSTALLATION & SETUP

Thank you for choosing a Studio Chem Theme to build your site. Once you’re set up, we’d love to have you submit your site for us to see. Should you run into any problems along the way please contact us. Below are the instructions on getting your new theme installed and set up to appear the same as the demo. Here is a link as well to the demo that you can view for reference.

VIEW DEMO

Design elements

The following fonts and colour have been used throughout the theme.

Fonts

Colours

  • Light Pink #FFEDEB
  • Mid Pink #E8A1BB
  • Dark Pink #DE5F8D
  • Gold #B99A6A
  • Light Grey #7A7A7A
  • Mid Grey #54595F
  • Dark Grey #383838

**Important before you begin**

I HIGHLY recommend using the theme on a fresh install of WordPress.
If you are not staring with a new install, I suggest you create a backup of your current site. Always keep an unaltered and updated copy of your theme files stored on your computer, in the event that you accidentally make a mistake and need to use that copy to start over. You can also download a copy in your account area  at any time.

Blog featured images sizes

It is a good idea to always have your Featured Images for your posts be the same size or as close as possible, particularly if you are displaying them in a grid. If you intend using the slider, you will want your featured images to be at least 1200px wide. The two recommended sizes are 1200×1500, or square of 1200×1200. If you are not using the post slider, then you can do a smaller image width.

Getting Started

Creating your first website can be a daunting prospect, with so many options available to choose from. Which hosting provider to go for? What is the best domain name for my business? How much will it cost?

Most of these questions are answered best by the team over at WPbeginner.com and here is a great article covering these topics.

BEFORE YOU BEGIN

  1. It’s recommended that you update your site to the latest version of WordPress before installing your theme.
  2. Always make sure you have a backup of your site before installing a new theme! Your hosting most makes daily site back-ups for you, but if not, you might want to consider a backup plugin like Updraft plus.
  3. I recommend that your PHP version be at least 7.0.  

After you have downloaded your files, find the folder with “UNZIP” me in the file name (e.g. UNZIP-ME_vivian.zip) and go ahead and unzip that folder. Once you have unzipped this folder, you will notice that the child theme is in a zipped folder, “studiochem_vivian” DO NOT unzip this folder as you will be uploading it to WordPress.

  1. Navigate to your WordPress dashboard and go to Appearance > Themes
  2. Click “Add New” at the top and in the search box type in “Kadence”. Install the Kadence theme but DO NOT activate it.
  3. Navigate to the Plugins page and click the “Add New” button at the top.
  4. Search for “Kadence” again and find the “Starter Templates by Kadence WP” plugin. Install and activate the plugin. This plugin will facilitate the install of your child theme template.
  5. Navigate back to Appearance > Themes and click the “Add New” button, and then click “upload”. Search your computer for the Kadence child theme you purchased and upload it. (e.g. studiochem_vivian.zip)
  6. Activate the theme.
  7. Lastly navigate to Appearance > Starter Templates. You should now see the preview of the child theme template you purchased OR if you see a page with “Choose your builder”, click on the Studio Chem Logo and you will then see a preview of your purchased theme.
  8. Click on the child theme template preview and then click the “Start Importing” button. This step can take a few minutes to complete.
  9. Wait for the import to finish and then click to view your site, which should now look like the demo!

If you already have an existing website with your own blog posts, you may not wish to have the demo posts that come with the importing of your Kadence Child Theme and you can delete them by doing the following:

  1. Navigate to your WordPress dashboard, go to Posts.
  2. Select all of the posts you would like to delete by clicking in the box.
  3. At the top, in the bulk edit dropdown, select “move to trash” and click the Apply button.
  1. Kadence Blocks – Gutenberg Blocks for Page Builder Features
  2. Atomic Blocks – Gutenberg Blocks Collection
  3. Reusable Blocks Extended
  4. Smash Balloon Instagram Feed
  5. Starter Templates
  6. WooCommerce
  1. Kadence Theme

You will need to assign specific pages to show as your Homepage and blog.
Navigate to your WordPress dashboard Settings > Reading then choose what your homepage displays will show, check Static page and in the dropdown, find and select Home.
For your blog archive, do the same and choose Blog page.

The URLs of the content you publish on your site are called Permalinks. Permalinks are what people enter into their browser to view a specific page on your website. Search engines and other websites also use permalinks to link to your website.

You should avoid changing your permalinks on an established site as this can cause problems with your pages. If you have a fresh instance of WordPress, which we HIGHLY recommend, then you can configure your permalinks at the very start.

To change your Permalinks, go to your WordPress dashboard > Settings > Permalinks.

A navigation menu, which can be set up to show in the header, footer or anywhere else, enables your visitors to easily move through your sites pages and content. Menus are very easy to create from pages, categories, posts, custom links, and you can customize where in your theme you want your menu to be displayed.

In your WordPress dashboard, go to Appearance > Menus.

The Menu screen has a column on the left which has your pages, categories, and custom links tab. The right hand column is where you can add and arrange your menu items.

Under Menu Name, give your menu a name (such as “Main Menu”) and then click Create Menu. This will enlarge the menu area and give you some more choices.
To add pages to your menu, check the pages in the left column that you want to add. Then click Add to Menu.
The pages you added will now appear in the column on the right under Menu Structure.

To add categories to your menu, the same steps apply, namely, click the Categories tab in the left column. Check the categories you want to add. Then click Add to Menu.
The categories you added will now appear in the column on the right under Menu Structure.

If you’d like to link from your menu to a page or site away from your website you can easily do this with the Custom Link.
Click on the custom link on the left. You will see two fields. The first field is for your URL of the page you want to link to, and the second field, Link Text, is where you’ll add the text for your link that will be displayed in your menu. 

To re-arrange menu items so they show as you want, rather than in the order they were added, drag, move and drop a menu item to adjust its position up and down within the menu.

To create a Submenu or Dropdown Menu, simply drag the menu item under a parent item and slightly to the right before dropping it. Dropdowns make your navigation tidier and less cluttered.

It’s super easy to copy any section from one page to another and even to copy entire pages to a new page.

In you WordPress Dashboard, navigate to Pages > The page that has the section you wish to copy. Find the section you want to copy, click on the outside of it until it is bound by a blue box. Then click on the 3 dots.

You will now see a drop down, click on ‘copy’ and it will show a copied to clipboard message in the left hand corner of your screen.

Now go to your dashboard > Pages > Add new and create a new page OR go to an existing page, and scroll to the bottom. Click on the page and either right click ‘paste’ or cmd-v to paste your selection on your new page. If you have added a section to an existing page, simply click on the arrows to place the section wherever you want it to appear on the page.

To copy an entire page and all of it’s content, simply go to the page you wish to copy, find the 3 dots in the right hand corner and click on them. This will show a drop down with the option to ‘copy all content’ near the bottom. Click on this and you will see you have copied the entire page.
Then go and create a new page and once you have named it, simply click on the page and right click ‘paste’ or cmd-v to paste all of the content from your previous page. It’s that simple!

  1. Global Page Settings

In your dashboard, navigate to Appearance > Customize > Page Layout

Here you will find the global settings for your pages, and the settings you choose here will apply to all of your pages.

You can, should you wish to, override some of the global page settings if you would like certain pages to have different settings. Each individual page has a Page Settings section where you can make your changes and override the global page settings.

An example of where you might override your global settings could be where you have your page layout set to fullwidth in the global page settings. On your contact page you may like to have a left sidebar. Go to your Contact page and edit the page settings to set the page layout to ‘Left Sidebar’. The result is that your Contact page has a left sidebar whilst all other pages still use the ‘fullwidth’ page layout.

To make these changes to your page settings on an individual page you will click on the Page Settings icon (page with pencil) and open up the settings panel. Any changes made to these settings will override any global page settings you’ve set in the customizer.

There are a few custom CSS styles added on certain elements within your theme which you can easily add to other elements on any page. I add a few custom CSS styles to my Kadence child themes that you can add to elements on your pages. To add the CSS class to an element, click on the element and within the Block tab, scroll to the bottom where you will see ‘Additional CSS Class(es)’ and add the CSS class in that box.

The available custom CSS classes are largely for images but this may increase in time. They are:

inner-border

Add a thin white border inside your image

Your images will look like this:

image-border

Add a thin white border around the outside of your image

Your images will look like this:

image-border-wide

Add a thicker white border around the outside of your image

Your images will look like this:

Header Navigation & Footer

Your Header and Footer are made within the customizer and are set to show on ALL pages on your site.

To set up your Header, you need to click on “Appearance” then “Customize” and locate the header.

To set up your header follow the instructions below.

Your Header navigation bar is made up of 2 Rows. The top row is made up of 2 columns and the bottom row is made up of 3 columns. The top row has Contact details on the left and Social link icons on the right as well as a search function. The bottom row contains your Logo on the left, your Primary navigation menu in the middle and your mini cart icon on the right. 

In the Customizer, navigate to Header > Contact and edit/add/delete contact information here.

To set up your Social link icons, navigate to General > Social Links and here you can choose which social icons you wish to add along with the url to link them to.

You will have already assigned a logo to your site through the Appearance – Customize – Site Identity and the logo you uploaded will be displayed here. If you prefer a text logo you will simply not upload anything and fill in the Site Title with the name of your site.

You will also already have set up your Primary Menu, which is what you will choose to show in the middle column. If you have not already done so, please ‘update’ and exit to your dashboard to set this up. See above for instructions. Once this is done your menu and any submenus will display. You can make any adjustments if they are needed, for example if your menu items overun the space, see if some can be assigned as submenu items instead.

Your mini cart icon will show customers what they have added to their cart.

To access and make any changes to your Footer template, in your WordPress dashboard navigate to Appearance > Customise > Footer. Your footer has 4 columns, namely an image, a menu, a sign up form and social icons.

Column 1

Column 2 ~ Footer navigation

You will first have to set up a menu in your dashboard by navigating to Appearance > Menu > Set up a menu > Choose the menu from the drop down. Keep this menu to around 5 items to keep your footer from stretching too much.

Column 3 Newsletter Opt in form

Your newsletter opt in form is created by using a reusable block which allows you to display it wherever you want on the site. To make changes to the Opt in form you need to edit the reusable block.

Navigate to Dashboard > Reusable Blocks > All reusable blocks > Opt in

Column 4 Social media links

Homepage Setup

Your Home page is made up of the following 10 sections. Most sections are comprised of at least one block, sometimes more. These blocks can be added/removed/reused.

  1. Home Top
  2. Home Grid
  3. Home Optin in Form
  4. Split content
  5. Info boxes
  6. Featured Products
  7. Testimonials
  8. Blog Latest
  9. Home Contact
  10. Instagram Feed

* Home Top *

Changing out the Home Top background image.

Editing the Welcome box heading.

Editing the Welcome box paragraph.

Editing the Welcome box button.

* Home Grid *

Your Home Grid is made up of 3 columns with 4 images and a button to link to a specific page. It is important to have your images the correct size to show up properly. 1st and 3rd Column images: 
2nd Column 2 images: 

Changing out the 1st image in column 1. Repeat the steps for each of the images.

Making any changes to the buttons and their links.

* Home Opt in Form *

Setting up your newsletter opt in form.

* Home Welcome Split Content *

Changing out the 1st image in column 1.

* Home Info boxes *

* Home Featured Products *

The Home Featured section can be used to show whichever products you would like, it’s up to you.

* Home Testimonials *

Setting up your Testimonial in a slider, showing message, author image and name.

* Blog Latest *

* Homepage Contact *

Setting up your Contact form on your Home page.

Your Form will be set up in the same way as the Newsletter Optin form above.

* Instagram Feed *

Navigate to Instagram Feed in your dashboard, then click on Settings which will take you to your settings page.
Under Configure you will link to your Instagram account and allocate how often to check for new posts. Remember to click Save once done.

Next navigate to Customize where you can decide how to show your feed. The Demo is set up with a Carousel layout, 1 row, 8 columns showing 8 photos, with 2px padding around the images. Click Save once done.

The only other setting selected is the ‘Follow‘ Button. Check the box to show the button and set the background color to #b99a69. Click Save once done.

Setting up your Pages

Your Services page is made up of 3 sections. The top section is made of 2 columns, the left has a mix of advanced headings and paragraphs, while the right column has an image.

The middle section is also made up of 2 columns, the left has an image while the right column has another section with a separate 2 columns. These columns show your range of services and include advanced headings and paragraphs.

The bottom section has a Pricing Table.

You can change the heading, subtitle description and Price here.

You can set up as many product features as you like. Simply click on one, go to the 3 dots, click on duplicate and fill in your product feature.

Your call to action button can have whatever text on it you like, simply click on it and type in your text. You will also be able to insert the link for the button.

Your About page is made up of 2 sections essentially, the top “Team” section and the second “Call to action” section. The Team section is made of an info box which contains an image, heading, text and your social link icons.

Changing out the team member image.

Changing out the social icon links.

Changing out the Call to action background image.

Setting up the Call to action button

Create as many portfolios as you wish using the Kadence Galleries. You have a K Gallery already set up showing your portfolio, all you need to do is navigate to Dashboard > K Galleries > All Galleries and then click on “edit” to change the images in your portfolio.

Once you open the gallery, you will see the Demo images which you can easily replace with your own. You can also add more images here in future or clear the gallery to start again.

Notice the Gallery Shortcode at the top of the page ~ This is important as you will install this shortcode on whichever page you wish your gallery to be. For the Demo this has already been done for you on the “Portfolio” page so you don’t need to do anything.

The Demo has a FAQ page set up with 2 columns, the left contains your questions and an image is on the right. You can add more of these by duplicating a section or remove one by deleting a section.

Changing out the image in your FAQ page.

Editing the questions  in your FAQ.

Editing the answers in your FAQ.

Adding more questions to your FAQ.

To add a new post, navigate to Dashboard > Posts > Add New Post

To edit any post click on the link under the post to ‘edit’. There you can edit the heading, paragraphs, choose which category to post in, add tags and change the featured image.

Your Blog Categories have been allocated their own ‘categories’ page where you can edit the categories and add more of your own. Navigate to Dashboard > Pages > All Pages > Categories

Here you can edit the images and the links to the categories.

Navigate to Dashboard > Pages > Contact to edit the information and contact form settings.
Edit the telephone number, email address and business hours by clicking on the paragraph.

If you wish to change the image next to your form click on the image and upload your image.

Click on the form and set up your settings on the right hand side.