Design et mises en page.

FONCTIONNALITÉS DE DESIGN

Créez des expériences dynamiques pour toutes les tailles d'écran.

Start Creating

Design et mises en page

Intéractions et effets

Éléments design et multimédia

Points de rupture sur mesure

Ajoutez plusieurs points de rupture afin d'optimiser l'affichage de vos sites sur tous les types d'écrans.

resize handle
resize handle
resize handle
Image d’un site internet de magazine de design appelé Daylong, présenté sur le point de rupture d’un ordinateur. On voit deux images de forme carré placées horizontalement et du texte de couleur blanche sur chacune d’elle. L’image de gauche montre un dégradé de couleurs, l’image du centre est une femme avec une robe rose.
Image d’un site internet de magazine de design appelé Daylong, présenté sur le point de rupture d’un ordinateur. On voit une image de forme carré d’une femme avec une robe rose.
Image de texte de couleur bleue sur un arrière-plan blanc. On peut lire le texte Ajouter Point de rupture.
Image d’un site internet de magazine de design appelé Daylong, présenté sur le point de rupture d’un ordinateur. On voit trois images de forme carré placées horizontalement et du texte de couleur blanche sur chacune d’elle. L’image de gauche montre un dégradé de couleurs, l’image du centre est une femme avec une robe rose et l’image de droit est un design pixelisé de plusieurs couleurs.
Image d’un site internet de magazine de design appelé Daylong, présenté sur le point de rupture d’un ordinateur. On voit deux images de forme carré placées horizontalement et du texte de couleur blanche sur chacune d’elle. L’image de gauche montre un dégradé de couleurs, l’image du centre est une femme avec une robe rose.
Image d’un site internet de magazine de design appelé Daylong, présenté sur le point de rupture d’un ordinateur. On voit une image de forme carré d’une femme avec une robe rose.
Image of desktop, tablet, mobile and ellipses icons aligned horizontally with mobile highlighted.
resize handle
resize handle
resize handle
Image d’une femme qui tient un casque audio sur ses oreilles, sur un fond de dégradé rouge. Le menu des unités de mesure est ouvert sur le côté gauche et l’option Min/Max est sélectionnée.
Image d’une femme qui tient un casque audio sur ses oreilles, sur un fond de dégradé rouge. Le menu des unités de mesure est ouvert sur le côté gauche et l’option Min/Max est sélectionnée.
Image d’une femme qui tient un casque audio sur ses oreilles, sur un fond de dégradé rouge. Le menu des unités de mesure est ouvert sur le côté gauche et l’option Min/Max est sélectionnée.
Image d’une femme qui tient un casque audio sur ses oreilles, sur un fond de dégradé rouge. Le menu des unités de mesure est ouvert sur le côté gauche et l’option Min/Max est sélectionnée.

Grille CSS

Créez des mises en page complexes dans un espace en deux dimensions et gérez avec précision le positionnement de tous les éléments à chaque point de rupture.

Deux images qui se chevauchent sur un fond de dégradés de bleus. L’image au premier plan est un site de portfolio qui présente trois photographies sur un fond jaune. L’image du fond montre le système de gestion de contenu d’Editor X.
 Deux images qui se chevauchent sur un fond de dégradés de bleus. L’image au premier plan est un site de portfolio qui présente trois photographies sur un fond jaune. L’image du fond montre le système de gestion de contenu d’Editor X.

Répéteurs

Utilisez cet outil de mise en page flexible pour afficher du contenu dans des boites du même style. Connectez les répéteurs à un CMS intégré afin de créer des sections uniformes pour présenter par exemple, les profils des membres de votre équipe, des listings de biens immobiliers ou des projets.

Layouter (Structure flexible)

Créez des mises en pages flexibles ainsi que des boites qui s'adaptent harmonieusement à chaque zone d'affichage. Vous pouvez choisir parmi un large choix de maquettes vierges personnalisables ou de mises en page au design déjà élaboré.

Image d’un homme portant une veste métallique et un sac à dos noir. A droite on voit la section Marges et docking du panneau d’inspection d’Editor X.
Image d’un homme portant une veste métallique et un sac à dos noir. A droite on voit la section Marges et docking du panneau d’inspection d’Editor X.

Ancrage (Docking)

Grâce à l'ancrage intuitif, vos éléments s'attachent automatiquement aux bords les plus proches de leur boite-parent. Vous pouvez également ajuster manuellement l'ancrage pour personnaliser entièrement la zone d'affichage.

Image d’un container designé avec du texte et une capture d’écran de panneau d’option de superposition à gauche, sur un fond bleu texturé.

Layers (couches)

Utilisez le panneau de configuration de Layers pour voir et gérer l'ordre des éléments d'une page et comprendre la hiérarchie. Vous pouvez également renommer vos couches pour organiser votre travail.

Échelle du texte

Paramétrez une taille de police minimale et maximale pour vous assurer que votre texte s'adapte progressivement en fonction de la taille de l'écran.

Plus de fonctionnalités de design et de mise en page :

Un agrandissement de la partie supérieur gauche du canvas avec un entête surligné en vert.

Masters

Sauvegardez et réutilisez les entêtes, les sections et les pieds de page sur plusieurs pages. Pour faciliter le processus de création, les modifications que vous effectuez à un master s'appliquera à tous les endroits où il apparait sur le site.

Trois vecteurs de mise en page et une forme de bouton sur un arrière-plan gris.

