Color de fondo

¿Cómo obtener un color de fondo diferente en cada página de su sitio web Divi?

Actualizado en 01/06/24

1051 palabras

4 lectura de minutos
15 Comentarios

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

Incluso si Divi propone elegir un color de fondo para todo su sitio, verás que es muy simple modificar esto para obtener un color diferente en cada página de su sitio.

El color de fondo es visible sólo si usted ha elegido un diseño con el diseño encarnado de Divi.

¿Quieres dar un ambiente diferente para cada página de tu sitio? ¿Un color dedicado que difiere cada vez que el usuario navega dentro de sus páginas?

El tema Divi no propone esta opción nativamente Pero es muy fácil arreglarlo, con sólo algunas líneas CSS.

Aquí está el programa:

  1. Activar diseño en relieve
  2. Establecer un color de fondo predeterminado
  3. Obtener identificador de cada página
  4. Editar CSS para obtener un color de fondo diferente en cada página
  5. ¡Aquí está el resultado del vídeo!
  6. Declinación con fondo gradiente
Color de fondo diferente en cada página
Color de fondo diferente en cada página de su sitio Divi

Anuncio: Este artículo contiene enlaces de afiliados que usted reconocerá fácilmente. Los enlaces clásicos están en morado y enlaces patrocinados están en rosa.

1 – Activar el diseño en relieve

Para que aparezca el color de fondo de su sitio, debe habilitarse el diseño integrado de Divi. Para esto, sólo ve a la pestaña Aspecto √≥ Personalizar √≥ Ajustes Generales > Ajustes de diseño √≥ Activar diseño en relieve

Aprender más acerca de el diseño integrado de Divi, leer este artículo.

2 - Establecer un color de fondo predeterminado

Para definir color de fondo de su sitio Divi, usted debe estar en posesión de su código de color HTML.

Incluso si esto no es obligatorio, será más preciso utilizar el color exacto de su "marca" en lugar de definirlo "a la vista".

Si necesita ideas, hay muchos sitios que ofrecen sugerencias o convertidores de color:

Si necesita extraer un color de una página web, le aconsejo que utilice una herramienta indispensable: una pipeta que recogerá para usted los códigos de color de las páginas web que visita. No hay un solo día sin que lo use...

Seleccione el color de fondo predeterminado
Seleccione el color de fondo predeterminado en las opciones de personalización Divi

Una vez que sepas tu código de color, puedes ir a:

  1. Apariencia > Personalizar
  2. Haga clic Parámetros generales
  3. Haga clic Antecedentes
  4. Entonces, Seleccionar color en la opción "Color de fondo"
  5. Establecer el color usando el cursor o código HEX.
  6. Recuerda hacer clic en « Publish » para salvar tus cambios.

Ahora, todo su sitio hacer el color de fondo que acaba de configurar (si el diseño encarnado está habilitado, repito).

¿Sabes que puedes probar Divi gratis? Nos vemos en esta página y haga clic en "Pruébalo GRATIS"

3 – Obtener identificador de cada página

Antes de comenzar cualquier cosa y utilizar el código CSS que propongo después de usted, debe enumerar las páginas de su sitio que estarán sujetas a un cambio de color de fondo. Esto le permitirá obtener valores específicos de su sitio: Identificar sus páginas. Esta podría ser la página de contacto, la página de servicio, la página sobre etc.

Obtenga un identificador de página
Cómo encontrar su identificador de página web (ID)

Para obtener la identificación de páginas a modificar:

  1. Vea la administración de la página en cuestión. Usted puede hacer esto muy bien desde la oficina frontal haciendo clic en Editar página (no en habilitar el constructor visual).
  2. Una vez en su página en el modo "Editar", sólo mire el la barra URL de su navegador. Usted verá una URL tipo monsite.com/wp-admin/past.php?post=9" action=edit ". El número después [post=] es el identificador de tu página.

Por lo tanto, es suficiente identificar estos identificadores para que todas las páginas sean modificadas.

4 - Editar CSS para obtener un color de fondo diferente en cada página

Ahora que usted tiene en su posesión códigos de color HTML, así como los identificadores de su página, usted será capaz de adaptar el siguiente código.

Para hacer esto, solo copie y pega el siguiente código en la ficha Aspecto √≥ Personalizar √≥ CSS adicional valores cambiantes en rojo por tus propios valores.

