Hello CEO Theme

Hello CEO WordPress Genesis 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 – #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.

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. Run the regenerate thumbnails plugin. (tools>regenerate thumbnails)
  6. Install XML file with demo content (only if you feel you need it).
  7. 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

onepage feminine wordpress theme
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

To setup your Navigation menu go to Appearance > Menus. Your theme comes with a Primary Navigation menu and room in the 2nd Footer widget for 3 additional menus. 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.
Genesis WordPress Theme Feminine Boutique Hello Lovely

Image Sections

There are 4 image sections that can be customized with your own images. If you go to Appearance > Customize > Homepage Image Sections is where you replace the default images. The default image size is 1600 wide by 1050 high.

Hello CEO WordPress Genesis Theme

Solid Sections

There is a mix of pale pink and white sections in the theme. You can change the pale pink sections in the customizer. Go to Appearance > Customizer > Colors

Hello CEO WordPress Genesis Theme

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.

color customizer wordpress genesis

Widgetized Homepage

Widget Areas

Your homepage is made up of a mix of solid & image sections.

  • 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

Hello CEO WordPress Genesis Theme

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

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

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

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

Hello CEO WordPress Genesis Theme
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.

Hello CEO WordPress Genesis Theme

Copy & Paste this code into a text widget

Image Section 1

hello ceo image section one

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

hello ceo solid section2

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.

hello ceo solid section 2

Code used in theme

Image Section 2

hello ceo image section 2

Is using the Testimonial Rotator shortcode to display some testimonials.

hello ceo testimonial roator

Solid Section 3

Hello CEO image 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.

hello ceo solid section 3

Image Section 3

hello ceo  pricing table

Copy and past this code anywhere in the theme to create a pricing table, Widgets, pages & Posts.

Solid Section 4

Hello CEO Solid Section 4

Place a Woocommerce Product Widget and configure like the below to get Section 4’s look

Hello CEO Solid Section 4

Solid Section 5

Hello CEO Solid SEction 5

These posts are placed from the Genesis Featured Post Widget and configured like below.

Hello CEO Solid SEction 5

Solid Section 6

Hello CEO Solid SEction 6

This section is using an image with the “image caption” code, column classes and a form from the Gravity Forms plugin.

Hello CEO Solid SEction 6

The code to add titles to an image

Social Bar

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

Footer Widgets – As Seen in the Demo

Various Styles

This footer was designed to be pretty flexible. You can place the social media and Newsletter sign up in any one of the 4 footer widget spots. You can also place images that link, custom menus & even text. Below is a photo of how the newsletter will look in each spot. Footer 1 & 3 will display the same.

Hello CEO Footer Enews

Footer 1

This area uses an image that links, placed in a text widget. Here is the code for that

Image

Image that links

Footer 2

The demo Uses A Simple Social Widget & 3 Custom Menu Widgets. This section uses 3 Custom Menu Widgets. To setup your menus you go to Appearance > Menus and then create 3 different menus that will be displayed here.

Hello-Lovely-Footer-3-Widgets
Footer-2

Footer 3

This section uses the Genesis eNews Extended plugin. Below is how the Footer 3 & 1 Widget would be setup.

hello-ceo-footer-3-newsletter

Footer 4

Footer Widget 4 is not being used in the demo. It is designed to be full width.

Copy & Paste Codes

Title Boxes

Hello CEO Title Boxes

Font Styles

Your Theme has 3 font styles that you can use in any post/page/or widget. You can wrap them in header tags to make them larger, or accent colors (tutorial below).

hello-ceo-font-styles

Accent Colors

This theme comes with 2 accent colors that can be used anywhere to easily color fonts. Of course you can always change the color with the color selector on a post/page but I personally feel this is much easier and if you ever want to mass change those colors you can do it in the customizer.

Rose Color

Hello CEO Rose Accent Color

Navy Color

hello-ceo-navy-color

Check List

hello CEO checkmark

Insert Images

Image that links

Buttons

If you would like a button to scroll to a section on the homepage you would use the section code as the url. The section codes are as follows

#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

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

hello ceo pricing table

Accent Font – Seen in the Call to Action Widget Area

This theme comes styled to add an accent font to text widgets and even in posts and pages. Here is an example of how the Call to Action Widget is setup in the theme demo using the accentfont styling and Font Awesome Icons Notice how you start <accentfont> and finish with </accenfontt> This code is set to change color in the customizer from the gold in the demo to any color you would like.

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.

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.