Introduction
Utilisation de Sitely
Éléments
Comment faire
Dans Sitely, lorsque nous parlons d'appareils, nous faisons référence à l'adaptation des mises en page pour mieux convenir à différents appareils. Dans de nombreuses applications de développement Web, les mises en page sont souvent modifiées automatiquement par le logiciel en fonction d'un framework sous-jacent. Bien que cela puisse être une commodité pour certains, cela peut s'avérer restrictif pour ceux qui souhaitent être un peu plus créatifs dans la façon dont les choses devraient apparaître sur les appareils avec différentes dimensions d'écran. Cela oblige souvent les développeurs de sites Web à creuser sous le capot pour effectuer des ajustements fins aux mises en page ou au code produit par de telles applications. Dans Sitely, nous adoptons une approche différente basée sur la nature de format libre de la conception Web de Sitely. L'utilisation de multiples mises en page pour appareils produit des pages communément appelées responsives.
Lorsque vous ouvrez le sélecteur d'appareils de Sitely, vous serez présenté avec des informations sur l'appareil actuellement sélectionné. Le défaut est les PC de bureau avec une largeur de 1200 pixels. Il ressemble à ceci.
Cela devrait être votre point de départ pour tous les nouveaux projets. Commencez simplement à ajouter et à organiser le contenu sur votre page pour commencer à créer la version de bureau standard de votre page Web. Lorsque vous démarrez un nouveau projet, essayez, dans la mesure du possible, d'utiliser les styles de texte intégrés de Sitely. Par exemple, utilisez le style Titre pour vos titres principaux, le style Corps pour votre texte de corps, etc. Vous pouvez modifier la police, la taille et les couleurs de chaque style, etc. au fur et à mesure que vous créez votre contenu, puis mettre à jour les styles pertinents en cliquant sur le bouton Appliquer les modifications sous le nom du style dans le panneau de style.
Créer et utiliser des styles de cette manière sera très utile lorsqu'il s'agira d'adapter la mise en page de votre page pour différents appareils plus tard. Continuez à mettre en page votre page de bureau jusqu'à ce qu'elle soit exactement comme vous le souhaitez. À ce stade, vous pourriez envisager de décomposer votre page en blocs disposition, peut-être un bloc pour votre navigation, un autre pour votre section Héros et plusieurs autres pour chaque section visuellement définissable de la page. Pour créer un bloc de mise en page, sélectionnez tous les éléments de page individuels que vous souhaitez inclure dans le bloc, faites un clic droit et choisissez l'option Déplacer vers un bloc de mise en page dans le menu contextuel.
Cela enveloppera commodément tous les éléments sélectionnés dans un bloc qui peut être déplacé vers le haut ou vers le bas de votre page sans perturber la position des éléments individuels à l'intérieur du bloc. De plus, le bloc de mise en page peut déplacer tous les blocs disposition en dessous lorsque vous déplacez des éléments sur la page. C'est une autre fonctionnalité qui s'avérera utile lors de la mise en page de pages pour d'autres tailles d'appareils. Remarque : Lorsqu'un bloc de mise en page est créé pour la première fois, il sera stylisé avec l'une des couleurs du mode maquette filaire de Sitely. C'est juste pour vous faire savoir que vous avez créé un bloc de mise en page et le rend instantanément visible sur le canevas. Vous pouvez supprimer ou changer la couleur à tout moment en modifiant le remplissage dans le panneau de style.
Une fois votre page de bureau terminée, vous êtes prêt à ajouter une nouvelle mise en page pour un appareil. Nous vous recommandons de ne pas commencer à ajouter de nouvelles mises en page pour appareils avant d'avoir terminé votre page de bureau. Une fois que vous êtes prêt, cliquez sur l'icône de sélection de l'appareil en haut de l'écran et cliquez sur le bouton intitulé Personnaliser les mises en page des appareils. Cela vous présentera une liste d'autres appareils pour lesquels vous pouvez concevoir. Notre recommandation est de commencer par ajouter l'option smartphone en mode portrait avec une largeur de 320 pixels.
Cliquez sur la liste déroulante intitulée Non présent, et choisissez l'option Mise en page personnalisée. Cette action créera un nouveau canevas avec tout votre contenu mis à l'échelle pour s'adapter au nouvel écran de l'appareil.
La première chose que vous remarquerez probablement est que le texte est incroyablement petit et presque impossible à lire. De plus, toutes les images ont été mises à l'échelle proportionnellement. Clairement, cette page a maintenant besoin d'un réarrangement pour être adaptée à la visualisation sur un écran de smartphone. Mais, si vous avez suivi nos conseils précédents sur l'utilisation des styles de texte, tout peut être mis à l'échelle à une taille plus acceptable en apportant des modifications à vos styles de texte dans le panneau des styles.
N'oubliez pas que les styles de texte sont appliqués appareil par appareil. Cela signifie que toute modification que vous apportez à un style de texte ne s'appliquera qu'à l'appareil sur lequel vous travaillez. Dans notre exemple, le style de texte du corps sur notre variante de bureau était défini à 15 pt. Lorsque nous passons à la mise en page du smartphone, il a été réduit à 4 pt. Nous pouvons maintenant changer ce style de texte à, disons, 12 pt et encore une fois, mettre à jour le style en cliquant sur le bouton Appliquer les modifications dans le panneau de style. Cela aura pour effet de changer la taille de la police de TOUT le texte du corps sur la mise en page du smartphone à 12 pt. Nous faisons la même chose avec tous les autres styles de texte utilisés. Par exemple, nos titres de bureau peuvent être définis à 28 pt, tandis que sur notre mise en page de smartphone, ils sont définis à 18 pt.
Ces changements auront un effet instantané sur notre mise en page de smartphone. Elle ressemblera maintenant à quelque chose comme ça.
Tout le texte a maintenant été redimensionné à des niveaux lisibles, mais les boîtes de texte doivent être redimensionnées pour contenir le texte nouvellement agrandi. Ceci est indiqué par les contours rouges sur les boîtes de texte. Ils indiquent qu'il y a plus de texte dans les boîtes que ce qui peut être vu à l'écran. Ceci est facilement rectifié avec quelques manœuvres simples.
La première chose à faire est d'allonger la page du smartphone pour nous donner beaucoup de place pour travailler. L'étape suivante consiste à faire glisser la poignée de redimensionnement inférieure du bloc de mise en page le plus haut pour l'agrandir afin de pouvoir ajuster la taille de son contenu. Faire glisser la poignée de redimensionnement inférieure poussera tous les autres blocs disposition vers le bas de la page, créant un grand espace pour que nous puissions travailler sur le contenu du premier bloc de mise en page.
Tout ce qu'il reste à faire est de saisir les poignées de redimensionnement de chaque boîte de texte et de les faire glisser jusqu'à ce que le contour rouge disparaisse. Vous pouvez déplacer les éléments à l'intérieur du bloc pour qu'ils s'intègrent mieux dans l'espace disponible. Si vous avez besoin de plus d'espace, il suffit d'agrandir le bloc de mise en page. Voici notre page mobile qui commence à prendre forme.
Dans la plupart des cas, la conception d'une version de bureau de votre page Web et d'une version pour smartphone sera suffisante pour permettre à Sitely de gérer les tailles intermédiaires pour vous. En ajoutant d'autres appareils entre le bureau et le smartphone, vous pouvez simplement demander à Sitely de mettre à l'échelle automatiquement les différents appareils. Pour ce faire, il vous suffit de définir l'option Mise à l'échelle automatique pour chaque variante d'appareil.
Bien sûr, il y a toujours la possibilité de définir chaque appareil pour avoir une mise en page personnalisée si la conception de votre page l'exige. Par exemple, vous pourriez vouloir créer une page Web similaire à celle illustrée ci-dessous.
Dans cet exemple, le site de bureau est conçu sur une structure principalement à 2 colonnes avec certains blocs disposition construits sur une structure à 4 colonnes. Dans la version tablette, il y a principalement des mises en page en grille à 2 et 3 colonnes, tandis que sur la version mobile, c'est une structure principalement à une seule colonne avec certains blocs construits sur une structure à 2 colonnes. Le choix de la structure de grille sous-jacente dépend vraiment de la quantité de texte à afficher et de la densité d'images de la page. Heureusement, Sitely vous couvre lors de la conception pour différents appareils de cette manière.
La structure de grille sous-jacente standard pour une version de bureau d'un site Web est généralement de 12 colonnes. Cela rend la page divisible par 2, 3 et 4 colonnes, en plus d'une pleine largeur de 12 colonnes. Cependant, en regardant les tailles d'appareils intermédiaires, il peut être préférable de changer la structure de la grille pour mieux s'adapter à la mise en page que vous avez en tête. Dans l'exemple ci-dessus, il peut être préférable d'organiser la page de la tablette sur une structure de grille de 4 ou 8, tandis que la version mobile pourrait être mieux adaptée à une structure de grille à 2 colonnes.
Pour répondre à cette exigence, Sitely offre une structure de grille appareil par appareil, de sorte que vous pouvez configurer votre page de bureau pour utiliser les 12 colonnes standard, tandis que les pages de la tablette et du mobile peuvent être configurées pour utiliser 2, 4 ou 8 colonnes, selon les besoins individuels. Vous définissez la grille de l'appareil à partir du sélecteur de disposition de la grille en haut de l'écran de Sitely.
Veuillez signaler toute lacune dans cette documentation et nous la corrigerons dès que possible !
Mis à jour pour Sitely 6
Droits d'auteur ©2025 Crinon SRL
Ce site utilise des cookies.
Veuillez consulter notre politique de confidentialité pour en savoir plus.
