Make A Business Website with Split Template

We will create a simple business site like website in photos, use GeneratePress Theme.

split-demo1

Click on the image to view the website

Step 1. Buy Domain Name and Hosting/Server

You must have Domain Name and Hosting for your website to work!

I recommend buying domain name at Namecheap and Hosting (or Server) at Cloudways. In fact, this blog is being used both.

You don’t know how to do it? Read these two guides:

Next, point your domain name to hosting. Read the guide to know how to do

Step 2. Setup WordPress & GeneratePress Theme & GP Premium

You need to install WordPress, GeneratePress Theme and GP Premium. Read the following 3 guides:

Step 3. Start making your business site

3.1. Import Split Site

First, go to Appearance > GeneratePress > Site Library

appearance-generatepress-site-library1-min

Click on No Page Builder > Find Split

split-site-generatepress1-min

Hover on Split > Details

split-site-generatepress2-min

Click on Get Started

split-site-generatepress3-min

Click on Backup Options

It will be used to restore the website when the web has problems

split-site-generatepress4-min

Click on Import Options

split-site-generatepress5-min

Mark on box and Press Import Content

  • You should skip this step if you already have content and do not want the demo content imported.

split-site-generatepress6-min

 

Done!

split-site-generatepress7-min

And click on View Site, you will see the same 100% demo (click here to view demo)

3.2. Edit Header

First, Logo. Go to Appearance > Customize > Site Identity > Change Logo

logo-split-generatepress2-min

You can also change Site Title and Tagline here 🙂

Next, Left Menu & Right Menu. Go to Appearance > Menu

primary-split1-min

To change Menu Color, go to Appearance > Customize > Colors > Primary Navigation and change here.

menu-color-1-min

To change Menu Typography. Go to Appearance > Customize > Typography > Primary Navigation.

GeneratePress support Google Fonts 🙂

menu-typography1-min

3.3. Edit Footer

Read these guide.

3.4. Let’s Work Together Section

let-work-together1-min

Go to Appearance > Elements > Hover on Home Hero > Edit

home-hero-split1-min

For instance

home-hero-split2-min

and result

home-hero-split3-min

If you want to click on the button, it will open in a new tab, add the following line as shown in the image below

home-hero-split4-min

If you want to change button style, just go to Appearance > Customize > Additional CSS > Line 32-53

Explain:

color = text color, background = background color

hover = element when hover

border: 1px solid transparent = border-width =1px, border-style = solid, border-color = transparent

additional-32-53-min

The color will follow the default color of GeneratePress, which is adjusted at Appearance > Customize > Colors > Button

button-color-1-min

3.5. Content Section on Homepage

Go to Appearance > Customize > Layout > Blog

blog-split1-min

blog-split2-min

3.6. About Page

Go to Page > All Pages > Hover on About > Edit

pages-split1-min

3.7. Press & Services Page

Do similar About Page!

3.8. Contact Page

Contact Page has a contact form. You need to edit at HappyForms > Hover on Sample Contact Forms > Setup

contact-form-split1-min

If you use WP 5.0.3 you may encounter this error !!! Frustrating.

contact-form-split2-min

I’ll remove HappyForms and Install Caldera Forms (I’m a big fan of Caldera Forms!!!)

deactive-happyforms1-min

deactive-happyforms2-min

Then

caldera-forms-install1-min

caldera-forms-install2-min

Then read this guide to know how to create a contact form with Caldera Forms

Done!

Share this post:

Leave a Comment