Hello Rose 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.

VIEW DEMO

Design Basics

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

Colors

Midnight – #222
Mauve – #e1bdbd
Various Grays

Blog Featured Image Sizes

It is good practice to always have your Featured Images for your posts be the same size. If you plan on using the slide, you will want your featured images to be at least 1000px wide. The two recommended sizes are 1000×1500, or square of 1000×1000. If you do not plan on using the post slider, then you can do a smaller image width.

* Before Proceeding *

If you are not staring with a new site, 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 keeps 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.

First Steps

  1. Install the Genesis Framework and make sure it’s activated.
  2. Install the Theme and activate it.
  3. Install the plugins listed above before proceeding (leave off any you don’t plan to use).
  4. If you are using Woocommerce be sure to finish the shop setup, otherwise your content will NOT SHOW.
  5. Reset permalinks. Click “Settings” in your admin menu, then permalinks, and save.
  6. Your theme uses a Widgetized homepage. Go to Settings > Reading > Select Front Page Displays > Your Latest Posts
  7. Go to Appearance > Widgets and 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)
  8. Run the regenerate thumbnails plugin if you are installing over an existing site. This will resize your images to the proper dimensions. (tools>regenerate thumbnails)
  9. Install XML file with demo content (only if you feel you need it).
  10. Install the Widget demo file this will set the widgets up just like 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, 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 Left Menu (Primary Navigation) and Right Menu (Secondary navigation) that displays on either side of the logo. The “Small Nav” which displays your social icons and search bar as well as menu items if you would like. You can also use any one of the Font Awesome Icons in the Navigation Menu by adding the full icon code before, or after the menu name.

Menu Descriptions

To set the description under the main menu item, select “Screen Options” from the very top right hand corner of the Menu page. There you will see a bunch of options and make sure that “Description” is checked. Once that is checked you will be able to add a small description above your main menu item.

Anchor & Take Me home

The example is for Hello Nouveau but works the same on any Hello You Theme.
Hello-Nouveau-Menu-Setup

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.

Change the Image Section Images

To change the default images that show up in each Image Sections you would go to Appearance > Customize > Image Sections then select the image you want to change. the images needed for each section will be listed in the individual widget description

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

The footer is optimized for SEO and will pull from your site Title. To change that information you would go to Settings > General > Then adjust what is shown in the Site Title field.

Widgetized Homepage

Widget Areas

Your homepage is made up of a mix of solid & image sections. The recommended image sizes are right in the widget description

  • Carousel Section – 600pxH
  • Home Grid 1 2 3 See Below for sizes or Widget Description
  • Image Section 1 – 2000pxW by 1080pxH
  • Home Welcome
  • Home Welcome 2
  • Home Flexible
  • Image Section 2 – 2000pxW by 1080pxH
  • Home Close – Not shown in Demo
  • Top Social Menu
  • Social Bar
  • Site Credits
  • Footer 1
  • Footer 2
  • Footer 3

Bonus Widgets

  • Side Widget
  • Signature
  • Widget Below Content
  • Blog Slider
  • Blog Featured
  • Portfolio Blurb
  • After Entry Widget
  • Social Page Template

Homepage Visual Widget Guide

Not every widget available was used in the demo. Below is the guide as you see in the demo.

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 Carousel – 600pxH

The carousel is added to the theme with the Soliloquy Lite – Free Version plugin. You can use as many images as you want and the images can be any width, but you will need to make the height 1200px. The slider will output at 600px high, compressing your 1200px images in half. Doing this will make your images more clear on a retina device. After you load the images, click over to the configure button and place 1600px wide by 600px high in the slider size settings.

Slider Settings

When you create your slider for the homepage, be sure to click over to the configure spot and place 1600px wide by 600px high. Once you have created your slider for the homepage, add the soliloquy shortcode to a “custom html” widget in the Home Carousel widget spot.

Carousel Caption

You can choose to use or not use this spot. It is very important that the message here is short and sweet or it will not fit on the slider as it responds down for mobile sizes. To add a caption, add a second “custom html” widget to the Home Carousel spot. The cusive font will be your widget title, or an H1 tag. The button in the demo is linking to the home grid with the code #home-one

Button Code

Carousel Badge- 500px by 500px

To add this use an “image widget” in the Carousel Badge spot. You can link the badge to another page on the site if you would like.

When creating your submark it is important to place it on a square transparent canvas. If you do not do this it may not sit even in the spot. Also if it is not on a transparent canvas you will have a color block behind your icon.

Home Grid

