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.

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

If you installed your new theme to a fresh instance of WordPress and installed all of the demo content from the theme, you will have to remove any content that you do no wish to keep manually. Keep whatever you wish to have on your site but it is recommended that you remove things like blog posts and products. Below is detailed instructions on removing key elements:

PAGES

1. Navigate to WordPress > Pages > All Pages.
2. Click the top checkbox to bulk select all the pages you want removed.
3. Navigate to Bulk Actions > Click Move to Trash.

BLOG POSTS

1. Navigate to WordPress > Posts > All Posts.
2. Click the top checkbox to bulk select all the posts you want removed.
3. Navigate to Bulk Actions > Click Move to Trash.
 

IMAGES/MEDIA

1. Navigate to WordPress > Media > Library.
2. Click bulk select at the top.
3. Select those images you want to remove > Click Delete Selected.

MENUS

1. Navigate to WordPress > Appearance > Menus.
2. Carefully select the menus you want to delete, ensuring you are not using them anywhere on your site.
3. At the bottom left Click Delete.
 

COMMENTS

1. Navigate to WordPress > Comments 
2. Click the top checkbox to bulk select all the comments you want removed.
3. Navigate to Bulk Actions > Click Move to Trash.

PRODUCTS

1. Navigate to WordPress > Products > All Products.
2. Click the top checkbox to bulk select all the products you want removed.
3. Navigate to Bulk Actions > Click Move to Trash.

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.


 

 

If you’re not sure, take a look here for a complete rundown of some of the most popular builders out there to help you decide.


 

There are a number of hosting providers out there, depending on your website needs and budget. Take a look here at this article by WPbeginner for some detailed help and information.


 

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.


 

 
 

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 plugins needed for your theme to function are automatically installed when you import your theme. Check that they are activated in your WordPress dashboard.

  1. Elementor
  2. Elementor Pro – you can purchase a license for your site Here.
  3. Elementor Addon Elements
  4. Exclusive Addons Elementor
  5. Happy elementor Addons
  6. Powerpack elements (license key: 2e7ffe7227da8151bda90327c3321d69)
  7. Smash balloon Instagram Feed
  8. Woocommerce
  9. WPC Added to cart notification
  10. WPfront Scroll Top

 

Your pages and menu will automatically be imported when you do your one click install of your theme. Should you in future wish to change or add further menus please follow the steps below.

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, namele, 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.


 

Header Navigation & footer

If you installed your new theme to a fresh instance of WordPress and installed all of the demo content from the theme, you will have to remove any content that you do no wish to keep manually. Keep whatever you wish to have on your site but it is recommended that you remove things like blog posts and products. Below is detailed instructions on removing key elements:

PAGES

1. Navigate to WordPress > Pages > All Pages.
2. Click the top checkbox to bulk select all the pages you want removed.
3. Navigate to Bulk Actions > Click Move to Trash.

BLOG POSTS

1. Navigate to WordPress > Posts > All Posts.
2. Click the top checkbox to bulk select all the posts you want removed.
3. Navigate to Bulk Actions > Click Move to Trash.
 

IMAGES/MEDIA

1. Navigate to WordPress > Media > Library.
2. Click bulk select at the top.
3. Select those images you want to remove > Click Delete Selected.

MENUS

1. Navigate to WordPress > Appearance > Menus.
2. Carefully select the menus you want to delete, ensuring you are not using them anywhere on your site.
3. At the bottom left Click Delete.
 

COMMENTS

1. Navigate to WordPress > Comments 
2. Click the top checkbox to bulk select all the comments you want removed.
3. Navigate to Bulk Actions > Click Move to Trash.

PRODUCTS

1. Navigate to WordPress > Products > All Products.
2. Click the top checkbox to bulk select all the products you want removed.
3. Navigate to Bulk Actions > Click Move to Trash.

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. Edit your menu.

 
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.
 

Column 3. Edit your 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.
 
 

Column 4. Edit your Social media links.

 
—————————————————————————-
 

Homepage Set up

If you installed your new theme to a fresh instance of WordPress and installed all of the demo content from the theme, you will have to remove any content that you do no wish to keep manually. Keep whatever you wish to have on your site but it is recommended that you remove things like blog posts and products. Below is detailed instructions on removing key elements:

PAGES

1. Navigate to WordPress > Pages > All Pages.
2. Click the top checkbox to bulk select all the pages you want removed.
3. Navigate to Bulk Actions > Click Move to Trash.

BLOG POSTS

1. Navigate to WordPress > Posts > All Posts.
2. Click the top checkbox to bulk select all the posts you want removed.
3. Navigate to Bulk Actions > Click Move to Trash.
 

IMAGES/MEDIA

1. Navigate to WordPress > Media > Library.
2. Click bulk select at the top.
3. Select those images you want to remove > Click Delete Selected.

MENUS

1. Navigate to WordPress > Appearance > Menus.
2. Carefully select the menus you want to delete, ensuring you are not using them anywhere on your site.
3. At the bottom left Click Delete.
 

COMMENTS

1. Navigate to WordPress > Comments 
2. Click the top checkbox to bulk select all the comments you want removed.
3. Navigate to Bulk Actions > Click Move to Trash.

PRODUCTS

1. Navigate to WordPress > Products > All Products.
2. Click the top checkbox to bulk select all the products you want removed.
3. Navigate to Bulk Actions > Click Move to Trash.

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


 

** 1. HomeTop


 

Changing out the Home Top background image.

Editing the Welcome box heading.

Editing the Welcome box paragraph.

