background changing color

Un fondo que cambia de color en Divi

Actualizado el 12/07/2021 | Publicado el 28/11/2018 | 8 comentarios

702 palabras

3

En este artículo, veremos cómo conseguir fácilmente un fondo que cambie de color, simplemente con código CSS. Aquí, no hay Javascript ni manos en el código ¡! Verás que con este truco, ¡conseguirás un efecto de color súper divertido!

Para entenderlo mejor, vea este vídeo que muestra el resultado final de este fondo que cambia de color:

¿Qué te parece? ¿Le da algunas ideas? Descubramos cómo...

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.

¿Necesitas dominar Divi? ¡Descubre mi formación que te guiará paso a paso en la comprensión y uso de Divi! Más información sobre la formación en Divi.

1 - ¿Cómo puedo conseguir un fondo que cambie de color en Divi?

El siguiente método se puede integrar fácilmente en Divi, pero también se puede utilizar en cualquier tema de WordPress o página HTML.

En primer lugar, hay que añadir una página y activar el Constructor Divi (o editar una página que ya utiliza el Constructor Divi).

Añadirá una SECCIÓN ESTÁNDAR (cuadro azul en la imagen inferior).

En la LÍNEA (cuadro verde en la imagen inferior), añada un MÓDULO DE TEXTO (cuadro rosa en la imagen inferior). Puedes escribir el texto que quieras, para mi ejemplo escribí "just fun".

section standard Divi

A continuación, asegúrese de establecer el fondo de la LÍNEA (color verde) al 100% de transparencia. Esto permitirá que se vea el color de fondo de la SECCIÓN ESTÁNDAR.

opacité ligne Divi

Por último, edite la SECCIÓN ESTÁNDAR, vaya a la pestaña AVANZADA y añada una clase CSS. Para este ejemplo he utilizado la clase fun-color.

Ajouter une classe CSS à la section standard de Divi

Ahora puede guardar su página (sus cambios) e ir al Apariencia > Personalizar > CSS adicional para introducir estas pocas líneas de código:

/* couleurs changeantes */

.fun-color {
-webkit-animation: random 15s infinite;
animation: random 15s infinite;
}

@keyframes random {
15% { background-color: #e3ff87; } 
30% { background-color: #ff7c96; } 
45% { background-color: #6ffffa; }
60% { background-color: #ef6b30; } 
75% { background-color: #bf69b1; } 
}

¡Eso es! Si actualizas tu página deberías ver un fondo que cambia de color.

¿Necesitas más recursos sobre Divi? Visite el blog de ElegantTheme que está lleno de ideas y tutoriales.

2 - Algunas explicaciones sobre este código CSS...

Para comprender mejor y apropiarse de este pieza de códigoA continuación le ofrecemos algunas explicaciones que le permitirán modificarlo a su gusto:

explication du code CSS pour un arrière-plan qui change de couleur
  1. El texto entre /* y */ es un comentario CSS. El navegador no lo tiene en cuenta y le ayuda a orientarse en su código cuando lo edita posteriormente. Esto es opcional y puedes cambiar el texto sin ningún problema.
  2. El .fun-color es la llamada a la clase CSS. El código CSS que sigue a esta llamada sólo se aplicará a los elementos HTML que utilicen esta clase
  3. 15s es la duración del cambio de color. Si lo aumentas, el cambio de color será más lento, si lo disminuyes, será más rápido.
  4. Los porcentajes deberán ajustarse en función del número de colores que desee utilizar. Si reduce el número de colores, aumentará el % de cada color. Si aumenta el número de colores, reducirá el % de cada color.
  5. #e3ff87 es el código hexadecimal de un color en HTML. Para elegir tus propios colores y conocer su código : visite esta página.

3 - ¿Qué podemos hacer con este código personalizado?

El código CSS se aplica a un elemento. Para mi ejemplo, utilicé una CLASE (.fun-color) que apliqué a una sección de Divi pero bien podrías aplicar este código a una clase o ID HTML existente en Divi.

Por ejemplo, en el siguiente vídeo, he aplicado este código al menú de mi sitio Divi :

Es muy sencillo, he utilizado el ID del menú (#main-header) como puedes ver en la captura de pantalla de abajo:

appel css

¿Lo sabías? Puede probar Divi de forma gratuita visitando en esta página y haciendo clic en "PRUEBA GRATUITA

4 - Ir más allá con los colores de Divi

Estoy seguro de que esto te da algunas ideas increíbles para tus proyectos actuales o futuros... ¿Me equivoco?

Si no es así, aquí tiene una lista de lecturas que puede gustarle:

arrière-plan qui change de couleur dans Divi
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:

Comment changer une image au survol de la souris ?

¿Cómo cambiar una imagen al pasar el ratón por encima?

Si no estás usando las opciones de hover disponibles en Divi, ¡te estás perdiendo algo! Aquí tienes un ejemplo de cómo utilizarlos que te puede resultar útil. En este tutorial y vídeo, te muestro cómo cambiar una imagen al pasar el ratón por encima.

8 Commentaires

  1. Jean-Michel

    Bonjour Lycia et merci a nouveau pour cette idee.
    Je cherche ceci depuis un moment deja afin de traiter la couleur d’une ligne de « underscore » au moyen de 7 couleurs.

  2. Jean-Michel

    Rebonjour,
    Cela fonctionne evidemment tres bien. La question que je me pose c’est pourquoi le code css n’est pas accepte dans le fichier style.css du theme enfant ?
    Et en revanche, je n’arrive pas a transposer ce code pour la couleur d’un texte (une ligne) ?

  3. Lycia Diaz

    Il y a peut-être une « mini erreur » dans votre code qui fait que ça ne marche pas ? N’étant pas en face du problème je vais avoir du mal à vous dépanner malheureusement… courage ! 😉

  4. Jean-Michel

    C’est ok pour le texte en mettant le code la ou vous le dites. J’ai trouve qu’il faut mettre « 15% { color: #e3ff87; } » au lieu de « 15% { background-color: #e3ff87; } « .

    Je n’ai cependant pas compris la relation des % avec le nombre des couleurs.
    Je me demande aussi comment effectuer ceci sequenciellement au lieu du random ?

  5. Lycia Diaz

    Mais bien sur tu as raison : l’attribut color agit sur le texte.
    Les pourcentages servent à la boucle de changement de couleur. Par exemple, pour 3 couleurs, ce serait 33% pour chaque couleur. Mais tu peux aussi dire 10% puis 80% puis 10%… Si tu veux que la couleur du milieu soit plus présente que les autres… Pour le non-random, je ne sais pas trop, je suppose qu’il faudrait supprimer les transitions plutôt, ce sont elles qui agissent sur l’effet de fondu.

  6. Jean-Michel

    Ok merci beaucoup.
    Ca fonctionne a souhait avec le script suivant, ca peut rendre service :

    /* couleurs changeantes sequentiellement */

    .text-color {color: #FFFFFF;
    -webkit-animation: mycolor 15s infinite;
    animation: mycolor 15s infinite;
    }

    @keyframes mycolor {
    20% { color: #FFFF00; }
    20% { color: #FF8C00; }
    20% { color: #008000; }
    20% { color: #0000FF; }
    20% { color: #800000; }
    }

  7. Lycia Diaz

    Super ! Merci Jean Michel pour ce partage !

  8. Deanerys

    Bonjour,

    Merci beaucoup pour cette explication, c’est super sympa de votre part.
    Je me demandais si on pouvait faire la même chose en dégradé de couleur ?

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.