FAQ > Design

Header

Images d'accueil :

Dimensions des images selon les différents points de rupture

Les 3 points de rupture sont :

Desktop : 1025px et +
Tablet : 768px à 1024px
Mobile : 767px et –

Il faut donc idéalement créer 3 images. Pour chacune d’elle :

Faire attention de ne pas trop mettre d’information près des contours afin d’optimiser la visibilité de l’information importante sur plusieurs types d’écran et résolutions.
- Pour l’image de dimension 1920×980, le sujet devrait être visible dans une zone centrée à l’intérieur de 980px.
- Pour l’image de dimension 1024×768, le sujet devrait être visible dans une zone centrée à l’intérieur de 720×720.
- Pour l’image de dimension 768×768, le sujet devrait être visible dans une zone centrée à l’intérieur de 320px.
Laisser un espace considérable pour pouvoir intégrer le slogan/accroche par dessus.

S’assurer en premier lieu que la case à cocher Classes CSS soit cochée dans les Options d’écran, onglet disponible dans le coin supérieur droit de l’interface de WordPress.
Ouvrir l’item de menu que vous souhaitez cacher dans l’une ou l’autre des résolutions.
Dans la case Classes CSS (facultatives), écrire les classes (séparées par un espace) de tous les points de rupture pour lesquels vous désirez cacher cet item de menu :

Classe Mobile [0, 768px[ Tablette [768px, 1024px] Desktop [1025px, [

hidden-mobile Hidden Visible Visible

hidden-tablet Visible Hidden Visible

hidden-desktop Visible Visible Hidden
- Pour cacher un item pour le menu mobile qui s’affiche dans les résolutions [0, 1024px], vous devez écrire :
```
hidden-mobile hidden-tablet
```
- Pour cacher un item pour le menu desktop qui s’affiche dans les résolutions [1025px, [, vous devez écrire :
```
hidden-desktop
```
Cliquer sur le bouton Enregistrer le menu

Classe	Mobile [0, 768px[	Tablette [768px, 1024px]	Desktop [1025px, [
`hidden-mobile`	Hidden	Visible	Visible
`hidden-tablet`	Visible	Hidden	Visible
`hidden-desktop`	Visible	Visible	Hidden

Dans Pages > Elementor > Réglages du site > CSS personnalisé >

Vous devriez y trouver le code ci-dessous.
- S’il n’est pas présent, l’ajouter.
- S’il est différent, l’ajuster. Les !important doivent être présents.

				
					/* Cacher du contenu selon le point de rupture */

@media (max-width:767px) {
    .hidden-mobile {
        display:none !important;
    }
}
@media (min-width:768px) and (max-width:1024px) {
    .hidden-tablet {
        display:none !important;
    }
}
@media (min-width:1025px) {
    .hidden-desktop {
        display:none !important;
    }
}

Menu fixe :

Code à ajouter pour que la section ciblée par un ancre ne s'affiche pas sous le menu fixe

Dans Pages > Elementor > Réglages du site > CSS personnalisé >

Copier le code CSS ci-dessous dans son entièreté :

				
					/* 
-- Menu fixe et ancres 
*/

@media (max-width:767px) { /* Mobile */
    #content :target {
        scroll-margin-top: [_CHIFFRE_] px; /* Hauteur du menu */
    }
}
@media (min-width:768px) and (max-width:1024px) { /* Tablet */
    #content :target {
        scroll-margin-top: [_CHIFFRE_] px; /* Hauteur du menu */
    }
}
@media (min-width:1025px) { /* Desktop */
    #content :target {
        scroll-margin-top: [_CHIFFRE_] px; /* Hauteur du menu */
    }
}

Important Remplacer le code [_CHIFFRE_] par la hauteur exacte en pixels du menu fixe dans les différents points de rupture.

Les sections, sur lesquelles vous mettez un ancre, ne doivent pas comporter un débordement masqué (overflow: hidden) (Widget Section > Onglet Mise en page > Débordement).

Footer

Footer :

Intégrer un bouton Retour en haut de page

Dans Elementor > Code personnalisé >

Cliquer sur le bouton Ajouter
- Titre : Lien Back-to-Top
- Emplacement : </body>
- Priorité : 10
- Copier et coller le code suivant :

				
					<!-- Bouton Retour en haut de page - v.2024-10-07 -->
<script>
document.body.id = 'top';
var btnBackToTop = document.getElementById('back-to-top');
if (btnBackToTop) {
	var elText = btnBackToTop.querySelector('.elementor-button-text');
	if (elText) {
		elText.classList.add('screen-reader-text');
	}
	window.addEventListener('scroll', function() {
		var scrolled = window.pageYOffset;
		var coords = document.documentElement.clientHeight * 0.75;
		if (scrolled > coords) {
			btnBackToTop.classList.add('back-to-top--show');
		}
		if (scrolled < coords) {
			btnBackToTop.classList.remove('back-to-top--show');
		}
	});
}
</script>

- Cliquer sur le bouton Publier
Dans la fenêtre qui s’affiche :
- La condition Dans tout le site doit être indiqué
- Cliquer sur le bouton Save & Close

Dans Modèles > Modèles enregistrés > Pied de page >

Ouvrir le pied de page utilisé par le site web dans Elementor.

Ajouter un nouveau conteneur (mise en page Flexbox)
- Renommer ce conteneur : Back-to-Top
Ajouter dans ce conteneur un widget Bouton
- Renommer ce bouton : # * Bouton
- Dans l’onglet Contenu :
  - Texte : Retour en haut de page
  - Lien : #top
  - Option du lien > Attributs personnalisés : title|Retour en haut de page
  - Icône : Choisir une flèche vers le haut
  - ID du bouton : back-to-top
- Dans l’onglet Style :
  - Choisir les couleurs pour l’état initial et au survol
  - Marge interne : 6 pixels partout
- Dans l’onglet Avancé > Mise en page :
  - Position : Fixe
  - Orientation horizontale : Vers la droite
  - Décalage : 30 pixels en desktop, 20 pixels en mobile (ou les marges que vous avez mis sur chaque point de rupture)
  - Orientation verticale: Vers le bas
  - Décalage : 30 pixels en desktop, 20 pixels en mobile (ou les marges que vous avez mis sur chaque point de rupture)
  - Z-Index : 95 (assez élevé, mais inférieur au header s’il est fixe en haut de page)
- Dans l’onglet Avancé > CSS personnalisé :
  - Copier et coller le code suivant :

				
					selector a.back-to-top--show {
    display:flex;
    justify-content:center;
    align-items:center;
}
selector a {
    display:none;
    width:36px;
    height:36px;
    line-height:1 !important;
}
selector svg {
    max-width:100%;
}