Divi Tips n°87

Inspiración: 9 ejemplos de sitios deportivos Divi

Publicado el 22/01/2020 | 3 comentarios

1.993 palabras

8

El deporte es un tema muy variado que cubre muchas necesidades y especificidades. Por lo tanto, abre diseños únicos y muy interesantes. Con estos ejemplos de sitios web deportivos de Divi, verá lo que Divi puede lograr en este campo.

Entre los sitios que verás, algunos son sobre un deporte específico, otros están dedicados a un equipo, a los métodos de entrenamiento, al coaching... Si te interesa el tema del coaching, encontrarás muchos otros ejemplos de sitios de coaching en este artículo.

Los sitios deportivos Divi analizados aquí pueden, por supuesto, servir de inspiración para crear el suyo propio. Tenga en cuenta que no se presentan en un orden determinado.

Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - Maxime Chabloz: un original sitio web deportivo en Divi

site de sport Divi

Comencemos este repaso a los sitios web deportivos de Divi con el sitio web de Maxime Chabloz, campeón mundial junior de kitesurf.

Este hermoso sitio de una sola página presenta una foto de ancho completo como página de inicio, con una original separación en forma de pequeñas astillas de espuma y un efecto parallax al desplazarse. Continuamos con :

  • Una foto de retrato con botones de redes sociales superpuestos.
  • Un texto en el que Maxime se dirige directamente al visitante.
  • Una mención seguida de su historial de logros.
  • Su galería de Instagram (hecha con el plugin Instagram Feed Pro).
  • La lista de sus patrocinadores.
  • Sus vídeos de YouTube.
  • Y terminamos con un formulario de contacto (plugin utilizado: Contact Form 7).

La separación de las salpicaduras de espuma se encuentra en varios lugares de la obra. Le da un toque muy personal a la disciplina de Maxime.

Otro punto interesante es la aparición dinámica de elementos (fotos, parámetros, etc.) al desplazarse. Esto añade mucho "ánimo" al sitio y también nos recuerda la energía que puede desprender este atleta y su disciplina.

Plugins notables utilizados:

  • WP Rocket
  • Formulario de contacto 7
  • Instagram Feed Pro

2 - Cen Cal Sports: un sitio bastante institucional

CEN CAL Sports

Cen Cal es un centro deportivo americano para jóvenes que tiene como objetivo organizar cursos de formación, sesiones de entrenamiento y competiciones. El objetivo es principalmente educativo: formar a los jóvenes física pero también moralmente. Se ofrecen varias disciplinas, en particular el baloncesto; también se practican el golf y el ajedrez.

Este sitio de deportes Divi tiene algunos aspectos interesantes. En primer lugar, se trata de un sitio "institucional" y, como tal, emite una imagen más seria y menos cercana al visitante que los sitios para particulares o empresas.

Esta imagen se ve contrarrestada por un lado profesional que le asegura que confía sus hijos a un instituto sólido y bien organizado. Esto se refleja en la elección de los tipos de letra y los colores. Aquí no hay colores pasteles ni fluorescentes. Las fuentes son sin MS y bastante angulosas.

En la parte superior de cada página, una foto de ancho completo se superpone a un superposición transparente azul con un título llamativo y un remate.

La página "Acerca de" tiene el mismo espíritu. Tiene un cuadro que presenta al director y bloques desplegables para cada miembro del equipo directivo.

La página de la galería no es muy original, pero destacan dos cosas: la visualización dinámica de las miniaturas y la posibilidad de filtrar las fotos muy fácilmente.

Plugins notables utilizados:

  • Magnífica ventana emergente
  • Calendario simple
  • Yoast

¿Necesita más recursos para Divi? Consulte los demás artículos de esta sección.

3 - Ligas de tenis de Oz: un sitio colorido

site de sport Divi : tennis

La idea de las Ligas de Tenis de Oz es sencilla, pero debería haberla pensado.

Este sitio australiano permite registrarse y programar partidos con otros competidores para ascender en la clasificación. Así que no hay necesidad de estructuras rígidas y complejas para competir. Juega cuando quieras, donde quieras y con quien quieras.

La página de inicio se abre con una imagen a toda página con una llamada a la acción.

Destaca el diseño con colores vivos, formas básicas y tipos de letra elementales. Desde el principio, la idea de simplicidad y originalidad está presente.

El menú adhesivo (con efecto de reducción al desplazarse) da protagonismo a las funciones de conexión. De hecho, este es un sitio principalmente para miembros. Por lo tanto, los enlaces a las páginas "Acerca de", " Contacto ", etc. se encuentran al pie de la página.

