En un tutorial anterior, viste que era fácil obtener un color diferente en cada página de su sitio. Me gustaría sugerirle que utilice la misma técnica para obtener una imagen de fondo diferente en cada página de su sitio Divi.
El procedimiento es muy parecido, pero lo más importante es que es igual de fácil....
Aquí está el programa:
- Activar el diseño anidado
- Establecer una imagen de fondo por defecto
- Obtener el identificador de cada página
- Enumere las URL de sus imágenes
- Cambiar el CSS para mostrar una imagen de fondo diferente en cada página
- Aquí está el resultado en vídeo
Imagen de fondo diferente en cada página del sitio con Divi
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.
1 - Activar el diseño de la página anidada
De la misma manera que hacer visible el color de fondo, necesitas habilitar el diseño anidado de Divi 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 > Habilitardiseño anidado
Para saber más sobre el procedimiento, lea el artículo sobre 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.
Establecer una imagen de fondo por defecto en la configuración de Divi
- Apariencia > Personalizar
- Haga clic en Configuración general
- Haga clic en Fondo
- A continuación, haga clic en "Seleccionar una imagen" en la opción "Imagen de fondo".
- Se abrirá una ventana que te ofrece subir tu imagen o elegirla de tu biblioteca multimedia.
- Si su imagen lo requiere, marque la casilla "estirar la imagen de fondo".
- Para conseguir un buen efecto, elija la opción "Fija " disponible en la sección "Posición de fondo". La imagen de fondo será fija y el contenido de su página se desplazará. 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 te doy 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.
Cómo encontrar el ID de su página web
Para obtener el identificador de las páginas a modificar :
- 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 Visual Builder). O desde el back office en la pestaña Página > Todas las páginas.
- 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.
Por lo tanto, basta con localizar 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.
Recuperar la URL de la imagen de la mediateca
Deberá enumerar las URL de las imágenes que utilizará como fondo. Para ello, vaya a la pestaña Medios > Biblioteca y haga clic en la imagen que desee 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. Cambie el 28 por los números propios de sus 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 más tutoriales para personalizar Divi en la sección dedicada !
Des jours que je cherchais la balise css à mettre pour modifier le fond de ma page d’accueil.. Mille mercis !
Merci Catherine 😉
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 !!!
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.
super merci pour ta réponse je vais essayer ce soir et te tiens au courant
merci encore
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
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
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.
Super, ben tu vois, j’ai répondu à ton 1er commentaire avant de voir celui-ci… Je savais que tu trouverais 😉
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
Bonjour et merci pour ce tuto !
Connaîtriez-vous le code pour personnaliser le fond d’une page produit woocommerce avec DIVI ?
Merci 🙂
Salut Éric, pourquoi tu n’utilises pas le thème Builder ? Tu personnalises ta page comme tu veux.
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.
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)
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.
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.
Bonjour,
Je n’ai pas l’onglet apparence sur mon tableau de bord
Salut Brec. Vérifies que tu aies bien un profil Administrateur
Comment peut on savoir notre profil ?
Brec, tu vas à Utilisateurs > Profil