Hello Nouveau Theme
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.
- 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 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.
- 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).
- 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. (tools>regenerate thumbnails)
- Install XML file with demo content (only if you feel you need it).
- 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 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
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
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.
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
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.
Footer Copyright
Widgetized Homepage
Widget Areas
- 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
The Homepage By Section
This section will show you how each section is setup in the theme.
Home 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.
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
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
Insert Images
Image that links
Welcome Message & Checklist
Button
Home Featured
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
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.
Below is the size of each box to size your images properly.
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”
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).
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
Home Featured 2
This is the second full width slate blue section on the homepage. The demo is displaying a Woocommerce Product Widget.
Home 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)
Footer Section – As Seen in the Demo
The demo is only using Footer Widget 2 & 3.
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
The Demo is using a text widget with an image code. Below is the copy and paste code you can use.
Insert Image
Image that Links
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
This spot is designed to hold the Simple Social Icons plugin.
Codes used in Theme
Insert Images
Image that links
Buttons
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.
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.