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.

29 thoughts on “Superfit

  1. Amazing theme. Would you please guide me through the booking plugin listed on your demo home page?

    1. 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.

  2. Erik Lee says:

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

    1. 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.

      1. Erik Lee says:

        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.

        1. 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?

          1. Erik Lee says:

            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!

          2. 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?

  3. Kyle says:

    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?

    1. Hi Kyle, I’m not sure what you mean. Can you share a link to your site so we can check it out?

      1. Kyle says:

        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!

        1. 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?

          1. Kyle says:

            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?

          2. 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.

  4. Kyle says:

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

  5. Kyle says:

    It worked perfect! Thanks for the help Charles!

  6. Kyle says:

    Charles you did it again, thank you! The white type looks much better. Appreciate the help!

  7. Kyle says:

    Hi Charles, a couple more questions for you!

    On the Portfolio page of my site, http://www.overkylart.com , all the pictures/gallery is justified left on the page. Is there any way to center this gallery?

    Also, I am having trouble getting the contact form to connect with my email account/address. Is there a specific contact form plugin that works best with your theme?

    Thank you!

    1. Hi Kyle, on your portfolio page, which template are you using? Are you using the full width page template? And are you using a native WordPress gallery or are you using some plugin to build your gallery?

      For the contact form, what plugin are you using, and what do you mean by connecting with your email account/address? There is no particular plugin I would recommend. The functioning of this is independant of the theme. If you are using something like Contact Form 7 it will by default send the contact emails to your main admin account email address, though you can over ride that in the form settings. Sometimes the native WordPress mailing functionality isn’t very reliable depending on your host and set up, though again this is independant of the theme. In such cases you can either work with your hosting company to try and figure out why it isn’t working, or use something like https://wordpress.org/plugins/send-emails-with-mandrill/ which outsources the mail sending function of WordPress to Mandrill which is MailChimps hosted SMTP service. It is a paid service but provides great reliability for system generated emails and forms that use the native WordPress email send function.

  8. Kyle says:

    Ok, I think I am just using the standard page template, no special sizes. I think I just hit “Add New” in the page menu and added a block for the gallery.

    I did use the Envira Gallery Plugin for the gallery. I don’t think I knew (and still don’t!) there was a native WP gallery option that was available. I’m happy to use what ever works. Just looking for 3 pictures across and 6-8 rows down.

    As for the contact form, I used the WPForms Lite plugin. Again, I don’t care to much about what I use, as long as it works, looks ok and is free. I can look into the Contact Form 7.

    The form says it is sending the e-mails out but I don’t see them in my inbox (sounds like the theme is working correctly, must be an email setting issue).

    1. OK, for your portfolio page try going to the page admin and under page attributes (right hand side of admin screen) you’ll find the template selector drop down. Choose the Full-width template if you havn’t already. I think that will resolve the problem.

      Totally fine to use Envira, it’s a great plugin. WordPress does have a native gallery feature. Assuming you are using Gutenberg, a native WordPress gallery can be added to a page as a block.

  9. Kyle says:

    That worked perfect! Thank you again for all the support on this theme (and for my novice experience with WordPress)!

  10. Kyle says:

    OK, installed the Contact Form 7 plugin and it looks great… except that the text that you type in the fields is white. And the fields are white. I’m guessing this is another edit/addition to the Customizer? I just don’t know if I am adding to the “Additional CSS” section, and if so, what ccs content do I add?

    1. Hi Kyle, the fields and input text styles shouldn’t be white so not sure what is causing this. That said the contact form on your site looks ok now, did you already resolve the styling issue?

  11. Kyle says:

    I switched the contact form plugin to Contact Form 7 and tried again with my mail host and it worked! Everything is looking and working just right, except for the type in the contact form fields. When you type your name, email address, subject and message, the text types out in white. It is too difficult to see this way and would be happy with it in black, green or almost any other color that the typer would be able to view instead of guess!

    So yes, the form does look, and work, great, except for the white type. I looked in the WP customized and saw the change you suggested earlier for the other text colors on the site. Would this be the same place to input code for the contact form text color?

    1. Looks like the form input is picking up the body font color you set previously. We’ll check and post some more CSS to address this.

      1. Kyle says:

        That would be great, thanks Charles!

        1. Kris says:

          try adding this css code,

          input, textarea, select{
          color: #000;
          }

          1. Kyle says:

            That did it! Thank you for the help Kris!

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.