OCOPO™ > Elementor > Elementor : header qui se cassent, les solutions [Résolu]

Elementor : header qui se cassent, les solutions [Résolu]

elementor header cassé solution

Écrit par :

Adrien Bur

Intro

Votre header créé avec Elementor est cassé ? Voici mes meilleurs fix.

Si vous utilisez Elementor pour créer votre site, dont votre header et votre footer, il vous est peut-être déjà arrivé de constater que, de temps en temps, leur mise en page se casse. Un peu comme ceci :

elementor header cassé sur mobile
Un menu Elementor cassé
image 1
Le même menu, mais vu ordinateur

C’est un bug assez récurent, et, Dieu merci, facile à corriger avec les deux solutions que je m’apprête à vous montrer.

La cause du problème

La cause du problème est toute simple : c’est le blocage de contenu mixte par votre navigateur qui va « casser » la mise en page de certains éléments de votre site.

Le contenu mixte survient lorsqu’une page web sécurisée (HTTPS) contient des éléments non sécurisés (HTTP).

Tout simplement !
blocage-de-contenu-mixte
Firefox m’indique que des éléments ont été bloqués.

Si nous cliquons sur « Désactiver la protection pour l’instant », le site s’affiche correctement.

Screenshot 21

Pour faire simple, Elementor va desservir certaines ressources en HTTP (pour une raison quelconque) et non en HTTPS. Votre navigateur, dans un souci de sécurité, ne chargera donc pas les ressources qui ne sont pas en HTTPS.

Solution 1 (temporaire) – Régénérer les ressources via Elementor

Pour corriger ce souci, du moins temporairement, il suffit de régénérer les ressources et fichiers via les paramètres d’Elementor, comme suit :

1. Se rendre dans l’onglet « Outils » d’Elementor.

image 2

2. Puis cliquer sur « Régénérer les fichiers et les données ».

image 3

Cette astuce, bien qu’elle fonctionne, ne règlera pas le souci une bonne fois pour toute. Vos mises en page se verront à nouveau cassées dans quelque temps.

Donc voici la solution définitive.

Solution 2 (définitive) – Forcer la redirection HTTPS

Pour palier à ce souci pour toujours, il suffit de forcer la redirection HTTPS sur votre site. Pour ce faire, c’est très simple, et ça se tient en une petite ligne dans votre fichier .htaccess (accessible via votre FTP) :

RewriteEngine On RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Et voilà ! C’est terminé. Vous n’aurez plus ce genre de soucis sur vos sites construits avec Elementor ! 😉

Ce paramètre figure par défaut dans OCOPO™, votre WordPress déjà configuré et optimisé.

L’article vous a plu ? Partagez-le :

Twitter (X)
LinkedIn
Facebook
Pinterest

Cet article a été rédigé par

Adrien
Creator of OCOPO™, the very first fully configured and optimized WordPress installation.