How to build a One Page WordPress Site with Integral

We’ve written up a tutorial to show you how to build an elegant and professional one-page website in less than 1 hour with our popular Integral theme.

This tutorial is based off a video we created a little while back which you can view here or at the bottom of this tutorial.

If you don’t have a copy of Integral, you can download it here https://www.themely.com/themes/integral/

If you’ve downloaded the theme and you’re ready, lets get started.

Step 1: Install WordPress

If you have not already installed WordPress on your hosting account, log into cPanel on your account, enter the necessary credentials and install WordPress.

You will be redirected to a confirmation page containing your new credentials and a link to the new add-on.

Step 2: Log into WordPress 

Log into your new WordPress account admin panel using the previously entered credentials on installation.

Step 3: Change Theme to Integral

From the dashboard, click “change your theme completely” or choose “Appearance” then “Themes” from the side bar menu.

This page displays the themes you have currently installed in your application. To add another theme, Integral, simply click the “Add New” button.

Step 4: Upload and Activate Integral Theme

  1. Upload and Installation: After choosing “Add New,” select the “Upload” button in the same location to upload the new theme.  Upload the zip file of the Integral theme and click “Install Now.”  This will then direct to a confirmation page where the option to Activate the theme becomes available.
  2. Activation: Click “Activate” and you will be redirected to the theme page where Integral is now activated on the dashboard.

Step 5: Install and Activate the Recommended Plugins

After theme Activation, WordPress will redirect to the Integral theme dashboard.  You will find recommended plugins for the theme under “Step 1 – Install Plugins”.

Install all plugins by choosing “Install Plugins Here” link that will redirect to the list of recommended plugins.  Select all by clicking the empty checkbox in the header, under “Install”, and click “Apply.”  The plugins will then be installed and activated, and you will be redirected to to a confirmation page.

Step 6: Configure the Homepage “One-Page Layout”

Return to the Integral theme dashboard by choosing “Appearance” on the sidebar menu, and clicking “Getting Started with Integral Theme.”  Refer to the instructions under “Step 2 – Configure Homepage” Layout.”

  1. Start by creating (or editing) a page under “Pages” then click “Add New”
  2. Give it a title and assign it the One-page Template under the Page Attributes section on the right-hand menu below Publish options.
  3. Go to “Settings” then “Reading” on the main side bar menu on the left.
  4. Set Front page displays to “A static page”. Then from the drop-down, select the page you just assigned the One-page Template as “Front page” and then choose another page as “Posts page” to serve your blog posts.

Step 7:  Configure the Top Menu

On the main menu, choose “Appearance” then “Menus” to configure the top menu.  Arrange and name menu items as preferred.  You can add or remove topics.

Right click on the website name on the top left corner to open a new tab and view the front-end of the website. This is useful so when you make changes in the back-end you can re-fresh the page to see them in real time.

Step 8:  Configure and Customize Theme Settings

Go to the Integral Options panel on the side menu. This is where you can configure theme settings and customize certain content.

Step 9:  Import Content to the Live Demo

Manually importing demo content from the live demo site: http://demo.themely.com/integral/ helps you see how to add your own content.  Start by configuring the top menu for each homepage section by choosing “Menus” under “Appearance” on the side bar.  Find Custom Links, and duplicate the demo headers by entering “#” plus their title in the “URL” section, and the title in “Link Text” then click “Add to Menu.”  You can preview your changes any time.

Step 10: Create Widgets for Features Section

Under the same “Appearance” section, choose “Widgets” and find the “Homepage Features Section.”  Drag the “Integral – Feature Widget” to that section and it will open up a menu.  Enter the required information as seen on the demo site.  Inspect the icon element to find the class description.  Upload the image and description and save.  Repeat steps to add more Feature Widgets.

Repeat this step to add the corresponding widgets to each section.  Add as many or as few widgets as needed.  You can preview your changes any time.

Step 11: Add Content

Now that you understand how to add the features and content to this theme, add original content to your sections.  Find “Pages” on the left hand menu, and choose “Add New.”  Fill in a title and body.  Depending on where you want the content, visit “Integral Options” then choose a section, like “Work Section” to place your content in that section, under the “Content” drop-down.  You also have the option to disable sections as needed.

Published by Ishmael Desjarlais

Founder @ Themely, entrepreneur and travel addict. Always learning, maverik at heart, speaks 3 languages and hope's to go to space one day.

3 Comments

  1. I thought that there was a carousel or slider for images within this theme; I guess I got that mixed up with another unless I’m missing it somewhere within the settings. I require a fairly simple (jQuery slick-like) carousel to display images that are examples of a client’s work. Thank you.

    Reply
  2. […] offers a simple, step-by-step tutorial to create a sleek and stunning one page WordPress site with Integral.  The how-to quickly takes […]

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match