Divi Tips No 87

Inspiration: 9 examples of Divi sports sites

Updated on 18/01/20

2098 words

7 minutes of reading
3 comments

This article contains affiliate links recognizable by the percentage icon (%) → I am an affiliate link

The sport is a very varied theme which covers a great deal of needs and specificities. It therefore opens up to unique and very interesting designs. With these examples of Divi sports venues, you will see what Divi allows to achieve in this field.

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

The Divi sports sites analyzed here will of course serve as inspiration to create yours. By the way, they are not presented in a particular order.

1 – Maxime Chabloz: an original Divi sports site

Divi sports site

Let us start this overview of the Divi sports sites with that of Maxime Chabloz, junior kitesurf world champion.

This beautiful one page site offers a full-width photo as a welcome, with an original separation in the form of small shrapnel and a scrolling parallelax effect. We continue with:

  • A portrait photo with social media buttons in superposition.
  • A text where Maxime addresses the visitor directly.
  • A quote followed by his charts.
  • Its Instagram gallery (realized by the plugin Instagram Feed Pro).
  • The list of its sponsors.
  • His YouTube videos.
  • And we finish with a contact form (plugin used: Contact Form 7).

The spatter-shaped separation is found in several locations on the site. It brings a very noticeable personalized touch in connection with Maxime's discipline.

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

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 centre for young people to organize internships, training and competitions. The objective is primarily educational: to train young people both physically and morally. Several disciplines are proposed, especially basketball – golf and chess are also practised.

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

This image is counterbalanced by a pro side that reassures: you will entrust your children to a solid and well organized institute. This is reflected in the choice of fonts and colors. Here, no pastel or fluo. The fonts are without MS and quite angular.

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

Page About comes from the same spirit. You have a box that presents the director and drop down blocks for each member of the coaching team.

The gallery page is not very original but we can note two things: the dynamic display of thumbnails and the possibility to filter photos very easily.

Notable plugins used:

  • Magnific Popup
  • Simple Calendar
  • Yoast

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

3 – Oz Tennis Leagues: a colorful site

Divi sports site : tennis

The idea of Oz Tennis Leagues It's simple, you had to think about it!

This Australian site allows you to register and plan matches with other competitors to climb in a ranking. Thus, there is no need for rigid and complex structures to compete. You play whenever you want, wherever you want, with whomever you want.

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

Note the design with its frank colours, basic shapes and basic fonts. From the beginning, we bathe in the idea of simplicity and originality.

The sticky menu (with a reduction effect during scrolling) gives a good share of the connection features. Indeed, we are here primarily in a membership site. Links to Pages About, Contact, etc. Therefore, they are at the foot of the page.

The reception continues with two sections in several columns that are sufficient to present the concept. Various dynamic content follows, including a slider of testimonials.

The site as a whole is rich in varied content: galleries, honour paintings, tips, FAQs, sections for each local league... and this, for the non-members alone. The payment of contributions is made with Stripe.

Notable plugins used:

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

4 – Mayhem in the Mountains

Divi sports site : Mayhem

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

This Divi sports site is essentially a one-page.

It starts quite classically with a full page image and an CTA. As you scroll, you will see the game of colors alternating according to the sections: brown elements on white background and white elements on brown background. It is this alternation that gives a lot of character to Mayhem in the Mountain.

The color layers are transparent and suggest photos in the background of each section, barely visible. This effect is also very pleasant to the eye, while remaining rather discreet.

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

more resources for Divi

5 - Jason Joseph: Another sports site with Divi...

sports site Jason Joseph

After Maxime ChablozHere's another Swiss athlete: Jason Joseph.

Jason is a sprinter specializing in 110 meters hedges. Its site has a very pro and inspiring image, such as many athletes would like to be able to see.

Let's see the keys to this feat:

  • Solid fonts and colors. The marriage of fonts without MS (titles and paragraphs) and MS (subtitle) is impeccable.
  • The alternation of red and white with blue grey is perfectly controlled.
  • The photos are classy. It can be seen that they were made by a professional who can highlight his subject. Jason seems serious, focused, determined. They are rather dark, which responds to the blue grey of the site and brings out white and red.
  • The Divi separators are very aesthetic (double, curved with transparency effect).
  • The integration of video and photo content into the design of the site is perfectly controlled.

