Un fondo que cambia de color en Divi

Publicado el 28/11/2018 | 8 comentarios

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á que con este consejoConseguirás un efecto de color súper divertido!

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

Entonces, ¿qué dices? ¿Le da algunas ideas? Descubramos cómo...

 

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

 

¿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 desees, en mi ejemplo, escribí "sólo diversión".

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.

 

Algunas explicaciones sobre este código CSS...

Para comprender mejor y apropiarse de este trozo de código, he aquí 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. Esto no es tenido en cuenta por el navegador y le permite encontrar su camino en su código cuando lo edita más tarde. 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 de % deberán ajustarse según el 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, disminuirá 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.

 

¿Qué podemos hacer con este código?

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 :

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

appel css

Seguro que esto te da ideas increíbles para tus proyectos actuales o futuros... ¿Me equivoco?

arrière-plan qui change de couleur dans Divi

 

changing color background Divi

668 palabras

3

A ti también te debería gustar:

Appliquer des masques et des formes sur vos images avec Divi

Aplica máscaras y formas a tus imágenes con Divi

Las máscaras hacen que tus imágenes parezcan más gráficas y dan a tu diseño un aspecto original. ¿Sabías que puedes crearlos fácilmente con el Constructor Visual de Divi? Te muestro cómo en este tutorial y en este vídeo.

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 *

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.

Pínchalo en Pinterest

Acciones
Comparte esto