La bienvenida continúa con dos secciones en varias columnas que son suficientes para introducir el concepto. A continuación, varios contenidos dinámicos, incluido un deslizador de testimonios.

El sitio en su conjunto es rico en contenido variado: galerías, tableros de honor, consejos, preguntas frecuentes, secciones para cada liga local... y eso es sólo para la parte de los no miembros. El pago de las cuotas de afiliación se realiza con Stripe.

Plugins notables utilizados:

  • Magnífica ventana emergente
  • Formulario de contacto 7
  • Rotador de testimonios
  • Raya

4 - Caos en las montañas

site de sport Divi : Mayhem

Mayhem in the Mountain es un sitio dedicado a las competiciones de lacrosse (un deporte de equipo de origen nativo americano).

Este sitio de deportes Divi es esencialmente un sitio de una página.

Comienza de forma bastante tradicional con una imagen a toda página y un CTA. A medida que se desplaza hacia abajo, observará el juego de colores que alterna elementos marrones sobre fondo blanco y elementos blancos sobre fondo marrón. Es esta alternancia la que da carácter a Mayhem in the Mountain.

Las capas de color son transparentes, dejando apenas visibles las fotos del fondo de cada sección. Este efecto también es muy agradable a la vista, sin dejar de ser bastante discreto.

En la parte inferior de la página principal hay un formulario de contacto y un enlace a otra página que permite inscribirse en línea en el concurso.

plus de ressources pour Divi

5 - Jason Joseph: otro sitio de deportes hecho con Divi...

site de sport Jason Joseph

Después de Maxime Chabloz, he aquí otro atleta suizo: Jason Joseph.

Jason es un velocista especializado en los 110 metros vallas. Su página web desprende una imagen muy profesional e inspiradora, como a muchos deportistas les gustaría tener.

Veamos las claves de este logro:

  • Fuentes y colores sólidos. La combinación de fuentes no MS (títulos y párrafos) y MS (subtítulos) es impecable.
  • La alternancia de rojo y blanco con gris-azul está perfectamente dominada.
  • Las fotos tienen clase. Se puede ver que fueron tomadas por un profesional que sabe cómo mostrar su tema de la mejor manera posible. Jason parece serio, concentrado y decidido. Son más bien oscuros, lo que responde al gris-azul del sitio y hace que el blanco y el rojo destaquen.
  • El Divisores Divi son muy estéticas (dobles, curvas con efecto de transparencia).
  • La integración de contenidos de vídeo y fotos en el diseño del sitio está perfectamente dominada.

Los elementos dinámicos también están bien equilibrados. Entre ellos, el menú adhesivo con logotipo que cambia de color al desplazarse. También aprecio mucho la aparición dinámica del vídeo en la sección "Acerca de".

En resumen, un sitio muy hermoso que definitivamente vale la pena ver.

Plugin destacado: Autoptimize.

6 - Fábrica de lucha de Londres

London Fight Factory

¡Este es uno de los sitios deportivos Divi más exitosos de esta selección! London Fighting Factory es un local dedicado a las artes marciales y los deportes de combate.

Primera originalidad: ¡su logotipo! Está animado y centrado en la parte superior de la página. A ambos lados de la misma, encontrará dos botones. La primera lleva a la sección que responderá a la pregunta que la mayoría de los visitantes se hacen: los precios. El segundo, el de la derecha, es un CTA que ofrece una prueba gratuita.

Estos dos botones definen inmediatamente el colores del sitiorojo y naranja. ¡Pinchado!

A esto le sigue el menúque es muy personalizado. Las clásicas páginas de Contacto, Blog y Ubicación están enlazadas a páginas más específicas como Cursos, Horarios, Instructores (equipo), "Por qué entreno " (testimonios)...

El contenido no es tan original, pero su presentación y redacción lo hacen destacar.

Otro de los puntos fuertes de la London Fighting Factory es su pie de página ¡! Una galería de miniaturas con visualización dinámica apunta a diferentes partes del sitio.

A esto le sigue un formulario de inscripción al boletín de noticiasTambién contiene una lista de información de contacto y botones de redes sociales, todo ello con los colores del sitio.

Plugins notables utilizados:

  • Formularios de gravedad
  • DuracellTomi
  • Yoast
  • Magnífica ventana emergente

¿Necesita más inspiración? Descubra todas las vitrinas oficiales de Divi.

7 - Cómo bautizar

how two beast

How to Beast es un sitio sobre entrenamiento físico, acondicionamiento mental y nutrición. Por lo tanto, se dirige a los hombres que quieren ganar masa yendo al gimnasio y tener más confianza...

Con un diseño limpio y una tipografía atrevida, How to Beast grita masculinidad.

