Principes de fonctionnement de l’éditeur

Bonjour à tous ! 

Dans ce tutoriel, nous allons voir les principes généraux de l'interface WeAdvocacy. L'objectif de ce tutoriel, c'est donc de vous expliquer toutes les subtilités de l'interface pour que vous puissiez vraiment créer vos messages et vos newsletters de la meilleure des manières. 

Pour démarrer, nous allons nous pencher sur la notion de bloc. Dans votre interface, sur la gauche, vous avez tous les éléments qui vous permettent de créer des sections. 

Pour commencer, nous voyons qu'au centre nous avons une section qui permet de gérer la largeur de votre message ou de votre newsletter. 

Pour rajouter une nouvelle section, vous allez cliquer dessus et la faire glisser à l'endroit où vous souhaitez l'insérer. Attention, il y a plusieurs zones dans WeAdvocacy. Attendez bien de vous trouver à l'intérieur de la cellule pour venir mettre votre section. 

Ici, nous avons ajouté une section avec une seule zone. Comme vous pouvez voir, nous nous retrouvons donc avec notre principale table : 

Et ensuite la section que nous venons d'ajouter : 

Tout va être question de jeu entre les différentes cellules. Si en dessous, nous souhaitons rajouter une section en deux parties, nous venons sélectionner ma section et encore une fois, nous venons l'insérer à l'intérieur de ma cellule. Donc attention, il y a plusieurs espaces. 

Ces notions de cellules vont vous permettre de pouvoir gérer tout ce qui est background, alignement ou encore les marges à l'intérieur ou à l'extérieur de la cellule. 

Pour que ce soit plus visuel, nous allons rajouter des éléments à l'intérieur de nos cellules. Mettre un texte assez simple comme un texte enrichi où nous allons venir mettre un titre et un texte. 

Sur la section d'en dessous, nous avons fait deux parties. 

Nous allons donc venir ajouter par exemple une image. Et dans la cellule de droite, nous allons venir mettre un bouton. 

Comme évoqué, grâce à ces cellules, nous allons pouvoir gérer dans un premier temps le background. Sur la partie de droite, vous allez retrouver la notion de background et pouvoir choisir une couleur pour l'arrière-plan de votre cellule. 

Nous pouvons sélectionner uniquement la cellule avec une seule section ce qui veut dire que ça ne colorie que cette partie-là. 

Nous pouvons également faire la même chose sur la cellule globale.

Nous pouvons également venir sélectionner la cellule avec les deux sections et venir modifier le background. Dans notre exemple, nous avons maintenant un background rouge pour la cellule avec une seule zone. un background bleu pour la cellule avec deux zones et un background marron clair pour notre table globale. 

Grâce à ces sections et à ces cellules, nous allons pouvoir également gérer l'alignement. Par exemple, dans notre cellule avec une seule section, nous pourrions choisir 

de mettre le texte centré sur la droite, de le justifier ou de le caler sur la gauche. 

Nous pourrions faire la même chose avec nos deux sections séparées. Nous allons mettre notre image et notre bouton au centre. 

Mais attention, cela se passe au niveau de la cellule. C'est-à-dire que si nous avions choisi de sélectionner notre cellule globale, cela ne fonctionnerait pas. 

De la même manière, nous allons pouvoir contrôler l'alignement vertical en mettant notre image et notre bouton au centre de la cellule.

Enfin, ces notions de cellules permettent de gérer les espacements et la taille de nos cellules. Dans l’entrée layout, nous allons pouvoir choisir la largeur et la hauteur de nos cellules. Comme nous le voyons sur la cellule globale, nous sommes en automatique. 

Lorsque nous nous mettons sur la cellule avec une seule section, nous allons pouvoir mettre une largeur soit à 100% si nous souhaitons que cela s'adapte à la largeur de notre cellule générale ou bien à 150 px par exemple. 

Nous pouvons également modifier la hauteur. Dans notre exemple, notre texte laisse un grand espace entre la phrase “Texte texte texte”et la cellule d’en-dessous. Nous allons donc réduire la hauteur de la cellule en la mettant à 70px.

Une fois la notion de hauteur et de largeur comprise, nous allons pouvoir apprendre à gérer les marges de nos cellules. Il existe pour cela, deux types de marges : 

• Les margins

• Les paddings

Nous allons commencer par la notion de margin. Lorsque nous retournons sur notre première cellule avec une seule section, nous pouvons ajouter des margins, ce qui va ajouter des marges en dehors de la cellule. Ici, grâce aux différentes couleurs de background, vous allez pouvoir observer que nous avons rajouté de l'espace entre notre cellule principale et notre cellule à une seule section. 

Nous pouvons également ajouter des marges sur la droite ou la gauche de notre cellule, et venir complètement effacer l’espace entre nos deux cellules.

Dans un second temps, nous avons la notion de padding. Le padding va être la même chose mais à l'intérieur même de notre cellule. Par exemple, si nous rajoutons du padding sur la droite et sur la gauche, une marge sera ajoutée à l'intérieur de notre cellule. 

Grâce à toutes ces notions de cellules, de hauteur et de largeur, vous allez vraiment pouvoir afficher les sections et les cellules comme vous le souhaitez. 

Enfin, dans les sections partagées, lorsque nous sélectionnons une section, nous allons avoir une largeur de 50%. Pareil pour la seconde, ce qui est normal puisque nous avons choisi un bloc avec deux sections de proportions égales. 

Mais nous allons pouvoir changer ces proportions. Nous pourrions ainsi indiquer que la section avec l’image représente 70% de notre espace et donc que la section avec le bouton représente 30%. 

Pour faire ça directement, sans avoir à modifier la largeur des sections, vous allez retrouvez des cellules avec des sections 3/7 directement dans l’entrée “Block layouts”. 

Sur la partie de droite, vous allez avoir tous les éléments qui vous permettent de revenir en arrière, de supprimer votre notification, ou bien de pouvoir voir le code source de votre notification. 

Une fois que vous êtes satisfait de ces notions-là, vous pouvez soit continuer la création de votre message, soit l'enregistrer comme brouillon et revenir dessus plus tard pour le retravailler. 

A présent, vous connaissez tous les principes généraux de la création d'un message ou d'une newsletter.