Astuce WebAcappella : les outils pour construire son design, les règles et calques

WebAcappella met à disposition divers outils pour vous faciliter la création de votre site internet ! En effet, les règles, les calques et les maquettes sont là pour vous aider à construire votre design. La team WebAcappella vous présente dans cet article l’intérêt d’utiliser les règles et les calques pour disposer les éléments dans une page. Ces outils sont activables depuis le menu « Affichage » aux sections « Afficher les règles » et « Afficher l’explorateur de calques ».

a/ Les règles

L’outil « règles » va vous permettre de créer des lignes horizontales et verticales qui vous aideront à placer et aligner vos éléments grâce à une barre graduée. Ces repères ne seront pas visibles une fois votre site publié et affiché dans un navigateur internet.

RèglesVous allez pouvoir ajouter autant de règles que vous souhaitez. En plaçant votre souris au dessus de la barre graduée en haut, effectuez un clic-droit et cliquez sur « Ajouter une règle ». Vous pourrez également ajouter une règle en double-cliquant sur la barre graduée. La suppression s’effectue de la même manière, par clic-droit.

Déplacez ensuite votre règle sur votre espace de travail en la glissant simplement avec la souris. Vous n’avez plus qu’à placer et aligner votre contenu.

Plus votre site est structuré et aligné, plus l’information sera facile à consulter !

b/ Les calques

Une fonctionnalité apparue avec WebAcappella 4 et fortement utile pour grouper des éléments dans une page et en créer un ensemble :

– pour pouvoir les déplacer sans risquer de bouger par erreur le reste de votre contenu

– ou une fois que l’ensemble est créé et que le placement dans la page est définitif verrouiller le calque pour « encrer » ces éléments et qu’ils ne soient plus sélectionnables.

calques

Par exemple, vous créez un menu de navigation avec divers boutons sur une zone de couleur. Créez un premier calque en cliquant sur le premier onglet « Ajouter un calque » puis sélectionnez tous les éléments qui composent votre menu de navigation. Cliquez ensuite sur « Ajouter au calque ». Désormais, vous pourrez déplacer tout votre menu de navigation dans un seul et même geste sans risquer de déplacer les autres éléments présents sur votre page. Une fois que vous êtes satisfait du placement de votre menu de navigation dans la page, vous souhaitez le fixer. Cliquez sur l’onglet « Verrouiller le calque ». Votre menu ne pourra plus être sélectionné ni déplacé. Vous pourrez continuer ainsi votre travail sur le restant des éléments de la page sans crainte de modifier votre menu.

Il est possible d’ajouter autant de calques que vous souhaitez surtout si vous avez un design construit à partir de nombreux éléments.

Parmi les actions disponibles :

  • Ajouter un calque : ajoute un nouveau calque vide dans la liste des calques.
  • Ajouter au calque : ajoute le ou les éléments sélectionnés dans l’espace de travail au sein du calque en cours de sélection.
  • Verrouiller le calque : les éléments contenus dans un calque ne seront plus sélectionnables dans l’espace de travail.
  • Isoler le calque : permet d’isoler un élément ou un groupe d’éléments présent dans un calque. Ceci permet par exemple de modifier les attributs des éléments présents dans ce calque (taille, bordure, opacité).
  • Associer des calques : sélectionnez deux ou plusieurs calques puis cliquez sur ce bouton pour les associer. Sélectionner ou déplacer un de ces calques impactera les autres calques associés.
  • Dissocier les éléments : permet d’enlever du calque les éléments qui y sont présents.
  • Supprimer le calque : supprime le calque ainsi que les éléments qui y ont été ajoutés.

A noter : les calques WebAcappella ne sont pas comparables aux outils de même nom présents dans les logiciels de retouche d’images comme Photoshop par exemple.

A suivre dans notre prochain article sur les outils pour construire son design, les maquettes et pieds de pages. Très pratique pour appliquer un style visuel uniforme sur l’ensemble des pages du site. Restez connectés au blog WebAcappella !

5 Comments

  1. Lesaintdrome

    Merci pour ces tutos bien pratiques !
    Je ne connais pas d’autre éditeur de logiciel qui propose ce service, vous vous démarquez vraiment là . . .
    Continuez comme ça !

    • Team WebAcappella

      Bonjour,
      Nous vous remercions pour votre message et vos mots d’encouragement.
      Cordialement,
      La team WA

  2. REGARDsur

    Bonjour,
    c’est vraiment avec plaisir que je suivrai vos tutos ou autres conseils proposés dans votre blog. ça manquait ! Je travaille sur votre application depuis plus d’un an…. graphiste de métier, c’est vraiment très bien pour moi d’avoir un logiciel WYSIWYG – composer visuellement le résultat voulu, c’est royal… je vous encourage donc à faire évoluer cette application… à quand d’autres propositions de modules ? ex : autres façons de présenter les photos, galerie (le diaporama, c’est déjà très bien !)… on parle de plus en plus de responsive design ; un site web ne doit plus être pensé pour être uniquement consulté sur un écran d’ordinateur mais aussi sur un smartphone ou depuis une tablette… vous penchez-vous sur la question ? en tout cas, heureuse de ne plus me sentir « isolée » ; et un peu plus crédible vis à vis de mes clients. Je ne peux que vous encourager dans votre développement. A bientôt sur votre blog. Merci.

  3. Andrée Robert

    Votre blogue est génial, et Webacappella aussi.
    Cependant, je me demande pourquoi vous avez un blogue WordPress ! Je voulais me constituer un site web avec un blogue intégré grâce à Webacappella. Maintenant j’hésite pour le blogue. Est-ce que je frais mieux de rester avec WordPress?
    Andrée

    • Team WebAcappella

      Bonjour Andrée !
      Merci pour vos encouragements.
      Nous avions abordé cette question sur le choix de plate-forme de gestion de blog dans les commentaires du premier post.
      En effet, WebAcappella permet la création de sites « statiques » donc il ne permet pas la création de blogs à proprement parler (contenu dynamique, avec gestion des membres…)
      La bouton « blog » qui existe dans le logiciel donne la possibilité d’ajouter un fil de commentaires dans une page, un peu comme un livre d’or.
      Pourquoi un blog WordPress ? Leur plateforme d’hébergement permet justement une gestion de contenu, des membres, le suivi des commentaires… !
      Pour plus d’informations sur le bouton « blog » dans WebAcappella vous pouvez consulter l’article sur cette fonction dans le blog

Commentaires fermés