¿Cómo puedo obtener una imagen de fondo diferente en cada página de mi sitio Divi?

Publicado el 24/02/2019 | 20 comentarios

En un tutorial anterior, viste que era fácil obtener un color diferente en cada página de su sitio. Ahora te sugiero que utilices la misma técnica para conseguir una imagen de fondo diferente en cada página de tu sitio Divi.

El procedimiento es prácticamente el mismo, pero lo más importante es que es igual de fácil....

Aquí está el programa:

  1. Activar el diseño anidado
  2. Establecer una imagen de fondo por defecto
  3. Obtener el identificador de cada página
  4. Enumere las URL de sus imágenes
  5. Cambiar el CSS para mostrar una imagen de fondo diferente en cada página
  6. Aquí está el resultado en vídeo
Image de fond différente

Imagen de fondo diferente en cada página del sitio con Divi

Anuncio: 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 - Activar el diseño de la página anidada

Al igual que para hacer visible el color de fondo, necesitas habilitar el diseño anidado de Div i para que la imagen de fondo de tu sitio Divi pueda ser vista.

Para ello, basta con ir a Apariencia > Personalizar > Ajustes generales > Ajustes de diseño > Habilitar diseño anidado

Para descubrir el procedimiento en detalle, lea el artículo dedicado a Diseño anidado de Divi.

 

2 - Establecer una imagen de fondo por defecto

Divi ofrece esta opción de forma nativa y es muy fácil seleccionar la imagen de fondo desde los ajustes de personalización.

Définir une image d'arrière-plan par défaut

Establecer una imagen de fondo por defecto en la configuración de Divi

  1. Apariencia > Personalizar
  2. Haga clic en Configuración general
  3. Haga clic en Fondo
  4. A continuación, haga clic en "Seleccionar una imagen" en la opción "Imagen de fondo".
  5. Se abrirá una ventana que te ofrece subir tu imagen o elegirla de tu biblioteca multimedia.
  6. Si su imagen lo requiere, marque la casilla "estirar la imagen de fondo".
  7. Para conseguir un buen efecto, elija la opción "Fija " disponible en la sección "Posición del fondo". La imagen de fondo será fija y el contenido de su página se deslizará al desplazarse. No olvides hacer clic en "Publicar" para guardar los cambios.

Ahora todo su sitio mostrará la imagen de fondo que acaba de definir.

 

3 - Obtener el identificador de cada página

El código CSS que le daré más adelante en este artículo necesitará información específica del sitio. A continuación, tendrá que obtener esta información para adaptar el código CSS para que funcione en su sitio.

Tendrá que empezar por enumerar las páginas de su sitio que serán objeto de un cambio de imagen de fondo para recuperar sus ID.

Obtenir l'identifiant d'une page

Cómo encontrar el ID de su página web

Para obtener el identificador de las páginas a modificar :

  1. Vaya a la administración de la página en cuestión. Puede hacerlo desde el front office haciendo clic en Editar Página (no en Activar Constructor Visual). O desde el back office en la pestaña Página > Todas las páginas.
  2. Una vez en tu página en modo "edición", sólo tienes que mirar la barra de URL de tu navegador. Verá una URL como monsite.com/wp-admin/past.php?post=9&acción=editar. El número que aparece después de [post=] es el identificador de su página.

Sólo hay que encontrar este identificador para cada página que se vaya a modificar.

 

4 - Enumere las URL de sus imágenes

Al igual que el identificador, hay otro parámetro que será específico de su sitio: la URL de sus imágenes.

Récupérer l'URL de l'image

Recuperar la URL de la imagen de la mediateca

Deberá enumerar las URL de las imágenes que utilizará como fondo. Para ello, dirígete a la pestaña Medios > Biblioteca y haz clic en la imagen que quieras establecer como fondo personalizado para recuperar su URL en el campo Dirección web.

Repita el procedimiento para todas las imágenes que vaya a utilizar como fondo.

 

5 - Cambiar el CSS para mostrar una imagen de fondo diferente en cada página

Copie y pegue el código CSS que aparece a continuación en el Apariencia > Personalizar > CSS adicionalteniendo cuidado de modificar los elementos en rojo con sus propios valores:

/* images personnalisées pour chaque page */

.page-id-28.custom-background {
	background-image: url("placer ici l'url de votre image");
}

.page-id-9.custom-background {
	background-image: url("placer ici l'url de votre image");
}

.page-id-25.custom-background {
	background-image: url("placer ici l'url de votre image");
}

 

Algunas explicaciones sobre este código:

  • .page-id-28 : Aquí es donde tendrá que cambiar su ID de página. Cambia los 28 por los números propios de tus páginas.
  • .custom-background : no cambie nada aquí.
  • background-image: url("xxx") : aquí puedes insertar la URL de tu imagen en lugar de las xxx.

Para saber más sobre la propiedad CSS "background-image", le invito a leer esta página.

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

 

6 - Aquí está el resultado en vídeo...

Encuentre otros tutoriales para personalizar Divi en la sección dedicada !

Une image différente sur chaque page de son site Divi
Image d'arrière-plan différente sur chaque page de son site Divi
A background image different on each page Divi

852 palabras

3

A ti también te debería gustar:

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Página de error 404 personalizada: con y sin el Divi Theme Builder

