Ambassadeurs

Nos Offres

Site Internet Starter

Créez et gérez votre site internet en ligne à moindre prix !
Profitez de notre offre !

190 €/an

Site internet Pack Business

Par abonnement mensuel & sans engagement de durée.

49,00 € / m.

 Nous contacter : +33 (0) 1 34 86 59 93

Le Builder

Page Builder vous permet de mettre en place des plans directement dans le navigateur, sans avoir à écrire de code. Il dispose d'une collection d'éléments de site Web que vous pouvez mettre en page dans les sections et les blocs et remplir avec votre propre contenu. La fonction de bibliothèque incluse vous permet d'enregistrer et de réutiliser les mises en page que vous avez créées.

Jetez un coup d'œil à ce didacticiel vidéo d'introduction pour un aperçu rapide :

Créer des articles dans Joomla

Le Builder ne travaille actuellement que sur des articles publiés. Nous vous recommandons de commencer par un nouveau site Web en créant quelques articles vides et en les affectant au menu principal. Lorsque cette structure initiale est configurée, vous n'aurez plus à quitter le générateur de pages pour pouvoir créer rapidement toutes vos mises en page sans avoir à naviguer entre les différentes sections du CMS.

Concepts de mise en page

Les éléments de construction essentiels du constructeur sont les éléments visuels que vous pouvez utiliser: images, titres, accordéons, et ainsi de suite. Pour construire quoi que ce soit, des mises en page simples à complexes, ces éléments sont organisés à l'aide de sections et de lignes. Ces trois concepts jouent ensemble comme suit :

  • Section. Une section est l'élément de niveau supérieur que vous pouvez mettre à l'intérieur de votre page. Vous pouvez avoir plusieurs sections qui sont toujours affichées en dessous de l'autre. Pensez à ces derniers comme les blocs principaux (ou ... bien, les sections) de votre page. Vous pourriez avoir une section avec une grande image d'abord, suivie d'une section légère avec du texte et une section sombre ci-dessous.
  • Rangée. Chaque section contient au moins un, mais généralement plusieurs lignes. Pensez à eux comme un certain nombre d'éléments, qui sont regroupés. Par rapport à une section, les lignes ne sont généralement pas séparées les unes des autres. À l'intérieur d'une ligne, vous trouvez ensuite vos éléments de contenu réel, que vous pouvez organiser à l'intérieur d'une grille. Par défaut, les éléments de grille s'empilent. Pour créer des colonnes, cliquez sur l'icône Tout en éditant la ligne et sélectionnez l'une des mises en page disponibles.
  • Élément. Chaque ligne contient au moins un, mais généralement plusieurs éléments.

    Un élément est l'un des blocs de construction d'interface utilisateur disponibles. Ceux-ci incluent les titres, le texte, les images, mais aussi les éléments avancés tels que les commutateurs ou les accordéons.

À partir d'un article vide

Lorsque vous ouvrez le générateur et naviguez vers un article vide sur votre site, vous êtes accueilli avec une courte explication et un gros bouton qui indique Select Layout.

Viadecom tutoriel

Cliquez sur ce bouton. Une boîte de dialogue apparaîtra avec toutes les dispositions pré-construites incluses dans le thème. Pour commencer avec une mise en page vide, cliquez sur le bouton Start Empty en bas à droite.

Viadecom tutoriel

La boîte de dialogue disparaît et le générateur affiche désormais une seule section (vide) à gauche, et l'aperçu (également vide) à droite. C'est un bon point pour commencer.

Viadecom tutoriel

Une section vide contient une ligne vide par défaut. Survolez la section vide pour voir trois groupes de boutons apparaissent autour de la section. Ce sont les suivants:

  • En haut, vous verrez quatre boutons liés à la section elle-même. Ce sont, de gauche à droite:

    • Edit: Modifiez la section. Définissez des attributs tels que la hauteur, le fond et le rembourrage (padding) pour cette section.
    • Copy: Copiez la section. Cela créera une version en double de cette section et de tous les éléments situés à l'intérieur.
    • Save in Library: Enregistrer dans la bibliothèque. Après avoir configuré votre section ou créé une mise en page complexe, vous pouvez l'enregistrer dans votre bibliothèque. De cette façon, vous pouvez le charger plus tard lors de la construction de la page suivante.
    • Delete: Supprimez la section.
  • En bas à gauche, un bouton apparaît:
    • Add Section: Ajouter une section. Cela crée une nouvelle section vide en dessous de la précédente.
  • Sur le côté droit vous trouverez quatre boutons liés à la rangée à l'intérieur de la section. Ce sont, de haut en bas:
    • Edit: Modifiez la ligne. Une ligne affiche tous ses éléments enfants dans une grille. Lors de l'édition d'une ligne, vous pouvez modifier tous les attributs relatifs à la façon dont cette grille est affichée, comme les colonnes, la gouttière et la marge.
    • Copy: Copiez la ligne. Cela dupliquera la ligne avec tous les éléments situés à l'intérieur.
    • Delete: Supprimez la ligne et tous les éléments à l'intérieur.
    • Add Row: Ajoutez une nouvelle ligne à cette section.

