PRODUCT PAGE: https://www.hexater.com/themes/project-builder/
Theme demos are provided for a couple of reasons. First, of course, so you can get an idea of how the theme looks and feels before you purchase.
Secondly, with this user guide and referencing the same demo, you can replicate it on your own domain and website. Test and try everything out before you start setting things up with your own products, services and/or content; take it for a test drive and see how everything works.
And, from there, it also gives you a great starting point or framework to add your own content, media, layouts and configurations.
This theme’s demo: http://demos.hexater.com/project-builder/
Just reference the demo above and follow the instructions below this section.
WordPress Install & Theme Activation
Install the Newest Version of WordPress (see: How to Install WordPress).
How to Install Sample Content
This section is optional. Sometimes it’s helpful to first set up your new theme to look like our Theme Demo and then modify it per your needs. To help accomplish that, we provide both the Content and Setup Routine below and an XML file that will import our sample content and media.
If you haven't already, you'll find this file to download in your themes admin under the ADMIN MENU > Appearance > Hexater Theme Info.
Here’s how to install the sample content:
- ADMIN: Tools >> Import
- WordPress – Click Install Now
- WordPress – Run importer
- Browse and Choose the XML Content File You Downloaded
- Click Upload File & Import
- Assign Post to Existing User or Create a New User
- Tick the Box: Download and import file attachments
Important: The XML only installs default posts, pages or media with some exceptions. It does not import content into the customizer, custom posts or other special settings areas (eg, post meta-boxes).
It also does not automatically configure any other settings, widgets or menus. You will need to follow the Content and Setup Routine outlined in this doc and add everything not imported by the XML manually.
Warning: sample content should ONLY be imported on a fresh install of WordPress. It should not be used if you have an existing website, installation of WordPress and previous content.
Theme Customizer Routine
ADMIN: Appearance >> Customize
LIVE PREVIEW: The customizer is an awesome, core feature of WordPress that we take full advantage of in our themes. As you make changes on the left panel, you can see those changes update and appear in the live preview to the right.
Theme Customizer Steps
The customizer is divided into top level panels. Each Panel is divided again into sections.
PANEL: Header Settings
- Logo Placement
- Upload and/or add your logo here. Alternatively, you can use the text box to add a Site Title.
- Note: the demo will show a bolded word. To do this, you can use html inside the text box. In this case, we are simply wrapping the text using <strong></strong>.
PANEL: Front Page Settings
- Static Front Page
- Choose a page that uses the Front Page template (this is set in the page editor).
- Choose your blog page.
- Hero Section
- Add content to appear in the hero section on the front page.
- Enter button text and select a link from the page dropdown.
- Upload an image to add as the background in the hero section.
- Stats Section
- Enter statistics in the blocks of fields.
- Enter a number in the Amount field and a label in the Item Name field.
- You can reorder items by dragging and dropping the blocks.
- Steps Section
- Enter a heading for the section.
- Add steps in the blocks of fields.
- Copy and paste the class name in the Image Icon field. See Font Awesome Cheatsheet for icons.
- Enter a heading and text for each step.
- Testimonials Section
- Enter a heading for the section.
- Add testimonial details in the blocks of fields.
PANEL: CTA Area Settings
- Show/Hide CTA Areas – Activate each CTA section individually by ticking the boxes; choose to hide forms you don’t want or need.
- Header CTA Image: Add a new image or click on randomize and click on the suggested image to add it!
- Form Recipient(s) – default, your site uses WordPress’ built in function to send an email to you when someone submits a form on your site. If you choose nothing here, your site admin receives the email; otherwise, you can add any addresses you want here.
- Form Text – Choose text for each of your CTA forms on your site. (html tags are used for bolding and italic)
- Custom Form Code – if you don’t want to use the default WordPress’ email functionality and want to use your own form or autoresponder code, this is where you add it per section.
PANEL: Footer Settings
- Footer Bar – Copyright (alternate box at the bottom for those that don’t want to use default formatting) …also, automatically adds year range if the founded date is earlier year. (eg, 2001-2016)
PANEL: Color Controls
- Color Workshop – Here you can change colors individually on the site (works with any scheme).
- The palettes represent the various sections of the site the colors under it can be found.
- Choose a Different Color Scheme – if the default color scheme for this theme doesn't suit you, feel free to try out these other options put together by our design team!
- Create Menu
- Choose Menu Location (Header Menu only with this theme)
- Add items
PANEL: Widget Areas (only visible if you navigate into the site)
- Primary Sidebar – add widgets that will show up on all internal pages with a sidebar.
- Footer Social Bar – Use the “(RCI) Social Button Bar” widget here to create your social icons.
PANEL: Additional CSS
- Custom CSS
- As of WordPress 4.7, this section should be used to add custom css.
Done with the Customizer… Save & Publish!
This section explains how to add projects to your site. Project pages are nothing more than WordPress posts (so you create them like any WordPress post). But we’ve created a special post-type to house them which creates it’s own Admin Menu (see screenshot below).
- Log in to your WordPress Administration Panel (Dashboard).
- Click the Projects tab. Click the “Add New” sub-tab.
- Enter your project title in the upper field, and enter your product details in the main post editing box below it.
- Click the “Set featured image” link from the right side and follow the steps for inserting an image for your project (a thumbnail will automatically be created for the front-page display).