Éléments de design

Créez et sauvegardez des sections entières en tant qu'éléments de design et réutilisez-les sur plusieurs sites. Vous pouvez sauvegarder des éléments de design localement, sur votre site, ou les enregistrer dans une biblithèque de design que vous pourrez partager et à laquelle vous pourrez accéder depuis tous les sites d'un même compte.

Une image de deux titres d’entête sur un arrière-plan blanc et un icône de stylo à côté de chaque titre.

Gestionnaire de thème

Découvrez et modifiez les thèmes de typographie et de couleurs d'un site. Vous pouvez personnaliser les styles de texte et les palettes de couleurs du site dans cette section.

Image d’icônes rectangles et en forme de boutons, disposés de manière horizontale sur un arrière-plan gris.

Menus sur mesure

Créez et gérez plusieurs menus sur chaque page de votre site. Choisissez le design du menu, sélectionnez les éléments que vous souhaiter afficher dans le menu, connectez-les aux pages de votre choix et personnalisez chaque menu selon les points de rupture.

 Image d’un carré gris avec une ligne de mesure qui affiche 100 de hauteur de viewport.

Hauteur du viewport (zone d'affichage)

Configurez n'importe quelle section d'un site à 100 % de la hauteur du viewport. De cette manière, il s'adaptera toujours à la hauteur de l'écran, peu importe l'appareil de navigation que vous utilisez.

Image d’un bouton interrupteur qui affiche les options Fixe et Fluide dans un container sur un arrière-plan gris.

Fixe, fluide et adapté

Contrôlez le comportement des éléments selon la taille de l'écran. Choisissez une taille fixe ou fluide, ou décidez d'adapter proportionnellement les images et le texte à la zone d'affichage.

Un agrandissement de la partie supérieure droite du canvas et du texte blanc sur une forme cylindrique grise.

Poignées de redimensionnement

Utilisez les poignées de redimensionnement de chaque côté du canvas afin de voir et de designer un site sur n'importe quelle largeur de zone d'affichage.

Image d’un container sélectionné avec un design de mise en page surligné.

Empilement

Maintenez les marges verticales entre les éléments d'une zone d'affichage et évitez que ceux-ci ne se chevauchent sur les petits écrans.

Image d’un container sélectionné avec un carré blanc, entouré d’un arrière-plan de couleur vert clair.

Padding d'un container

Définissez les écarts de remplissage des quatre côtés d'une boite afin de toujours garder un espace avec les bords de celle-ci.

 Image d’icônes d’ordinateur, tablette et mobile disposés de manière verticale avec une flèche vers le bas, sur le côté gauche de l’image.

Modèle de cascade

Toutes les modifications que vous effectuez à un point de rupture s'appliqueront aux points de rupture plus petits.

 Image d’icônes d’ordinateur, tablette et mobile disposés de manière horizontale. L’icône d’ordinateur est sélectionné.

Copier au point de rupture

Copiez la mise en page et le style d'un élément, d'un point de rupture à un autre. Par exemple, vous pouvez appliquer le style d'un élément qui apparait sur un téléphone, au même élément sur une tablette, en quelques clics.

Image de deux boites carrées avec une esquisse de mise en page sur un arrière-plan gris.

Copier le formatage

Copiez des attributs de design d'un élément à un autre pour gagner en efficacité. Choisissez de copier le style d'un élément à un point de rupture spécifique ou copiez le style d'un élément tel qu'il apparait à tous les points de rupture.

Image d’icônes de page et d’ancres disposés de manière verticale sur un arrière-plan blanc.

Ancres

Aidez vos visiteurs à naviguer sur votre site à l'aide des indicateurs de position invisibles. Tout élément de votre site peut devenir une ancre et vous pouvez y connecter vos boutons et vos menus.

 Image de lignes horizontales grises et texte bleu sur un arrière-plan blanc.

Téléchargement de polices

Téléchargez vos propres polices de texte et utilisez-les sur tous vos sites.

Image d’icônes de fraction, pourcentage et pixel disposés de manière horizontale.

Unités de mesure

Redimensionnez vos éléments selon les pixels, les pourcentages ou la hauteur et largeur du viewport. Vous pouvez également définir la taille des colonnes et des rangées de votre grille en utilisant fr, calc et plus.

See all →

Et ce n'est qu'un début.

Découvrez encore davantage de possibilités pour créer, gérer et publier des sites sophistiqués avec Editor X.

Suite de collaboration.

Organisez votre travail et optimisez la collaboration entre les membres de votre équipe grâce aux différents rôles et autorisations, aux comptes d'équipe, aux bibliothèques de design à partager et plus encore.

Développement web.

Créez des applications web avancées en utilisant du JavaScript sur mesure et des APIs sur Velo - une plateforme de développement ouverte, intégrée à votre site.

CMS sans programmation.

Utilisez les collections de données pour gérer facilement le contenu dynamique d'un site sans avoir à modifier le design.

Marketing et SEO.

Utilisez des intégrations marketing avancées pour mesurer l'impact de vos campagnes, attirer du trafic et récolter des informations sur vos visiteurs.

Solutions pour entreprises.

Répondez aux besoins de toutes les entreprises grâce à des outils eCommerce puissants de nos boutiques en ligne et des systèmes d'abonnement et de réservation sophistiqués.

resize handle
resize handle

Editor X

C'est à vous de jouer.