Inspiration: 9 examples of Divi sports sites

Published on 22/01/2020 | 3 comments

Sport is a very varied theme that covers a lot of needs and specificities. It opens up some very interesting and unique designs. With these examples of Divi sports websites, you will see what Divi allows to achieve in this field.

Among the sites you will see, some are about a specific sport, others are dedicated to a team, to training methods, to coaching... If you are interested in coaching, you will find many others examples of coaching sites in this article.

The Divi sports sites analyzed here can of course serve as inspiration to create your own. Please note that they are not presented in any particular order.

Announcement: this article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - Maxime Chabloz: an original Divi sports website

site de sport Divi

Let's start this overview of Divi sports websites with the one of Maxime Chabloz, world junior kitesurfing champion.

This beautiful one page site features a full width photo as the homepage, with an original separation in the form of small slivers of foam and a parallax effect when scrolling. We continue with :

  • A portrait photo with social networking buttons overlaid.
  • A text in which Maxime addresses the visitor directly.
  • A citation followed by his record of achievement.
  • Her Instagram gallery (made with the Instagram Feed Pro plugin).
  • The list of his sponsors.
  • His YouTube videos.
  • And we finish with a contact form (plugin used: Contact Form 7).

The foam splash separation is found in several places on the site. It brings a very appreciable personalized touch in connection with the discipline of Maxime.

Another interesting point is the dynamic appearance of elements (photos, parameters, etc.) when scrolling. This brings a lot of "pep" to the site and it also reminds us of the energy that this athlete and his discipline can give off.

Notable plugins used:

  • WP Rocket
  • Contact Form 7
  • Instagram Feed Pro

2 - Cen Cal Sports : a rather institutional site

CEN CAL Sports

Cen Cal is an American sports center for young people, which aims to organize courses, training sessions and competitions. The objective is above all educational: to train young people physically but also morally. Several disciplines are offered, in particular basketball - golf and chess are also practiced.

This Divi sports site has some interesting aspects. First of all, it is an "institutional" site and as such, it gives off a more serious image and is less close to the visitor than sites for individuals or companies.

This image is counterbalanced by a professional side that reassures you that you are entrusting your children to a solid and well-organised institute. This is reflected in the choice of fonts and colours. Here, no pastels or fluorescent colours. The fonts are without MS and quite angular.

At the top of each page, a full-width photo is overlapped by a clear overlay blue with a bold title and a punchline.

The About page is in the same spirit. You have a box that introduces the director and drop-down blocks for each member of the management team.

The gallery page is not very original but two things can be noticed: the dynamic display of the thumbnails and the possibility to filter the pictures very easily.

Notable plugins used:

  • Magnificent Popup
  • Simple Calendar
  • Yoast

Need more resources for Divi? Check out the other articles in this section!

3 - Oz Tennis Leagues : a colourful website

site de sport Divi : tennis

The idea of Oz Tennis Leagues is simple, but you should have thought of it!

This Australian site allows you to register and schedule matches with other competitors to move up in the rankings. So, no need for rigid and complex structures to compete. You play when you want, where you want, with whom you want.

The home page opens with a full page image with a call to action.

Note the design with its bold colors, basic shapes and elementary fonts. Right from the start, we are immersed in the idea of simplicity and originality.

The sticky menu (with a reduction effect when scrolling) gives pride of place to the connection features. Indeed, we are here above all in a members' site. The links to the About, Contact, etc. pages are therefore in the footer.

The welcome continues with two sections in several columns that are sufficient to introduce the concept. This is followed by various dynamic contents, including a slider of testimonials.

The whole site is rich in content: galleries, honor rolls, tips, FAQ, sections for each local league... and that's just for the non-member part. The payment of the membership fees is done with Stripe.

Notable plugins used:

  • Magnificent Popup
  • Contact Form 7
  • Testimonial Rotator
  • Stripe

4 - Mayhem in the Mountains

site de sport Divi : Mayhem

Mayhem in the Mountain is a site dedicated to lacrosse competitions (a team sport of Native American origin).

This Divi sports site is essentially a one-page site.

It starts off quite classically with a full page image and a CTA. As you scroll down, you'll notice the color scheme alternating between brown elements on a white background and white elements on a brown background. It is this alternation that gives Mayhem in the Mountain a lot of character.

The colour layers are transparent and let you guess the photos in the background of each section, barely visible. This effect is also very pleasing to the eye, while remaining rather discreet.

A contact form is available at the bottom of the main page and a link to a separate page allows you to register online for the competition.

plus de ressources pour Divi

5 - Jason Joseph: another sports site made with Divi...

site de sport Jason Joseph

After Maxime Chabloz, here is another Swiss athlete: Jason Joseph.

Jason is a sprinter specialized in the 110 meters hurdles. His site gives off a very professional and inspiring image, as many athletes would like to have.

Let's look at the keys to this feat:

  • Solid fonts and colors. The combination of non-MS (headings and paragraphs) and MS (subheadings) fonts is impeccable.
  • The alternation of red and white with grey-blue is perfectly mastered.
  • The photos are classy. You can tell they were taken by a professional who knows how to show off his subject. Jason appears serious, concentrated, determined. They are rather dark, which responds to the grey-blue of the site and brings out the white and red.
  • The Divi dividers are very aesthetic (double, curved with transparency effect).
  • The integration of video and photo content in the design of the site is perfectly mastered.

Let us also note the good proportioning of the dynamic elements. Among them, the sticky menu with logo which changes color when scrolling. I also really appreciate the dynamic appearance of the video in the About section!