The Home Grid consists of 3 widgets with the recommended image sizes below. They are also posted in the widget description. You can use images, or Genesis Featured Pages. It is important to size your images before adding them to the grid. If you go and place an image that is not sized right your grid will not align properly. – You can change the pale pink background color in the color customizer.

Home Grid 1 – 1st Image 800pxW x 600pxH – 2nd Image 800pxW x 800pxH
Home Grid 2 – 1 Image 800pxW x 1440pxH
Home Grid 3 – 1st Image 800pxW x 800pxH – 2nd Image 800pxW x 600pxH

The demo is using a Genesis Featured Page Widget in each spot. The first step is to size your images right, then place them as the featured image of the pages you would like to show in the grid. Go to Appearance > Widgets > Home Grid and place a Genesis Featured Page widget in the grid spot. The default image size you should choose is the square large. That will ensure that the theme is pulling the largest possible image.

Image Section 1 – 2000pxW by 1080pxH

Change the image in the Customizer by going to Appearance > Customizer. Always make sure to presize your images before loading them. This image should be 2000x1080px.

This image section is designed to not show if there is not a widget in the image section. Go to Appearance > Widgets > and be sure to place an empty widget in the widget area if you would like it to show, otherwise it will not.

** Because this is an image section, it adjusts based on the height and not the width. Image sections like this are best for background style images and something that does not need to be size specific.

The demo is using a Custom Html widget with a short blurb and button.

Home Badge 1 & 2


This spot can hold your badge/submark. Best size is 400px x 400px. The demo is using an Image Widget. If you would like this spot to be a button that links you would load your image with a Custom HTML widget using an image that links code.

Home Welcome 1 & 2 – Images 1000pxW x 1300pxH or taller

Your images for this section should be 1000pxW by 1300pxH, or for a featured post use the recommended size of 1000px by 1500px. It is important to keep your messages somewhat short for this section. If they are too long they will not fit or look good on every device. Both Welcome Sections are holding 2 widgets. 1 is the Image widget and the other a custom HTML widget that holds the text.

Featured Posts

You can highlight the latest posts from your favorite category with a Genesis Featured Post widget. The widget will pull the featured image from the post and display it. You can show the post title and the first category that post is listed in, or choose to not show either. Below is how the widget is setup if you would like to display a featured post.

1 – Select the Category you would like to show
2 – Be sure the featured image size is your post featured image of 1000px by 1500px
3 – Select “Show Post Title”
4 – Select “Show Post Info” and place [post-category] in it
5 – Be sure to turn off the content

Text Styling

Cursive – H1
Header Text – H2
Main Body – Normal text
Link – The link is using traditional HTML, however, on Welcome 2 it is right aligned to match the rest of the layout.

Home Welcome 1


1st Widget – Image Widget (image size 1000px 1300px)
2nd Widget – Custom HTML Widget

Home Welcome 2


1st Widget – Custom HTML Widget
2nd Widget – Genesis Featured Post Widget

Home Flexible

This widget area is flexible and adjusts based on the amount of widgets placed in it. How it adjusts is below

The demo is using this section for 3 service highlights. To get the demo look, you will place 4 Text widgets in the Home Flexible widget area.

1st Text Widget – Is always 100% and is holding the Flexible widget message.
2nd 3rd 4th Text Widgets – Holds Each Service Box

Styling Options

You can choose to style it like the demo with a white box, or without a white box. It was designed like this so those that want to use a custom image button can still do so without having a white box, or the hover effect. To get the white background, you would wrap your code in the below copy/paste textbox code.

Image Section 2 – 2000pxW x 1080pxH

To change the image you see in this section you would do it in the customizer. Go to Appearance > Customize > Image Sections. Make sure to properly size your image before loading it. This section is a parallax section and the recommended size is 2000x1080px.

The demo is using the Testimonial Rotator Widget. You can use this spot for anything though, it does not have to be a testimonial. You could do a message, highlight products, or place a simple button that links to another spot in the site.

Home Close – Not shown in Demo

This section was not shown in the demo but can be used for any number of things. In the past themes the Home Close is for a gorgeous image and contact form. It could also be used for a call to action or an about section. Below is how the Home Close widget area is used in the Hello Nouveau Theme. The same code works with all of the themes that have this spot, if you would like to duplicate the layout.

Hello Nouveau Close

This area was created as the closing to the onepage sections. It is flexible and can be used for anything. The demo is using 3 Text Widgets.

1. Title with the words “Get in Touch”
2. Image code – Copy and past code at the bottom of tutorial
3. Contact Form shortcode for Gravity Forms (gravity forms is the only premium plugin this form uses. There are other free forms available and they all come with their own shortcodes that you would use in place of the gravity forms shortcode)

