Comment réorganiser les blocs avec LayoutEngine sur Squarespace - dummies

LayoutEngine de Squarespace vous permet de positionner les blocs de plusieurs façons. Le processus est presque magique. La racine de la magie de LayoutEngine est une grille de colonnes qui régit la position des blocs sur la page. Vous utilisez la grille pour aligner parfaitement les blocs afin de créer des pages parfaitement organisées et agréables visuellement.

Pour déplacer et réorganiser les blocs sur une page, procédez comme suit:

1. Placez le pointeur de la souris sur un bloc jusqu'à ce que le curseur devienne une flèche multidirectionnelle.

   

2. Cliquez et maintenez le bouton de la souris sur le bloc que vous voulez déplacer.

   Tous les blocs de votre page sont entourés d'une lueur bleutée afin que vous puissiez voir leurs bords et positionner précisément le bloc que vous déplacez.

   Une icône de flèche multidirectionnelle apparaît dans le coin supérieur droit de certains blocs lorsque vous placez le curseur de votre souris dessus. Si vous voyez cette icône, vous devez cliquer dessus pour faire glisser ce bloc.

3. Faites glisser le bloc vers un autre emplacement sur la page.

   Lorsque vous faites glisser le bloc plus près du bord d'un autre bloc, le bord est mis en évidence par une ligne bleue et l'une des quatre options d'ancrage apparaît. Vous pouvez contrôler quelle option apparaît en fonction de la position de votre curseur près du bord:

   • Ligne: Ajoute le bloc à une nouvelle ligne. Placez votre curseur plus près du bord inférieur ou supérieur d'un autre bloc.

   • Insérer: Fixe le bloc en haut ou en bas d'un autre bloc. Placez votre curseur plus loin vers l'intérieur à partir du bord supérieur ou inférieur du bloc auquel vous voulez attacher le bloc que vous déplacez.

   • Colonne: Ajoute le bloc à côté d'un autre bloc ou ensemble de blocs. Placez votre curseur près du bord gauche ou droit d'un autre bloc.

   • Float: Vous permet de placer un bloc d'image ou un bloc de carte dans un bloc de texte afin que les mots s'enroulent autour des côtés du bloc flottant. Positionnez votre curseur à la gauche ou à la droite du paragraphe auquel vous voulez que l'image ou la carte flotte à côté.

4. Déposez le bloc en relâchant le bouton de la souris.

Comment séparer des blocs en lignes

Lorsque vous ajoutez un bloc à une page, le bloc est ajouté à une nouvelle ligne et s'étend de l'extrême gauche à l'extrême droite de la page. La hauteur du bloc est fluide, en expansion pour contenir le contenu que vous y ajoutez. Vous pouvez réorganiser les blocs de haut en bas de la page.

Si vous ajoutez un bloc à une page contenant déjà des blocs, le nouveau bloc sera ajouté en dessous des blocs existants.

Lorsque vous créez une nouvelle page ou un nouveau blog, un bloc de texte est automatiquement ajouté.

Comment créer des colonnes de blocs

Lorsque vous réorganisez des blocs, vous pouvez les placer à gauche ou à droite l'un de l'autre, en créant des colonnes dans une rangée. Ces colonnes affectent uniquement la ligne contenant les blocs. Par exemple, vous pouvez organiser trois blocs sur une ligne mais cinq blocs sur une autre ligne.

LayoutEngine utilise une structure de grille de 12 colonnes. Si vous organisez des blocs dans une rangée et que vous voulez qu'ils aient la même largeur, vous devez utiliser 1, 2, 3, 4 ou 6 blocs. (Ces nombres sont divisibles uniformément en 12.)

Pour ajuster la largeur de deux blocs adjacents, placez votre curseur entre les deux blocs. Une fine ligne verticale apparaît et le curseur se transforme en curseur de redimensionnement. Cliquez et faites glisser pour ajuster la largeur des blocs. Le redimensionnement d'un bloc affecte la taille du bloc adjacent.

Comment insérer des blocs

Lorsque vous insérez un bloc au-dessus ou au-dessous d'un autre bloc, vous connectez ces blocs dans la même colonne. Les blocs seront affichés ensemble, ce qui peut être utile lorsque vous créez des mises en page complexes.

De plus, lorsque votre site est redimensionné pour s'adapter à la largeur d'un périphérique mobile, les blocs se redistribuent les uns sur les autres.

Généralement, vous insérez des blocs au-dessus ou au-dessous d'un autre bloc. Cependant, vous pouvez également diviser des blocs de texte avec un autre bloc en insérant un bloc entre les paragraphes du bloc de texte.

Comment faire flotter des blocs dans le contenu

Lorsque vous avez un bloc flottant , le texte de la page enveloppe les côtés du bloc. Les seuls blocs pouvant flotter dans un bloc de texte sont les blocs d'image et les blocs de carte.

Vous pouvez faire flotter un bloc à côté de n'importe quel paragraphe du texte dans le bloc de texte. Pour positionner votre bloc, vous utilisez les icônes qui apparaissent en haut de l'image ou du bloc de carte. Vos options flottantes sont

• Gauche: Fait flotter le bloc à gauche du texte.

• Aucun retour à la ligne: Fait flotter le bloc dans le texte mais n'affiche pas le texte sur le côté gauche ou droit du bloc. Le bloc de carte s'étendra pour remplir toute la largeur du bloc de texte.

  Le bloc d'image fera de même, sauf si l'image n'est pas assez grande, auquel cas l'image sera affichée à sa taille la plus grande, centrée sur toute la largeur du bloc de texte.

• Droite: Fait flotter le bloc à droite du texte.

Maintenant que vous avez regardé comment ajouter, supprimer et réorganiser les blocs dans vos pages, il est temps de passer à la Partie IV, où vous regardez tous les différents types de blocs que vous pouvez ajouter à votre site.