Découvrir les fonctionnalités du constructeur de pages nommé "Layer"
Qu'est ce que le constructeur visuel Layer?
Le constructeur visuel vous permettra de créer votre site Internet très facilement car tout est visuel, pas de codage!
C’est une expérience incroyable et permet une conception beaucoup plus rapide. Lorsque vous ajoutez du contenu ou ajustez les paramètres de styles dans le constructeur visuel, vos modifications apparaissent instantanément. Vous pouvez cliquer sur la page et commencer à taper. Vous pouvez mettre du texte en surbrillance et ajuster sa police et son style. Vous pouvez ajouter du nouveau contenu, créer votre page et regarder tout se passer sous vos yeux.
Activer Layer
Lorsque vous êtes connecté à votre administration, vous pouvez accéder à n’importe quelle page du front-end de votre site et cliquer sur le bouton «Activer le constructeur visuel» dans la barre d’administration pour lancer Layer.
Si vous éditez votre page via l’administration, vous pouvez basculer vers Layer en cliquant sur le bouton «Modifier avec le constructeur de page Layer» qui se trouve au centre de la page.
Les bases de Layer
La puissance de Jila réside dans le constructeur visuel, un constructeur de pages par glisser-déposer qui vous permet de créer à peu près n’importe quel type de site en combinant et en organisant des éléments de contenu.
Le constructeur utilise 4 blocs de construction principaux: les sections, les lignes, les colonnes et les modules. Leur utilisation vous permet de créer un nombre incalculable de mises en page. Les sections sont les plus grands blocs de construction et elles abritent des groupes de lignes. Les lignes se trouvent à l’intérieur des sections et regroupent les colonnes. Les colonnes sont utilisées pour loger des modules. Les modules sont placés à l’intérieur des colonnes. C’est la structure de chaque site Internet de Jila.
Les Sections
Les blocs de construction les plus basiques et les plus importants utilisés dans la conception de mises en page avec sont les sections. Ceux-ci sont utilisés pour créer de grands groupes de contenu, et ils sont la première chose que vous ajoutez à votre page. Il existe trois types de sections: Normale, spéciale et plein écran. Les sections normales sont constituées de lignes et de colonnes tandis que les sections plein écran sont constituées de modules plein écran qui s’étendent à toute la largeur de l’écran. Les sections spécialisées permettent des dispositions plus avancées. Pour plus d’informations sur l’utilisation des sections, consultez notre article détaillé sur les sections.
Code couleur :
- les sections normales sont Bleues
- Les sections spéciales sont Oranges
- Les section plein écran sont Violettes
Les Lignes & Colonnes
Les lignes se trouvent à l’intérieur des sections et vous pouvez placer jusqu’à 6 lignes dans une section. Vous avez le choix entre de nombreux types de colonnes. Une fois que vous avez défini une structure de colonne pour votre ligne, vous pouvez ensuite placer des modules dans une colonne souhaitée. Il n’y a pas de limite au nombre de modules que vous pouvez placer dans une colonne. Pour plus d’informations sur l’utilisation des lignes, consultez notre article détaillé sur les lignes.
Code couleur :
- les lignes sont Vertes
- Les colonnes n’ont pas de couleurs
Les Modules
Les modules sont les éléments de contenu qui composent votre site. Chaque module peut s’adapter à n’importe quelle largeur de colonne et ils sont tous entièrement adaptatifs ( responsive ).
Code couleur :
- les modules sont noirs
Construire votre première page
Les trois blocs de construction de base (sections, lignes et modules) sont utilisés pour créer votre page.
- Sections
- Lignes
- Modules
Ajout de votre première section
Avant de pouvoir ajouter quoi que ce soit à votre page, vous devez d’abord ajouter une section. Des sections peuvent être ajoutées en cliquant sur le bouton bleu (+). Lorsque vous survolez une section qui existe déjà sur la page, un bouton bleu (+) apparaîtra en bas de celui-ci. Lorsque vous cliquez dessus, une nouvelle section sera ajoutée sous la section sur laquelle vous êtes actuellement survolé.
Si vous créez une toute nouvelle page à partir de zéro, votre première section sera ajoutée automatiquement.
Ajout de votre première ligne
Après avoir ajouté votre première section, vous pouvez commencer à ajouter des lignes de colonnes à l’intérieur. Une section peut contenir n’importe quel nombre de lignes et vous pouvez mélanger et faire correspondre des lignes de différents types de colonnes pour créer une variété de mises en page.
Pour ajouter une ligne, cliquez sur le bouton vert (+) à l’intérieur d’une section vide, ou cliquez sur le bouton vert (+) qui apparaît lorsque vous survolez une ligne pour ajouter une nouvelle ligne en dessous. Une fois que vous avez cliqué sur le bouton vert (+), vous serez accueilli avec une liste de types de colonnes. Choisissez le style de colonne souhaitée et vous êtes prêt à ajouter votre premier module.
Ajout de votre premier module
Les modules peuvent être ajoutés à l’intérieur des colonnes, et chaque colonne peut contenir autant de module que vous le souhaitez. Les modules sont les éléments de contenu de votre page, et Layer est livré avec plus de 66 modules différents que vous pouvez utiliser pour créer votre site Internet. Vous pouvez utiliser des modules de base tels que du texte, des images et des boutons, ou des modules plus avancés tels que des sliders, des galeries et de portfolio.
Pour ajouter un module, cliquez sur le bouton noir (+) qui apparaît à l’intérieur d’une colonne vide ou cliquez sur le bouton noir (+) qui apparaît lorsque vous survolez un module sur la page pour ajouter un nouveau module en dessous. Une fois que vous avez cliqué sur le bouton, vous serez accueilli par une liste de modules. Choisissez le module souhaité et il sera ajouté à votre page et le panneau de configuration du module apparaîtra. À l’aide de ce panneau de configuration, vous pouvez commencer à configurer votre module.
Configuration et personnalisation des sections, des lignes et du module
Chaque section, ligne et module peut être personnalisé de différentes manières. Vous pouvez accéder au panneau des paramètres d’un élément en cliquant sur l’icône “engrenage” qui apparaît lorsque vous survolez un élément de la page.
Cela lancera le panneau des paramètres pour l’élément spécifié. Chaque panneau de paramètres est divisé en trois onglets: Contenu, style et Avancé. Chaque onglet est conçu pour rendre l’accès et le réglage de la grande variété de paramètres de Layer rapides et faciles. L’onglet Contenu est bien sûr l’endroit où vous pouvez ajouter du contenu tel que des images, des vidéos, des liens et des étiquettes d’administration. L’onglet style est l’endroit où nous avons placé tous les paramètres de style intégrés pour chaque élément. En fonction de ce que vous modifiez, vous pouvez contrôler une grande variété de paramètres en un clic; y compris: typographie, espacement (marge interne / marge externe), styles de boutons, etc. Pour un aperçu détaillé de l’onglet Style, consultez notre didacticiel sur les paramètres de styles. Enfin, si vous voulez encore plus de contrôle, vous pouvez accéder à l’onglet Avancé où vous pouvez appliquer un CSS personnalisé, ajuster la visibilité en fonction de l’appareil et (en fonction de l’élément que vous modifiez) faire encore plus de réglages.
Enregistrement et accès aux paramètres de la page
Pour accéder aux paramètres généraux de la page, cliquez sur l’icône du dock violet en bas de votre écran. Cela élargira la barre de paramètres et vous fournira diverses options.
- Utiliser le design filaire : Celui-ci vous présente tous les éléments de votre page en système de blocs non visuels.
- Un dé-zoom : Cette option vous permet de voir plus d’éléments sur votre page pour visualiser dans l’ensemble.
- Les boutons de mise à l’échelle : ces boutons vous permettent de voir votre site comme si vous étiez sur différents appareils ( ordinateurs, tablettes, mobiles) très utile pour vérifier le style et modifier en fonction de l’appareil utilisé.
- Charger à partir de la bibliothèque : Icône ” + ” ; Cette option vous permet de charger un nouveau template pour cette page. ATTENTION, Le contenu sera supprimé lors du chargement d’un nouveau template.
- Sauvegarder dans la bibliothèque : cette option vous permet de sauvegarder dans la bibliothèque Layer pour utiliser ce modèle de page ultérieurement sur n’importe quelle autre page.
- Effacer le modèle : Icone ” poubelle ” ; Cette option vous permet de supprimer cette page.
- Fermer les paramètres : Icône ” x ” ; Permet de fermer le dock.
- Paramètres de la page Icône ” Engrenage ” : Permet de régler des éléments tels que la couleur de fond de la page et la couleur du texte. Ajouter du CSS pour cette page uniquement.
- Historique Icône ” Horloge ” : Permet de voir les modifications effectuées depuis l’ouverture de Layer et retourner à un point ultérieur si besoin.
- Portabilité : Permet d’importer ou d’exporter un modèle.
- Layers : juste à gauche du bouton enregistrer : Vous permet de voir la “navigation” tous les éléments de votre page. Très utile si certains éléments se chevauches.
- Enregistrer : Ce bouton vous permet d’enregistrer les modifications apportées ( Raccourci : CTRL+S )
Enregistrement de vos propres mises en page dans la bibliothèque Layer
En plus d’utiliser les mises en page prédéfinies fournies avec Layer, vous pouvez également enregistrer vos propres créations dans la bibliothèque Layer. Lorsqu’un design est enregistré en tant que mise en page dans la bibliothèque Layer, il peut être chargé sur de nouvelles pages. Plus vous construisez votre bibliothèque avec vos designs préférés, plus vite vous serez en mesure de créer de nouvelle pages. Pour un aperçu détaillé de la bibliothèque Layer, n’oubliez pas de consulter notre article dédié à la bibliothèque Layer
Pour enregistrer un élément dans la bibliothèque, cliquez sur l’icône de la bibliothèque qui apparaît lorsque vous survolez un élément et dans la barre des paramètres de la page. Une fois qu’un élément a été ajouté à la bibliothèque, il apparaîtra dans l’onglet «Ajouter à partir de la bibliothèque» lors de l’ajout de nouvelles mises en page, sections, lignes et modules.