Conseils pour accélérer le processus de conception avec l’élément
Ce n’est plus un secret que elementor est maintenant l’un des meilleurs constructeurs de pages de la communauté WordPress. Ce n’est plus seulement un générateur de page. Elementor se développe si rapidement que vous pouvez même utiliser le thème WordPress de base gratuit pour concevoir des sites Web entièrement fonctionnels sans avoir à écrire une seule ligne de code! Bien que elementor offre un certain nombre d’options et de fonctionnalités personnalisées, nous perdons souvent les détails et les petites parties du plug – in qui peuvent avoir un impact significatif sur le processus de conception du site. La conception de pages Web avec elementor est rapide et facile, mais si vous voulez 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 de l’élément en tirant le meilleur parti de l’éditeur en utilisant des outils tiers.
Les modèles par défaut peuvent accélérer le développement d’un projet en commençant par des modèles prédéfinis. Il faut du temps pour concevoir une nouvelle page à partir de zéro, et la plupart du temps, vous la perdez tout en ajustant constamment la mise en page et le style de la page. C’est là que les modèles sont utiles. La Bibliothèque de modèles d’éléments est une ressource importante pour accélérer le processus de conception. Vous pouvez toujours utiliser la Bibliothèque de modèles comme inspiration, même si vous n’utilisez pas de modèles par défaut. Il est facile d’importer un modèle directement sur la page en un seul clic.
Le modèle d’élément peut être divisé en deux parties. Tout d’abord, par exemple, lorsque vous importez une page par défaut de haut en bas, vous pouvez importer la page entière (comme une page d’information ou de contact) et tout son contenu. La deuxième option est si vous ne voulez importer que des sections ou des blocs du dessin. Par exemple, si vous aimez une partie du service, la partie héros, contactez – nous ou Abonnez – vous, vous pouvez le faire. Une excellente collection de modèles gratuits et avancés est facilement disponible en ligne. Marché envato
Ou envato pourrait être le marché le plus populaire, non seulement pour les modèles d’éléments, mais aussi pour les thèmes WordPress et les plugins.
Monstre modèle Templatemonster est un autre fournisseur de ressources pour des modèles de haute qualité, et il a également des modèles gratuits. Bibliothèque de modèles d’éléments Elementor Template Library: est une archive de modèles natifs d’elementor qui affiche souvent de nouveaux modèles gratuits et avancés. Utilisez les raccourcis clavier si vous n’utilisez l’élément qu’avec la souris, arrêtez! Prenez 10 minutes pour apprendre le Code court, ce qui vous permettra d’économiser beaucoup de temps et d’accélérer le processus de conception du site. En plus des raccourcis simples comme copier et coller, vous pouvez également utiliser des raccourcis personnalisés plus avancés. Ils peuvent être très utiles, surtout si vous voulez naviguer entre le panneau et le mode Aperçu ou passer à l’édition mobile.
Voici une liste de raccourcis qui peuvent considérablement accélérer la conception du site:
Non pris en considération | Ctrl \/ CMD + Z | Annuler toute modification apportée à la page |
Réécriture | Ctrl \/ CMD + Maj + Z | Restaurer tout changement apporté à la page |
Copier | 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 un style | Ctrl \/ CMD + Maj + V | Coller le style d’une section, d’une colonne ou d’un widget |
Supprimer | Supprimer | Supprimer la section \/ colonne \/ Widget modifiée |
Copier | Ctrl \/ CMD + D | Copier les sections \/ colonnes \/ widgets modifiés |
Sauver | Ctrl \/ CMD + s | Enregistrer la page dans l’historique de révision |
Vas – y.
Panneau \/ aperçu | Ctrl \/ CMD + p | Passer du panneau à la vue d’aperçu |
Déplacer l’édition | Ctrl \/ CMD + Maj + m | Basculer entre le Bureau, la tablette et la vue mobile |
Historique | Ctrl \/ CMD + Maj + H | Aller au panneau de synchronisation Un. |
Navigateur | Ctrl \/ CMD + I | Ouvre le navigateur. |
Bibliothèque de modèles | Ctrl \/ CMD + Maj + L | Ouvrir la Bibliothèque de modèles de mode |
Raccourcis clavier | Ctrl \/ CMD +? | Ouvre la fenêtre d’aide des raccourcis clavier |
Exportations | Système électronique de contrôle de stabilité | Activer les paramètres et passer à la sortie vers le tableau de bord |
Personnalisation de la page CSS saviez – vous que vous pouvez personnaliser css pour chaque page? Oui, mais n’oubliez pas que cette fonctionnalité n’est incluse que dans la version pro de l’élément. Comme solution de rechange, je vais vous montrer comment inclure des CSS personnalisés pour chaque page. Cette astuce vous permettra d’économiser de l’argent si vous voulez que la version pro n’ajoute que des personnalisations au niveau des petites pages.
Pour ce faire, vous n’avez qu’à utiliser le Widget HTML et ce code interne:
Voici votre code CSS personnalisé
– Oui. P
Rouge;
Taille de la police: 25px;
Décoration de texte: Soulignement;
Hauteur de la ligne: 40 Px;
}
Voici un exemple:
Heureusement, elementor dispose d’une solution intégrée pour simplifier et accélérer le processus de conception. Vous pouvez simplement utiliser elementor Finder sans avoir à faire face à tous ces problèmes. Vous pouvez aller directement à n’importe quel paramètre, modèle, page ou partie d’un sujet à travers la barre de recherche. Vous pouvez accéder au Finder en cliquant sur la touche CMD \/ Ctrl + e n’importe où sur le tableau de bord WordPress. Regardez cette vidéo pour tout ce que vous pouvez faire avec Finder. Utiliser le navigateur est une fenêtre d’arbre de navigation facilement accessible
Chaque élément du constructeur de page. Ce Widget vous permet de naviguer et de faire glisser et déposer facilement des widgets entre les projets.
Le navigateur est particulièrement utile pour les longues pages ou les conceptions complexes à plusieurs niveaux, ainsi que pour combiner des éléments tels que les index Z, les marges réduites, les positions absolues, etc. Vous permet d’accéder aux poignées des éléments qui peuvent être placés derrière d’autres éléments. Vous pouvez accéder au navigateur de l’une des trois façons simples suivantes: Faites un clic droit sur n’importe quel élément, puis cliquez sur navigateur. Cela vous redirigera automatiquement vers un élément spécifique de l’arbre de navigation. Cliquez sur le bouton projet dans le pied de page du panneau. Utilisez le raccourci clavier CMD \/ Ctrl + I. regardez cette vidéo pour voir ce qu’elle fait:
Le navigateur a également d’autres fonctions, comme nommer des widgets, compresser et étendre des widgets, déplacer ou ancrer des panneaux, et afficher ou masquer des widgets. Vous pouvez voir l’examen complet dans leur documentation. Définir votre Palette en général, lorsque nous concevons un site Web, nous suivons les modèles de conception créés par les concepteurs. Ce modèle contient généralement des schémas de couleurs en double pour l’ensemble du site. Ce sont les couleurs de la marque qui devraient rester les mêmes. Cela signifie que chaque fois que nous ajoutons un nouveau Widget à la page, nous devons copier et coller le Code de couleur, ou nous devons nous souvenir de ce qu’est le Code de couleur pour l’appliquer dans les paramètres du Widget. Cela peut prendre beaucoup de temps. Heureusement, elementor nous a fourni une solution.
Vous pouvez définir les couleurs de la marque dans les paramètres du sélecteur de couleurs et les réutiliser lorsque vous accédez aux options de couleur pour les styles de Widget. Il suffit de sélectionner une palette prédéfinie ou de définir vos propres couleurs personnalisées pour gagner du temps pendant le projet
(rires) Visionnez cette vidéo: les styles de Widget et les éléments de modèle par défaut et réutilisables sont l’un des meilleurs constructeurs de page, mais avez – vous déjà pensé aux boutons par défaut et laids? La carte? Menu Ou tout autre Widget? Ces widgets par défaut semblent avoir été conçus il y a quelques années, ou voulez – vous réutiliser les widgets dessinés dans le projet a dans le projet b?
Pour le moment, vous ne pouvez pas enregistrer et réutiliser les styles de Widget pour les futurs projets de l’élément. Heureusement, le plug – in wunderwp gratuit offre quelques solutions à ce problème. Tout d’abord, wunderwp inclut un certain nombre de styles de widgets prédéfinis que vous pouvez utiliser. Cliquez pour obtenir des styles prêts à l’emploi tels que des titres, des galeries, des boutons, des séparateurs, des carrousels, des modules, des listes de prix, etc. Il suffit de faire glisser le Widget element sur la page, de sélectionner un style de Widget wunderwp prêt à l’emploi et de commencer à ajouter du contenu. Avec wunderwp, vous pouvez également facilement enregistrer et réutiliser les styles de Widget dans l’élément. Simple: concevoir un widget et l’enregistrer dans le cloud wunderwp (gratuit!) Utilisez – le plus tard pour des widgets similaires. Il s’applique aux widgets simples et complexes. Par exemple, vous pouvez l’utiliser pour enregistrer un widget de titre avec différentes valeurs typographiques, ou pour enregistrer un widget d’image avec des ombres externes personnalisées. Il en va de même pour les modèles: Vous pouvez enregistrer tout ou partie des modèles créés dans le cloud wunderwp. Le modèle sera là, de sorte que vous pouvez facilement l’insérer dans la page ou le site lorsque vous êtes prêt. De cette façon, vous économisez beaucoup de temps en construisant une seule fois. Vous pouvez également profiter des modèles de contenu prêts à l’emploi de wunderwp, qui comprennent maintenant plus de 50 modèles partiels prêts à l’emploi, comme les contacts, les demandes d’action, les en – têtes, les pieds de page, les services, l’information, les équipes, les services, les comptes à rebours, et plus encore.
– pour toutes les utilisations. Elementor est sans aucun doute l’un des meilleurs constructeurs de pages WordPress à ce jour. De nouveaux outils et fonctionnalités sont ajoutés presque quotidiennement pour simplifier et accélérer le processus de conception et accélérer les délais d’exécution des projets. Quelle suggestion pensez – vous être la plus utile et que vous ne saviez pas auparavant? Tu sais peut – être aussi quelque chose qui n’est pas mentionné ici? Partagez – le avec les autres.