Manipulez les modules

Prenez le pouvoir sur les modules de SiteW ! Glissez, déposez, sélectionnez, déplacez, poussez, redimensionnez, tournez, coupez, collez, dupliquez, verrouillez, superposez, supprimez les modules… et découvrez la liberté de création offerte par l’éditeur SiteW.

Insérer et supprimer

Insérer un module 

A vous de jouer maintenant
Info play
Pour insérer un nouveau module sur une page, repérez l’icône représentative du module dans l’onglet Contenu et effectuez une opération de glisser-déposer (drag’n drop) dans la zone de création.

Vous êtes libre de déposer le module où bon vous semble. Lorsque vous insérez un nouveau module, ne vous souciez pas des questions de superpositions, d’alignements ou de dimensions, vous pourrez résoudre ces questions dans un second temps.

Le cadre de sélection

Lorsque le module est déposé dans la zone de création, il apparaît entouré de son cadre de sélection. Vous trouverez plusieurs icônes autour de ce cadre de sélection :

Dans ce premier exemple, vous pouvez voir les différentes fonctions qui s'affichent en sélectionnant un module Texte

  1. Verrouiller un module : cela permet d'éviter de valider sa position et son contenu, en vous évitant de les modifier par accident.
  2. Boutons d'alignement (gauche, centre ou droite)
  3. Remplir la largeur de la page
  4. Déplacer le module dans le pied de page de la page actuel
  5. Taille et rotation du module
  6. Définir le style d'affichage du module sélectionné
  7. Modifier le design du module sélectionné
  8. Menu contextuel
  9. Agripper le module pour le déplacer
  10. Déplacer le module vers le bas tout en poussant les modules situés au-dessous pour éviter tout chevauchement.

Second exemple avec cette fois-ci un module Image :

Vous retrouverez la plupart des fonctions détaillées précédemment, avec cependant 3 nouvelles icônes :

  1. Choisir ou modifier l'image contenue dans ce module Image
  2. Style d'affichage du module sélectionné
  3. Redimensionner le module tout en poussant les modules situés au-dessous pour éviter tout chevauchement.

L’action de ces différentes fonctions est détaillée dans les chapitres ci-dessous.

En cliquant ailleurs sur la zone de création, le module est désélectionné : il suffit de cliquer dessus pour le sélectionner à nouveau et faire réapparaître le cadre de sélection.

Astuces des développeurs ;)
Info tips
Pour les modules de petites tailles, le cadre de sélection est plus large pour vous permettre d’accéder plus facilement à tous les outils.

Supprimer un module

Trois méthodes permettent de supprimer un module

  • Appuyez sur la touche Suppr du clavier
  • Utilisez la corbeille présente en bas du panneau contenu
  • Utilisez l’option Supprimer du menu contextuel du module.

👉 Dans les trois cas, il faudra ensuite confirmer la suppression dans le panneau de gauche.

Déplacer un module

La poignée Déplacer permet de librement déplacer le module dans la zone de création. Il est possible de réaliser la même opération sans “viser” précisément cette poignée, dès lors que la souris affiche le pointeur de déplacement (voir figure ci-dessus) à l’intérieur du cadre de sélection.

Déplacer en poussant

La poignée Déplacer en poussant a pour effet, de repousser les modules situés “sur le chemin” vertical du déplacement, afin d’éviter une superposition des modules.

Redimensionner en poussant

Cette poignée Redimensionner en poussant vous permet également de repousser les modules sous-celui, pour éviter tout chevauchement, mais en vous permettant également de redimensionner votre module.

Redimensionner un module

Pour redimensionner un module, il suffit d’agir sur les bordures de son cadre de sélection.

Ici aussi, le fonctionnement est très simple, puisqu'il vous suffit de saisir la bordure du haut pour allonger le module vers le haut, la bordure de droite pour la bordure vers la droite, etc.

Notez de plus que vous pouvez saisir un module par les ronds dans ses angles, afin de modifier sa largeur et sa hauteur en même temps.

Tourner un module

Le module peut tourner librement sur lui-même grâce à la fonction Taille et rotation dans la barre d'outil. Dans cette fonction, vous pourrez de nouveau préciser la taille d'un module au pixel près, mais également choisir vous-même sa rotation en modifiant sa valeur dans le champ Rotation.

Dans l'exemple en capture ci-dessus, pour créer une légère rotation vers la droite, nous avons donc indiqué la valeur 20 °. Si vous souhaitez inverser la rotation est créé une rotation vers la gauche, il suffit d'ajouter un moins " " avant la valeur, ce qui donnerait dans notre exemple  -20 °.

Pour aller plus loin
Info stepup
Pour mieux prendre en main les différentes fonctions d'alignement, nous vous invitons à découvrir notre guide à ce sujet : Alignement automatique de vos modules

 

Le menu contextuel du module s’ouvre en cliquant sur les trois points tout à droite de la barre d'outils du module sélectionné, ou bien par un clic droit à l’intérieur du module. Les choix proposés dans ce menu dépendent du module et de son contexte, mais on y trouve systématiquement les actions de base copier / couper / coller / supprimer, ainsi que notamment :

Au-dessous / Au-dessus : Ordre d’affichage des modules qui se superposent

Dupliquer… : Copier-coller du module vers une autre page.

Dupliquer ici : Copier-coller du module sur la page en cours.

Déplacer… : Couper-coller du module vers une autre page.

Visibilité : vous permet de définir si le module est visible sur mobile. Notez que si le mode mobile Personnalisation manuelle est activé, vous pouvez également définir à l'inverse qu'un module ne soit pas visible sur ordinateur, mais uniquement sur mobile.

Lien interne : Vous permet de créer un lien direct vers votre module, aussi appelé "ancre".

Avez-vous trouvé la réponse à votre question ?
Oui
Non
Merci pour votre réponse.

Dernière mise à jour : 15 novembre 2023