Sweets Peachy Theme
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.
Design Basics
Below are the fonts and colors that are used throughout the theme.
Colors
Charcoal – #333
Peach – #faefee
Darker Pink – #c87193
Gold – #e2c37a
Featured Image Sizes
It is good practice to always have your Featured Images be the same size. This is to ensure everything looks uniform. This is a personal preference and you can of course choose to use any size that you would like. If you plan on using the blog slider though, you will want to make sure that your featured images are at least 1000px wide.
Square – 1100x1100px
Long – 1000x1500px
Portfolio Images – Square 1100x1100px is recommended
Shop Images – Long or Square
Home Page Widgets – See each widget section
* 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 (if you purchase on our site, otherwise it is keep on the purchasing site) 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 not import the content for that particular plugin and give you a “failed to import” message. You do not have to use all of these plugins, or any of these plugins. Only activate what you will use.
- Genesis Enews Extended– This is used for the subscribe/newsletter areas.
- Simple Social Icons– This is used for the social media icons in the sidebar.
- Soliloquy Lite– This is for the slider on the home page.
- Genesis Responsive SliderThis is the Post Slider used on the blog page
- Genesis Simple Share– This is used for the social media sharing at the bottom of blog posts.
- Portfolio Post Type – Provides the custom post type for your portfolio
- WooCommerce– This is used for the ecommerce area of the site. If you aren’t using this feature, don’t install this plugin.
- Genesis Connect for WooCommerce– This is used in conjunction with the WooCommerce plugin to work nicely with Genesis.
- Instagram Feed– This is used to show your latest Instagram feed.
- Testimonial Rotator– Displays your testimonials.
- Image Widget– Helps to add images to widget areas if you are uncomfortable with the copy and paste code
- Regenerate Thumbnails– This is used to recrop your images if all your images are oddly sized.
- Widget Importer & Exporter– This is used to import all the widgets from the demo and helps with setting up the theme for the first time.
First Steps
- Install the Genesis Framework and make sure it’s activated.
- Install the Theme and activate it.
- Install the plugins listed above before proceeding (leave off any you don’t plan to use).
- If you are using Woocommerce be sure to finish the setup, otherwise your content will not show. Once you have finished the setup go to Settings > Products > Display and set the 3 image sizes to 600×600, 800×800, 600×600. This will ensure that your images being used are large enough to not be stretched and distorted.
- Reset permalinks. Click “Settings” in your admin menu, then permalinks, and save.
- Your theme uses a Widgetized homepage. Go to Settings > Reading > Select Front Page Displays > Your Latest Posts
- Delete old Widgets or Widgets that are located in the wrong section now due to activating a new theme (this applies only if you had an active site, not a new install)
- Run the regenerate thumbnails plugin on your images. This will fix any sizing issues. (tools>regenerate thumbnails)
- Install XML file with demo content (only if you feel you need it). Tools > Import > WordPress
- Install the Widget demo file (only if you decided to import the demo content), this will set the widgets up just like the homepage. Tools > Widget Importer/Exporter. Without this step the demo content you imported will not show on the homepage.
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 1200×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. For more help on placing your logo on the proper size canvas, visit this tutorial How to upload & Size your LogoText – If you prefer to use text like the demo, 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 which displays above the logo and Secondary navigation that displays below the logo. This limited edition theme has special styling for the home button. You can use any FontAwesomeIcon you want, the demo is using the house icon. Below is how this is setup
Make sure you are at Appearance > Menus > and on the primary navigation menu…
Step 1 – Click Screen Options in the top right corner, a tab will open
Step 2 – Make sure you select the “CSS Classes” box
Step 3 – Add the < href="http://fontawesome.io/icons/">FontAwesome code you want to use.
Step 4 – Make sure in the css spot you type navhome That is what lets the navigation know to style it the way the demo is.
Change Your Colors
Your theme comes with few options to customize the site. If you go to Appearance > Customize you will open the theme “Customizer” screen. There you can change the background and main colors to match your brand. Here is a preview of what that screen will look like.
Add or Remove Blog from Homepage
You can add or remove the blog from the front of the homepage by going to Appearance > Customize > Front Page Content Settings. There you will have the option to show or hide the blog as well as rename what the intro says. To adjust how many are shown per page, you go to Settings > Reading > Blog Pages to Show at Most > Then select the number you would like to show on the homepage.
Footer Copyright
Widgetized Homepage
Widget Areas
Your homepage is made up of a mix of solid & image sections.
- Home Slider – Sized at 1100pxW x 500pxH
- Home Badge – Sized at 400pxW x 400pxH
- Home Call to Action
- Home Flexible
- Home Featured
- Home Close
- Widget Above Content
- Widget Below Content
- Nav Social Menu – Displays in Primary Nav
- Social Bar – Displays Below your footer widgets
- Footer 1
- Footer 2
- Footer 3
Bonus Widgets
- Category Index
- Blog Slider
- Blog Featured
- Portfolio Blurb
- After Entry Widget
Homepage Visual Widget Guide
The Flexible Widgets
The flexible widget areas will adjust based on the amount of widgets that are placed in the spot. The first widget area will always be 100% and is best used for a title, or intro. Above is the chart of how the widgets will flex based on the number you choose to use.
The Homepage By Section
This section will show you how each section is setup in the theme demo. Not all sections were used in the demo. Keep in mind this is just a guide to go over how the demo is styled. You can use or not use any section to create a custom look.
Home Slider & Home Badge
The slide uses Soliloquy. The demo uses an image of 1100px Wide x 500px high. It is really important to size your images specifically for the slide. That way you can control exactly what gets seen inside of the slide. It also helps to speed up the slide. Try not to use more than 3 images. Any more than that will cause the slide to load slow and most readers don’t watch past slide 2. To set captions in the slide, you would do that in the individual slider images. H2 is the script, h3 the normal font.
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.
The Home Badge has become a favorite in our themes and it wouldn’t have been a Hello You Designs theme without one. The best size is 400x400px. You can choose to use this widget area or leave it blank. Add it with html of an image that links or use the Image Widget.
Home Call to Action
The demo theme is using the Genesis E-news Extended plugin. You would want to find your “form action” from your newsletter provider and place it in the “form action” spot on the plugin. Below is how the demo is setup. Please be aware that the space is limited so long optins may not look the best.
Home Flexible
This section is flexible and holding 4 widgets
1st Widget – Blank, used as a place holder or Header
2nd Widget – Accent Text with Button
3rd Widget – Accent Text with Button
4th Widget – Accent Text with Button
Button
Another Style
1st Text Widget – Is used for a placeholder, or a title
2nd to 4th Text Widgets – hold custom code that is built into your theme. Serendipitous uses Font Awesome Icons, those are the icons in the light pink. You can change the Font Awesome Icons any that you would like or you can use regular text.
Home Featured
This widget area is full width, meaning not flexible. Each widget will be the full length across, 1100px. The demo is using the Woocommer Product Widget.
Home Close
This section is using an image and contact form. It could also be used for a call to action or an about section. It is Flexible and has 3 widgets placed in it.
1st Widget – Title or place holder
2nd Widget – Image Widget *remember to remove the “title”
3rd Widget – Contact form from Gravity Forms *Gravity forms is a premium plugin. You do not need to purchase it, there are plenty of amazing free ones available.
Footer Section – As Seen in the Demo
To get this look right it takes a little bit of planning and adjustments. You may have to play around with the best placement of widgets and the amount of text you have in each spot.
Footer 1
To get this look, you will use 3 widgets.
Widget 1 – Text widget using H2 
Widget 2 – Image Widget
Widget 3 – Custom Menu Widget. Make sure your menu is the correct number of items so it does not overwhelm this spot. Typically 3 to 4 is good.
Footer 2
Footer 2 is holding 3 widgets.
Widget 1 – Text widget. The Uppercase is an H3, with the rest traditional.
Widget 2 – Text Widget using the built in Accent Text.
Widget 3 – Image Widget
Footer 3
The demo is using the Simple Social Icon plugin and an Enews Extended
Social Bar
This is where you place the Instagram shortcode in a text widget. To get the IG feed to show up the same as the demo you will need to set the display options in the IG settings. The demo is using 6 images, 6 columns, 5px margin. I’ve also unchecked the features of showing the Header & Load more but left the Follow Button.
Blog Template
Blog Page Overview
Blog Slider
The demo is using the Genesis Responsive Slider in the Blog Slider Widget spot. It is very important to set up the slider before you place the widget to use it in the slider spot. To set it up go to Genesis > Slider Settings. Below is what the demo is using. Make sure to size it at 1000x500px. Anything less and your slides will not fill the spot.
Blog Featured
This Blog Featured spot is designed to hold 3 Featured Post Widgets. Each set to show 1 post from 1 category. They are also designed to have the title appear on hover. Below is how the demo is setup.
Post Excerpt – Shop Style Widget
This theme is designed to use the post excerpts for your Shop Style or Reward Style Widgets. You can also use it for affiliate announcments, special guest posters and even optins on a per post basis. To use the excerpt on the post, you first want to make sure that “excerpts” are enabled. You only have to do this once.
Step 1 – Create a post, click on the “settings options” tab in the top right corner
Step 2 – Make sure that “Excerpt” is checked
Step 3 – Scroll down your blog post and find the excerpt box. This is where you would copy paste your shopping widget or other content. The demo is using the built in accent text and a shop style widget.
Accent Text Example
Codes used in Theme
Accent Text
This is one of my favorite features of this theme. You have a built in Accent Text. When you use the code you can create a word or words in pink, then have a title and description below.
** You can change the pink color in the accent text in the color customizer. Go to Appearance > Customizer > Accent Font.
Insert Images
Image that links
Buttons
Pricing Table
These pricing tables can be placed in any post/page or widget.
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.