Tutorial: 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.

6 Ways to Speed up Your WordPress site

Speed matters when it comes to websites. As average internet connection speeds increase around the world, people are becoming less and less tolerant of slow load times. At the same time, Google is pretty up-front about the fact that it rewards fast sites with better page rankings.

Delivering a beautiful and easy-to-use website remains the primary goal of most WP developers. However, good design doesn’t just rely on aesthetics, and sometimes less really is more. A lightning-fast, streamlined site is often more effective at engaging customers than one built on high-quality images and fancy animations.

Why Page Load Time Matters

Even incremental improvements in your website’s load time can have a large effect on traffic. Back in 2009, Akamai found that users became impatient when they had to wait more than 2 seconds for a page to load, and it seems that we’ve only got more impatient since then. Today, 30% of users say they expect sites to load in under one second.

Load times are also important for mobile sites. Back in 2015, Google announced that the availability of mobile sites would be one of the factors in determining page ranking. And if anything, we are more impatient when it comes to looking at websites on our phones, with Intuit finding that every one second decrease in loading times increased conversions by more than 1%.

These are not just abstract statistics: they have real effects on the success of your website. Research by Kissmetric has found that a one second delay in page load times can lead to an 11% drop in pageviews, and a 16% drop in customer satisfaction. If, as MotoCMS points out, your e-commerce site is making $100,000 a day, such a delay could potentially cost you $2.4 million every year.

If you haven’t thought about page load times, the first gains are easy to make, and you should see big results. If you’ve already optimized your site, it might be difficult to shave even a few milliseconds from your speed, but it’s definitely worth it. Even speeding up your site from a 3 second load time to 2 seconds can increase conversions by 1%:

How To Speed Up Your Website

Thankfully, there are some pretty easy ways to speed up your site, ranging from looking at the providers you use to optimizing particularly “heavy” elements of your design. Let’s take a look at a few of them.

1. Test Your Page Speed

The first and most important step in increasing page speed is to test it. Even if you think your page is running pretty fast already, it’s worth testing from time to time, because even an individual element of your page can really effect loading times.

There are two tools for measuring pagespeed that I would recommend. The first is PageSpeed Insights. It measures the performance of a page on both desktop and mobile devices, and gives you a prioritized list of what you should think about changing.

The second tool is Google’s PageSpeed Insights, which uses similar tests, but also gives you tips and guides on how to improve particular components of your site. Like this:

I would recommend using both these tools to benchmark your site’s performance regularly. In particular, if you are in the process of optimizing your page’s speed, your should check with these tools before and after this process to make sure you have actually made progress.

2. Use A CDN

A content delivery network (CDN) is often sold as a miracle cure for slow-loading websites. They aren’t quite that, but for certain sites they can be very useful. They work by pulling the content from your website down to a series of local servers, and allowing users to access your site from the closest server.

This is particularly useful for certain sites. If your site is accessed from all over the world, and is image-heave, a CDN will improve loading times, especially for visitors in countries that are less well connected. On the other hand, if you are already running a minimal site, the speed gains will not be that impressive. Even people hosting their websites in areas like Australia which generally suffer from weaker Internet connections should consider using a quality CDN network as their primary host.

There are plenty of CDNs available, ranging from budget solutions to fully-featured, customizable systems. SiteLock TrueSpeed, MaxCDN, and Cloudflare are good places to start.

3. Minify JavaScript, CSS, and HTML

The tools I mentioned above should give you a pretty good idea if any of these elements are slowing your page down. Even a few years ago, when writing HTML and CSS directly was more common, most expert developers minified their code as a matter of course. Nowadays, most of us do our designing through visual editors, some hardly look at the code they are generating, and the art of writing efficient code has been somewhat lost.

This is a shame, because even line breaks, indentations, and extra spaces in your code can add a significant latency to your site. JS is particularly guilty in this regard, and I recommend looking at any JS file that is larger than 4096 bytes as a candidate for minification.

There are essentially two approaches to minimizing code, depending on your level of expertise. If you are comfortable writing code directly, and have the time, a few hours spent optimizing your code can bring significant improvements, even if it is only deleting the white space from you HTML.

The other approach is to use automated code compactors. JavaScript Compressor, CSS Compressor, and HTML Minifier are good places to start. While this approach is faster, be warned that sometimes these automated tools can leave your code pretty unreadable, and therefore hard to modify afterwards.

4. Compress and Optimize Images

I’m still amazed by how many otherwise professional-looking websites use high-res images that take an age to load. I think part of the problem here is that a lot of developing is done in countries with fast internet connections, where huge images load quickly, and developers forget that not everyone around the world has access to a fast connection.

WordPress claims to have solved this problem, but it hasn’t. You’ve probably noticed that you can upload images at full size, and that WP will then scale them for display. This is great, but the problem is that it forces web browsers to perform multiple commands, which can slow down your site.

The way around this is simple – use images that are the right size for your page. You can do this manually, using a basic tool like Preview (Mac) or Paint (Windows). Once your images are the correct size, you can go one step further and compress them for optimal performance. Tools like TinyPNG can help with this – you upload your image, and the tool will compress it without affecting the resolution.

If you are using WordPress, you’ve probably noticed

5. Get Better Hosting

Your choice of hosting provider can have a big effect on your page load speed. If you’ve looked at all the areas above, and your page is still too slow, it could be that your host is responsible for this.

While it may seem that every host is equal, they are not. It is true that most of the big providers are comparable in terms of speed and uptime, but be warned that there are also a lot of “budget” web hosts whose performance is … less than good. Take a look at a site that compares hosting speeds to find out how fast your host is.

Be aware, also, that there are many types of web hosting. The type you choose should be suitable for the size and traffic of your site. Shared hosting is a good option for small sites, but if your site grows you should really consider upgrading to a dedicated server. A mid-way option is a VPS, or virtual private server, which allows you a degree of control over your server.

And if you don’t want to go to the hassle of changing host entirely, you should also be aware that most reputable hosts offer several levels of service, and can implement upgrades on your site that will improve loading times.

6. Design Your Site Properly

Ultimately, while the steps above can help you make gradual improvements in your page speed, there is simply no substitute for good page design. While this may sound like an abstract concept, in reality there are some pretty clear rules to designing websites that are both beautiful and fast.

The first is to recall some of the tricks that we all used to use in the 1990s, but that we might have forgotten about. Keep your HTML clean, use CSS sparingly, use one image instead of five, and put your CSS at the top and your JS at the bottom.

The second is to keep it clean. Most of the award-winning sites now are praised primarily for their minimal design. There is a reason for this. Clean websites easier to use, they look better, and they load faster.

So if you’ve done everything above, and still want a faster site, it might be time for a re-design!