¿Ha pensado en personalizar la página de error 404 de su sitio? ¿No? Pues debería hacerlo: no sólo es fácil de hacer, sino que también podría reducir su tasa de rebote. La idea es mantener en su sitio al internauta que pasaría por allí. Descubre el tutorial paso a paso + el vídeo.

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.

20 Commentaires

  1. Catherine Menguy

    Des jours que je cherchais la balise css à mettre pour modifier le fond de ma page d’accueil.. Mille mercis !

  2. Lycia Diaz

    Merci Catherine 😉

  3. Michele

    bonsoir Lycia
    2 questions
    1/peut on changer l’image de fond d’un layout ?
    2/ peut on utiliser differents layouts par page créée ?
    merci

    si tout ça c’est possible ca m’eviterait de mettre la patte aux codes

    PS j’apprends bcp dans les e books !!!

  4. Lycia Diaz

    Super que mes Ebooks t’aident Michèle ! Oui bien sûr que tu peux changer les images ! Tu dois trouver dans quel module elles ont été placées. Si c’est une image de fond, c’est souvent dans les réglages de la section (bleue) onglet contenu > fond > sous-onglet image (icône d’une image)… et oui tu peux utiliser différents layout sur chaque page.

  5. Michele

    super merci pour ta réponse je vais essayer ce soir et te tiens au courant
    merci encore

  6. Michele

    rebonjour Lycia
    ca ne marche pas
    c’était bien dans la section violette j’ai changé image de fond et elle ne remplace pas l’autre
    déjà dans Admin il y avait marqué Hero section et j’ai supprimé
    pour que ca redevienne section
    ca n’integre pas la nouvelle image et je garde le fond il y a surement une autre case à cocher
    je n’arrive pas à joindre une copie d’ecran
    si tu as une idée …je continue à chercher

  7. Michele

    j’ai posté un commentaire il y a deux heures car je n’y arrivais pas….. je ne le retrouve pas dans le fil !!
    en tous cas j’ai trouvé la solution
    il faut aller dans fond et aussi dans superposition et dans les deux modules
    si l’autre commentaire ressort efface le
    je continue à bosser
    qd j’aurai fini promis je te montre le site

  8. Lycia Diaz

    Salut Michèle.
    J’ai l’impression que tu veux aller trop vite. Il faut que tu prennes le temps d’apprivoiser Divi et de comprendre son fonctionnement global. Mes ebooks t’aident en partie, l’autre partie viendra avec le temps et la pratique. Ça ne s’acquiert pas en une journée malheureusement ! Il faut des semaines… Tu dois chercher et galérer, quelques fois, pour trouver ! Plus tu es curieuse, plus tu découvriras les options. N’hésite pas à cliquer partout et même à créer des pages de test pour mieux comprendre. Ensuite, tu seras de plus en plus efficace. Apprendre WordPress et Divi, c’est comme tout : apprendre à conduire, apprendre PhotoShop, apprendre à lire, hi hi hi !
    Donc je ne m’inquiète pas, tu vas trouver.

  9. Lycia Diaz

    Super, ben tu vois, j’ai répondu à ton 1er commentaire avant de voir celui-ci… Je savais que tu trouverais 😉

  10. Michele

    hi hi hi !!
    bon j’avance mais je fais plus que ça heureusement il pleut !!!!!
    en tous cas c’est sympa de repondre aussi vite et gratuitement en plus franchement j’adooore
    en fait j’ai acheté un domaine pour moi perso et un domaine pour mon club
    alors je fais tous les essais sur le mien et je mettrai en place sur celui du club qd je serai au top
    voili voilà
    je voudrais qd meme pas y passer tout l’été !!
    merci Lycia

  11. Eric

    Bonjour et merci pour ce tuto !

    Connaîtriez-vous le code pour personnaliser le fond d’une page produit woocommerce avec DIVI ?

    Merci 🙂

  12. Lycia Diaz

    Salut Éric, pourquoi tu n’utilises pas le thème Builder ? Tu personnalises ta page comme tu veux.

  13. Eric

    Bonjour Lycia et merci pour ta réponse 🙂

    ce que je cherche à faire c’est un fond différent pour chaque produit. Je ne crois pas que cela soit possible avec le thème builder.

  14. Eric

    Merci Lycia pour ta réponse,

    j’ai besoin d’une image de fond personnalisée pour chaque produit. Je ne crois pas que le thème builder puisse le faire. L’astuce donner dans le tuto fonctionne pour les pages, mais pas pour les produits.
    (J’ai essayé avec .product-id-28.custom-background ou .post-id-28.custom-background avec l’ID du produit)

  15. Lycia Diaz

    Salut Eric, avec le thème builder, tu peux définir ton image de fond et aller la chercher en base de données. Si tu choisis l’image de mise en avant, elle sera alors différente pour chaque fiche produit. Je pense donc que c’est possible.

  16. Lycia Diaz

    Eric, je suppose qu’il faut inspecter le code pour voir exactement quelle classe CSS est appelée. Ensuite, lorsqu’il y a plusieurs classes, mettre un espace ou non entre les deux peux avoir un impact.

  17. Brec

    Bonjour,
    Je n’ai pas l’onglet apparence sur mon tableau de bord

  18. Lycia Diaz

    Salut Brec. Vérifies que tu aies bien un profil Administrateur

  19. Brec

    Comment peut on savoir notre profil ?

  20. Lycia Diaz

    Brec, tu vas à Utilisateurs > Profil

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