En un tuto anterior, viste que era fácil para obtener un color diferente en cada página de su sitio. Propongo que lleves a cabo la misma técnica obtener una imagen de fondo diferente en cada página de su sitio Divi.
El procedimiento es igual, pero sobre todo, es tan fácil...
Aquí está el programa:
- Activar diseño en relieve
- Establecer una imagen de fondo predeterminada
- Obtener identificador de cada página
- Lista URL de tus imágenes
- Editar CSS para mostrar una imagen de fondo diferente en cada página
- Aquí está el resultado del vídeo
1 – Activar el diseño en relieve
De la misma manera que para hacer visible el color de fondo, usted debe habilitar el diseño integrado de Divi así ver la imagen de fondo de su sitio Divi.
Para esto, sólo ve a la pestaña Aspecto √≥ Personalizar √≥ Ajustes Generales > Ajustes de diseño √≥ Activar diseño en relieve
Para obtener más información sobre el procedimiento, lea el artículo dedicado a el diseño encarnado de Divi.
2 - Establecer una imagen de fondo predeterminada
Divi ofrece nativamente esta opción y es muy fácil seleccione su imagen de fondo desde ajustes de personalización.
- Apariencia > Personalizar
- Haga clic Parámetros generales
- Haga clic Antecedentes
- Entonces, "Seleccionar imagen" en la opción "Imagen de fondo"
- Una ventana se abrirá para ofrecer subir su imagen o elegirla de los elementos de su biblioteca de medios.
- Si su imagen lo requiere, compruebe la caja "Stretch the background image"
- Para un buen efecto, elija la opción Fijación disponibles en la sección "Posición substantiva". La imagen de fondo se fijará y el contenido de su página se deslizará hacia el desplazamiento. Recuerde hacer clic en « Publish » para salvar tus cambios.
Ahora, todo su sitio hacer que la imagen de fondo aparezca que acaba de establecer.
3 – Obtener identificador de cada página
El código CSS que le doy más adelante en este artículo necesitará información específica para cada sitio. Entonces necesitará obtener esta información para adaptar el código CSS para trabajar en su sitio.
Por lo tanto, tendrá que enumerar primero las páginas de su sitio que serán objeto de un cambio de imagen de fondo en orden recuperar su identificación.
Para obtener la identificación de páginas a modificar:
- 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). O desde la oficina de atrás hasta la pestaña Página Todas las páginas.
- 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 este identificador para que cada página sea modificada.
4 - Listar URLs de tus imágenes
Del mismo modo que el identificador, hay otro parámetro que será único en su sitio: la URL de sus imágenes.
Usted tendrá que enumerar las URL de las imágenes que utilizará como fondo. Para esto, ve a la pestaña Medios de comunicación Biblioteca y haga clic en la imagen para establecer en el fondo personalizado para recuperar su URL introducido en el campo Dirección web.
Renovar el procedimiento para todas las imágenes que se utilizarán en el fondo.
5 – Editar CSS para mostrar una imagen de fondo diferente en cada página
Copiar y pegar el código CSS abajo en la pestaña Aspecto √≥ Personalizar √≥ CSS adicional, cuidando de modificar los elementos en rojo con sus propios valores:
/* imágenes personalizadas para cada página */ .page-id-28. fondo de fondo { imagen de fondo: url("colocar aquí el url de su imagen); Page-id-9. fondo de fondo { imagen de fondo: url("colocar aquí el url de su imagen); Page-id-25. fondo de fondo { imagen de fondo: url("colocar aquí el url de su imagen"); }
Algunas explicaciones sobre este código:
- . page-id-28: Aquí es donde necesitará cambiar su ID de página. Cambie el 28 por los números que son específicos de sus páginas.
- . fondo de base: No cambies nada aquí.
- imagen de fondo: url("xxx") : Aquí puede insertar la URL de su imagen en lugar del xxx.
Para obtener más información sobre la propiedad CSS "background-image", le invito a leer esta página.
¿Necesita más recursos en Divi? Visita Elegante El blog del tema lleno de ideas y tutos!
6 - Aquí está el resultado en video...
Encontrar otros 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