Ce n’est un secret pour personne qu’Elementor est l’un des meilleurs créateurs de pages de la communauté WordPress aujourd’hui. Et ce n’est plus seulement un constructeur de page. Elementor a tellement évolué que vous pouvez concevoir des sites Web pleinement opérationnels même avec un thème WordPress gratuit et de base sans écrire une seule ligne de code!
Bien qu’Elementor offre de nombreuses options et capacités de personnalisation, nous manquons souvent les petits détails et les parties du plugin qui peuvent avoir un impact important sur le processus de conception d’un site Web.
La conception de 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 Premade
Les modèles prédéfinis peuvent accélérer le développement de votre projet. La conception 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 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 utiliser la bibliothèque de modèles comme source d’inspiration. 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 premade 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 du dessin. Vous pouvez le faire si, par exemple, vous aimez l’une des sections de services, héros, contactez-nous ou abonnez-vous.
De merveilleuses collections gratuites et premium de modèles sont facilement disponibles sur le Web.
Envato Market
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 des actifs de modèle 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 avec juste votre souris, alors arrêtez! Passez 10 minutes à apprendre les codes courts, ce qui vous fera gagner une tonne de temps et accélérer le processus de conception de votre site Web. Outre les 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 d’aperçu, ou passer à l’édition mobile.
Voici une liste de raccourcis qui peuvent considérablement accélérer la conception de votre site Web:
Actions
| annuler | Ctrl / Cmd + Z | Annuler toute modification effectuée sur la page |
| Refaire | Ctrl / Cmd + Maj + Z | Refaire toute modification effectué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 |
| Supprimer | Supprimer | Supprimer une section / colonne / widget 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 de bureau, de tablette et mobile |
| Histoire | Ctrl / Cmd + Maj + H | Accédez au panneau historique |
| Navigateur | Ctrl / Cmd + I | Ouvre le navigateur |
| Bibliothèque de modèles | Ctrl / Cmd + Maj + L | Ouvre notre bibliothèque de modèles modal |
| Raccourcis clavier | Ctrl / Cmd +? | Ouvre la fenêtre d’aide des raccourcis clavier |
| Quitter | ESC | Ouvre les paramètres et passe à Quitter dans 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 du 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:
Jetez un œil à cet exemple:
Barre de recherche Elementor Finder
Très souvent, lorsque vous travaillez sur la conception de pages, vous souhaitez passer à d’autres pages, paramètres, à une page de vente ou ailleurs, et cela peut prendre du temps si vous: enregistrez la page> revenez à votre tableau de bord> ouvrez les pages > recherchez la page que vous souhaitez ouvrir. Cela peut gaspiller 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 passer par tous ces problèmes, vous pouvez simplement utiliser le Finder Elementor. 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.
Navigator est une fenêtre d’arborescence de navigation qui permet d’accéder facilement à tous les éléments du générateur de pages. Cette petite fenêtre vous permet de naviguer à travers les éléments et de glisser-déposer facilement les widgets.
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, la 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 trois manières simples:
- Cliquez avec le bouton droit sur un é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 des éléments dans le pied de page du panneau.
- Utilisez le raccourci clavier Cmd / Ctrl + I.
Jetez un œil à cette vidéo pour la voir en action:
Navigator a également d’autres fonctions, telles que les widgets de dénomination, les widgets de réduction et d’expansion, le flottement ou l’ancrage du panneau et l’affichage ou le masquage des widgets. Vous pouvez voir un examen complet 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 couleur ou nous devons nous rappeler quel est le code couleur pour l’appliquer dans le paramètre du widget. 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 moches? Onglets? 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, le libre WunderWP Le plugin propose plusieurs façons de résoudre ce problème.
Tout d’abord, WunderWP comprend 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 dans le cloud WunderWP (qui est gratuit!) Et utilisez-le plus tard pour des widgets similaires. Cela fonctionne 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 dans le cloud WunderWP. Le modèle sera là. 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 créer qu’une seule fois, ce qui vous fera gagner beaucoup de temps.
Ou vous pouvez profiter des modèles de contenu readymade de WunderWP. À l’heure actuelle, il existe plus de 50 modèles de section readymade – 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’à ce moment, sans aucun doute, Elementor est l’un des meilleurs créateurs de pages WordPress. Presque tous les jours, de nouveaux outils et fonctionnalités sont ajoutés pour rationaliser et accélérer le processus de conception et accélérer les délais de livraison des projets.
Selon vous, quelle astuce est la plus utile et laquelle vous ne connaissiez pas auparavant? Peut-être savez-vous également quelque chose qui n’est pas mentionné ici? Veuillez le partager avec les autres.
