Create Website With One-Page WordPress Theme (Tutorial)

The Most Popular WordPress Themes

In the following tutorial, you will get a complete step by step procedure of using One Page WordPress Theme for building a website. All steps have been briefly explained out so that you don't stuck anywhere while setting up things for website.

Download Free OnePage WordPress Theme

OnePage WordPress Theme


A complete step by step tutorial to create a OnePage WordPress Theme

Read more our popular one-page template article:-


Let's Begin..

Introduction to One-Page WordPress Theme

One-Page is a professional and outstanding multipurpose WordPress Theme. It is based on the single-page layout that displays all the essential features on a single page and thus, makes it an easier task for the users to get all the required information on a single page.

This One-Page WP Template was built keeping the simplicity of design in mind. The theme has a clutter-free interface and holds various sections so that you can effectively showcase your important business contents. Collectively, you can say that this theme will get you a website that will definitely mow down your competitors.

Download One Page WordPress Theme For Free Here

Ceate Website One-Page WordPress Theme InkThemes


How to Install One-Page WordPress Theme?

Before installing, One-Page theme on your website make sure of the following two points -

  • You have a web server installed on your machine.
  • You have installed WordPress on your server.

Installing any WordPress theme is very simple and easy task. It hardly requires few minutes, and you'll be all set with the new look of your one page or landing website. Just follow these simple steps given below - 

STEP#1 - Go to your WordPress dashboard.

WordPress Dashboard InkThemes

STEP#2 - Going onto Appearance tab, a new sidebar will appear. Then, Click on Themes tab and you will be redirected to the theme managing section.

WordPress-appearance-InkThemes

STEP#3 - Then click on Add New option and install the One-Page theme zip file, which you've downloaded.

WordPress Add New InkThemes

STEP#4 - Now you One-Page WordPress theme will start appearing in the themes section. Click on the Activate button and you're all ready with your new website layout.

WordPress Activate InkThemes

Now, let's move onto Customizer Panel.


How to use the Customizer Panel?

A Customizer panel in the theme allows a user to set us all the major sections in the one-page layout. In simple language, you can see it as the theme commanding center from where you can custom-make the theme as per your requirement.

For proceeding towards customizer panel, you need to click on "Customize Your Site" tab which you'll see on your dashboard as shown below.

WordPress Customize InkThemes

Now, the customizer panel will appear as shown below. You will see various sections in the customizer panel from where you can easily configure the website as per requirement.

panel

Generally, the customizer panel consists of various segments. Let's check out each customization segment one by one.

Homepage Settings

In this segment, you can configure whichever section you want to get displayed on your homepage. These sections generally are Service section, Blog Section, Video Section, Portfolio Section, Testimonials Section, Price Section, Team Section and Contact Us Section.

You can easily add/remove various sections just by using the check-mark provided in front of the section names. Plus you can also settle the order of different sections as per your need by simply Drag-and-Drop.

If in case, you want to add some other section, you can do that it by using Add a Widget option.

service-sections1-InkThemes

The best thing that here you'll will like is using Homepage Custom Section where you can decide the section heading, subheading and can also writeup short description. Just see the below figure, which will clear all your doubts.

home page section sorting1 InkThemes

Site Identity

In Site Identity segment, you can set the website Title, Tagline, and Icon elements. These elements appear when your mouse pointer moves over the Title bar of the website site. The below figure will help you in understanding this segment.

WordPress Site Identity InkThemes

Menus

The menu segment in the customizer allows you to replace the default menu of the menu with your menu. You can set up your own customized menu which could contain the pages and menu defined by you. Hence, you could display only specific pages/menus as per your requirement.

You have the option of adding a new menu and then setting it up accordingly to be displayed in the menu bar section of your site.

WordPress Menus Section WordPress

Static Front Page

Using this segment, you can easily manage your homepage look. If you select 'Your latest posts' option, then the website will be displayed with the default settings. And in case, if you want to set another page as the homepage, then you can use 'A static page' option. There you will get the choice of setting any appropriate page as the Front Page and, similarly other pages as the Post page.

WordPress Static Front Page InkThemes

Theme Settings

  • General Settings -  Here you can shape your website appearance like select either to have full-width layout or boxed layout. Plus, you can also monitor the animation effects, which is incorporated with the theme. Likewise you can figure out where you want to show the sidebar section also.

