ANGELINE 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.

** Angeline comes in a variety of colour variations but the installation and set up is exactly the same. **

VIEW DEMO

Design elements

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

Fonts

Colours ~ Green

  • Lime Green #ABB851
  • Dark Teal #75A597
  • Dark Brown #3B2C13
  • Med Brown #715B36
  • Light Brown #B89F77
  • Mid Teal #B5D8CF
  • Light Teal #E2F0EA
  • Light Beige #F3EFE9

Colours ~ Bright

  • Dark Pink: #CF2968
  • Orange: #F5953C
  • Dark Grey: #1D1D1D
  • Mid Grey: #575757
  • Light Grey: #7C7C7C
  • Dark Olive: #B39F1B
  • Light Green: #E9E5A0
  • Light Pink: #FDECF5

Colours ~Rose

  • Dark Red: #BD3244
  • Green: #A6CEC1
  • Dark Grey: #1D1D1D
  • Mid Grey: #575757
  • Light Grey: #7C7C7C
  • Light Red: #FB5664
  • Dark Pink: #FFE3E3
  • Light Pink: #FFF5F5

Colours ~ Fresh

  • Mustard: #E5CF6F
  • Dark Blue: #A8C1C9
  • Dark Grey: #181818
  • Mid Grey: #464646
  • Light Grey: #8B8B8B
  • Mid Blue: #D0DFE2
  • Yellow: #F8F3AC
  • Pale Blue: #E7F3F6

**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_angeline_yourcolorhere.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_angeline” 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_angeline.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. Genesis 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 an image and the bottom row is made up of 3 columns. You won’t need to make any changes to the top row unless you wish to delete the bunting graphic. The bottom row contains your Logo on the left, your Primary navigation menu in the middle, a search button, social icons and your mini cart icon on the right. 

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 3 columns, namely a text section, a menu, 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. We have called this menu “Resources” but you can change this to whatever you want to have instead. Keep this menu to around 5 items to keep your footer from stretching too much.

Column 3 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 Hero
  2. Newsletter Opt in form
  3. Welcome
  4. Services
  5. Quote
  6. Shop Categories
  7. Latest Posts
  8. Testimonials
  9. Call to action
  10. Instagram Feed

* Home Hero *

Changing out the Home Top background image.

Editing the Home Hero Button Link.

* Welcome *

Your Home Page Welcome block is made up of 3 columns, a text column and 2 image columns. 
Your design has made use of negative margins so the layout may look slightly off in the page editor; please don’t make any changes to the layout as this will cause it to look incorrect on your live site. Check your changes regularly on your live site to see what it will actually look like.

In the first column there is an Advanced Heading, another Advanced Heading and a paragraph. To edit these, simply click on them and then insert your text to replace what is there.

Making changes to the image columns. To replace the images, simply click anywhere on the image and then click on ‘replace’ and either upload or choose an image from your media library.

Repeat this step for the smaller image in the 3rd column.

* Newsletter Opt in Form *

Setting up your newsletter opt in form. Once you click anywhere on your newsletter a number of options will show on the right. Here you can choose which email address to send to, spam check, reCAPTCHA along with any newsletter manager you may use, such as Mailchimp and Mailerlite.

* Services *

Your Services block is made up of 3 columns, each with an info box inside. In each info box you can change the icon, the advanced heading, the paragraph text and the button text. Each info box is linked to whichever page you set up by adding the URL to the Link box on the right hand side.

* Quote *

Add a lovely quote to your homepage. Or use this for any other purpose, you can add a heading, paragraph, button, the options are endless!

* Shop Categories *

The “Shop Popular Categories” is made up of 3 columns. To maintain the exact equal lengths of each column it is important not to change any of the settings related to the height of the column. You will be able to change out the images to your own easily and they will be cropped to fit.

To change out each box’s advanced heading simply click on the heading and type in your category and link it to the correct URL.

To change out the images for your categories, click on the image and then click on ‘replace’ where you will be given the option of uploading a new image or choosing one from your media library. Again, it”s important not to change the dimensions as this will affect how the grid displays.

To change out the buttons for each cover box, click on the button then input your URL where you want to link to. This can also be done on the right hand side.

* Home Testimonials *

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

* Latest Posts *

* Call to Action *

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, 2 rows, 5 columns showing 10 photos, with 2px padding around the images. Click Save once done.

Setting up your Pages

Your Services page is made up of 6 sections. The top section is made of 2 columns, the left has an advanced heading and 2 images and the right has an advanced heading, a paragraph and a button. The Vertical heading will show up as horizontal in the page editor, so don’t worry about that and don’t try make any changes to the orientation. To change the wording simply click on the heading and type in your own or to delete click on the 3 dots and ‘remove block’.

To change out the images, simply click on the image, then ‘replace’ then either upload a new image from your computer or choose one from the media library. Repeat this step with the smaller image..

Click anywhere on the button to set up the link URL that you require, this can also be done on the right hand side.

The second section allows you to list your services in rows with a 2 column in each row. Too add more, simply click on the section and the 3 dots and duplicate..

The thired section allows you to list your services in a 3 column format with an info box in each column. To make changes simply click on the icon, heading or paragraph and make your changes.