Golpea con fuerza desde el principio con un doble CTA con pictogramas de mal gusto en la página completa.

Puedes elegir entre "ponerte musculoso" o "ponerte seguro de ti mismo". Entre las dos imágenes, se advierte: "Elige sabiamente".

La página "Comience aquí " sirve de introducción y de presentación. Presenta el concepto del sitio, frases de motivación, una selección de enlaces a los artículos más adecuados para empezar y una presentación de David, el empresario que está detrás de How to Beast.

El blog adopta un tono profesional con sus botones cuadrados de redes sociales en la barra lateral, pequeñas miniaturas y un diseño limpio.

How to Beast es también y sobre todo el gran canal de YouTube de David (más de 715.000 suscriptores en el momento de escribir este artículo) y una cuenta de insta más que decente (más de 100.000 seguidores). Recuerda que YT tiene una audiencia más bien masculina, más del 60%, a diferencia de Instagram, donde la proporción se invierte.

El canal de YouTube tiene su propia página en el sitio con una galería de vídeos.

Original, eficaz y con garra, How to Beast merece sin duda su lugar en esta selección de los mejores sitios deportivos de Divi.

8 - Futuro 500 id Camp

site de sport Divi : Future

Adidas crea y patrocina estos campamentos de verano en Estados Unidos para promover el fútbol. Estos campamentos son de un nivel bastante alto y el objetivo declarado es que los estudiantes obtengan una beca en una de las muchas universidades asociadas.

Por lo tanto, se trata de un sitio muy profesional, con verdadera ambición y recursos bastante amplios. Por eso el sitio no va en todas direcciones: presentación bastante estática, elementos bien enmarcados, fotos y vídeos de alta calidad.

Este es un buen ejemplo de sitio profesional que atiende a una clientela exigente. Los padres que envían a sus hijos a un campamento de verano están invirtiendo en el futuro de sus hijos. Necesitan una imagen seria que inspire confianza.

Plugins destacados :

  • Formularios de gravedad
  • Bloom
  • Yoast
  • Monstruo del Optin
  • Revolución de los deslizadores

No se demore. Descubra el tema Divi aquí !

9 - Mi entrenador personal

Esta es la página web de Ayhan Tac, preparador físico y entrenador personal. Este sitio de una sola página es un buen ejemplo de una presencia en línea sencilla, limpia y eficaz.

La recepción se abre en un héroe de cabecera que da paso a un menú pegajoso en el desplazamiento. A esto le sigue :

Tenga en cuenta los siguientes plugins que se utilizan para este sitio (entre otros):

  • Formularios Ninja
  • Monarch Social Sharing
  • Yoast SEO

En conclusión: ¿qué sitio web de deportes Divi prefiere?

¡Espero que esta selección de sitios deportivos Divi te haya inspirado! Se puede ver lo que se puede conseguir en términos de variedad de tonos y actores, desde el atleta de una página o el entrenador personal hasta el gran sitio institucional o privado.

¡Divi realmente lo hace todo!

¿Cuál de estos sitios prefieres? Debo admitir que tengo debilidad por How to Beast (con su elegante doble CTA de bienvenida) y por el sitio de Maxime Chabloz (con sus separadores de espuma).

¡Ahora lo sabes todo! No dude en dar su opinión en los comentarios. Además, si tienes una web de deportes hecha con Divi para presentarla, adelante, puede que formes parte de una futura selección o actualización 😉.

¿Sabías que puedes probar Divi gratis? Ir a esta página y haga clic en "PRUEBA GRATUITA

Sites de sport Divi
site de sport fait avec Divi

Este artículo fue escrito por David Albert, un escritor independiente que ayuda a los empresarios a publicar contenidos de calidad. Más información en su página web.

obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

Puede que a ti también te guste:

La nouvelle interface de Divi 5

La nouvelle interface de Divi 5

Découvrez la nouvelle interface de Divi 5 : les comparaisons avec Divi 4 et les similitudes avec Gutenberg (article + vidéo). Alerte spoiler : ça déchire 💣 !

Comment utiliser 7, 8, 9, 10+ colonnes dans Divi ?

Comment utiliser 7, 8, 9, 10+ colonnes dans Divi ?

Votre client souhaite afficher une ligne avec les logos de ses 9 principaux clients… Comment faites vous ? Dans cet article, je vous explique comment aligner plus de 6 éléments sur une même ligne !

Comment utiliser la Flexbox CSS dans Divi ?

Comment utiliser la Flexbox CSS dans Divi ?

Laissez-moi vous faire découvrir une autre manière de créer vos mises en page Divi en utilisant la Flexbox. Ce module CSS puissant permet de faire des choses extraordinaires 🤩.

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 *

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