![] Grand aperçu](https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a81a9b8f-a321-4b9c-9ec2-9407469d6825/8-build-launch-responsive-websites-editorx.png){kind=link}
L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Comment créer et lancer des sites Web réactifs plus rapidement avec Editor X
En tant que concepteurs, nous sommes habitués à disposer d'une grande liberté de création dans nos outils. Nous sélectionnons, déplaçons et ajustons intuitivement les choses jusqu'à ce qu'elles soient parfaites. Une fois que le travail quitte l'outil de conception, nous cédons ce niveau de contrôle à un environnement de navigateur imprévisible, diversifié et fluide. Là, certaines de nos décisions devront soudainement être affinées, et comme nous voulons introduire des changements, nous devons nous plonger dans le code. Ou expliquez ces changements clairement et sans ambiguïté, pour éviter les malentendus sur toute la ligne. Cette dernière partie peut être frustrante pour toutes les parties impliquées.
Bien que les concepteurs de sites Web existent depuis longtemps, ce n'est que récemment qu'ils sont devenus pratiques pour un usage professionnel. Combler le fossé entre la conception et le code est devenu l'étoile du nord pour de nombreuses entreprises, et souvent ce problème est considéré comme le problème le plus critique que chaque équipe tente de résoudre à sa manière.
Dans cet article, nous examinerons dans Editor X une plate-forme sophistiquée permettant aux professionnels et aux agences de créer des sites Web, animée par un objectif ambitieux de combler l'écart pour de bon.
Qu'est-ce que l'éditeur X?
Il y a de fortes chances que vous ayez est tombé sur des concepteurs de sites Web dans le passé – souvent avec un grain de scepticisme et de doute sur le résultat de ces outils. Beaucoup de ces constructeurs s'appuient fortement sur des modèles prédéfinis avec un certain niveau de personnalisation. Editor X va bien au-delà de cela en fournissant une plate-forme pour les concepteurs professionnels et les agences pour créer des expériences Web avec une grande variété de composants flexibles et une série de fonctionnalités avancées.
Le meilleur moyen de découvrir quel éditeur X est capable de créer quelque chose avec et dans cet article, nous allons créer un site Web à partir de zéro.
Se familiariser avec l'outil
La première fois que nous ouvrirons Editor X, il nous guidera à travers les premières étapes de création d'un nouveau site. Nous pouvons soit choisir de partir de zéro, soit sélectionner l'un des nombreux modèles fournis par la plate-forme.
L'éditeur X suit bien- les modèles établis et toute personne ayant de l'expérience en conception se sentira à l'aise avec cela en quelques minutes. Dans la plupart des cas, nous répéterons le même flux de travail d'ajout d'éléments, de déplacement de ceux-ci sur le canevas et d'ajustement de leurs propriétés.
En haut à gauche, nous avons des boutons pour les panneaux qui nous aideront à ajouter des éléments, à naviguer dans les couches et gérer les pages. Ensuite, au centre de notre espace de travail se trouve le canevas, où nous interagirons directement avec la conception de la page. Vous remarquerez que le canevas est également redimensionnable, ce qui nous permet d'expérimenter facilement différentes fenêtres. Chaque fois que nous sélectionnons quelque chose dans le canevas, nous verrons le panneau Inspecteur s'ouvrir sur la droite.
Le plus tôt toute l'équipe est impliquée dans la conversation sur un nouveau design, plus les problèmes peuvent être résolus tôt. Souvent, vous devez prendre une capture d'écran et la coller sur Slack, ou utiliser un autre outil pour discuter d'une conception via un prototype cliquable. Sur Editor X, vous pouvez inviter des coéquipiers à rejoindre le projet et leur attribuer des rôles et des autorisations individuels. Il existe également une option pour communiquer avec votre équipe en temps réel en laissant des commentaires sur la page ou sur des composants spécifiques.
Création de la structure du site Web
Avant de commencer à ajouter du contenu, nous allons créer des sections qui serviront comme squelette de notre page. Les sections dans Editor X sont essentiellement de grands conteneurs qui contiennent notre contenu. Dès que vous créez une nouvelle page, vous verrez une section d'en-tête et de pied de page déjà ajoutées au canevas. Pour ajouter de nouvelles sections, nous pouvons cliquer sur n'importe quelle section existante et nous verrons une icône bleue «+» au bord de celle-ci.
Chaque fois que nous ajoutons une nouvelle section, nous serons interrogés sur la mise en page que nous aurions aime utiliser. Pour les sections simples, nous sélectionnons simplement des espaces vides. Chaque fois que nous avons besoin de quelque chose de plus complexe, nous pouvons choisir entre une grille et un layouter. Ils ressemblent tous les deux aux concepts de grilles CSS et de flexbox et si vous avez besoin de comprendre la différence, vous pouvez en savoir plus ici .
Nous pouvons également explorer certaines des sections préconçues existantes et les utiliser si nécessaire – ils sont prêts à l'emploi et s'adaptent automatiquement à votre thème.
Ajout de contenu et style de notre Page
L'ajout d'éléments dans Editor X est simple. Nous ouvrons le panneau «Ajouter» et faisons glisser des éléments dans le canevas. Dans ce panneau, nous avons un large éventail d'éléments, de composants et de sections entières qui deviendront les blocs de construction de notre site Web.
Chaque élément que nous déposons sur le canevas peut être facilement déplacé et aligné. Nous pouvons également contrôler la façon dont les éléments réagissent aux modifications de la taille de l'écran en utilisant la fonction «Docking». Lorsque l'écran est redimensionné, les options d'ancrage détermineront la position verticale et horizontale des éléments dans différents types de conteneurs.
Nous allons commencer à travailler sur la section d'en-tête, en ajoutant un titre, un paragraphe et un bouton. Une fois que nous les avons sur le canevas, nous les transformerons en une pile afin d'éviter tout chevauchement sur des tailles d'écran plus petites.
L'empilement est un moyen facile de contrôler la relation entre les éléments disposés au-dessus et en dessous les uns des autres La toile. Pour empiler un groupe d'éléments, vous devez les sélectionner ensemble et cliquer sur l'option "Empiler" qui apparaîtra en haut.
Pour le à droite de notre section, nous ajouterons une image que nous remplacerons par notre illustration. Pour que cela fonctionne, il suffit de cliquer sur «Modifier l'image», puis de télécharger nos actifs dans la médiathèque. Vous remarquerez qu'outre les éléments que nous avons ajoutés, vous avez un accès direct à une grande bibliothèque de photos gratuites et d'illustrations préconçues.
Pour implémenter les trois étapes de notre section «Comment ça marche», nous utiliserons un élément répéteur avec trois éléments et un espace de 20 px entre les deux. Le répéteur est essentiellement une liste d'éléments où le style et la mise en page du premier élément sont automatiquement répétés pour le reste tandis que le contenu peut être différent.
Tout d'abord, nous allons ajouter le titre et le paragraphe dans le premier élément et les voir répéter en temps réel. Au-dessus d'eux, nous ajouterons un conteneur avec une bordure et un élément de texte à l'intérieur du conteneur en allant dans Ajout rapide → Container → Inspector → Design → Corners .
Maintenant que nous avons le contenu de notre en-tête, il est temps de commencer à lui appliquer des styles. Nous pourrions suivre la voie habituelle et appliquer des styles élément par élément, mais nous pouvons également utiliser le «Gestionnaire de thèmes» pour créer une typographie globale et des styles de couleur qui définiront automatiquement ces changements partout. Cela va au-delà de la portée de notre page, nous pouvons donc l'utiliser pour faire correspondre le style sur l'ensemble de notre site.
Cliquez sur le gestionnaire de thèmes icône sur la barre supérieure de l'éditeur. De là, nous pouvons gérer le texte global et les styles de couleur sur le site. Nous allons commencer par changer la couleur d'arrière-plan en # 030F1D et la couleur de nos éléments d'action en # 030F1D . Ensuite, nous changerons les polices de titre en Sora et ajusterons également les couleurs de la typographie pour s'adapter à notre palette.
Ce concept va encore plus loin car nous pouvons enregistrer nos thèmes dans une bibliothèque de design qui peut être utilisée sur tous les sites Web que nous créons avec l'outil. Cela facilite la mise en œuvre et la gestion de leurs systèmes de conception par les équipes. Imaginez également travailler sur une série de thèmes et de conceptions que vous voudrez peut-être réutiliser dans une large gamme de vos produits, ou si vous souhaitez conserver une série de produits pour vos clients. Cela pourrait gagner beaucoup de temps – et géré à partir d'un endroit central.
La section suivante servira de une vitrine du produit. Tout d'abord, nous allons ajouter un titre, un sous-titre et un élément d'image au canevas et les transformer en une pile. Ensuite, nous les ancrerons au centre et augmenterons la hauteur de la section.
Pour obtenir l'effet de chevauchement nous ajouterons les particules dans deux éléments d'image séparés et les organiserons pour apparaître à l'arrière.
Enfin, nous mettrons à jour les couleurs pour qu'elles correspondent à notre palette, pour l'arrière-plan que nous utiliserions # FFECE4 tandis que la couleur du sous-titre sera # 836153 .
Les formulaires sont essentiels pour la plupart des sites Web et dans notre cas, nous en aurons besoin pour collecter les coordonnées des visiteurs intéressés par notre produit.
Pour créer un formulaire, nous devrons aller dans le panneau Ajouter et sélectionner «Contact & Formulaires », À partir de là, nous pouvons voir une variété de modèles que nous pouvons utiliser comme point de départ. Pour notre page, nous choisirons le «formulaire de contact» en le faisant glisser sur le canevas.
Nous pouvons le personnaliser en sélectionnant «paramètres du formulaire». À partir de là, nous modifierons les champs avec le prénom, le nom, l'adresse e-mail et la société. Enfin, nous ajouterons deux cases à cocher de consentement, en sélectionnant le formulaire et en cliquant sur "Ajouter un nouveau champ", puis en sélectionnant "case à cocher conditions" dans la liste des champs de contact. Cela nous permettra de rester conformes aux réglementations telles que le RGPD.
Dans la dernière étape, nous ajouterons un menu à notre site Web. Avec l'outil, nous pouvons créer des sites Web complexes avec de nombreuses pages liées entre elles par une navigation transparente, mais dans notre cas, nous n'avons besoin que de naviguer entre les sections de cette page spécifique. À cette fin, nous utiliserons une fonctionnalité appelée "Ancrages". Nous allons passer en revue les sections qui feront partie de notre menu et nous ajouterons une ancre que nous utiliserons plus tard dans les paramètres du menu.
Sélectionnez n'importe quel élément, puis cliquez sur la section «Ancre» dans le Panneau Inspecteur sur le côté droit de l'éditeur. Cliquez ensuite sur la bascule et nommez simplement l'ancre. Nous allons répéter cette opération pour toutes les sections que nous aimerions avoir dans la navigation.
Maintenant, pour les ajouter dans le menu, cliquez sur "Gérer le menu", puis sur "Ajouter un lien". De là. nous devons sélectionner l'option Ancre et l'ancre que nous voulons lier.
Donner vie au site
Une façon de rendre le site plus interactif et distinctif est d'ajouter des animations à nos éléments. Bien sûr, nous pouvons également ajouter une animation sur la plate-forme et l'appliquer à n'importe quel élément ou section du canevas. Pour ce faire, nous devons sélectionner les éléments que nous voulons animer, puis cliquer sur l'icône Animation .
Il y a beaucoup de préréglages que nous pouvons utiliser immédiatement, mais il y a aussi la possibilité d'ajuster des variables telles que la durée et le délai.
Dans notre cas, nous aimerions ajouter une subtile animation de fondu à tous les titres et images sur la toile.
Conception pour différentes tailles d'écran
Il est courant de voir des maquettes créées pour bureau d'abord, ou pour mobile d'abord, mais dans la pratique, nous devons créer les deux en même temps. Les priorités que nous définissons pour nos blocs de contenu devront peut-être changer d'une taille d'écran à une autre, mais nous devons explorer comment nous pouvons mettre l'accent sur les bons éléments et choisir la bonne façon de les positionner à la fois sur le bureau et sur le bureau. mobile. Avec l'outil, nous pouvons y parvenir en concevant pour des points d'arrêt individuels et en utilisant des unités de mesure de taille fluide et relative.
De toute évidence, c'est une bonne idée d'ajouter des points d'arrêt uniquement lorsque nous en avons besoin, afin que nous puissions ajouter nos points d'arrêt personnalisés lorsque nous prévisualisent le site en passant de petites fenêtres à grandes fenêtres. Évidemment, nous pouvons le faire sans quitter l'outil. Chaque fois que nous avons besoin d'un point d'arrêt, nous pouvons les ajouter (ou modifier ceux déjà existants) en cliquant sur le menu à trois points à côté des points d'arrêt.
Si vous avez utilisé des tailles relatives jusqu'à ce point, de nombreux éléments seront déjà redimensionner correctement. Pour le reste, nous passerons en revue les différents points d'arrêt et créerons des remplacements de conception pour nous assurer que tout se présente comme prévu. Les modifications que nous apportons seront appliquées à la plage de points d'arrêt spécifique que nous avons sélectionnée, et elles seront également appliquées en cascade.
Publication et test de notre site dans le monde réel
Nous y sommes presque! À ce stade, nous devons cliquer sur le bouton «Publier» pour passer en ligne. De là, notre page se voit attribuer un nom de domaine et est accessible à tous. Un niveau gratuit est accompagné d'une bannière en haut, mais cela suffit pour expérimenter les fonctionnalités fournies par l'outil. Bien sûr, il disparaît avec un niveau payant qui serait probablement un niveau que la plupart des entreprises accepteraient.
En dehors de cela, la page fonctionne bien. Il n'y a pas d'inconvénients notables en termes de performances, mais nous devrons lui faire un test de résistance plus approfondi. À cette fin, nous utiliserons l'audit Lighthouse de Google, qui nous donnera un aperçu des caractéristiques telles que la vitesse, l'accessibilité et les performances SEO.
Il est important de noter que nous n'avons pas à nous fier uniquement aux blocs de construction prédéfinis. Si vous avez besoin d'intégrer une fonctionnalité complexe pour vos projets, vous pouvez également le faire. En fait, vous pouvez ajouter votre propre JavaScript, vous connecter aux API, utiliser les packages npm et automatiser les interactions client-serveur avec les modules Web. Ces fonctionnalités sont disponibles via une plate-forme de développement intégrée appelée Velo.
Mais pour la portée de cet article, bien que nous ayons pour la plupart combiné quelques éléments sans réécriture ou correction de code, les résultats sont assez solides par rapport à ce que l'on attend normalement d'un Générateur de site Web. Dans l'ensemble, le score est assez élevé en termes de performances et d'accessibilité, en particulier sur les ordinateurs de bureau, même si vous devrez peut-être optimiser davantage votre site pour les appareils mobiles.
Conclusion
En ce qui concerne les concepteurs Web, il n'est pas rare d'être déçu par le résultat – avec de nombreux problèmes d'accessibilité et de performances, ainsi qu'un balisage volumineux et désordonné, un CSS trop spécifique et un JavaScript lent. Lorsque nous examinons le processus de création de sites Web sur Editor X, il semble que ce soit une plate-forme qui est allée assez loin pour fournir un environnement simple pour créer de bons sites Web, tout en incluant également des fonctionnalités de collaboration, des tests réactifs et certains composants qui pourraient nécessiter un peu de temps pour prototyper ou configurer autrement.
Si vous travaillez avec des agences ou des organisations où vous prévoyez de réutiliser des composants, ou si vous avez besoin de configurer et de gérer rapidement des sites pour divers clients, Editor X pourrait être une option intéressante à considérer. Il s'accompagne de plans personnels et commerciaux, d'une prise en charge des paiements en ligne, du commerce électronique, des domaines et du stockage, des réservations en ligne, de la gestion des billets et des événements, ainsi que de la monétisation vidéo. Il y a de fortes chances que vous trouviez ce dont vous avez besoin – à la fois pour des prototypes rapides et pour un travail client extensif.
Vous pouvez créer un compte Editor X gratuitement et tester toutes les fonctionnalités, sans aucune condition. [19659087] Smashing Editorial "width =" 35 "height =" 46 "loading =" lazy "decoding =" async « /> (vf, il)
Source link