Theme settings1

  • Custom Settings - This segment includes two sections namely, Custom CSS and JS section. Those who wants to customize the website by coding, can do accomplish their task here.

Theme settings

Typography

This segment comprises of Google Fonts section, where you will find multiple fonts options to give your website text unique look. A pictorial image of this section is shown below -

typography1

Moreover, you'll also find alternatives to alter the look of your content like its font size, line height and may more.

typography2

Header Section

In this segment, you'll find three divisions namely -

  • Header Settings - Here, you can place your brand logo and figure out the position of header like fixed or static, as per your need.

Header-settings-InkThemes

  • Header Top Strip Settings - Here you will get options for placing your contact details such as Call Number and social sharing links to make it an easier work for your leads to reach you.

Header Top Strip Settings InkThemes

  • Color Settings - Make use of this section to alter the color combinations such as for background, logo, header, etc.

WordPress Color Settings InkThemes

Slider Section

Under this segment, you will get options to configure 5 image sliders within the theme. Going to any image slider tab, you will find options for adding an image, heading, sub-heading, button text and button link. 

WordPress Slider Section InkThemes

Plus you can set the transition effects and overlay color for every slider individually as shown below -slider section1 InkThemes

Services Section

Services section provides you four service boxes and the options to configure those boxes individually. First of all, you can set the heading and subheading for the services as shown below in the picture. Then for all the individual boxes you can set the icon, heading and description. Also, you'll see a color setting tab from where you can modify the color combinations such as background color, sub-heading color, etc.

service section InkThemes

Blog & News Section 

In the blog and new section segment, you can set up the heading and number of posts to be displayed. You can also modify the color for background, main heading, subheading and read more button.WordPress-news-and-blog-section-InkThemesPortfolio Section

To set up the gallery section in your theme, you need to the follow the steps below - 

  • Just visit your Dashboard->Posts->Tags and create tag(s) say: Gallery

WordPress-adding-tags-InkThemes

  • Then move on to your any post. Add the same tag(s) say gallery, which you've created in above step with your desired categories to your post and update it. Add feature image for your posts. Do this for your other posts and then click on update button.

WordPress Postfolio Sections InkThemes

  • Now, visit Dashboard->Appearance->Customize->Portfolio Section Settings. There you will have to select the tag from the dropdown list and save the settings. In this way, you will get your gallery section on the home page.

WordPress Portfolio Section InkThemes

Video Section

The One Page theme comes with a very exciting feature of adding videos on your homepage. You can do this in the video section, where by simply embedding code of the video. The various options are categorized under Heading Settings, Content Settings, Color Settings. There you will find options for writing the main heading, sub-heading and video Iframe code for the Video Section. Further, you can also change the styling colors also.

WordPress Video Section InkThemes

Testimonials Section

This segment allows you to add three testimonials on your website. On each testimonials section, you'll get options for adding author's content, image, and name. Along with it, you can change the color of the background, main heading, subheading and border also.

WordPress Testimonial Section InkThemes

Pricing Section

The pricing section area in the theme allows one to display the plans/features or some special offers that are meant to be exhibited. You will get three pricing table tab. Landing upon each of pricing box, you'll see various options for customizing the pricing table, as shown below -

Pricing Section InkThemes

Team Section

This segment allows you to showcase team members of your organization. You can add details of your team member like post image, name, designation and post various social sharing links to get connected with them. And, yes you'll have color setting tab also.

WordPress Team Section InkThemes

The most favorable part of this segment is that you can display as many team member as per you. With the help of shortcode, you can fulfill this requirement.

Team Section InkThemes

Contact Section

In this segment, you can place your contact details and organization address by embedding map location code. You will also get options for configuring the main heading, subheading, button text and colors as shown below.

WordPress Contact Section InkThemes

Footer SideBar Section

Using this segment, you can change the color of the footer area. This section will appear as shown below - 

WordPress Footer Sidebar Section InkThemes

Footer Section

The Footer Section allows you to edit the copyright information in the footer area. Like you got choices of displaying bottom footer, embedding brand logo, displaying of social sharing widgets, shortcode options, etc.

footer-section-InkThemes

Additionally, you will also have the alternatives of color styling as displayed below -

footer-color-section-InkThemes

Page Settings -

This segment allows you to set some of the distinctive features of your theme such as -

  • Pages Color
  • Headings Color
  • Text Color
  • Link Hover Color
  • Button Background Color
  • Button Hover Background Color

