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
Pour insérer un nouveau module sur une page, repérez l’icône représentative du module dans l’onglet Contenuet 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.
Verrouiller un module : cela permet d'éviter de valider sa position et son contenu, en vous évitant de les modifier par accident.
Boutons d'alignement (gauche, centre ou droite)
Remplir la largeur de la page
Déplacer le module dans le pied de page de la page actuel
Taille et rotation du module
Définir le style d'affichage du module sélectionné
Modifier le design du module sélectionné
Menu contextuel
Agripper le module pour le déplacer
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 :
Choisir ou modifier l'image contenue dans ce module Image
Style d'affichage du module sélectionné
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 ;)
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
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
Liens
Vous pouvez insérer des liens sur de nombreux modules, simplement en cliquant sur l'icône de lien dans la barre d'outils.
Pour ensuite tester votre lien, il vous suffira de cliquer sur la nouvelle icône qui sera apparue, à droite de l'icône permettant d'insérer le lien.
Petite astuce pour les modules boutons, vous pouvez désormais tout simplement double-cliquer sur le texte du bouton pour modifier celui-ci. 🚀
Menu contextuel
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".
Les modules dans sections
Si vous êtes sur un site créé sur l'éditeur par section, vous ne pouvez pas déplacer un module dans une autre section ...via le glisser-déposer de base.
Mais il est bien sûr tout à fait faisable de faire cela.
Il vous suffit de sélectionner le module que vous souhaitez déplacer dans une autre section de la page, de saisir la commande Changer de sections, à gauche du module.
Sélectionnez votre module via cette commande, et faites-le glisser dans la section voulue de la page.
Bien évidemment, si vous souhaitez l'envoyer sur une autre page, il vous suffira de passer par la fonction Déplacer du menu contextuel.