Une page Adaptatif est une seule page qui se réorganise pour s'adapter à tous les écrans. Vous la construisez à partir de sections empilées de haut en bas, et vous utilisez des conteneurs pour placer des éléments côte à côte sur un ordinateur et les empiler sur un téléphone. Pour les quelques objets qui doivent se trouver à un endroit précis, comme un badge sur une photo, cochez Autoriser le glissement libre et épinglez-les.
Avant de commencer
- Vérifiez le type de page. Sélectionnez la page et allez dans Inspecteur > Paramètres de page > Mise en page. Il doit être indiqué Adaptatif. S'il est indiqué Mise en page centrée, consultez Mon site Web s'affiche mal sur un téléphone : comment fonctionne le mobile dans EverWeb.
- Vous voulez transformer une page existante en page adaptative ? Changer la Mise en page peut réorganiser tout votre design, et vous ne pouvez pas l'annuler. Il est plus sûr d'ajouter une nouvelle page et d'y déplacer votre contenu : cliquez sur Ajouter une page, choisissez Adaptatif dans le menu de filtre en haut du sélecteur de modèles de thème, choisissez Blank Responsive (adaptatif vierge) et le style de page Home (accueil), puis cliquez sur Sélectionner.
Comment une page adaptative est construite
Chaque objet en Pleine largeur, et chaque conteneur, est une section. Les sections se placent les unes sous les autres dans le même ordre sur tous les écrans, et se réduisent pour tenir. Un conteneur organise ce qu'il contient, et vous pouvez placer des conteneurs dans des conteneurs, par exemple une Ligne contenant deux Colonnes. Les objets qui ne peuvent pas être en Pleine largeur, comme certains widgets, doivent être placés dans un conteneur. Gardez-les à une largeur d'environ 280 à 320 pixels pour qu'ils tiennent sur un téléphone.
Ajouter un conteneur
- Cliquez sur Conteneurs dans la barre d'outils.
- Choisissez Ligne de conteneur, Colonne de conteneur ou Flux libre du conteneur.
- Faites-y glisser des objets, ou cliquez sur le bouton + au milieu du conteneur vide.
Les objets sont déjà sur la page ? Cliquez sur chacun d'eux en maintenant la touche Maj enfoncée, faites un clic droit (ou Contrôle-clic sur Mac), choisissez Contenir comme, puis Ligne, Colonne ou Flux libre.
| Disposition | Sur un ordinateur | Sur un téléphone |
|---|---|---|
| Colonne | Objets empilés de haut en bas | Toujours empilés, chacun plus étroit |
| Ligne | Objets côte à côte | Restent côte à côte et se resserrent, sauf si vous réglez Retour à la ligne (voir ci-dessous) |
| Flux libre | Vous placez les objets n'importe où à l'intérieur | Les objets gardent leur position épinglée : vérifiez donc l'affichage sur un téléphone |
Pour la modifier plus tard, sélectionnez le conteneur en cliquant sur une partie vide (ou faites un clic droit et utilisez Choisir une couche), puis allez dans Inspecteur > Réglages des widgets (la roue dentée, la dernière icône) et modifiez Afficher > Disposition.
Empiler le contenu sur un téléphone
- Lignes : dans Réglages des widgets > Afficher, réglez Retour à la ligne sur Retour à la ligne. Les objets passent alors les uns sous les autres quand l'écran devient trop étroit. La valeur par défaut, No Wrap (pas de retour à la ligne), les garde sur une seule ligne.
- Vous voulez que le second objet passe au-dessus sur un téléphone, par exemple la photo au-dessus de son texte ? Réglez Retour à la ligne sur Reverse Wrap (retour à la ligne inversé).
- Objets côte à côte dans une Ligne : décochez Pleine largeur dans Inspecteur > Mesures et donnez une largeur à chacun. Un objet en Pleine largeur dans une Ligne avec retour à la ligne occupe une ligne à lui seul.
- Objets dans une Colonne ou directement sur la page : cochez Pleine largeur, puis saisissez une Larg. max. pour qu'ils ne s'étirent pas trop sur un grand écran. L'article Mon site Web s'affiche bien sur mon ordinateur, mais il est coupé ou désordonné sur mon téléphone en dit plus à ce sujet.
- Laissez la Hauteur sur Auto (Réglages des widgets > Dimensionnement) pour que le conteneur puisse s'agrandir quand son contenu s'empile.
Placer un objet avec précision : glissement libre et épinglage
Dans EverWeb 4.5 et versions ultérieures, vous pouvez placer un objet n'importe où sur une page Adaptatif, directement sur la page ou dans un conteneur :
- Sélectionnez l'objet et allez dans Inspecteur > Mesures.
- Cochez Autoriser le glissement libre et faites glisser l'objet là où vous le voulez.
- Cliquez sur Pin Settings (réglages d'épinglage) et choisissez où l'épingler, par exemple en haut et à droite. Cochez Constrain to edge (contraindre au bord) pour le maintenir tout contre ce bord.
Un objet placé librement ne pousse rien d'autre vers le bas. Réservez cette option à quelques objets, pas à une page entière : si tous les objets sont placés librement, rien ne s'empile sur un téléphone. Pour remettre un objet dans le flux, décochez Autoriser le glissement libre. Pour faire sortir un objet d'un conteneur Flux libre, maintenez la touche Commande (Mac) ou Alt (Windows) enfoncée pendant que vous le faites glisser.
Pourquoi ne pas utiliser les lignes dynamiques ?
Les lignes dynamiques (Responsive Rows) sont l'ancienne version des conteneurs, et nous ne les recommandons plus pour les nouvelles pages. Celles que vous avez déjà continueront de fonctionner.
| Conteneur | Ligne dynamique | |
|---|---|---|
| Dispositions | Ligne, Colonne ou Flux libre | Ligne uniquement |
| Largeur | Pleine largeur ou largeur définie | Pleine largeur uniquement |
| Dans d'autres conteneurs | Oui | Non |
| Glissement libre et épinglage à l'intérieur | Oui | Non, la case est grisée |
Pour en remplacer une, ajoutez une Ligne de conteneur à côté, faites-y glisser les objets, puis supprimez la ligne dynamique vide. La supprimer supprime aussi tout ce qui s'y trouve encore : vérifiez donc d'abord qu'elle est vide, et utilisez Édition > Annuler si nécessaire.
Dans quel conteneur se trouve cet objet ?
Faites un clic droit sur l'objet et choisissez Incorporer dans. La liste indique le conteneur dans lequel il se trouve et vous permet de le déplacer vers un autre. Donnez des noms à vos conteneurs dans Réglages des widgets, par exemple « En-tête » ou « Services », pour que la liste soit claire. Pour sélectionner des objets masqués ou qui se chevauchent, consultez Pourquoi cet objet ne va-t-il pas là où je le fais glisser ?.
Vérifier que cela fonctionne
Rétrécissez la fenêtre d'EverWeb en la faisant glisser et regardez la page se réorganiser. Cliquez ensuite sur Aperçu, choisissez Preview QR Code (code QR d'aperçu) et scannez-le avec votre téléphone. Rien ne doit glisser sur le côté ni se superposer à autre chose. Si c'est le cas, consultez Mon site Web s'affiche bien sur mon ordinateur, mais il est coupé ou désordonné sur mon téléphone.
Vous manquez de temps ? Nous pouvons refaire votre site Web en site adaptatif pour vous. Demandez à l'assistance un devis sans engagement.
Articles connexes
- Mon site Web s'affiche mal sur un téléphone : comment fonctionne le mobile dans EverWeb
- Mon site Web s'affiche bien sur mon ordinateur, mais il est coupé ou désordonné sur mon téléphone
- Pourquoi cet objet ne va-t-il pas là où je le fais glisser ?
- Placer le même en-tête, le même menu et le même pied de page sur toutes les pages avec une page maîtresse