16. Modifier les arrière-plans

.elementor-255 .elementor-element.elementor-element-9e6c10b > .elementor-background-overlay{background-image:url("https://creamentor.com/wp-content/uploads/2020/02/fond-webdesign-background.png");background-position:center center;background-size:cover;opacity:0.2;}.elementor-255 .elementor-element.elementor-element-9e6c10b > .elementor-shape-top .elementor-shape-fill{fill:rgba(249, 251, 253, 0.86);}.elementor-255 .elementor-element.elementor-element-9e6c10b > .elementor-shape-top svg{height:74px;}.elementor-255 .elementor-element.elementor-element-9e6c10b{margin-top:0px;margin-bottom:0px;padding:50px 0px 50px 0px;}.elementor-255 .elementor-element.elementor-element-27b7f377 > .elementor-element-populated{padding:0% 5% 0% 5%;}.elementor-255 .elementor-element.elementor-element-2de6b7bd .elementor-heading-title{color:#17AFC3;font-family:"Work Sans", Sans-serif;font-size:2.5em;font-weight:300;}.elementor-255 .elementor-element.elementor-element-2de6b7bd > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-255 .elementor-element.elementor-element-2de6b7bd{width:auto;max-width:auto;}.elementor-255 .elementor-element.elementor-element-5b284d0c .elementor-heading-title{color:#3B3E4D;font-family:"Work Sans", Sans-serif;font-size:5.3em;font-weight:100;}.elementor-255 .elementor-element.elementor-element-5b284d0c > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-255 .elementor-element.elementor-element-5b284d0c{width:auto;max-width:auto;}.elementor-255 .elementor-element.elementor-element-58f90a8f .elementor-widget-container{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;text-align:left;}.elementor-255 .elementor-element.elementor-element-58f90a8f{--ha-card-image-width:142px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-figure{height:142px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-figure img{padding:31px 31px 31px 31px;border-style:solid;border-width:4px 4px 4px 4px;border-color:rgba(23, 175, 195, 0.30196078431372547);border-radius:300px 300px 300px 300px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-badge{--ha-badge-translate-x:15px;--ha-badge-translate-y:10px;padding:6px 15px 6px 15px;color:#242424;background-color:#ffffff;border-style:solid;border-color:rgba(23, 175, 195, 0.30196078431372547);}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-body{padding:100px 60px 100px 50px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-title{font-family:"Montserrat", Sans-serif;font-size:18px;font-weight:700;line-height:1.5em;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-text{color:#8c8c8c;font-family:"Nunito", Sans-serif;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-btn{padding:15px 20px 15px 0px;font-family:"Work Sans", Sans-serif;font-size:1em;font-weight:400;border-radius:20px 20px 20px 20px;color:#242424;background-color:rgba(185, 185, 185, 0);}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-btn:hover, .elementor-255 .elementor-element.elementor-element-58f90a8f .ha-btn:focus{color:#e2498a;}.elementor-255 .elementor-element.elementor-element-58f90a8f > .elementor-widget-container{padding:0px 0px 0px 50px;border-radius:10px 10px 10px 10px;}.elementor-255 .elementor-element.elementor-element-58f90a8f.ha-has-bg-overlay > .elementor-widget-container:before{transition:background 0.3s;}.elementor-255 .elementor-element.elementor-element-58f90a8f:hover .elementor-widget-container{box-shadow:2px 4px 10px 0px rgba(0,0,0,0.1);}.elementor-bc-flex-widget .elementor-255 .elementor-element.elementor-element-451d097.elementor-column .elementor-column-wrap{align-items:center;}.elementor-255 .elementor-element.elementor-element-451d097.elementor-column.elementor-element[data-element_type="column"] > .elementor-column-wrap.elementor-element-populated > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-255 .elementor-element.elementor-element-dc8b0cd .elementor-heading-title{color:#FFFFFF;font-family:"Work Sans", Sans-serif;font-size:2.4em;font-weight:100;}.elementor-255 .elementor-element.elementor-element-dc8b0cd > .elementor-widget-container{margin:0px 0px 0px 0px;padding:3px 10px 3px 10px;background-color:#17AFC3;border-radius:4px 4px 4px 4px;}.elementor-255 .elementor-element.elementor-element-dc8b0cd.ha-has-bg-overlay > .elementor-widget-container:before{transition:background 0.3s;}.elementor-255 .elementor-element.elementor-element-9802d0e .elementor-field-group{margin-bottom:10px;}.elementor-255 .elementor-element.elementor-element-9802d0e .elementor-form-fields-wrapper{margin-bottom:-10px;}.elementor-255 .elementor-element.elementor-element-9802d0e .elementor-field-group > a{color:#17AFC3;}.elementor-255 .elementor-element.elementor-element-9802d0e .elementor-field-group > a:hover{color:#E2498A;}body .elementor-255 .elementor-element.elementor-element-9802d0e .elementor-field-group > label{padding-bottom:0px;}.elementor-255 .elementor-element.elementor-element-9802d0e .elementor-form-fields-wrapper label{color:#000000;font-weight:600;}.elementor-255 .elementor-element.elementor-element-9802d0e .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#E7F0FE;border-width:0px 0px 0px 0px;}.elementor-255 .elementor-element.elementor-element-9802d0e .elementor-field-group .elementor-select-wrapper select{background-color:#E7F0FE;border-width:0px 0px 0px 0px;}.elementor-255 .elementor-element.elementor-element-9802d0e .elementor-button{background-color:#17AFC3;}@media(min-width:768px){.elementor-255 .elementor-element.elementor-element-fd8e0cb{width:54.294%;}.elementor-255 .elementor-element.elementor-element-451d097{width:45.594%;}}@media(max-width:1024px) and (min-width:768px){.elementor-255 .elementor-element.elementor-element-27b7f377{width:100%;}}@media(min-width:1025px){.elementor-255 .elementor-element.elementor-element-9e6c10b > .elementor-background-overlay{background-attachment:fixed;}}@media(max-width:1024px){.elementor-255 .elementor-element.elementor-element-9e6c10b{margin-top:30px;margin-bottom:30px;padding:20px 20px 20px 20px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .elementor-widget-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;text-align:left;}.elementor-255 .elementor-element.elementor-element-58f90a8f{--ha-card-image-width:100%;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-badge{--ha-badge-translate-x:6px;}}@media(max-width:767px){.elementor-255 .elementor-element.elementor-element-27b7f377 > .elementor-element-populated{margin:50px 0px 0px 0px;}.elementor-255 .elementor-element.elementor-element-2de6b7bd .elementor-heading-title{font-size:30px;}.elementor-255 .elementor-element.elementor-element-5b284d0c .elementor-heading-title{font-size:66px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .elementor-widget-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;text-align:left;}.elementor-255 .elementor-element.elementor-element-58f90a8f{--ha-card-image-width:120px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-figure{height:120px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-figure img{padding:15px 15px 15px 15px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-badge{--ha-badge-translate-x:25px;--ha-badge-translate-y:-27px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-body{padding:0px 0px 0px 20px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-title{font-size:16px;}.elementor-255 .elementor-element.elementor-element-58f90a8f > .elementor-widget-container{padding:15px 15px 15px 15px;}.elementor-255 .elementor-element.elementor-element-dc8b0cd .elementor-heading-title{font-size:30px;}}

Contenu

Réservé aux membres

illustration webdesign facile
Exclusif

Formation Elementor + accès illimité à toutes les ressources

20€ /mois
Sans engagement

Accéder à la Formation Elementor

Pour voir les étapes, Connectez-vous

.elementor-255 .elementor-element.elementor-element-9e6c10b > .elementor-background-overlay{background-image:url("https://creamentor.com/wp-content/uploads/2020/02/fond-webdesign-background.png");background-position:center center;background-size:cover;opacity:0.2;}.elementor-255 .elementor-element.elementor-element-9e6c10b > .elementor-shape-top .elementor-shape-fill{fill:rgba(249, 251, 253, 0.86);}.elementor-255 .elementor-element.elementor-element-9e6c10b > .elementor-shape-top svg{height:74px;}.elementor-255 .elementor-element.elementor-element-9e6c10b{margin-top:0px;margin-bottom:0px;padding:50px 0px 50px 0px;}.elementor-255 .elementor-element.elementor-element-27b7f377 > .elementor-element-populated{padding:0% 5% 0% 5%;}.elementor-255 .elementor-element.elementor-element-2de6b7bd .elementor-heading-title{color:#17AFC3;font-family:"Work Sans", Sans-serif;font-size:2.5em;font-weight:300;}.elementor-255 .elementor-element.elementor-element-2de6b7bd > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-255 .elementor-element.elementor-element-2de6b7bd{width:auto;max-width:auto;}.elementor-255 .elementor-element.elementor-element-5b284d0c .elementor-heading-title{color:#3B3E4D;font-family:"Work Sans", Sans-serif;font-size:5.3em;font-weight:100;}.elementor-255 .elementor-element.elementor-element-5b284d0c > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-255 .elementor-element.elementor-element-5b284d0c{width:auto;max-width:auto;}.elementor-255 .elementor-element.elementor-element-58f90a8f .elementor-widget-container{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;text-align:left;}.elementor-255 .elementor-element.elementor-element-58f90a8f{--ha-card-image-width:142px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-figure{height:142px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-figure img{padding:31px 31px 31px 31px;border-style:solid;border-width:4px 4px 4px 4px;border-color:rgba(23, 175, 195, 0.30196078431372547);border-radius:300px 300px 300px 300px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-badge{--ha-badge-translate-x:15px;--ha-badge-translate-y:10px;padding:6px 15px 6px 15px;color:#242424;background-color:#ffffff;border-style:solid;border-color:rgba(23, 175, 195, 0.30196078431372547);}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-body{padding:100px 60px 100px 50px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-title{font-family:"Montserrat", Sans-serif;font-size:18px;font-weight:700;line-height:1.5em;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-text{color:#8c8c8c;font-family:"Nunito", Sans-serif;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-btn{padding:15px 20px 15px 0px;font-family:"Work Sans", Sans-serif;font-size:1em;font-weight:400;border-radius:20px 20px 20px 20px;color:#242424;background-color:rgba(185, 185, 185, 0);}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-btn:hover, .elementor-255 .elementor-element.elementor-element-58f90a8f .ha-btn:focus{color:#e2498a;}.elementor-255 .elementor-element.elementor-element-58f90a8f > .elementor-widget-container{padding:0px 0px 0px 50px;border-radius:10px 10px 10px 10px;}.elementor-255 .elementor-element.elementor-element-58f90a8f.ha-has-bg-overlay > .elementor-widget-container:before{transition:background 0.3s;}.elementor-255 .elementor-element.elementor-element-58f90a8f:hover .elementor-widget-container{box-shadow:2px 4px 10px 0px rgba(0,0,0,0.1);}.elementor-bc-flex-widget .elementor-255 .elementor-element.elementor-element-451d097.elementor-column .elementor-column-wrap{align-items:center;}.elementor-255 .elementor-element.elementor-element-451d097.elementor-column.elementor-element[data-element_type="column"] > .elementor-column-wrap.elementor-element-populated > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-255 .elementor-element.elementor-element-dc8b0cd .elementor-heading-title{color:#FFFFFF;font-family:"Work Sans", Sans-serif;font-size:2.4em;font-weight:100;}.elementor-255 .elementor-element.elementor-element-dc8b0cd > .elementor-widget-container{margin:0px 0px 0px 0px;padding:3px 10px 3px 10px;background-color:#17AFC3;border-radius:4px 4px 4px 4px;}.elementor-255 .elementor-element.elementor-element-dc8b0cd.ha-has-bg-overlay > .elementor-widget-container:before{transition:background 0.3s;}.elementor-255 .elementor-element.elementor-element-9802d0e .elementor-field-group{margin-bottom:10px;}.elementor-255 .elementor-element.elementor-element-9802d0e .elementor-form-fields-wrapper{margin-bottom:-10px;}.elementor-255 .elementor-element.elementor-element-9802d0e .elementor-field-group > a{color:#17AFC3;}.elementor-255 .elementor-element.elementor-element-9802d0e .elementor-field-group > a:hover{color:#E2498A;}body .elementor-255 .elementor-element.elementor-element-9802d0e .elementor-field-group > label{padding-bottom:0px;}.elementor-255 .elementor-element.elementor-element-9802d0e .elementor-form-fields-wrapper label{color:#000000;font-weight:600;}.elementor-255 .elementor-element.elementor-element-9802d0e .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#E7F0FE;border-width:0px 0px 0px 0px;}.elementor-255 .elementor-element.elementor-element-9802d0e .elementor-field-group .elementor-select-wrapper select{background-color:#E7F0FE;border-width:0px 0px 0px 0px;}.elementor-255 .elementor-element.elementor-element-9802d0e .elementor-button{background-color:#17AFC3;}@media(min-width:768px){.elementor-255 .elementor-element.elementor-element-fd8e0cb{width:54.294%;}.elementor-255 .elementor-element.elementor-element-451d097{width:45.594%;}}@media(max-width:1024px) and (min-width:768px){.elementor-255 .elementor-element.elementor-element-27b7f377{width:100%;}}@media(min-width:1025px){.elementor-255 .elementor-element.elementor-element-9e6c10b > .elementor-background-overlay{background-attachment:fixed;}}@media(max-width:1024px){.elementor-255 .elementor-element.elementor-element-9e6c10b{margin-top:30px;margin-bottom:30px;padding:20px 20px 20px 20px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .elementor-widget-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;text-align:left;}.elementor-255 .elementor-element.elementor-element-58f90a8f{--ha-card-image-width:100%;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-badge{--ha-badge-translate-x:6px;}}@media(max-width:767px){.elementor-255 .elementor-element.elementor-element-27b7f377 > .elementor-element-populated{margin:50px 0px 0px 0px;}.elementor-255 .elementor-element.elementor-element-2de6b7bd .elementor-heading-title{font-size:30px;}.elementor-255 .elementor-element.elementor-element-5b284d0c .elementor-heading-title{font-size:66px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .elementor-widget-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;text-align:left;}.elementor-255 .elementor-element.elementor-element-58f90a8f{--ha-card-image-width:120px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-figure{height:120px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-figure img{padding:15px 15px 15px 15px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-badge{--ha-badge-translate-x:25px;--ha-badge-translate-y:-27px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-body{padding:0px 0px 0px 20px;}.elementor-255 .elementor-element.elementor-element-58f90a8f .ha-card-title{font-size:16px;}.elementor-255 .elementor-element.elementor-element-58f90a8f > .elementor-widget-container{padding:15px 15px 15px 15px;}.elementor-255 .elementor-element.elementor-element-dc8b0cd .elementor-heading-title{font-size:30px;}}

Contenu

Réservé aux membres

illustration webdesign facile
Exclusif

Formation Elementor + accès illimité à toutes les ressources

20€ /mois
Sans engagement

Accéder à la Formation Elementor

Pour voir les étapes, Connectez-vous

Foire aux questions - Arrière-plans Elementor (backgrounds)

Règle numéro 1, avant tout: la lisibilité. Un arrière-plan doit rester… en arrière. Il ne doit donc pas venir contrarier le contenu en étant trop imposant par rapport à l’élément placé en avant.

Attention surtout aux textes. Si vous pensez mettre un arrière-plan derrière vos textes, attention à la compatibilité des couleurs, assurez-vous que le texte soit toujours très clairement visible. Privilégiez donc des couleurs de fond très contrastées avec le texte. Pour un fond clair, utilisez une police de couleur foncée. Pour un fond de couleur foncée, utilisez une couleur claire pour les textes.

Pour les arrière-plans couleur, vous pouvez choisir l’une des couleurs de votre charte graphique et y appliquer un ton plus clair ou plus foncé, dans les mêmes nuances.

Essayez de répéter cette même couleur d’arrière-plan dans différentes sections/ pages afin de ne pas avoir trop de tons différents. La couleur des arrière-plans est aussi une couleur à intégrer à la charte graphique afin de s’assurer de la répéter au fil des pages du site web.

Enfin, évitez de choisir une couleur d’arrière-plan complémentaire au contenu. Exemple: pour un texte bleu, évitez l’usage du orange en fond.

Il existe plusieurs types d’arrière-plans, Elementor permet de choisir entre:

  • un arrière plan de couleur unie
  • un arrière plan en dégradé de couleurs
  • un arrière plan en image
  • un arrière plan “slide”, images qui défilent automatiquement
  • un arrière plan vidéo