Hello CEO 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
Midnight – #272727
Deep Navy – #2f414a
Rose – #e1bdbd
Pale Chiffon – #f9f4f1
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 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.
- 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.
- 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×200. 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
Image Sections
Solid Sections
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.
Widgetized Homepage
Widget Areas
- Home Slider – Sized at 1600 W x 650 H
- Home Badge – A beautiful extra. Best sized at 400×400
- 7 Solid Sections
- 4 Image Sections
- Footer 1
- Footer 2
- Footer 3
- Footer 4
- Social Bar – Full Width Social Bar
Bonus Widgets
- Portfolio & Showcase 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.(not shown in demo)
Visual Widget Guide
The Homepage By Section
The Hello CEO Homepage is created into sections, 1 slider, 4 image & 7 solid. Each section is designed to be flexible and will adjust based on the amount of widgets placed in that section. The default images and colors of the theme can all be changed as well in the Theme Customizer. The demo is just a reference guide of what you can do when setting up this theme. You don’t have to use all sections or the widgets you see in the demo, in those sections. It was designed to be super versatile and flexible based on the end look you want to acheive.
**Solid Section 1 & Image Section 4 were not used in the demo**
Slider
The Hello CEO slide is sized at 1600px x 650px. You can have the slide be any height you want but the best width is 1600px.
Caption Code
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 Badge
To use your badge/stamp, place a text widget in the Home Badge Widget area and then place the below image code 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
Welcome Section – Solid · White
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. The demo uses a text widget that has column classes, a title box, checklists & an image. Learn more about these individual codes at the bottom of this tutorial.
Copy & Paste this code into a text widget
Image Section 1
This section uses the below code in a text widget. The button when clicked will scroll to another section on the homepage. Learn more about the scrolling buttons at the end of this tutorial.
Solid Section 2
Uses 4 text widgets. Based on the flexible layout the first text widget is used as the Header for the section, while the other 3 create service boxes. You can use both Font-awesome & Ionicons icons. Below is an example of the code used in a service box.
Code used in theme
Image Section 2
Is using the Testimonial Rotator shortcode to display some testimonials.
Solid Section 3
This section is using a slider shortcode and photos that have been styled with the honeycomb overlay that comes with the theme. For more instructions see the tutorial below.
Image Section 3
Copy and past this code anywhere in the theme to create a pricing table, Widgets, pages & Posts.
Solid Section 4
Place a Woocommerce Product Widget and configure like the below to get Section 4’s look
Solid Section 5
These posts are placed from the Genesis Featured Post Widget and configured like below.
Solid Section 6
This section is using an image with the “image caption” code, column classes and a form from the Gravity Forms plugin.
The code to add titles to an image
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.
Footer Widgets – As Seen in the Demo
Various Styles
Footer 1
Image
Image that links
Footer 2
Footer 3
Footer 4
Copy & Paste Codes
Title Boxes
Font Styles
Accent Colors
Rose Color
Navy Color
Check List
Insert Images
Image that links
Buttons
#welcome-section
#solid-section-1
#solid-section-2
#solid-section-3
#solid-section-4
#solid-section-5
#solid-section-6
#image-section-1
#image-section-2
#image-section-3
#image-section-4
Scrolling Button
Plain Button
Button with heart
– Change <i class=”fa fa-heart”> to any other Font Awesome Icon
Pricing Table
Accent Font – Seen in the Call to Action Widget Area
Service Boxes – Text widgets in the Flexible Widget Area
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.