Sassafras Theme

sassafras-small-slide

Thank you for choosing a Hello You Designs Theme to build your site. Don’t forget to submit your site when you are finished and please contact us if you run in to any hiccups along the way. Below are the basics on getting your new theme set up to appear like the demo. Here is a link as well to the demo that you can view for reference.

VIEW DEMO


Design Basics

Below are the fonts and colors that are used throughout the theme.

Fonts

Josefin Sans
Lora
Oswald -Chalkboard boxes
Anemone – Chalkboard Boxes

Colors

Midnight – #0E222C
Baby Mint – #e8f5ee
Various Grays- #555
#999
#ddd

* Before Proceeding *

Create a backup of your current site. Always keep an untouched copy of your theme stored on your computer. You will also want to keep an updated version of your theme files stored on your computer, in the case that you accidentally make a mistake and need to use that copy to fix it. You can also download a copy in your account area at any time.


Basic Setup

Plugins used in Demo

If you plan on importing the demo content and widget file you will want to download these plugins first before doing that. If you download the demo content first and a plugin is missing that the demo uses, it will fail to import that content.

First Steps

  1. Install the Genesis Framework and make sure it’s activated.
  2. Install the Hello Lovely Theme and activate it.
  3. Install the plugins listed above before proceeding (leave off any you don’t plan to use).
  4. Reset permalinks. Click “Settings” in your admin menu, then permalinks, and save.
  5. Run the regenerate thumbnails plugin. (tools>regenerate thumbnails)
  6. Install XML file with demo content (only if you feel you need it).
  7. Install the Widget demo file (only if you feel you need it).

If you are starting from a new install you should be able to start editing the demo content with your information. If you have an active site and are switching themes, you will need to do some “cleaning up” and re-arranging of the widgets to have your theme display right. Go to Appearance > Widgets and then open each widget area and delete or rearrange the widgets that are in places they shouldn’t be.

Logo or Site Title

Image – To add a header image, click “Appearance > Header” and you’ll be prompted to upload your logo. Your logo is retina ready and fully responsive, the optimal size is 900×300. The logo is then compressed to half the original size. This keeps the logo from being fuzzy on mobile devices. The easiest way to properly size the logo is with picmonkey.com or other image editor. Start by creating a canvas the correct size, then place your logo on that canvas and adjust it to fit. Don’t worry about the amount of space on the sides of the canvas, focus more on the height and the logo being centered.

Text – If you prefer to use text, that will automatically appear. You can set your site name by visiting “Settings > General”

  • Place your blog name in the ‘Site Title’ field
  • Place your tagline in the ‘Tagline’ field

Setup your Menus

To setup your Navigation menu go to Appearance > Menus. Your theme comes with a Primary Navigation menu and Secondary Navigation that displays above the logo. You can use any one of the Font Awesome Icons in the Navigation Menu by adding the full icon code before, or after the menu name.

There are two ways to add the Icons to the Navigation. One will have the icons show in the Accent Color used in your theme and the second way will have the icons be the same color as the Navigation text.

Genesis WordPress Theme Feminine Boutique Hello Sweets Font Awesome

Change Your Colors

Sassafras comes with a few options to customize the site, change the background and main colors to match your brand. To do this go to Appearance > Customize. From there you can change the colors and background image. Here is a preview of what that screen will look like.

Wordpress Theme Color Customizer Sassafras

Widgetized Homepage

Widget Areas

Homepage Widgets

  • Home Top Slider – Full Width Slider ( 1150px x 400px)
  • Home Top Left – Use if you prefer a small slider with a widget to the right. (850px x 400px)
  • Home Badge – A beautiful extra. The space is 175 x 175px
  • Home Flexible – Widgets will automatically adjust when placed in this spot.
  • Home Featured – Full width widget area.
  • Nav Social Menu – *** Must have Secondary menu location enabled to show
  • Footer 1
  • Footer 2

Bonus Widgets

  • Widget Above Content – Will Show above your content on every page, except custom post types
  • Author Box Widget – Hooks into the Author Box. Must be enabled in settings to show.
  • Portfolio & Recipe Archive Widgets – Displays on the main pages for your Portfolio & Recipe Post Types
  • After Entry Widget – Displays below your posts. Great for a call to action.

Visual Widget Guide

Wordpress Theme Visual Widget Guide Sassafras

Widgets Used in the Demo

Wordpress Theme Visual Widget Guide Sassafras

If you need additional help setting the widgets up, download and install the Widget Importer & Exporter and upload the widget file. This will place and then configure the widgets exactly like the demo, with the demo content. If you don’t have all of the plugins installed used in the demo, you will get a “failed to import” message for the missing plugins, which is fine since you don’t plan on using the plugin.

