fondo cambiante color

Un fondo que cambia de color en Divi

Actualizado en 12/07/21

695 palabras

3 lectura de minutos
8 Comentarios

Este artículo contiene enlaces de afiliados reconocibles por el icono porcentaje (%) → Soy un enlace de afiliado

En este artículo veremos cómo obtener fácilmente un fondo que cambia de color, simplemente con código CSS. Aquí, sin Javascript o las manos en el código ¡Oye! Verás que con este truco obtendrás un efecto colorido super divertido !

Para comprender mejor este vídeo que muestra el resultado final de este vídeo fondo cambiante color :

¿Qué dices? ¿Te das algunas ideas? Averigüemos cómo...

¿Necesitas dominar Divi? Descubre mi entrenamiento que te acompaña paso a paso en la comprensión y uso de Divi! Más información sobre Divi training.

1 – ¿Cómo conseguir un fondo que cambie el color en Divi?

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

Primero, necesitas añadir una página y activar el Divi Builder (o editar una página que ya utiliza el Divi Builder).

Usted añadirá un SECTION STANDARD ( cuadro de imagen azul debajo).

En el LINE (caja verde de la imagen de abajo), añadir un TEXTO MODULO (caja de la imagen de abajo). Puedes escribir el texto de tu elección, por ejemplo, escribí "Sólo diversión".

Sección estándar Divi

Entonces asegúrese de definir el fondo del LINE (color verde) con 100% transparencia. Esto permitirá el color de fondo de la SECTION STANDARD.

Divi line opacity

Por último, editar el SECTION STANDARDVaya a la pestaña ADVANCED y añadir una clase CSS. Por este ejemplo, usé la clase fun-color.

Añadir una clase CSS a la sección estándar de Divi

Ahora puede guardar su página (su cambio) e ir a la pestaña Aspecto √≥ Personalizar √≥ CSS adicional para introducir estas pocas líneas de código:

/* cambiantes colores */ .fun-color { -webkit-animation: random 15s infinite; animación: random 15s infinite; } @keyframes random { 15% { background-color: #e3ff87; * 30% { background-color: #ff7c96; } 45% { background-color: #6ffffffa; ■ 60% { background-color: #ef6b69

¡Eso es! Si actualizas tu página deberías ver una fondo cambiante color.

¿Necesita más recursos en Divi? Visita Elegante El blog del tema lleno de ideas y tutos!

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

Para comprender mejor y adaptarlo pedazo de códigoAquí están algunas explicaciones que le permitirán modificarlo como desee:

explicación del código CSS para un fondo que cambia el color
  1. El texto entre /* y */ es un comentario de CSS. Esto no es tomado en cuenta por el navegador y permite que usted se encuentra en su código cuando se edita más adelante. Esto es opcional y puede cambiar el texto sin problemas.
  2. El .fun-color es la llamada de clase CSS. El código CSS siguiendo esta llamada sólo se aplicará a los elementos HTML usando esta clase
  3. 15 años es la duración del cambio de color. Si aumentas, el cambio de color será más lento, si lo reduces, será más rápido.
  4. El porcentajes % debe ajustarse según el número de colores que desea utilizar. Si reduce el número de colores, aumentará el % de cada color. Si aumenta el número de color, reducirá el % de cada color.
  5. #e3ff87 es el código hexadecimal a color en HTML. Para elegir tus propios colores y conocer su código: visitar esta página.

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

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

Por ejemplo, en el vídeo siguiente, apliqué este código a menu de mi sitio web de Divi :

Para esto, es muy simple. menu ID (#main-header) como se puede ver en la imagen siguiente:

llamada css

¿Lo sabías? Puedes probar Divi gratis visitando en esta página y haciendo clic en "Pruébalo GRATIS"

4 - Para ir más lejos con los colores de Divi

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

De lo contrario, aquí hay una lista de reproducción que le gustaría:

fondo que cambia de color en Divi

Obtener Divi

Entrenamiento Divi

Libro electrónico Divi

Consejos gratis

Cuestionario Divi

Entrenamiento en vivo

icono 256x256

Proudly translated by wpLingua, la extensión de traducción para WordPress ¡Que me desarrolle! SEO-Friendly / Automático / Editable

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 ?

Presentar un comentario

Su dirección de correo electrónico no será publicada. Los campos obligatorios se indican con *