Ce n’est un secret pour personne qu’Elementor est l’un des meilleurs constructeurs de pages de la communauté WordPress aujourd’hui. Et ce n’est plus seulement un constructeur de pages. Elementor a tellement évolué que vous pouvez concevoir des sites Web entièrement fonctionnels même avec un thème WordPress de base gratuit sans écrire une seule ligne de code !
Alors qu’Elementor offre de nombreuses options et capacités de personnalisation, nous passons souvent à côté des petits détails et des parties du plugin qui peuvent avoir un impact important sur le processus de conception d’un site Web.
Concevoir des pages Web avec Elementor est déjà rapide et facile, mais si vous souhaitez accélérer le processus de conception, vous êtes au bon endroit. Dans cet article, vous apprendrez comment accélérer le processus de conception avec Elementor en utilisant pleinement l’éditeur avec des outils tiers.
Commencez avec des modèles prédéfinis
Les modèles prédéfinis peuvent accélérer le développement de votre projet. Concevoir de nouvelles pages à partir de zéro prend du temps et, le plus souvent, vous perdez ce temps tout en ajustant constamment la mise en page et les styles de la page. C’est exactement là que les modèles sont utiles. La bibliothèque de modèles d’Elementor est une excellente ressource pour accélérer le processus de conception. Même si vous n’utilisez pas de modèle prédéfini, vous pouvez toujours vous inspirer de la bibliothèque de modèles. Les modèles peuvent être facilement importés directement sur la page en un seul clic.
Les modèles Elementor peuvent être divisés en deux parties. Tout d’abord, lorsque vous souhaitez importer une page prédéfinie de haut en bas, par exemple, vous pouvez importer une page complète (comme une page À propos ou Contact) avec tout son contenu. La deuxième option est si vous souhaitez simplement importer une section ou un bloc de la conception. Vous pouvez le faire si, par exemple, vous aimez l’une des sections de services, hero, contactez-nous ou abonnez-vous à des sections.
De merveilleuses collections de modèles gratuits et premium sont facilement disponibles sur le Web.
Marché d’Envato
Le marché Envato est probablement le marché le plus populaire non seulement pour les modèles Elementor, mais aussi pour les thèmes et plugins WordPress.
Monstre modèle
TemplateMonster est un autre fournisseur d’actifs de modèles de bonne qualité, ils ont également des modèles gratuits.
Bibliothèque de modèles Elementor
Bibliothèque de modèles Elementor – Est un entrepôt de modèles natif pour Elementor, de nouveaux modèles gratuits et premium apparaissent très souvent.
Utiliser les touches de raccourci
Si vous travaillez avec Elementor uniquement avec votre souris, alors arrêtez ! Passez 10 minutes à apprendre les shortcodes, ce qui vous fera gagner beaucoup de temps et accélérera le processus de conception de votre site Web. Outre les plus simples comme le copier-coller, vous pouvez également utiliser des raccourcis personnalisés plus avancés. Ils peuvent être extrêmement utiles, surtout si vous souhaitez naviguer entre le panneau et le mode aperçu, ou basculer vers l’édition mobile.
Voici une liste de raccourcis qui peuvent sérieusement augmenter la vitesse de conception de votre site Web :
Actions
annuler | Ctrl / Cmd + Z | Annuler toute modification apportée à la page |
Refaire | Ctrl / Cmd + Maj + Z | Refaire toute modification apportée sur la page |
Copie | Ctrl / Cmd + C | Copier une section, une colonne ou un widget |
Pâte | Ctrl / Cmd + V | Coller une section, une colonne ou un widget |
Coller le style | Ctrl / Cmd + Maj + V | Coller le style d’une section, d’une colonne ou d’un widget |
Effacer | Effacer | Supprimer une section/colonne/widget qui est modifié |
Dupliquer | Ctrl / Cmd + D | Dupliquer une section/colonne/widget qui est édité |
sauvegarder | Ctrl / Cmd + S | Enregistrez votre page dans l’historique des révisions |
Aller à
Panneau / Aperçu | Ctrl / Cmd + P | Basculer entre le panneau et la vue d’aperçu |
Édition mobile | Ctrl / Cmd + Maj + M | Basculer entre les vues pour ordinateur de bureau, tablette et mobile |
Histoire | Ctrl / Cmd + Maj + H | Aller au panneau d’historique |
Navigateur | Ctrl / Cmd + I | Ouvre le navigateur |
Bibliothèque de modèles | Ctrl / Cmd + Maj + L | Ouvre notre bibliothèque de modèles modale |
Raccourcis clavier | Ctrl / Cmd + ? | Ouvre la fenêtre d’aide sur les raccourcis clavier |
Quitter | ESC | Ouvre les paramètres et passe à Quitter le tableau de bord |
CSS personnalisé pour les pages
Saviez-vous que vous pouvez avoir un CSS personnalisé pour chaque page ? Oui, mais notez que cette fonctionnalité n’est incluse que dans la version Pro d’Elementor. Pour contourner ce problème, je vais vous montrer comment inclure un CSS personnalisé pour chaque page. Cette astuce vous fera économiser de l’argent si vous vouliez la version Pro juste pour ajouter de petites personnalisations au niveau de la page.
Pour ce faire, il vous suffit d’utiliser le widget HTML et ce morceau de code à l’intérieur :
<style> /*Your custom CSS code here*/ .elementor p { color: red; font-size: 25px; text-decoration: underline; line-height: 40px; } </style>
Jetez un œil à cet exemple :
Barre de recherche du Finder Elementor
Très souvent, lorsque vous travaillez sur la conception de pages, vous souhaitez accéder à d’autres pages, paramètres, page de vente ou n’importe où ailleurs, et cela peut prendre beaucoup de temps si vous : enregistrez la page > revenez à votre tableau de bord > ouvrez des pages > recherchez la page que vous souhaitez ouvrir. Cela peut vous faire perdre beaucoup de temps et d’énergie si vous avez dû le faire maintes et maintes fois.
Heureusement, Elementor dispose d’une solution intégrée pour rationaliser et accélérer le processus de conception. Au lieu de traverser tous ces problèmes, vous pouvez simplement utiliser Elementor Finder. Vous pouvez accéder directement à n’importe quel paramètre, modèle, page ou partie de thème en effectuant une recherche dans la barre de recherche. Le Finder est accessible en cliquant sur les touches Cmd/Ctrl + E n’importe où dans le tableau de bord WordPress. Regardez cette vidéo pour voir tout ce que vous pouvez faire avec le Finder.
Utiliser le navigateur
Navigator est une fenêtre d’arborescence de navigation qui permet d’accéder facilement à chaque élément du générateur de page. Cette petite fenêtre vous permet de naviguer à travers les éléments et de glisser-déposer les widgets facilement.
Navigator est particulièrement utile pour les pages longues ou les pages avec une conception multicouche complexe et pour les éléments combinant le Z-Index, moins une marge, une position absolue, etc. Il vous permet d’accéder aux poignées d’éléments qui peuvent être positionnées derrière d’autres éléments.
Vous pouvez accéder à Navigator de l’une des trois manières simples suivantes :
- Cliquez avec le bouton droit sur n’importe quel élément, puis cliquez sur Navigateur. Cela vous redirigera automatiquement vers l’élément spécifique dans l’arborescence de navigation.
- Cliquez sur le bouton éléments dans le pied de page du panneau.
- Utilisez le raccourci clavier Cmd/Ctrl + I.
Regardez cette vidéo pour la voir en action :
Navigator a également d’autres fonctions, telles que le nommage des widgets, la réduction et l’expansion des widgets, le flottement ou l’ancrage du panneau et l’affichage ou le masquage des widgets. Vous pouvez voir une critique complète dans leur Documentation.
Définissez votre palette de couleurs
En règle générale, lorsque nous concevons un site Web, nous suivons un modèle de conception créé par le concepteur. Ce motif contient généralement une combinaison de couleurs répétées sur l’ensemble du site. Ce sont des couleurs de marque qui devraient rester inchangées. Cela signifie que chaque fois que nous ajoutons un nouveau widget sur la page, nous devons copier-coller le code de couleur ou nous devons nous rappeler quel est le code de couleur pour l’appliquer dans les paramètres du widget. Faire cela peut prendre du temps. Heureusement, Elementor a une solution pour nous.
Vous pouvez définir les couleurs de votre marque dans les paramètres du sélecteur de couleurs et les réutiliser chaque fois que vous accédez aux options de couleur pour le style des widgets. Choisissez simplement une palette prédéfinie ou définissez vos propres couleurs personnalisées pour gagner du temps lors de la conception.
Regarde cette vidéo:
Styles et modèles de widgets prédéfinis et réutilisables
Elementor est l’un des meilleurs constructeurs de pages, mais avez-vous pensé aux boutons par défaut et laids ? Onglets ? des menus ? Ou tout autre widget ? Ces widgets par défaut semblent avoir été conçus il y a plusieurs années, ou peut-être vouliez-vous réutiliser le widget que vous avez stylisé dans le projet A dans le projet B ?
Actuellement, vous ne pouvez pas enregistrer et réutiliser les styles de widget pour de futurs projets avec Elementor. Heureusement, la gratuité WunderWP plugin offre quelques façons de résoudre ce problème.
Tout d’abord, WunderWP inclut un certain nombre de styles de widgets prédéfinis à votre disposition. Des styles prêts à l’emploi pour les en-têtes, les galeries, les boutons, les séparateurs, les carrousels, les formulaires, les tableaux de prix, etc. sont disponibles en un clic. Faites simplement glisser un widget Elementor sur votre page, sélectionnez un style de widget WunderWP prêt à l’emploi et commencez à ajouter du contenu.
Avec WunderWP, vous pouvez également facilement enregistrer et réutiliser vos propres styles de widget dans Elementor. C’est simple : stylisez un widget, enregistrez-le sur le WunderWP Cloud (qui est gratuit !) et utilisez-le plus tard pour des widgets similaires. Cela fonctionne à la fois pour les widgets simples et compliqués. Par exemple, vous pouvez l’utiliser pour enregistrer un widget d’en-tête qui contient des valeurs typographiques différentes ou pour un widget d’image avec des ombres portées personnalisées.
Il en va de même pour les modèles – vous pouvez enregistrer des modèles complets ou partiels que vous créez sur le WunderWP Cloud. Le modèle sera là, donc lorsque vous serez prêt, vous pourrez facilement l’insérer dans une page ou un site Web. De cette façon, vous n’aurez besoin de le construire qu’une seule fois, ce qui vous fera gagner beaucoup de temps.
Ou vous pouvez profiter des modèles de contenu prêts à l’emploi de WunderWP À l’heure actuelle, il existe plus de 50 modèles de section prêts à l’emploi – tels que contact, appel à l’action, en-tête, pied de page, services, à propos, équipe, services, compte à rebours et bien plus encore – pour une variété de fins.
Emballer
Jusqu’à présent, sans aucun doute, Elementor est l’un des meilleurs constructeurs de pages WordPress. Presque chaque jour, de nouveaux outils et fonctionnalités sont ajoutés pour rationaliser et accélérer le processus de conception et accélérer le délai de livraison du projet.
Selon vous, quelle astuce est la plus utile et laquelle ne connaissiez-vous pas auparavant ? Peut-être savez-vous aussi quelque chose qui n’est pas mentionné ici ? Merci de le partager avec les autres.