Hello Nouveau 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

Olive – #b6b67a
Chocolate – #5d5552
Slate Blue – #e5eaf0
Pale Pink – #f7eef3
Various Grays

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

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. Reset permalinks. Click “Settings” in your admin menu, then permalinks, and save.
  5. Your theme uses a Widgetized homepage. Go to Settings > Reading > Select Front Page Displays > Your Latest Posts
  6. 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)
  7. Run the regenerate thumbnails plugin. (tools>regenerate thumbnails)
  8. Install XML file with demo content (only if you feel you need it).
  9. 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

Center-Logo-Box-Nav
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 700×350. 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 Logo

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

Center-Logo-Box-NavTo 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. As well as room for 4 additional menus in the footer if you wish. 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 Items

Each side of the menu is designed to hold only 3 menu items. The menu items are only 1 level deep and will not allow for submenus. It is important to keep styling in mind when styling the menu and the amount of letters that go into each menu item. Too long and it won’t look good.

Anchor & Take Me home

Hello-Nouveau-Menu-Setup

Footer Menu with Social Links

In the demo one of the menus that was created is to highlight your social links. To create this look you would use the “custom link” option and copy and paste your social URL into that spot. Then use a Font Awesome Icons with the name. An example is below.

Hello-Glam-Social-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.

Hello-Nouveau-Color-Customizer

Add or Remove Blog from Homepage

This is a NEW feature for our themes. 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.

Hello-Nouveau-Blog-Content-Settings

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.

  • Home Slide – Sized at 1600pxW x 600pxH
  • Home Welcome
  • Home Featured
  • Home Grid – 1 2 & 3
  • Home Flexible
  • Home Featured 2
  • Home Close
  • Nav Social
  • Widget Above Content
  • Widget Below Content
  • Social Bar
  • Social Footer
  • Footer 1
  • Footer 2 (not shown in demo)
  • Footer 3

Bonus Widgets

  • Category Index
  • Portfolio Blurb
  • After Entry Widget

Visual Widget Guide

Hello Nouveau Widget Overview

The Homepage By Section

This section will show you how each section is setup in the theme.

Home Slide

Hello Nouveau Slide

Home Slide

The slide uses Soliloquy. The demo uses an image of 1600px Wide x 600px 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.

**SOLILOQUY TUTORIAL HERE**

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.

Home Welcome

Hello Nouveau Welcome
Below is the code you would use to create the look in the welcome section. Keep in mind you can place any widget(s) in this spot. It is designed to be flexible and can hold anything. See above for the “Flexible Widgets” overview. The Demo is using 3 widgets.

1st Widget – Blank, used as a place holder
2nd Widget – Welcome Message and Checkboxes
3rd Widget – Image

Hello-Nouveau-Welcome-Widgets

Insert Images

Image that links

Welcome Message & Checklist

Button

Home Featured

Hello-Nouveau-Featured-Widget

This area is full width and the color can be adjusted in the theme Customizer. The demo is using a Genesis E-news Extended widget.

Home Grid

Hello Nouveau Grid

This section is made up of the following widgets…

Home Grid 1
Home Grid 2
Home Grid 3

Each widget has 2 widgets placed in it. You can mix and match Text widget, Featured Page, Images or even videos.

Hello-Nouveau-Grid-Widget

Below is the size of each box to size your images properly.

Hello-Nouveau-Grid-Size

When sizing your images for this spot, it is best to double them up to be retina optimized. The theme will then crunch them in half to be the correct size.

Adding Images with Hover Effects

This grid is designed to display the page title on hover when you add an image with a Featured Page Widget.

1. Add your properly sized image to the “Featured Image” spot of the page you would like displayed in the grid
2. Go to Appearance > Widgets & place a Genesis Featured Page Widget in the section of the grid you would like it to display.
3. Select the “Page” – Select the image size “1024×1024” – Alignment “none” then if you would like the page title to show on hover add select “Show Page Title”

Hello Nouveau Featured Page Widget Setup

Grid Text Boxes

To keep your text middle aligned, centered and not touching the edges, we have coded in a special “textbox” code. There are 3 sizes, Textboxsmall (gray boxes), Textboxmedium (blue boxes), Textboxlarge (pink boxes).

Hello-Nouveau-Text-Box-Small

Textbox Code

Copy and paste the correct size based on the spot you want the text in the grid.

Insert Images

Image that links

Home Flexible

This area is not shown in the demo but would display right below the homegrid. It is a great way to add boxes, buttons or a call to action. It is flexible and will adjust based on the amount of widgets in the spot.

Home Featured 2

Hello Nouveau Featured 2

This is the second full width slate blue section on the homepage. The demo is displaying a Woocommerce Product Widget.
Hello Nouveau Featured 2 Widget Setup

Home Close

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

Hello Nouveau Footer Area

The demo is only using Footer Widget 2 & 3.

Footer 1

Hello Nouveau Footer 1

The demo is using 3 Custom Menu Widgets in the Footer 1 Widget area. To create these menus you would go to Appearance > Menus > Then create each menu. To set up the Social Menu you see, view the instructions at the top of this tutorial.

Footer 3

Hello Nouveau Footer 3

The Demo is using a text widget with an image code. Below is the copy and paste code you can use.

Insert Image

Social Bar

Hello Nouveau 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, 0 margin. I've also unchecked the features of showing the Header, Load more & Follow buttons.

Social Footer

Hello-Nouveau-Social-Footer

This spot is designed to hold the Simple Social Icons plugin.

Codes used in Theme

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

These pricing tables can be placed in any post/page or widget.

hello ceo 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.