Here is how to install and set up the Kreativ Pro WordPress Theme. The Kreativ Pro child theme of the Genesis Framework for WordPress is a magazine-style, clean, WooCommerce styled design. It features the Genesis Portfolio Plugin for showcasing products, services, or categories.
- Get the Theme
- What You’ll Need
- Video Tutorial
- STEP BY STEP WRITTEN GUIDE
- Front Page 7
Get the Theme
With this video and written guide, you’ll learn to set up The Kreativ Pro theme step by step including using the 1-click Install that imports all of the demo theme data.
Then, all you have to do is find the area you want to replace with your own content. Plug and Play Design!
If you would rather have this built for you instead, visit Ballen Brands who can build it for you. You can also reach my brothers Jeff and Paul at Ballen Brands by text or phone 702-604-7739. They would love to help you with your WordPress website design.
What You’ll Need
Head over to GoDaddy or your favorite domain registrar and choose the address you will use for your website. You’ll get your https:// certificate with WP Engine, so no need to purchase that from GoDaddy. If you are going to build your website inside the Wealthy Affiliate Forum, you can get your domain through them as well.
Hosted or “Managed WordPress
Genesis Framework and the Kreativ Pro Child Theme.
You can get both the framework and the child theme from Studiopress. If you are going to build multiple websites and use many themes, you may want to invest in the entire library of themes like I did.
WooCommerce (optional)If you want to sell products on your website with an eCommerce store, consider WooCommerce. Many turn their WordPress blog and website into a store with WooCommerce which the Kreativ theme is pre-styled for.
Sticky Widgets (Optional)
If you want to make certain widgets “sticky” which you’ll learn more about here, you’ll want the free Q2W3 Fixed Widget Plugin.
STEP BY STEP WRITTEN GUIDE
Time needed: 3 hours and 30 minutes.
This video took me about 90 minutes to set up while instructing. You will need to add content to each area, so I added a couple more hours to the set up for that reason.
Head over to your Plugins using the column on the left. Check the box to select all and choose activate.
Add Additional Plugins
To add a plugin, you can go directly to the plugin page, download the .zip file, find plugins on the left column of your WordPress Dashboard, choose Add New, and then upload.
Import Demo Content
If you prefer to design from scratch, you can do that. If you import the demo content, it will literally bring everything over from the demo site and then you will change the information it contains to match your products and services.
This is often preferred as don’t have to worry about placing all of the widgets, footers, headers, and menus in the correct places. Find the Appearance link in the left column on your dashboard. Hover over it and find the IMPORT DEMO DATA link. Click it to import the data.
Upload LogoGo to Appearance, Customize, Site Identity. First, if you would like, you can upload a logo. You don’t have to, but you can. Your logo suggested image dimensions are: 200 by 46 pixels. You can simply go to Canva. Click Create New, then custom dimensions, enter 200 by 46, and then create a logo or load yours into the square.
Save the image and upload it to your website. Crop if needed or choose to skip cropping. If you like it, keep it. If not, remove it. Don’t be scared to play around with your web design as you are building out your WordPress Theme.
Add a Site Title and Tagline
Your Site title is whatever your business or website is going to be called. The tagline is a tagline or slogan used for your business. It could be blank or you could use the 2nd line for a coupon code, phone number or another call to action.
Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps.
Lately, we have been seeing site icons or Favicons in the search results on Google!
They are tiny symbols that are often a simple logo. Site Icons should be square and at least 512 × 512 pixels.
After you upload your favicon, click publish if you want your changes to become instantly published, or click the back arrow to go to the next steps.
Be careful with the X or you could lose your changes.
Front Page Images
If you are still in the theme editor, click on the next section called FrontPage Images. If you need to get back into the customizer, go to the left column and choose appearance -> Customize. Next, choose the image you want to use for the main top image on your home page.
Loading the demo probably gives you the computer image.You can replace this with any image custom to you. If you have an account with Canva you can get free images or inexpensive images. You can begin by sorting for free and pay if you find you need to.
Your photo should be 1600 x 1050. In Canva, click Create New -> Custom Dimensions -> 1600 x 1050 and then drop in a photo you like. Save it as a .jpg rather than a .png if you don’t want to worry about resizing.
Large images can bloat your website and your blog posts will take a long time to load.
Once you are done, click the back arrow to return to the customizer to move on to the next section.
Website Accent Color
In the next section, open COLORS. You’ll see one default color already chosen. Click on Select Color to open all color options. You can choose a color by dragging around the selector, by choosing a box at the bottom, or by entering a color code.
I highly suggest you set up a brand Kit on Canva and have your colors chosen to keep your blog, social media covers, and images all in sync with your brand colors.
The Header Image will appear above your menu. It’s a short image that is the width of the page. You can choose to not use one here if you want the area to remain white.
To add a header, “Add new image” to upload an image file from your computer. Your theme suggests h an image with a header size of 1600 × 1200 pixels which you can crop once you upload it for a perfect fit.
Header Image Sample: (You can see here how that image would not look right).
In the next section, you’ll choose whether or not to use a sticky header. If you choose to enable, the header is then sticky where it freezes no matter where someone scrolls. This means it is always in view at the top of the page.
You’ll notice this website has a sticky header. Yet the only part sticking is the disclaimer, not the entire menu.
If you like, you can disable this and then add a disclaimer or something you want in the Top Header and make that sticky using the Q2W3 Fixed Widget Plugin.
This theme offers navigation at the top and at the bottom of your blog. You can have the same menu appear on each or different menus. If you downloaded the demo data, you are going to see a lot in the menus that needs to be deleted and changed. Click on one of the menus to open the navigation.
You’ll notice you can drag the subcategory menu items around. If you drag them back where they are aligned with the top categories, they will then show as one of the main menu items.
If they are indented and under another category, they will appear as a drop-down under the main navigation items.
To edit the name and link, click the item. Change the URL to go to the page you want the visitor to go to when they click the button. Change the words in the Navigation Label to name your menu item. This will be what your visitor sees.
You can also scroll down to reorder and ‘add item.’ If you click ‘add item’ you will see that you can add a number of items to your menu. These would include post and product categories, posts and products, external links, pages, Portfolio items and so forth.
Widgets are a very important component of your website design. Widgets can add anything to a menu, header, footer, homepage, or sidebar including videos, testimonials, forms, calendars, posts, images and so much more.
To edit your main widgets, click Appearance, Customize and Widgets. You can click on Appearance -> Widgets and edit all images there although you won’t see the design appear as you create like you will in the customize section which focuses on the home page.
I suggest starting in the appearance -> customize area at least to get the main widgets placed.
Top Bar Widget
The default top bar for the Kreativ Pro for WordPreess theme includes a phone number, email, and social icons.
When you click HTML you will see code. You want to edit only the phone number and the email address. I like to open a new post as if I were creating something new. Then paste in the code and edit. Next, find the 3 dots at the top right corner of your blog and click the code editor.
Copy the code and paste it into your theme.
It would be nice to have a more “what you see is what you get – WYSIWYG editor here, but we don’t see that just yet on these genesis child themes”.
If you don’t want the name and phone, you can delete the HTML block and put whatever you want there. If you click on add more, you’ll open the widgets panel and can fit something else.
In this example, I removed the social links and added my affiliate disclosure so I could make the top header a sticky header with my disclosure.
Front Page One
This is the Call to Action and Button that appears over your front-page image of the Kreativ Pro Theme Design.
Edit the Title First, then the description below, and then find “button” href = and replace the # sign or the URL there with the URL you want the visitor to go to once they click the button. Make sure your URL is inside the quotes that come after href=.
You may have to build a product page, portfolio item, post, or page first before you edit your call to action.
Front Page 2
This is a really cool block that the Kreativ Pro WordPress theme offers. It seems harder than it really is. You’ll want one icon for each section. You can change these icons out by using the Font Awesome Cheatsheet. Pick the icon you want and grab the code.
There are 6 individual HTML sections that made up this grid. Click on the first one to open it. Then, find the letters that come after the fa and before the alt, and replace what’s in the box [fa-wine-glass-alt] with what you want there instead by grabbing the code from the cheatsheet such as [fa-video-slash-alt]. Under that, you can change the text and title that appear with the Icon as well.
Front Page 3
This is simply the title and the intro to your portfolio “blocks”. You’ll have 2-6 blocks probably that feature a category, service, or product. Remember, if at any time you don’t think a section applies to you, you can simply delete it.
The page will then adapt and remove the space creating a beautiful front page. You can save your work and go create the Portfolio items or save the placeholders from the demo content until you have what you want there.
Front Page 4
Another beautiful, clean, fun section of the Kreativ Pro Child Theme is Front Page 4 which is a team block.
Here you can showcase your team, affiliate partners, or anyone else you believe qualifies to be mentioned. You don’t have to have 3, and if you don’t like block, you can remove it.
In addition, you could feature products in those circles, or blogs or anything else appropriate.In my example, you may notice the first image is oval rather than square. That’s based on the size of the image. Keep the sizes the same, and use squares rather than long vertical images. Remember, Canva can resize them all to a 200 x 200 in a flash!
To Edit each section, click On Custom HTML. You need the web address of the image or you can upload the image to your media files. Once you upload it, click on the image and you will see a coordinating URL.
That URL must replace the image URL that is there currently right after src=. The image URL will be inside quotations.
Between the <H4> and <Span> list the name. Then follow that with the title between <span> and <h4>.
Replace the description with the text you want to describe what’s in the circle. You can delete the Facebook, twitter and google plus, or leave them in, or change one to a youtube link and font awesome icon, or whatever applies.
You simply change the pound sign or link that is in quotes to the appropriate channel link. And find the fa-facebook or fa-channel and replace it with the proper font awesome icon code to change.
For example, if you want to refer to youtube, you could use -play instead of -facebook as that is the code for the play button icon.
Front Page 5
This is the section for packages. If you offer some sort of services or a bronze, silver gold package of some kind, this section is for you. If you can’t find a way to use it, delete it.
You simply change the title, and then the items between the <i> <i> and then change the link at the bottom where the button will take the user.
Front Page 6
Section 6 in your Kreativ Pro theme set up is for testimonials. You’ll notice in the image below that it looks odd to have them be different sizes.
Keep the word count for your testimonials similar to create a more symmetrical “even” look.
There are custom HTML sections to create the 3 testimonials. You can add or remove as you desire. Have 6 testimonials? You can certainly add 3 more custom HTML blocks and simply copy the code to each.
In addition, these Sections can be dragged up and down the page as well to create a look that you like and feature the most important sections as you desire.
For each, you’ll replace the demo quote for your new quote, the name, and title of the person giving the testimonial and replace the image link with the new image of your person.
This comes after the src=. Upload the image to your media files and then find the link associated with that image.
For example, right-click on the image above, click copy image address. If you paste that address in the HTML block after the src, it will appear.
Every image has an address. You can use that address or upload it and get the address from your own website.
Front Page 7
Frontpage 7 is a call to action. It’s a title, offer, and button with a link that takes the user wherever you want them to go. Edit each to fit your blog or website.
Your Kreativ Pro theme footers will appear on each page. They are great for disclaimers, legal language, menus, subscribe offers, and so forth.
As with all of the other sections, you can add, change, and delete at well.
You’ll notice 3 sections at the bottom of this theme. Each is a footer. We have 3 footers.
Here, you can change the title, description, and link in the about us section. The link can go to your more formal “about us” page, or a testimonial page, press release, etc. Y
ou can also choose not to include a link.
Connect with Us
Footer two in the Kreativ Pro theme includes two widgets, the text, and social links. You can change the social links by removing the pound sign # and insert the URL to your social channel. You can also remove that widget or drag in another widget.Check out Social Snap for a more advanced strategy for social shares and re-posts.
This is the genesis extended enews widget and can work with your favorite email autoresponder. Your Kreativ Pro theme should have included this plugin. If not, you can download it. It will work with autoresponders like Feedburner, MailChimp, Aweber, FeedBlitz, ConvertKit, and Constant Contact.
This widget can be replaced with your own form creator, or with another widget from the library of widgets.
You can change the homepage settings in the theme to show blog posts instead of this page, but you will lose your design on the home page.
Kreativ Pro Theme Settings
- Leave the default updates set
- Site Layout can be changed to a wide theme, or side columns. You can also change the layout per page and have some pages that are wide theme and posts that have side columns and so forth. If you have a store, the WooCommerce sections will be wide theme pages.
- Breadcrumbs are links that appear above the page or post to show the hierarchy of the pages leading to the page, post, or product the person is viewing. This can reduce bounce rates and encourage the user to click higher up to reach a parent page. This is a personal preference. Check the box next to the items you want to show breadcrumbs on. I like them on pages and posts, posts for sure. If someone was on a page titled “What are Breadcrumbs”, the breadcrumbs might look like:
Web Design -> WordPress -> Themes -> Genesis Framework -> What are Breadcrumbs
- I enable comments, I disable trackbacks to avoid the comment posts that are created by bots when a link is created.
- There is one more footer that is part of the theme. This usually links to the theme. I generally change mine to copyright, date, and my own personal link or affiliate link to a theme etc. – There is no harm in leaving it alone either.
- Header/Footer Scripts: You’ll be needing to place codes on your websites in these header and footer sections such as google analytics, Facebook pixel, and other software like pop up offers, etc.
Your Kreativ Pro theme sidebar is completely available for you to drag widgets into and out of to customize the elements. On mobile, this sidebar is pushed down to under the page content or part of the menu rather than visible to the eyes like a desktop version does.
Be sure to avoid putting very important things in the sidebar that are counting on people seeing and most have more mobile website traffic than mobile traffic.
To edit the sidebar, go to Appearance, then widgets.
Drag the widgets to the left, over to the primary sidebar. Save changes as you change a widget and preview your website in a new tab so you can decide if you want to keep that sidebar item or not.
In the sidebar, you can add images, calendars, posts, pics, videos, banners, products, links and more.
Your Kreativ Pro theme uses the Genesis Portfolio Plugin. These are the pages you create that you want to appear in that featured grid on the home page. Simply go to Portfolio items on the left, click Add New.
Create a title for the “service” or item you want to appear in that section. Add in a description. Choose a featured image on the right. That featured image is what will show up in the square.