WordPress Page Settings InkThemes


Hopefully, you must get all things related to One-Page WordPress themes and how to use it. Still, if you have any queries that are beyond the scope of this documentation, feel free to post it in the comment box below.

Other Related Posts -

60 Replies to “Create Website With One-Page WordPress Theme (Tutorial)”

    1. Hello Al,

      The website will appear in the customizer window and you can customize your website easily through that.

      The One Page theme also works fine in the multisite environment.

      Infact the very preview of the One Page theme that you are seeing is built on a multi-site environment.

      Thanks
      Neeraj

    2. in my free version of one page … i am not getting the portfolio option. What to do for that ? All other sections working but not the portfolio one. Help.
      And is there any video tutorial for the one page theme ?

    1. Hello Nalinee,

      The transitions should work differently and will appear with different type of animations.

      If the transitions are not working at your end, it may be due to some issues at your end.

      You could email us at enquiry[at]inkthemes.com regarding the same and out tech team member will help you with your issue.

      Thanks
      Neeraj

  1. Hi, I am having an issue with the menus, when I add a section it des not get added on the menu bar.

    For example the video section currently is on the site, but no menu link to it.

    1. Hi, I am having an the same issue with the menus, when I add a section it does not get added on the menu bar.

      For example the video section currently is on the site, but no menu link to it.

      How Do I add a Link to the Video section?

    1. Hello Ernesto,

      If you want to hide the Home Page slider from your site then, you need to paste below custom CSS code in style.css file of the theme

      .section_1 {
      display: none;
      }

      This will resolve your issue,

    1. Hello Ondra,

      This document shows how to configure the front page and other elements of the theme.

      Please check again and if you are wondering something else, then, let us know, I would be glad to assist you.

  2. How at add a bio to each of the team member in the team section?
    I’ve checked out a couple of one page themes. And they only display picture, name and title. Why not adding a bio? It is essential to impress people.

    1. Hi Mark,

      For your information, the Video Section of the theme allows you to put your Youtube video embed code there.

      But, if you are looking forward to displaying a video gallery then, you need to put some extra efforts, you can achieve this either via any plugin or via source code customization.

      Hope you understand.

  3. The portfolio section is very good. Is there any specific size for blog post featured images that fits best in the hexagonal boxes of portfolio section.

    And the slider image size is too big. Any option to change the size ? i tried tweaking the pixel size in code editor but of no help.

    The slider section is not mobile responsive. the slider text dont show up in mobile devices. Only CTA button shows up. Any way to moderate/rectify that ?

    The theme is very good. I would highly recommend these to others. Loved your work. Try to add more supportive plugins and widgets for these theme. Try to Give more options in the free version. And any detail about the slider image and featured image SIZE would be of great help.

    1. Thanks for liking our theme, Avik!

      I would recommend you to switch to it’s PRO version, you will get more attractive features in the same.

  4. Hi,

    This is regarding the Service and the Team sections. I only need to use two of the service boxes so I cleared the other two, but default ones seem to still be showing. Same thing with the Team section, I only need to list two team members, but it will still show the sample employees profiles. Even if I clear everything, they show up. Please advise.

    1. Hello Diana,

      Yes, that’s possible via below custom CSS code, you need to paste the code at the bottom of your style.css file located in your theme’s directory

      If you want to delete the first team member then, use below code:

      .team_wrapper .col-md-3:nth-child(1){
      display: none;
      }

      If you want to delete the second team member then, use below code:
      .team_wrapper .col-md-3:nth-child(2){
      display: none;
      }

      and so on..

      Similarly, you can remove the service boxes using below codes:

      eg: If you want to delete the first service box then, use below code:

      .services_div .col-md-3:nth-child(1) {
      display: none;
      }

      I hope you find the above solution helpful.

  5. A couple things nagging me, I would like the featured image on blog posts to be centered. I would like to add a second button on the landing page. If you could help with these two issues I’d really appreciate it!

  6. I am using your theme but I donot want post featured images in gallery/portfolio section.

    I want some images based on specific categories.

    When someone clicks on gallery images it must not visit post page.

    It must show that image clearly.

    1. Hi Sam,

      That’s not possible until you customize the source code of the theme, or you can use any plugin with our theme.

      You need to put some extra efforts.

      1. How would you implement another contact form and delete the original one out? I can’t seem to work out how to remove existing one and where i’d add the short code for ContactForm7 one. Thanks for your help in advance!

    1. Hi David,

      For your information, the slider caption of the theme kept hidden for small screens,

      Keeping in view the responsiveness of the slider images, the font size needs to be decreased but that makes it unreadable, therefore, we hid the caption for small screens.

      Hope you understand.

      1. Hi,

        I would like to change the Icons used in the service section by customised ones. Is it possible? Or do I need to use whatever is available on fontawesome and getbootstrap?

        I saw the files on the FTP under one-page/assets/fonts and I’m wondering if I could maybe change them? Or upload a custom one generated on icomoon.io? If it possible to have customised icons, is there a tutorial on how to do it?

        Thanks!
        Alex

    1. Yes, that’s possible via below custom CSS code, you need to paste the code at the bottom of your style.css file located in your theme’s directory

      If you want to delete the first team member then, use below code:

      .team_wrapper .col-md-3:nth-child(1){
      display: none;
      }

      If you want to delete the second team member then, use below code:
      .team_wrapper .col-md-3:nth-child(2){
      display: none;
      }

      and so on..

      I hope you find the above solution helpful.

      1. I have copied the code as you mentioned to the bottom, but it still does not remove the other team members…

        Appearance>editor

        I made the edit in the following:
        One Page Pro: Stylesheet (style.css)
        Select theme to edit: Select

        Am I in the right area:

  7. The OneForm theme contact form wants to capitalise every letter…..how can I fix this?

    Also is it possible to remove the social media buttons which I am not using?

    Is there somewhere I can see an example of what Gallery does?

    Thanks
    John

  8. If I can’t attach a link, specifically my email address, to the send message button in the contact section, how are customers supposed to actually contact me?

    1. Hi Doug,

      The theme’s contact form doesn’t come with such flexibility to use HTML in the message.

      You can make use if any other plugin to achieve your needs,

    1. Hello Jopie,

      For your information, your WordPress admin email act as a recipient email for the home page contact form.

      You can change the email id from your Dashboard->Settings->General

      I hope you find the above information helpful.

  9. Hi,

    Great theme – the one page layout is really great.

    Initially I was using another theme and have a number of pages that I need to incorporate on the site…

    When I change menu for some reason links to existing pages don’t seem to work – can this be changed?

    Thanks

    Nick

    1. Hi Nick,

      You need to check your permalink settings,

      Just visit your Dashboard->Settings->Permalink

      Set the value to Post name option then check your site.

      This will resolve your issue,

    1. Hello Herve,

      For your information, Only front page will be seen as One Page, but, if you switch to pro version of the theme, then, we can make a custom front page template that you can use with your other pages.

    1. You can simply configure your WordPress general settings, there you will find the Email option.

      Just put your email id there and your contact form will send the emails to that email id.

  10. Hello,

    I’ve added Google reCAPTCHA to my contact section on the theme.
    Now it doesn’t matter if a person uses the reCAPTCHA or not, it doesn’t seem to work, the image is there, but the function doesn’t work.
    Anyone else has experience with this on One Page theme?

    Thanks in advance!

    Kind regards,
    Kilian Macharis

    1. I would suggest you using BWS Google reCaptch WordPress plugin with our theme.

      You need to add the ShortCode of the plugin through source code.

      If you are unable to do so then, you can request at enquiry@inkthemes.com

      We will try our best to deploy the code in your site.

  11. I would like to change “read more” into “lees verder”! So translate it in Dutch. How can I do that. The same applies to older and newer posts. I also would like to translate them. Thx.

    1. Hi Jeanka,

      You can make use of any translation plugin like PolyLang, LocoTranslate etc.

      Our theme comes with WPML compatible file and which allow it to support multiple languages.

  12. Hi, how can I create a link to the contact section on this template, in order to redirect a user from another part of the site to the contact form?

  13. Hi Allen,

    The theme has contact for which you can configure the recipient email from your WordPress Dashboard->Settings->General->Email

    If you are still not getting the emails then, allow us to check your site or you can use any plugin like Contact Form7.

    You can send your WordPress admin credentials at enquiry@inkthemes.com

    WordPress site login URL:
    WordPress admin username:
    WordPress admin password:

    We will check your site and do the needful.

  14. Hello!
    How to Make slider automatically move in “ONE PAGE” theme?

    And the Portfolio Section is not available in my ONE PAGE theme, what is wrong?

    Thank´s

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.