Insérer des éléments

Après avoir créé une nouvelle ligne, une ligne vide s'affiche sous la forme d'une zone blanche avec un signe + noir au centre. Cliquez simplement sur cette case pour insérer un élément dans la ligne. Lorsque vous avez déjà un élément à l'intérieur d'une rangée, il affichera un petit signe + au bas de la ligne, que vous pouvez cliquer pour ajouter un autre élément.

Viadecom tutoriel

Lorsque vous cliquez sur le signe +, une boîte de dialogue s'ouvrira où vous pourrez choisir l'un des éléments disponibles. L'onglet My Elements en haut affichera les éléments que vous avez déjà enregistrés dans votre bibliothèque.

Viadecom tutoriel

Dans l'onglet New, choisissez l'un des éléments (par exemple : Accordion). La boîte de dialogue se ferme et l'élément apparaît à l'intérieur de la ligne. En même temps, l'aperçu sur le côté droit mettra à jour et affichera l'élément avec le contenu d'espace réservé représentatif.

Modifier les éléments

Les éléments sont représentés dans la barre d'outils du générateur sous forme de cases grises avec une icône au centre. En survolant un élément, les boutons apparaissent dans le coin supérieur droit. Ils vous permettent de dupliquer cet élément, de l'enregistrer dans la bibliothèque ou de le supprimer. Pour modifier un élément, cliquez simplement dans sa zone grise.

Alternativement, vous pouvez également survoler des éléments dans l'aperçu en direct sur le côté droit. Une barre d'outils bleue disparaît à côté de l'élément, où vous pouvez immédiatement éditer, enregistrer, cloner et supprimer l'élément, comme vous le feriez avec les outils sur le côté gauche.

Viadecom tutoriel

Lors de l'édition d'éléments, il y a toujours deux panneaux disponibles : Content et Settings (Accordéon). Vous pouvez basculer entre ces deux à l'aide de la navigation affichée à côté du nom de l'élément.

Dans le panneau Content, vous pouvez créer le contenu de l'élément, qui semble toujours différent, en fonction de l'élément que vous éditez actuellement. Dans les éléments tels que Headline ou Text, vous trouverez un grand éditeur de texte pour entrer du texte brut ou HTML. Il existe plusieurs options disponibles pour définir la façon dont le HTML résultant est rendu. Dans les éléments plus complexes, comme un Accordion, vous pouvez créer et réorganiser plusieurs éléments. Chaque élément peut ensuite être édité, par exemple en saisissant du contenu dans une zone de texte.

Dans le panneau Settings (Paramètres), un grand nombre de paramètres d'apparence sont disponibles. Celles-ci vont de marges, sur l'animation, à l'alignement et les options de style. Notez que l'apparence réelle dépendra toujours du style du thème. Donc, si vous voulez réellement ajuster les couleurs ou les polices d'un élément, utilisez le panneau style.

Réorganiser les éléments

Pour réorganiser une mise en page, il suffit de déplacer vos sections, lignes et éléments dans la barre d'outils. Les éléments peuvent être déplacés simplement par drag and drop. Vous pouvez réorganiser les éléments d'une ligne, déplacer l'élément vers une ligne différente ou même vers une nouvelle section.

Viadecom tutoriel

Pour déplacer une ligne, placez votre curseur sur la bordure de la ligne. Le curseur se modifie pour afficher une icône de déplacement. Maintenant, faites glisser et déposez la ligne pour la déplacer dans la section, ou déplacez-la vers une autre section de la page.

Viadecom tutoriel

Pour déplacer une section entière, placez le curseur sur le nom de la section. Faites glisser et déplacer pour déplacer la section vers un autre emplacement sur la page.

Viadecom tutoriel

Enregistrer

Chaque fois que vous modifiez une page, un bouton Save Page (Enregistrer la page) s'affiche automatiquement dans le coin supérieur droit. Sachez que si vous quittez le Builder sans enregistrer, vos modifications seront perdues, même si vous êtes toujours dans l'application.

Ne confondez pas ce bouton avec le bouton Général d'enregistrement du générateur de site Web, car celui-ci ne sauvegardera que les paramètres que vous avez modifiés dans d'autres sections de l'administration.

Viadecom tutoriel
- Website Builder

Coordonnées

Siège : 23, rue du Départ - 75014 Paris

Bureaux :

5, rue Joseph Cugnot

78120 RAMBOUILLET

Tél. : +33 (0) 1 34 865 993

Contactez-nous