Simplicity Theme

screenshot

I’m so excited you purchased Simplicity! This theme has been so much fun to build and I can’t wait to see how beautiful your site looks when you are all done setting it up!

Below are all the tutorials on getting your new theme to appear like our demo. Here is a link to the demo, use it as a reference when setting up your new theme!

View Demo


If you would like to download the demo content, click here for the tutorial.

Plug-ins used in the Demo site


HOW TO SET UP YOUR WIDGETS:

Your homepage has 5 Widget Areas

  • Header Right Area
  • Home Top
  • Home Middle
  • Home Bottom
  • Footer 1, 2 & 3

You also have 2 extra widgets options that show up on single post pages (blogs) and the Portfolio page.

  • After Entry
  • Portfolio Archive Page Widget

Visual Guide to HomePage Widgets

simplicitywidgetoverview

Homepage Widget Overview

A quick overview of what widgets go where to style it just like the demo.

simplicityWidgets


Title Area & Header Right

Simplicity was designed to have a simple text in the header area, or you can place a small logo size of 300px by 60px. The Home Top Widget area is the best spot to place a larger logo.

To set the name of your site, go to Settings > General

  • Change Site Title
  • Change Tagline (tagline is designed to not show on the site but will still show for search engines when indexing your site.

simplicitytop1 simplicitytitlesettings

To add an image go to Appearance > Header

  • Click “Add new image” and select your image. It should already be sized to the correct size of 300px by 60px

simplicitytop2 simplicitylogoupload

 

Header Right Widget area

simplicitylogoupload simplicityheaderrightFirst step would be to go to Appearance > Menus then create a menu of any pages and links you would like up there. Because this menu is your “Sticky Navigation” it is good to treat it as if it were a primary menu.
Once you have created and saved your menu, head back to Appearance > Widgets and place a “Custom Menu” widget in the “Header Right” widget area. Select your menu from the drop down list and click save.

Next step is to download the Simply Social Icons plugin. Once installed place a “Simple Social Icon” Widget into the “Header Right” widget area and configure it to match your social settings.


Home Top Widget Area

This section was designed to have a custom logo/image, text, or even a slider. It is also designed to have a button with a beautiful scroll effect when clicked. The demo has a logo, text and a button placed in a “text” widget. To create the same look the demo has you need to create it requires a little html. Here is the best way to create the code you need to do this.

Head over to Posts > Add New

  • Click “Add Media” and select or upload your logo. * Before loading your logo you will need to adjust the size based on the look you would like for the Home Top area. You can use a large logo and have the entire area be of just your logo/image or use a smaller logo/image and some text.

 

      • simplicitytop1Once your logo has uploaded and before you insert it into the post, on the right had side are some controls for the image. You want to set the image to
        • Alignment: “center”
        • Link To: Either a custom url, or no link at all.
        • Size: Full Size – this will depend on the look you want, you can choose smaller if it matches for you

         

        simplicitytop2After adding your image to the post, you can add text below it. For the demo “Versatile Top Section” is centered and sized at Heading 1 & “Perfect for a logo, image, message or even a slider” is set at Heading 4.
        simplicitytop3

        Click on the text tab and you should have something that looks like this

         

        simplicity4This is the HTML code you will need to place in the “text widget” on the “Home Top” widget area. All that is missing is the button! For that copy and paste this button code into your post where you would like the button to be. For the demo it is below all the wording. Make sure that you change “Take a Peek” to whatever wording you would like the button to display.

        simplicitytopsimplicitytop3 simplicity5After you copy and paste that button code into your post, you should have something that looks similar to this  Now simply select and copy all that text, then head over to Appearance > Widgets and place a “text” widget into the “Home Top” widget area and paste that code into the “text” widget. You can save that post as a draft for future reference, or simply delete it if you are all done.


         

        Home Middle Widget Area

        simplicity featured contentFor this section you will need the Genesis Enews Extended plugin and Genesis Featured Content Widget plugin. For your featured Portfolio and Product items you will need to use the “Genesis Featured Content Widget” for your post entries (blogs) you would use the “Genesis Featured Posts” widget. simplicityhomemiddlewidgets Any “featured Content” will show up in a beautiful grid with hover effects when placed in the “Home Middle” widget area. Portfolio posts and product posts placed in this area will only show the Title on hover. Below is how we set up the two Featured Content widgets

        ** To maintain the grid size, pre-size all your featured images to 380×380 **


         

        Home Bottom Widget Area

        simplicityhomebottomThis widget area was designed to highlight your blog entries. Styled to have a beautiful hover effect on the post entry. Here is how we set up the “Genesis Featured Post” widget.

        ** To maintain the grid size, pre-size all your featured images to 380×380 **


         

        Footer Widgets

        You have 3 Footer widgets you can setup and style however you want. Here are the widgets we used for the demo. You will need to download the Instagram Feed plugin if you want to show your Instagram feed. simplicityfooter After installing and setting up the Instagram Feed plugin to your liking, below is the short code that will need to be placed in a “text” widget to display your Instagram Feed. simplicityshoplistings


         

        After Entry Widget

        simplicityafterentryThis widget shows up on single post pages. Great for a Call to Action, special message, or even a newsletter signup.


         

        Portfolio Blurb Widget

        portfolioblurbThis widget shows on the Portfolio archive page. Perfect place for a testimonial slider which you will need the BNE Testimonials plugin for it. Or use it to highlight your work.


         

        How to change the Color Scheme

        Navigate to Appearance > Customize. Then select the Colors panel. You can change the following colors:

        • BACKGROUND COLOR – This sets the quick flash of color you see when changing pages, or the solid color background if no background image is loaded
        • PRIMARY COLOR – Footer, E-News Widget, Hover color on featured content and the Homepage Button
        • ACCENT COLOR – Primary Navigation and Footer widgets
        • HIGHLIGHT COLOR – Links and buttons when hovered

         

         


        simplicity-color

        How to set the Background

        You have three options for the background. Navigate to Appearance > Customize There you will see “Colors”, “Backstretch Image” and “Background Image”

        Image or Wallpaper Background

        background-changerSelect “Backstretch Image” and upload whatever image or wallpaper you would like. Hit save and see your changes.

        Solid Color Background

        To have a solid color for the background you first have to select “Backstretch Image” then click “Remove” – this will remove the default background of pink and grey flowers. Click save and then back to the main Customize Menu and select “Colors” > Background Color and choose the solid color you would like for the background.

        Tile Background

        Select “Background Image” and upload your image. Then configure the settings to match your desired look.


         

        Installing the Shop

        This theme uses WooCommerce for your shop. You will also need to install the Genesis Connect for WooCommerce plugin. Once installed you will be taken to a setup screen for your Woocommerce shop. Follow through the prompts to set up your store. Make sure that you choose to install all the pages you need for an ecommerce site (cart, checkout, account, etc.) *** This step is very important! Without doing it your shop will not have the pages to function properly*** You’ll also want to configure your image settings so that your images aren’t blurry once you begin adding products. Navigate to WooCommerce>Settings>Products>Display and configure like below:  You can now begin adding products under Products>Add Products. ** PLEASE NOTE: We offer no support for the Woocommerce plugin itself beyond the installation instructions above since it wasn’t created by us. Should you need further support for WooCommerce please visit WooCommerce.


        [call_to_action link=”https://support.helloyoudesigns.com/blogging-extras/” button_label=”TUTORIALS” rounded=”false” btnsize=”medium” color=””]

        BLOGGING GOODIES

        Each theme comes pre-coded with some awesome blogging goodies.  Click the button to go to the tutorials

        [/call_to_action]

        Font Awesome

        The Font Awesome Icon full list of available icons can be found here. The Tutorials can be found here.

        [hr]

        If you are unable to find your questions answered in the links above, please contact us and submit a support ticket.

        CONTACT US

        Please note our support team is here to help answer questions pertaining to any Hello You Designs theme setup and installation. Any further customizations to themes is not covered under our provided support.