The next section shows your available packages in a 2 column layout, with the accordion on the left and an image on the right. To change your image, click on the image, click ‘replace’ then either upload your image or choose one from your media library. To change the information in the accordion click on the heading or paragraph and make your changes. You can add more accordion items by clicking on the button at the bottom of the last item.

The next section is a call to action, modify the heading and text and paste your URL into the box for the button either by clicking on the button or on the right hand side of the editor.

The last section is a testimonial block, here you can choose what style you would like, how many items and all the other settings can be updated to suit your needs.

Your About page is made up of 4 sections essentially, the top 2 sections are a 2 column block with text, heading and a quote and the right column is an image, and the second reverses this. This is follows by a “Team” section and then a “Call to action” section. The Team section is made of an info box which contains an image, heading, text and your social link icons.

To change the image in the right hand column, simply click anywhere on the image, then click “replace” and either upload an image from your computer or use one from your media library.

To edit the rotated heading simply click on it and replace the text with your own.

Repeat the above steps for your second section.

Changing out the team member image, heading, second heading and paragraph. Click on the info box and then type in your text. The image can be changed by clicking on the info box and editing the image on the right.

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. There are a variety of choices of portfolio type to choose from, including Masonry, Grid and Carousel. To change out the demo portfolio click anywhere on the portfolio and you’ll see the options on the right to choose the type and columns.

To change, add or delete any images, click on the portfolio, then on the small ‘pencil’ edit button.

You will be taken to a page showing your gallery items and an “edit gallery”. You can delete any images by simply clicking on the ‘x’.

When you want to add images to your existing gallery, click “Add to gallery” and then “select Files” to upload those images you wish to include. Once uploaded, click “Add to gallery” at the bottom right and the new images will show up in your portfolio.

The Demo has a FAQ page set up with 3 sections, 2 sections have a 2 column set up with an image in one column and an accordion with questions in the other. Both are set up in the same way. To change the image, click anywhere on the image and then click “replace” and either upload a new file or navigate your media library to choose a new image.

Changing out the image in your FAQ page.

You can always remove or copy a block by clicking on the 3 dots and either “copy” or “remove block”.

Editing the button link in the Call to Action section.

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 Sales Page has 10 sections. Some sections are similar and so editing them will be the same. Section 1 is a row with 3 columns, a text box and 2 images. Negative margins have been used on some images so please don’t be concerned if they look different in the gutenberg block editor. Check back to the actual web page often to see your changes take place. Please don’t try correct negative margins as this may change or break the display of the page.

In the first column click on the header and replace it with your own text. Repeat this step with the paragraph text. To edit where the button directs your customer to simply click on the button and type in the URL you wish to link to, either beneath the button or on the right of the page in the editor.

To replace the image in middle column, click anywhere on the image, then “replace” and either upload your new image or choose one from your media library. Repeat this step for the image in the 3rd column. Do not worry if they don’t look correct in the editor, they will show up differently on your actual web page so update and check changes often.

Section 2 is made up of a row with 2 columns, one has advanced heading and paragraph text and the second has an image. To change the heading and paragraph text just click on it and replace with your own.

To change the image to one of your own, simply click on the image, click “replace” and either upload an image or choose one from your media library.

Section 3 is made up of a row with 2 columns, an image in the first and an advanced heading and box with separate 2 column layouts beneath one another. You will notice to the left of the image is a vertical heading. This heading will show up as horizontal in the editor ~ This is normal! Don’t try to change the orientation. Simply click on the heading text and replace with your own.

To change the image to one of your own, simply click on the image, click “replace” and either upload an image or choose one from your media library.

The box contains 4 rows of 2 columns, a number in the left column and some text in the right. To make any changes simply click on the text and replace with your own. You can also delete any of these rows by clicking the 3 dots and “remove block” or create more by clicking on the 3 dots and “duplicate” to make another.

The 4th section is a call to action box with an advanced header, some text and 2 columns with text along with a button which you can set to link to whereever you wish.

Section 5 is a Call to Action block with a background image that you can easily replace by clicking on the image and then replacing it on the right in the editor. The button link can be set by you to any page you wish by typing your URL in the box under the button or on the right hand side.

Section 6 allows you to list some of the benefits of your sales page and also has a call to action button where you can set the URL as above to any page you wish.

Section 7 allows you to show how many customers you have as well as set up a testimonial block where you can choose how many testimonials to add along with what information to include, eg name, occupation, image.

Section 8 is a row with 2 column layout which has an image in the 1st column and an accordion in the second which you can use for any purpose.

To change the image to one of your own, simply click on the image, click “replace” and either upload an image or choose one from your media library.

To make changes to your accordion, click on the heading and paragraph text and replace with your own, you can also add images here if you choose.

To add further accordion items, simply click the “add accordion item” at the bottom and input your content.

Section 9 is an inverse of section 8 and can be edited in exactly the same way.

Section 10 is a Call to action with a button that you can input your link URL by clicking on the button and filling in the box below it.

To change the image to one of your own, simply click on the image, click “replace” and either upload an image or choose one from your media library.

Navigate to Dashboard > Pages > Contact to edit the information and contact form settings. Your Contact Page has 2 sections, the top section has 2 columns with an image and contact form and the second section has a newsletter sign up form.

To change the image to one of your own, simply click on the image, click “replace” and either upload an image or choose one from your media library.

Edit your newsletter sign up form in the same way as your contact form.