/* colores personalizados para cada página */ .page-id-9. fondo de fondo { color de fondo: #1bb5ea importante; Page-id-28. fondo de fondo { color de fondo: #AC58FA importante; Page-id-25. fondo de fondo { color de fondo: #e2a9f3 importante;

Explicación:

  • . page-id-9: Aquí es donde necesitará cambiar su ID de página. Cambie el 9 por los números que son específicos de sus páginas.
  • . fondo de base: No cambies nada aquí. Es una clase CSS de Divi. No debe haber espacio entre .page-id-9 y . fondo de base
  • fondo-color: #xxxxxx!importante; : Aquí puede insertar su código de color HTML. El Importante no es obligatorio

5 - ¡Aquí está el resultado del vídeo!

¿Qué dices? ¿Eso te da alguna idea?

6 - Declinación con fondo gradiente

La idea de obtener un color diferente en cada página es agradable pero también se puede adaptar esta técnica para obtener un color de fondo gradiente. ¿Buena idea?

En este caso, puede utilizar el siguiente código:

*/ .page-id-9.cotom-background { fondo-image: linear-gradient(a la derecha, #AC58FA, #1bb5ea); Page-id-28.cotom-background { fondo-image: linear-gradient(a la derecha, #1bb5ea, #AC58FA); Page-id-25.cotom-background { fondo-image: linear-gradient(a la derecha, #1bb5ea, #e2a9f3); Page-id-7.cotom-background { fondo-image: linear-gradient(a la derecha, #e2a9f3, #1bb5ea);
}

Para aprender más sobre gradientes en CSSTe invito a leer este artículo.

Color degradado en fondo
Color degradado en fondo
Color de fondo diferente en cada página de su sitio web Divi
color

Divi training via CPF

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

Sus comentarios...

15 Commentaires

  1. Mathilde

    Bonjour,
    Je n’arrive pas à utiliser une couleur de fond différente comme c’est indiqué.
    Déjà, lorsque j’active la mise en page emboitée, cela créé une sorte de bordure sur toutes les pages de mon site web. Ensuite, malgré l’activation, la couleur de fond des articles de mon blog ne varie pas.
    Merci
    Mathilde

  2. Lycia Diaz

    Bonjour Mathilde, si vous suivez le tuto vous devriez y parvenir. Il faut le faire manuellement sur chaque page/article comme indiqué dans ce tutoriel.

  3. ewa

    Bonjour Mathilde,

    Thanks very much for these code. I love it:)!

    Could You help me to change the background with your code but with animation gradient for all my sites not only for each module? What I have to do?

    * couleurs changeantes */

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

    @keyframes random {
    15% { background-color:#EBEAE9; }
    30% { background-color: #e0d3d0; }
    45% { background-color: #fbf9f8; }
    60% { background-color: #eae2df; }
    75% { background-color: #f4eeec; }
    }

  4. Lycia Diaz

    Hi Ewa ! What do you want exactly ? « Background changing color » on all your website ?

  5. Sandra

    Bonjour Lycia,

    Je veux que plusieurs pages aient la même couleur de fond. J’ai essayé de regrouper tous les id des pages concernées avec une seule ligne de code (exemple ci-dessous)

    .page-id-28, page-id-29, page-id-13.custom-background {
    background-color: #AC58FA !important;
    }

    Mais cela ne fonctionne pas. Suis-je obligée d’écrire une ligne de code pour chaque page id ? ou bien ai-je fait une erreur dans le code ?

    Merci pour ton aide

  6. Lycia Diaz

    Salut Sandra !
    Effectivement tu peux les regrouper normalement mais ton code ne me parait pas correct. Je ne suis pas devant l’ordinateur, je ne peux donc pas te donner le code exact (je l’ai pas en tête) mais déjà, je note qu’il manque un point devant deux de tes classes. Ensuite, si tu « colles » deux classes ensemble, ça n’aura pas le même sens. Un espace est peut-être nécessaire entre .custom-background et .page-id-xxx . Enfin, l’ordre de tes classes a une importance également… Donc tu n’es pas loin mais il faut tester avec les éléments que je viens de te donner…. 😉

  7. Sandra

    Merci Lycia. Je vais faire des tests.

  8. Petra van der Schoot

    hallo, thanks; this works very well for a page-page, but some how i can’t make it work for a project-page ;the default color stay’s visible on both sides and a small horizontal line just above the bottom menu. I don’t understand. what can i do?

  9. Lycia Diaz

    Hi Petra,
    For a Project Page, you have to change the CSS Classes. You should try « postid-xxx » instead of « page-id-xxx », like this :

    .postid-123.custom-background {
    background-color: #1bb5ea !important;
    }

    instead of

    .page-id-123.custom-background {
    background-color: #1bb5ea !important;
    }

    I think, it would be fine 😉

  10. Petra van der schoot

    thanks very much Lydia!

  11. Lycia Diaz

    You’re Welcome !

  12. jamet JC

    Bonjour Lycia
    Merci pour tous tes conseils.
    Je suis en train de me familiariser avec Divi et je voudrais comprendre pourquoi je n’arrive pas à faire prolonger le fond dégradé dans la vue sur tablette et téléphone, en fonction des modules. Ainsi quand il s’agit d’un texte, le fond passe très bien mais dès qu’il y a un lecteur vidéo, le fond n’englobe pas totalement le lecteur, ce qui fait que je me retrouve avec un fond blanc sous le lecteur. As-tu une idée pour me sortir de ce pétrin ?
    Cordialement

  13. Lycia Diaz

    Salut JC, il faut que tu regarde le fond des modules où tu as ce problème : tu dois « jeter » la couleur d’arrière-plan afin d’avoir un fond transparent et ainsi rendre visible ton dégradé.

  14. jamet

    Bonjour
    Encore merci Lucia pour ta réponse.
    Une autre demande me vient à ce jour. Je souhaiterai donner aux visiteurs des articles de mon site la possibilité de lire « plus » ou « moins » le texte, surtout quand il peut être assez long. Je cherche depuis longtemps un module ou une possibilité de réaliser cela à partir d’un bouton ou d’une page qui se déroulerait, mais je ne trouve pas véritablement ou alors les infos sur le web sont trop compliquées pour mes neurones.
    Aurais-tu une idée ?
    D’avance merci

  15. Lycia Diaz

    Ah désolée, je ne connais pas de plugin qui pourrait faire cela…

Presentar un comentario

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