Hello Nouveau Close Widget

Footer Section – As Seen in the Demo

Footer 1 2 3

Plan this part carfully. Not everything will look good in this section. If you have any trouble getting the format to look good, reach out to us.

Footer Widget 1

1st Widget – Simple Social Icons – Be sure to set the alignment to Center
2nd Widget – Image Widget holding an icon. Icons are included in your demo folder.
3rd Widget – Custom Menu – Try to keep your menu items to 3-6 items. Set the menu up at Appearance > Menus

Footer Widget 2

1st Widget – Image Widget holding the site badge. You could use this for a message, or even a menu. It is designed to hold 1 widget.

Footer Widget 3

1st Widget – Custom Menu – Best to have the same amount of menu items in Footer Widget 1
2nd Widget – Image Widget – Holding an icon
3rd Widget – Custom HTML – Holds a brief blurb. The H2 is the cursive script

Social Bar & Site Credits

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 8 images, 8 columns, 2px margin. I’ve also unchecked the features of showing the Header & Load more but left the Follow Button.

Site Credit Widget

This is where you can add a Custom Menu Widget or even social icons. The demo is using random pages but this spot was really designed to add your T&C, Disclosure or other important pages.

Blog Template

Different Blog Templates

Assign the Template

To assign your blog to a page, create the page. Then change the default template to one of the two blog templates. Your theme comes with 2 options, both options can be full width, or you can have a sidebar on the left or right.

Blog Page

Blog Grid

Slider Setup

To setup the slide like you see in the demo you would want to make sure that you have the Genesis Responsive Slider installed. Then go to Genesis > Slider Settings > and set your slide settings like the image. You only have to worry about what is in the circle.

hello-foxy-slide-settings

Once you have set your slider settings then go to Appearance > Widgets and place the Genesis Responsive slider widget into the Blog Slider Section.

Trouble Shooting

If your images do not fit, make sure first that they are at least 1000px wide. If they all are, then you will need to run the regenerate thumbnails plugin. After you have done that on your images, they should all fit.

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

Affiliate Disclosure

Many of you will need to add an affiliate disclosure notice at the top of sponsored or affiliate linked posts. To add your custom message to the post go to the edit the post. Make sure that “custom fields” option is selected. To do this click on the top right hand arrow where it says “Screen Options”, then check off “custom field”.

Next scroll down the page until you the custom field section.

1 – Click “enter new”
2 – Enter the wording “affiliate” in the “name” section
3 – Enter your affiliate message in the “value” section
4 – Click “Add Custom Field” when finished and now that custom filed will show at the top of your post.

Signature Widget

This is one of those features that gets asked for often. We added a signature widget that will show below your posts and above the shop widgets. The signature widget does not have any height or alignment restrictions in the style sheet. So you can design any style signature that you would like. You can even use this widget for an advertisement, CTA or message, it doesn’t have to strictly be used for a signature.

Keep in mind that it will show below every single post, so if you have multiple authors on your site then this probably isn’t the best option for you and should be used for something else.

Socail Page Template

Social Page


This is a great way to guide your readers when they click through from Social Pages. To set it up, create a page and change it from the default template to the the Social Page Template. Then go to Appearance > Widgets and add your widgets to the Social Page Widget area. Once you have set that up all you have to do is link the page in your social profiles for your readers.

Widgets

1st – Custom Menu
2nd – Simple Social Icons
3rd – Featured Post Widget

Menu buttons

Create a custom menu that you would like to show on your Social Page and then add it to the widget area. This menu will automatically have the menu items show up as buttons.

The Other Widgets

Sidebar Widget

This widget area is designed to be sticky and show on all of your pages and posts. In the demo we are using the Genesis E-News Plugin and the Simple Social Icons below it.

Codes used in Theme

Accent Text

You have a built in Accent Text. When you use the code you can create a word or words in Gold, then have a title and description below.

** You can change the gold color in the color customizer – It is listed as Accent Text. Go to Appearance > Customizer >

Insert Images

Image that links

Buttons

Plain Button

Button with heart


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

Circle Button

This little button was only designed to hold 1 icon, no wording. Though you could put wording in it and you would have an oval icon. The icons you can use can be found here FontAwesome Icons

Color Blocks

Both of the colorboxes can be customized in the color customizer. To get the full width look, you would use the below custom code. If you want to constrain the width of the text that goes in the box, copy it as is. If you would like the text to stretch the full width, remove the Text-box div.

This code will only work on full width pages that do not have a sidebar

Color Box

Gray Box

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.

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.