Note also the good dosage of dynamic elements. Among them, the sticky menu with logo who change color at scrolling. I also greatly appreciate the dynamic appearance of the video in the section About !

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

Notable plugin : Autoptimize.

6 – London Fight Factory

London Fight Factory

This is one of the Divi sports sites the most successful of this selection! London Fighting Factory is a room dedicated to martial arts and combat sports.

First originality: its logo! It is animated and centered at the top of the page. On both sides, you will find two buttons. The first leads to the section that will answer the question of most visitors, the rates. The second, the right, is an CTA that offers a free trial.

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

Next menu, which is very personalized. The classic pages Contact, Blog and Location (rent) alongside links to more specific pages like Courses, Time use, Teachers (team), "Why I train" (Testimonies)

The content is not so original, but its presentation and wording distinguishes it.

Another big strong point of London Fighting Factory, sound footer Hey! A thumbnail gallery with dynamic display points to different parts of the site.

Then we find a newsletter registration form, contact info and social media buttons, all of course in the colors of the site.

Notable plugins used:

  • Gravity Forms
  • DuracellTomi
  • Yoast
  • Magnific Popup

Need more inspiration? Discover all the official Divi Showcases.

7 – How to Beast

how two beast

How to Beast is a site on physical training, mental conditioning and nutrition. It is therefore intended for men who want to gain mass by going to the room and become more confident...

With its clean design and bold characters, How to Beast Scream at masculinity!

He hit hard from home with a double CTA with pictos badass in full page.

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

Page "Start here" serves both intro and about. It presents the concept of the site, motivating phrases, a selection of links to the articles best suited to start and a presentation by David, the entrepreneur at the origin of the How to Beast.

The blog adopts a professional tone with its square buttons of social networks in sidebar, small thumbnails and sleek design.

How to Beast It is also and especially David's big YouTube channel (+ 715,000 babes at the time I write this) and an insta account more than correct (+ 100,000 followers). Remember that YT brings together a rather masculine audience – more than 60%, unlike Instagram where the proportion is reversed.

The YouTube channel is also entitled to an entire page on the site with a video gallery.

Original, effective and striking, How to Beast definitely deserves its place in this selection of best sports venues Divi !

8 - Future 500 id Camp

Divi sports site : Future

Adidas sets up and sponsors these summer camps in the US to promote soccer. These camps are quite high and the aim is to allow students to obtain a scholarship in one of the many partner universities.

So we're on a site very pro, with real ambition and big enough means. This is why the site does not go in all directions: fairly static presentation, properly framed elements, high-quality photos and videos.

This is a fine example of a pro site that targets a demanding clientele. Parents who send their children to summer camp invest in their children's future. They need a serious, trustworthy image.

Notable plugins:

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

Don't delay! Discover the theme Divi here !

9 – Mijn Personal Trainer

Here is the site d-Ayhan Tac, personal fitness coach and coach. This one page site is a good example of simple, clean and efficient online presence.

The reception opens on a header hero which leaves room for a sticky menu with scroll. Following:

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 that this selection of Divi sports sites Have inspired you! You see what you can get 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 really does everything!

So, which of these sites did you prefer? I'm admitting to having a big weakness for How to Beast (with its double CTA very stylish as a welcome) and for the site of Maxime Chabloz (with separators in foam splashes).

That's all you know! Feel free to comment. Similarly, if you have a sports site made with Divi to submit, go ahead, you may be part of a next selection or update

Do you know you can test Divi for free? See you on this page and click on "TRY IT FOR FREE"

Divi Sports Sites
sports site made with Divi

This article was written by David Albert, freelance editor who helps entrepreneurs publish quality content. More information on its website.

Get Divi

Divi training

Ebook Divi PDF

Free tips

Divi Quiz

Live coaching

icon 256x256
Discover my wpLingua plugin that makes your WordPress websites multilingual ! SEO-Friendly / Automatic / Editable

3 Comments

  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 !

Submit a comment

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

This site uses Akismet to reduce undesirables. Learn more about how your feedback data is used.