Individual Widget Setup

Slider Section

Sassafras has two options for the slider section. A full width and a small slide with message area.

Full Width Slider – 1150px x 400px (or any height you want)
Home Top Left – 850px x 400px (or any height you want) Use if you prefer a small slider with a widget to the right.

The SoliloquyWP Slider is what we use in all of our themes. The Soliloquy Lite version is free and can be configured like all of the demo sliders. Purchasing the upgraded SoliloquyWP will give you more versatility and options but is not necessary to set your theme up like the demo.Solilioquy Slider Settings Genesis WordPress Theme

Step 1: Install & Activate the Soliloquy Lite Plugin.

Step 2: In your dashboard, on the left hand side select Soliloquy > Add New & then name your new slider. To make it easier to find and change your slides, I’ll name mine for the place they are going to appear, like “Home Full Slider” or “Home Small”

Step 3: Configure the slider size. Refer to your theme setup for the proper size. We will be using the Sassafras theme for these tutorials. Click the tab that says “Config”, then set the slider dimensions. Most themes come with a full size or small size slider. Then change the “Slide Gutter” to “0” so you don’t have extra padding beneath your slide.

Solilioquy Slider Settings Genesis WordPress Theme

Step 4: Add your Images. Click on the “images” tab. Before adding your images you need to size them properly to the desired slider size. Each image you load should be the same width and height as the slide itself. The easiest way to do this is with picmonkey.com. Click “Select Files” and locate your images you would like to load. Once they have loaded, publish your slide.

Solilioquy Slider Settings Genesis WordPress Theme

Step 5: Grab the Soliloquy Shortcode for your slide to add it to your Widget area. The Shortcode will be unique to your site and not the same number but the location will be the same. The Shortcode is highlighted in blue. Copy the highlighted code.

Solilioquy Slider Settings Genesis WordPress Theme

Step 6: Place your Shortcode in a Text Widget, in the correct slider location, we are using “Home Top Slider” for this demo. Go to Appearance > Widgets > place a “text” widget in the “Home Top Slider” widget spot and paste your shortcode in the “text” widget. Click save and your slider will now show on the homepage.

Solilioquy Slider Settings Genesis WordPress Theme


Edit Images or Change Slides

To change out your images navigate back to Soliloquy > Soliloquy and find your slider that you want to edit, or even add a new one and follow the steps above to place it in the proper area.

Add a Caption or Hyperlink

To add a caption or hyperlink click on the “i” that is above the image in the Soliloquy Slider options. There is where you will find a place to add a link and a caption.

Home Badge Widget

To use your badge/stamp place a text widget and then place an image in the spot, or if you prefer an image that links. Below are the codes that you can copy and paste into the text widget.

Image

Image that links

Home Flexible

Here is how the Genesis Featured Page Widget would be setup
Hello-Lovely-Home-Featured-Widget-2

Call to Action

Use a Genesis E-News Extended widget or a Text Widget. If you choose to use a text widget here is how to create the look that is in the demo.
hello-sweets-enews

Home Featured

This section in the theme can hold as many widgets and kinds as you would like. It is not flexible, meaning the widgets will not stay in compartments like the Flexible Widget area. They are allowed to stretch the body of the page. In the demo we used a Woocommerce Product Widget and a Genesis Featured Post Widget.

Hello-Lovely-Home-Featured-Widget-1

Hello-Lovely-Home-Featured-Widget-2

Nav Social Widget

This is how you get your social media icons in the Navigation Bar and a Search bar if you like. Place a search widget and a Simply Social Icon widget in this spot. This area is hooked into your Secondary Navigation and will not show unless you have the secondary navigation assigned. You do not have to have any menu items in this location if you do not want them. Just create a blank menu and select “Secondary”.

simplesocialiconsetup

Social Bar

This is the full width social bar under the theme footer. In the demo we use the plugin Instagram Feed and place a text widget with the shortcode for the plugin in this spot.
Social-Bar

Footer Widgets

Footer 1

The demo uses a Genesis Enews Widget.

Call-to-Action-Enews

Footer 2

This area displays an Instagram Feed in a text widget.
Social-Bar

Copy & Paste Codes

Insert Images

Image that links

Buttons

Plain Button

Button with heart


– Change <i class=”fa fa-heart”> to any other Font Awesome Icon

Pricing Table


If you are new to WordPress I highly recommend watching the WordPress Video Tutorials. Many of the questions you have will be answered in those videos. The videos are only available to clients who have purchased a theme. If you purchased your theme on Etsy or Creative Market and would like access to the Tutorial section, please contact us.

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 customization to themes is not covered under our provided support.