Editing the Welcome box button.

 

** 2. 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.

Making any changes to the buttons and their links.

** 3. Home Opt in


 

Setting up your newsletter opt in form.

** 4. Home Welcome Split Content


 

Changing out the 1st image in column 1.

** 5. Home Info Boxes


 

This section is up to you how to use it, simply add any kind of element to it and enjoy!

** 6. Home Featured Products


 

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

You can choose which products to feature on your Home page.

** 7. Home Testimonials


 

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

** 8. Blog Latest


 

** 9. 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.

 

** 10. 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.

This image has an empty alt attribute; its file name is instasettings1-1024x957.jpg
 
 

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.

This image has an empty alt attribute; its file name is instasettings-1024x957.jpg
 
 

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.

This image has an empty alt attribute; its file name is followbutton-1024x833.jpg
 
 
————————————————————————————————————————————
 

Setting up your pages

If you installed your new theme to a fresh instance of WordPress and installed all of the demo content from the theme, you will have to remove any content that you do no wish to keep manually. Keep whatever you wish to have on your site but it is recommended that you remove things like blog posts and products. Below is detailed instructions on removing key elements:

PAGES

1. Navigate to WordPress > Pages > All Pages.
2. Click the top checkbox to bulk select all the pages you want removed.
3. Navigate to Bulk Actions > Click Move to Trash.

BLOG POSTS

1. Navigate to WordPress > Posts > All Posts.
2. Click the top checkbox to bulk select all the posts you want removed.
3. Navigate to Bulk Actions > Click Move to Trash.
 

IMAGES/MEDIA

1. Navigate to WordPress > Media > Library.
2. Click bulk select at the top.
3. Select those images you want to remove > Click Delete Selected.

MENUS

1. Navigate to WordPress > Appearance > Menus.
2. Carefully select the menus you want to delete, ensuring you are not using them anywhere on your site.
3. At the bottom left Click Delete.
 

COMMENTS

1. Navigate to WordPress > Comments 
2. Click the top checkbox to bulk select all the comments you want removed.
3. Navigate to Bulk Actions > Click Move to Trash.

PRODUCTS

1. Navigate to WordPress > Products > All Products.
2. Click the top checkbox to bulk select all the products you want removed.
3. Navigate to Bulk Actions > Click Move to Trash.

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

 

 

 

 

 

 

 

 

If you choose to display your portfolio as a grid, simply do the following:

In your WordPress Dashboard, navigate to Pages > All Pages and delete the page called Portfolio Masonry. Now you will be left with only the Portfolio Grid page, which you should rename to whatever you like.

Changing out the images in your grid portfolio.

Underneath your portfolio you have 2 more sections, namely a testimonial section and a quote section. You can remove these easily if you wish by hovering over the section anchor and clicking the small x. To customize these sections see the images below.

Changing out the testimonial text, author image and name.

Changing out the heading text for the quote and it’s author.


 

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.


 

The look and design of your Single Blog post is set by the sc-ophelia-blogpost template. If you wish to change the background image for the top bar for your blog posts navigate to Templates > Theme Builder > sc-ophelia-Blogposts and make your changes as per image below.

Changing out the Single Post Template top bar background image.

Your actual Blog post is made up of 2 components. There is an introductory paragraph and then the theme includes an image/text layout which is optional.
When you first add a new Post you are taken to the default new post page. Here you will add a title and a featured image for your post. You will see a Gutenberg block with text where you should add your first paragraph of your post. You can add as much as you like here and can finish here if you like.
If you would like to add the image/text layout as in the demo, you will need to click “Edit with Elementor” and here you will entor Elementor and be able to switch out the image and add your own text. Each image/tex section can also be duplicated should you wish to add more.

In future, if you wish to change anything in your introductory paragraph you will need to click “Go back to classic editor” and make your changes.

Changing out the image.

Changing out the text.


 

Changing out the sections background image for your contact form.

Changing out the heading on your contact form.

Changing out the location details on your contact form.

Changing out the form fields.

Changing out the google map of your location.


 

HomeTop


 

Navigate to Instagram Feed in your dashboard, then click on Settings which will take you to your settings page.

Home Badge


 

Navigate to Instagram Feed in your dashboard, then click on Settings which will take you to your settings page.

Home Grid


 

Navigate to Instagram Feed in your dashboard, then click on Settings which will take you to your settings page.

Home Opt in


 

Navigate to Instagram Feed in your dashboard, then click on Settings which will take you to your settings page.

Home Welcome


 

Navigate to Instagram Feed in your dashboard, then click on Settings which will take you to your settings page.

Home Imagesection


 

Navigate to Instagram Feed in your dashboard, then click on Settings which will take you to your settings page.

Home Flexible


 

Navigate to Instagram Feed in your dashboard, then click on Settings which will take you to your settings page.

Home Featured


 

Navigate to Instagram Feed in your dashboard, then click on Settings which will take you to your settings page.

Testimonial


 

Navigate to Instagram Feed in your dashboard, then click on Settings which will take you to your settings page.

Home Content


 

Navigate to Instagram Feed in your dashboard, then click on Settings which will take you to your settings page.

Homepage Contact


 

Navigate to Instagram Feed in your dashboard, then click on Settings which will take you to your settings page.

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.

This image has an empty alt attribute; its file name is instasettings1-1024x957.jpg
 
 

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.

This image has an empty alt attribute; its file name is instasettings-1024x957.jpg
 
 

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.

This image has an empty alt attribute; its file name is followbutton-1024x833.jpg
 
 
————————————————————————————————————————————