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 !

Bien qu'Elementor offre de nombreuses options et capacités de personnalisation, nous manquons souvent de détails et de parties plus petits du plug-in 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 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 des sections services, héros, contactez-nous ou abonnez-vous.

De merveilleuses collections de modèles gratuits et premium sont facilement disponibles sur le Web.

Marché d'Envato

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

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

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, arrêtez-vous ! 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 raccourcis 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 passer à l'édition mobile.

Voici une liste de raccourcis qui peuvent sérieusement accélérer la conception de votre site Web :

Actions

annuler Ctrl / Cmd + Z Annuler toute modification apportée à la page
Refaire Ctrl / Cmd + Maj + Z Rétablir tout changement effectué 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
Style de collage Ctrl / Cmd + Maj + V Coller le style d'une section, d'une colonne ou d'un widget
Supprimer Supprimer Supprimer une section/colonne/widget qui est édité
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 de mobile
Histoire Ctrl / Cmd + Maj + H Accéder 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 modal
Raccourcis clavier Ctrl / Cmd + ? Ouvre la fenêtre d'aide des raccourcis clavier
Quitter ESC Ouvre les paramètres et saute pour 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 uniquement 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 oeil à cet exemple:

Code personnalisé

Barre de recherche Elementor Finder

Très souvent, lorsque vous travaillez sur la conception de pages, vous souhaitez accéder à d'autres pages, paramètres, une page de vente ou n'importe où 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 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 passer par tous ces problèmes, vous pouvez simplement utiliser le 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 Finder.

Utiliser le navigateur

Le navigateur est une fenêtre d'arborescence de navigation qui permet d'accéder facilement à chaque élément du générateur de pages. Cette petite fenêtre vous permet de naviguer dans les éléments et de faire glisser et déposer facilement les widgets.

Navigator est particulièrement utile pour les longues pages 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 à des 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 3 manières simples :

  1. 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.
  2. Cliquez sur le bouton des éléments dans le pied de page du panneau.
  3. Utilisez le raccourci clavier Cmd/Ctrl + I.

Jetez un oeil à cette vidéo pour le voir en action:

Navigator a également d'autres fonctions, telles que les widgets de nommage, 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

Généralement, 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 les paramètres 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.

Regardez 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 ? 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.

Préréglages WunderWP

Avec WunderWP, vous pouvez également facilement enregistrer et réutiliser vos propres styles de widgets dans Elementor. C'est simple : stylisez un widget, enregistrez-le sur le Cloud WunderWP (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 contenant différentes valeurs typographiques ou pour un widget d'image avec des ombres portées personnalisées.

Styles personnalisés WunderWP

Il en va de même pour les modèles – vous pouvez enregistrer les modèles complets ou partiels que vous créez dans 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.

Modèle personnalisé WunderWP

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.

Modèle prédéfini WunderWP

Emballer

Jusqu'à présent, Elementor est sans aucun doute 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 des projets.

Selon vous, quel conseil est le plus utile et lequel vous ne connaissiez pas auparavant ? Peut-être savez-vous aussi quelque chose qui n'est pas mentionné ici? S'il vous plaît, partagez-le avec d'autres.