Superfit

Superfit is a bold and modern WordPress theme design especially with Gyms, Studios and Personal Trainers in mind. The special home page template makes it easy to feature beautiful images and About Us content to help sell your services. The theme also has built in support for the free Bookly booking plugin so you can let your clients book any kind of class online. You can also customize the color scheme, optionally set your contact and address details and feature your Instagram photos.

17 comments on “Superfit
    • Hi Hamza, glad you like the theme 🙂

      To implement the booking feature as on the demo site you simply need to do the following:

      1. Install Bookly plugin
      2. Create a new page called “Home” and assign the “Homepage” template
      3. Create another new page called “Blog”
      4. Go to Settings > Reading in the Admin and assign the ‘Home’ page as the home page of the site, and the ‘Blog’ page as the blog.
      5. Create 3 additional pages. You can call these whatever you like, but I suggest something like “Home Section 1”, “Home Section 2” etc. These will be the content that appears on the homepage
      6. On the ‘Home Section 2″ page you can enter the shortcode to display the Bookly form. For information on how to do this check out the Bookly tutorial content.
      7. Now go to Appearance > Customize > Home Page Sections to assign the relevant pages to each section in the home page template.

      Technically you don’t have to use the Bookly plugin, and there are other booking plugin options. Bookly is the one we used for the demo site.

      Hope that helps.

  1. How do the social media labels show up? I have “Use Icons?” checked, but i’m not seeing anything appear at the top

    • Hi Erik, sorry for the slow reply. To ad social icons as in the demo you must create a new menu (call it “Social Nav” or similar) and assign it to the Social Nav section. All this can be done under Appearance > Menus.

      • Thanks Charles! I got them to work.

        i do have one more question. In homepage Section 3, i can not track down where i can remove code. Anything i put into Section 3 on the homepage gets added to that div class.

        • Hi Erik, I’m not sure what you mean when you ask about removing code. You can leave section three unassigned to any page and nothing will show up in that spot. Does that achieve what you need?

          • Hi Charles,

            testing

            Section 3, it wants to put everything into “pull-right”. I want to center my content. Where does that code come from? I can’t seem to track down the right location.

            Thanks!

          • Hi Erik, so I gather you have created a static page and then assigned that page to Section 3 in the Customizer, correct?

            Assuming so then you simply edit that page content as you would any other page and it should appear in section 3 as you wanted it.

            Or am I misunderstanding something?

  2. Hi Charles, thanks for the good looking theme! I am building my site but want to get rid of the white title bar that pops up under the top menu bar. Any suggestions?

      • Sure!

        overkylart.com

        Right on the home page, under the menu at the top of the page, there is the white bar that says “Home” in black.

        On the example site there isn’t any white title bar and I want to have my site look like that too. thanks!

        • Aha, I see. You are using a static page as your home page. That white bar is part of the static page template to display the page title.

          You could try adding this to the Custom CSS area in the customizer:

          .page-title-area {display: none}

          That will hide the page title element, but it will hide it on all pages which might not be what you want?

          • Hi Charles, sorry for the questions but do you know if it is possible to change the color on the Contact Form Field Titles from gray to white?

          • Hi Kyle, try adding this to the Custom CSS field in the Customizer…

            body {
            color: #ffffff;
            }

            #ffffff is the hex code for white, but you could change that to anything you like. Let me know if it works.

  3. No, that is exactly what I want! I’ll try it and will let you know how it works. Thank you!

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.