In short, a very beautiful site that is definitely worth a look.

Notable plugin: Autoptimize.

6 - London Fight Factory

London Fight Factory

Here is one of the most successful Divi sports sites of this selection! London Fighting Factory is a gym dedicated to martial arts and fighting sports.

First originality: its logo! It is animated and centered at the top of the page. On either side of it, you will find two buttons. The first one leads to the section that will answer the question that most visitors ask themselves, the prices. The second, the one on the right, is a CTA that offers a free trial.

These two buttons immediately define the site colorsred and orange. Punchy !

This is followed by the menuwhich is very personalized. The classic pages Contact, Blog and Location (location) are linked to more specific pages such as Courses, Schedule, Instructors (team), "why I train " (testimonials)...

The content is not so original, but its presentation and wording make it stand out.

Another strong point of London Fighting Factory is its footer ! A thumbnail gallery with dynamic display points to different parts of the site.

Then there is a newsletter registration formThe site also includes a contact page, contact information and social network buttons, all in the site's colors.

Notable plugins used:

  • Gravity Forms
  • DuracellTomi
  • Yoast
  • Magnificent Popup

Need more inspiration? Discover all the official Divi Showcases.

7 - How to Beast

how two beast

How to Beast is a site about physical training, mental conditioning and nutrition. It's for men who want to gain mass by going to the gym and become more confident...

With its sleek design and bold font, How to Beast screams masculinity!

It hits hard right from the start with a double CTA with badass pictograms on the full page.

You have a choice between "getting muscular" and "getting confident". Between the two images, you are warned: "Choose wisely".

The "Start here " page serves as both an intro and an introduction. It introduces the concept of the site, motivational phrases, a selection of links to the best articles to start with and an introduction to David, the entrepreneur behind How to Beast.

The blog adopts a professional tone with its square social network buttons in the sidebar, its small thumbnails and its clean design.

How to Beast is also and above all David's big YouTube channel (over 715,000 subscribers at the time of writing) and a more than decent insta account (over 100,000 followers). Remember that YT has a rather male audience - more than 60%, unlike Instagram where the proportion is reversed.

The YouTube channel has a whole page on the site with a video gallery.

Original, effective and punchy, How to Beast definitely deserves its place in this selection of the best Divi sports sites!

8 - Future 500 id Camp

site de sport Divi : Future

Adidas sets up and sponsors these summer camps in the US to promote soccer (football). These camps are of a fairly high standard and the stated aim is for students to gain a scholarship to one of the many partner universities.

So we are on a very professional site, with a real ambition and quite big means. That's why the site doesn't go off in all directions: fairly static presentation, neatly framed elements, high quality photos and videos.

This is a good example of a professional site that caters to a demanding clientele. Parents who send their children to summer camp are investing in their children's future. They need a serious image that inspires confidence.

Notable plugins:

  • Gravity Forms
  • Bloom
  • Yoast
  • Optin monster
  • Slider Revolution

Don't wait any longer! Discover the Divi theme here !

9 - Mijn Personal Trainer

This is the website of Ayhan Tac, fitness coach and personal trainer. This one page site is a good example of a simple, clean and effective online presence.

The reception opens on a header hero which gives way to a sticky menu on scroll. Next up :

Note the following plugins that are used for this site (among others):

  • Ninja Forms
  • Monarch Social Sharing
  • Yoast SEO

In conclusion: which Divi sports site do you prefer?

I hope this selection of Divi sports sites has inspired you! You can see what we can achieve in terms of variety of tones and actors, from the one-page for athlete or personal coach to the big institutional or private site.

Divi can really do it all!

So, which of these sites did you prefer? I must admit I have a soft spot for How to Beast (with its stylish double CTA as a welcome) and for Maxime Chabloz 's site (with its foam splash dividers).

Now you know everything! Feel free to give your opinion in comments. Also, if you have a sports site made with Divi to submit, go ahead, maybe you'll be part of an upcoming selection or update 😉

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE

Sites de sport Divi
site de sport fait avec Divi

This article was written by David Albert, a freelance writer who helps entrepreneurs publish quality content. More info on his website.

Sport Website made with Divi

1,993 words

8

You should like it too:

Comment personnaliser le curseur de la souris sur votre site ?

How to customise the mouse cursor on your site?

Do you want a site that is customised down to the last detail? I have a quick and easy tutorial to help you customise the mouse cursor on your site. This way, when your visitors hover over a link, the cursor is fully customised!

3 Commentaires

  1. Rémi Morichon

    Bonjour sur le site Maxime Chabloz, comment est-ce que l’on fait pour cacher son logo dans la barre de menu et ensuite la faire apparaître quand on scroll de couleur blanche alors qu’il était fondu avant avec l’image?

    Merci à toi j’aime beaucoup ton site et le parcours avec joie.

    Morichon rémi

  2. Lycia Diaz

    Salut Rémi, c’est une histoire de « barre de menu primaire » et « barre de menu secondaire », dans les réglages Apparence > Personnalisé > En-tête et navigation. L’une correspond au menu normal et l’autre correspond au menu après avoir scrollé. Dans le cas de Maxime Chabloz, il a dû cacher le logo en menu primaire avec un fond transparent, puis dans le menu normal, il a laissé les valeurs par défaut… Tu comprends ?

  3. Rolet

    Hey, merci pour ces analyses, ça m’aide beaucoup. Est-il possible que certains sites aient changé ? Car je n’ai pas toujours retrouvé tes observations sur le site. Good job !

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This