LES TIPS TECHNIQUES
Astuce(s) liées aux fichiers et aux performances d’Elementor
Ajuster la mémoire allouer à Elementor
Par défaut, la mémoire allouée à Elementor est assez limitée , et ce même si vous avez un serveur avec une grande quantité de mémoire disponible. Plus notre site est conséquent plus la mémoire nécessaire est élevée. En clair, plus vous créez de contenu, installer de plugins, ajouter des widgets à Elementor , plus l’éditeur pourra demander de ressources.
Il existe une façon de faire assez simple mais qui nécessite d’avoir accès a votre espace d’hébergement, et plus précisément votre fichier wp-config. Pour rappel, il est possible de le faire via FTP ou via le gestionnaire de fichier de votre cPanel.
- Ouvrir le fichier wp-config;
- Sur la ligne juste avant la mention “Ne rien toucher a partir de cette ligne” insères le contenu suivant :
define( 'WP_MEMORY_LIMIT', '512M' );
Si besoin il est possible d’indiquer une valeur inférieur ou supérieur a 512Mo (256M, 512M, 1024M, 2048M, etc …) , en fonction de si notre serveur est limité ou que l’on a besoin de beaucoup plus de mémoire. Évites d’indiquer moins que 256M.
LES TIPS DE STYLES
Quelques astuces pour accélérer la création du design de ton site
Copier coller des Éléments
Il est possible de copier-coller les éléments créés dans Elementor (les widgets , les colonnes , les sections) pour les répéter rapidement. Il est possible de le faire sur la même page ou d’une page A vers une page B.
- Copier / coller : copie un élément avec “Copier” et places le à l’endroit ou est ton curseur avec “Collé”; À noter que les restrictions habituelles s’appliquent , on ne peut pas coller de Section dans une colonne , on ne peut pas coller de Section interne dans une autre section interne, etc…
- Dupliquer : Créer instantanément une copie de l’éléments dupliqué en dessous (ou après) ledit élément. Il reste évidemment déplaçable ensuite;
- Coller le style : Même début que le copier coller (on copie l’élément avec un clic droit > Copier), mais s’utilise sur un autre widget identique pour lui appliquer uniquement le style. Par exemple : si tu crées 5 images auxquelles tu veux appliquer le même style, tu peux designer la première et répliquer le style sur les 4 autres en quelques clics.
Ajouter des formes de séparations
Il existe plusieurs façons d’ajouter des formes de séparations à Elementor.
- Utiliser les widgets de séparation intégrés : Elementor propose des widgets de séparation tels que ligne, espace et saut de page qui peuvent être utilisés pour ajouter des séparations entre les éléments de votre page.
- Utiliser des images de formes : Vous pouvez télécharger une image de forme (comme une ligne, un cercle, etc.) et l’utiliser comme séparation en la plaçant entre les éléments de votre page.
- Utiliser les bordures : Vous pouvez utiliser les propriétés de bordure pour ajouter des séparations entre les éléments de votre page.
- Utiliser des plugins tiers : Il existe des plugins qui peuvent ajouter des formes de séparation supplémentaires à Elementor.
Prenons l’exemple de la première option : il suffit de sélectionner le widget “Séparateur” et de le placer sous (ou au-dessus) de n’importe quelle bloc / section . Une fois placé, il reste à régler les quelques paramètres visuels pour le personnaliser selon nos envies :
Ajouter des animations de widgets / sections
La aussi, plusieurs façons d’ajouter des animations à des widgets et des sections dans Elementor :
Utiliser les animations intégrées : Elementor propose des animations intégrées pour les widgets et les sections, comme l’apparition, l’animation de défilement et l’animation de survol. Vous pouvez les sélectionner dans les options de style de chaque élément. Pour ce faire, la plupart du temps les options se trouvent dans l’onglet “Avancé” et dans “Effet de mouvement“. Certaines animations plus avancées peuvent nécessiter Elementor Pro.
Utiliser les animations CSS : Vous pouvez utiliser des animations CSS personnalisées pour ajouter des animations à vos widgets et sections. Il faut connaitre le CSS pour cela. Pour en savoir un peu plus tu peux te renseigner ici
À noter : Attention avec les animations CSS , elles peuvent vite transformer ton site en “sapin de Noël” (terme utilisé pour désigner un site qui clignote dans tous les sens, avec plein de couleurs et d’effets). Il est conseillé d’utiliser des animations similaires entre même type de blocs pour une harmonie sur la page.
Hauteur en plein écran (proprement ...)
Pour définir la hauteur d’une section d’Elementor en plein écran, voici la procédure à suivre:
- Sélectionnes ta section ou ta section interne (via les 6 petits points)
- Dans l'onglet "Mise en page" sur la gauche , sélectionnes dans la liste déroulante l'option que tu souhaites. Il y' en a deux "Adapté à l'écran" et "Hauteur min". "Adapté à l'écran" est le plus optimisé, mais si tu rencontres des problèmes, essaye de mettre en "Hauteur minimum" à 100vh.
Une section en pleine hauteur vas faire intervenir un alignement que l’on à quasiment pas utilisé depuis le début : l’alignement vertical . Cette fois, on se positionne sur la colonne contenant notre texte dans la section (icône de carré blanc sur fond noir) :
- Sélectionnes ta colonne ou ta section interne (via le carré blanc sur fond / les 6 petits points)
- Dans l'onglet "Mise en page" sur la gauche , sélectionnes dans la liste déroulante "Alignement vertical" l'alignement souhaité (Par défaut | En haut | Milieu | En bas)
La section actuelle est en hauteur “Adapté à l’écran“, elle prends l’intégralité de la hauteur , peut importe le dispositif d’accès (PC, smartphone, tablette , etc…) et l’alignement vertical du contenu est “Milieu“
Ajouter une vidéo en arrière-plan
Tu peux utiliser le widget de section pour ajouter une vidéo en arrière-plan à une section de votre page.
Dans les options de “Style” de la section, vous pouvez ajouter une vidéo en arrière-plan en utilisant l’option “vidéo en arrière-plan” sous l’onglet “Fond”. Il vous suffit de coller le lien de votre vidéo ou de sélectionner une vidéo déjà téléchargée.
Il y’a deux façon d’utiliser les videos en arrière plan : en indiquant directement le lien du service de vidéos (YouTube, Dailymotion, Viméo, etc…) ou en téléchargeant la vidéo et en l’uploadant sur ton site , de la même façon que tu ferais avec une image.
Pour ce faire, rends toi dans le menu Médias du dashboard WordPress et cliques sur “Ajouter un média” pour ajouter ta vidéo (format vidéo, mp4 et autres). Une fois la vidéo uploadée, clique dessus et dans les informations qui s’ouvrent , cherche la valeur “Lien vers le média“. Récupères alors le lien et colle le dans la zone de saisie de la vidéo en arrière plan.
Ajuster le Z-index
Ex : un z-index de 1 sera au dessus de tous les éléments ayant un z-index de 0 mais en dessous de tout les autres. Lorsque l’on veut mettre un élément assurément au dessus de tous les autres on peut mettre une valeur à 9999 (ou autre grande valeur, celle ci étant la plus souvent rencontrée) La règle pour définir par défaut quel élément sera au dessus de l’autre est simple , elle suit l’ordre d’ajout des éléments. Dans l’exemple ci dessous, l’icône sur fond bleu foncé à été placée après celle avec fond clair. Elle va naturellement se positionner au dessus (comme un empilage classique).
L’icône sur fond vert (numéro 3) à été placée après les deux autres. Elle va naturellement se positionner au dessus (comme un empilage classique). On va donc avoir 3 au premier plan / 2 au second plan / 1 a l’arrière plan
L’icône sur fond bleu foncé et celle sur fond vert ont été placées après celle avec fond clair. Mais avec sa valeur de z-index indiquée à 0 et celle de l’icone sur fond bleu clair a 9999, elle va quand même se placer derrière l’autre.
L’icône verte quand a elle se voit attribuer un z-index de -1 la plaçant derrière la page en elle-meme.
L’icône 1 à été placée après celle avec fond clair (icône 2) et l’icône 3 a été placée après les 2 autres . Comme l’icone 1 à toujours sa valeur de z-index de 9999 , elle va toujours se placer devant la 2 et la 3 . Il faudrait appliquer un z-index de 10000 pour passer devant l’icône 1.
Masques elementor
Le principe de masque permet de créer des formes dans les image d’un site. En partant d’une image au format “classiques” (portraire / paysage) , on peut ensuite lui donner des formes plus stylisée.
Il existe 4-5 formes prédéfinies, mais la dernière possibilité reste de fournir une forme personnalisée pour le masque. Pour l’activer, sélectionnes ton image , va ensuite dans Avancé > Masque et tu sélectionnes la forme de ton choix.
Comme une image vaut 1000 mots , des exemples ci dessous :
LES TIPS DE FONCTIONNALITÉS
Quelques astuces sur les fonctionnalités “annexes” d’Elementor , et sur les possibilités de les étendres
Utiliser le navigateur
Par défaut, la mémoire allouée à Elementor est assez limitée , et ce même si vous avez un serveur avec une grande quantité de mémoire disponible. Plus notre site est conséquent plus la mémoire nécessaire est élevée. En clair, plus vous créez de contenu, installez de plugins, ajouter des widgets à Elementor , plus l’éditeur pourra demander de ressources.
Raccourcis clavier
Tout comme sous n’importe quel système, il existe sous Elementor des raccourcis clavier permettant d’effectuer rapidement des actions d’édition. Il ne sont pas indispensables puisqu’il est possible de tout faire à la souris, mais ils peuvent améliorer la vitesses de réalisation de certaines tâches.
Attention cependant, la prise en compte des raccourcis est parfois capricieuse et ça peut tout simplement ne pas fonctionner.
Ctrl + C
Le classique ! Permet de copier rapidement un widget/colonne/section dans le presse papier pour le coller ensuite ou l'on souhaite.
Ctrl + Maj + C
Variante du copier classique, il permet de ne copier QUE le style du widget/colonne/section sélectionné.
En clair, si vous avez plusieurs widget a créer du même style mais pas avec le même contenu , c'est l'option rêvée !
Ctrl + V
L'inséparable du classique copier, permet de coller le contenu du presse papier à l'endroit ou la commande est exécuté.
En règle général dans Elementor, le contenu est collé après le contenu sur lequel tu effectues le "collage".
Ctrl + D
Permet de dupliquer instantanément le widget/colonne/section sélectionné.
Utile lorsqu'on veut créer d'autres colonnes pour construire en vertical ou lorsque l'on souhaite plusieurs widgets identiques (comme des boutons listant des raccourcis clavier par exemple ...)
Ctrl + F5
Pas un raccourci clavier Elementor mais pour autant indispensable pendant la création des pages !
Sous Windows permet de recharger la page en vidant le cache navigateur
Plugins tiers pour elementor
Enfin, la force d’Elementor réside dans l’existence de plusieurs dizaines de plugins tiers (d’autres entreprises / développeurs) qui viennent augmenter grandement les possibilités de création.
- Création de header / footer
- Création de modèles réutilisables (articles, pages, etc ...)
- Ajout de dizaines de widgets (cartes, effets, blocs, etc ...)
- Intégration de nombreux plugins non-Elementor via des widgets Elementor (formulaires, tableaux, etc ...)
Tu en a surement utilisé plusieurs pour ton projet de site WordPress (widget / headers) , sans forcément faire attention. Ces plugins permettent réellement de faciliter des créations plus “professionnels” et sans nécessité de payer pour une license Elementor Pro.
