Explication de la structure sections / lignes / colonnes

La structure d'un site internet est relativement simple et pourtant les combinaisons sont infinis. Découvrez comment est structuré un site sur Jila .

Les sections

Les sections sont le plus gros bloc de construction du constructeur Layer. Vous pouvez les considérer comme des blocs horizontaux qui peuvent regrouper votre contenu dans des zones visuellement distinctes. Dans Layer, tout ce que vous construisez commence par une section. Ce bloc de contenu a divers paramètres qui peuvent être utilisés pour faire des choses vraiment impressionnantes.

Comment ajouter une section à votre page

Avant de pouvoir ajouter un module d’accordéon à votre page, vous devrez d’abord ouvrir le constructeur visuel “Layer”. Vous remarquerez un bouton “Modifier avec le constructeur de page Layer” au centre de l’écran à chaque fois que vous créez une nouvelle page. Cliquer sur ce bouton activera le constructeur visuel, vous donnant accès à tous les modules de Layer. Vous pouvez également cliquer sur le bouton “Activer le constructeur visuel”  dans la barre d’administration lors de la navigation sur votre site sur le front-end si vous êtes connecté à votre administration.

Une fois que vous êtes entré dans le constructeur visuel “Layer”, vous pouvez cliquer sur le bouton bleu (Icône “+” bleu) pour ajouter une nouvelle section à votre page. Une fenêtre contextuelle (ou popup) s’ouvrira et vous permettra d’ajouter l’un des trois types de sections de Layer. Ces types incluent: Standard, Spécial et Plein écran.

Une fois la section ajoutée, vous serez accueilli avec la liste des options de la section. Ces options sont séparées en trois groupes principaux: Contenu, Style et Avancé.

Options de contenu de la section

Dans l’onglet contenu, vous trouverez tous les éléments de contenu de la section. Pour les sections, ces éléments de contenu sont limités aux éléments d’arrière-plan tels que les images d’arrière-plan et les vidéos.

Lien

Ici, vous pouvez ajouter un lien à votre section. Si le visiteur clique sur la section il sera envoyé vers L’URL que vous avez entré.

Fond

Cette option vous permet de modifier la couleur, le dégradé, l’image ou la vidéo de fond de votre module Bascule. Le fond est l’espace entre chaque bascules. Si une image est définie, celle-ci sera utilisée comme arrière-plan de ce module. Pour supprimer une image d’arrière-plan, supprimez simplement l’URL du champ. Les images d’arrière-plan apparaîtront au-dessus des couleurs d’arrière-plan, ce qui signifie que votre couleur d’arrière-plan ne sera pas visible lorsqu’une image d’arrière-plan est appliquée.

Étiquette Admin

Cela changera l’étiquette de la section dans le constructeur pour une identification facile. Lors de l’utilisation de l’affichage filaire dans Layer, ces étiquettes apparaîtront dans le bloc de module de l’interface.

Options de style de la section

Dans l’onglet Style, vous trouverez toutes les options de style de la section, telles que la taille et l’espacement. C’est l’onglet que vous utiliserez pour modifier l’apparence de votre section. Chaque type de section Layer a une longue liste de paramètres de style que vous pouvez utiliser pour modifier à peu près tout.

Modèle

Ici, vous pouvez choisir si votre section a ou non une ombre intérieure. Cela peut être superbe lorsque vous avez des arrière-plans colorés ou des images d’arrière-plan.

Séparateur

Les séparateurs de section vous permettent d’ajouter des transitions de formes créatives entre différentes sections de votre page.

Dimensionnement

Paramétrez la largeur de la section et sa largeur maximale, utile le responsive “design adaptatif en fonction de l’appareil du visiteur”. Configurez l’alignement du texte de la section.
Gérez la hauteur.

Espacement

La marge vous sera utile pour ajouter de l’espace entre le bord extérieur de la section et le contenu de celle-ci.

La marge internet sera utile pour ajouter de l’espace entre les bord de la section et son contenu.

Bordure

L’activation de cette option placera une bordure autour de votre section. Cette bordure peut être personnalisée à l’aide des paramètres conditionnels suivants:

  • Coins arrondis, cette option vous permet de créer des coins arrondis à votre section.
  • La couleur de votre bordure. Sélectionnez une couleur personnalisée dans le sélecteur de couleurs pour l’appliquer à votre bordure.
  • L’épaisseur de la bordure:Par défaut, les bordures ont une largeur de 1 pixel. Vous pouvez augmenter cette valeur en faisant glisser le curseur ou en saisissant une valeur personnalisée dans le champ de saisie à droite du curseur. Unités de mesure personnalisées, ce qui signifie que vous pouvez changer l’unité par défaut de “px” à autre chose, comme em, vh, vw, etc.
  • Les bordures prennent en charge huit styles différents, notamment: plein, pointillé, tirets, double, rainure, crête, encart et aucun. Sélectionnez le style souhaité dans le menu déroulant pour l’appliquer à votre bordure.

Ombre

Ajoutez une ombre à votre module: 7 effets prédéfinis ou personnalisez votre propre style.

Filtre

Transformer

À l’aide des commandes de transformation, vous pouvez effectuer des ajustements visuels sur n’importe quel élément à l’aide d’une combinaison de paramètres d’échelle, de déplacement, de rotation et d’inclinaison. Cela vous permet de créer des effets de conception avancés sans avoir besoin d’un programme de conception graphique distinct.

Animation

Choisissez un style d’animation pour activer les animations pour cet élément. Une fois activé, vous pourrez personnaliser d’avantage votre style d’animation. Pour désactiver les animations, choisissez l’option Aucune.

Options avancées de la section

Dans l’onglet avancé, vous trouverez des options que les concepteurs Web plus expérimentés pourraient trouver utiles, telles que les attributs CSS et HTML personnalisés. Ici, vous pouvez appliquer un CSS personnalisé à votre section. Vous pouvez également appliquer des classes CSS et des ID personnalisés à la section, qui peuvent être utilisés pour personnaliser la section dans les paramètres de la page ou dans le menu apparence > styles généraux > CSS additionnel de votre administration

ID et Classes CSS

Entrez un ID CSS facultatif à utiliser pour ce module. Un identifiant peut être utilisé pour créer un style CSS personnalisé ou pour créer des liens vers des sections particulières de votre page.

Entrez les classes CSS facultatives à utiliser pour ce module. Une classe CSS peut être utilisée pour créer un style CSS personnalisé. Vous pouvez ajouter plusieurs classes, séparées par un espace.

CSS personnalisé

Le CSS personnalisé peut également être appliqué au module et à tout élément interne du module. Dans la section CSS personnalisé, vous trouverez un champ de texte dans lequel vous pouvez ajouter du CSS personnalisé directement à chaque élément. Les entrées CSS dans ces paramètres sont déjà enveloppées dans des balises de style, vous n’avez donc qu’à entrer des règles CSS séparées par des points-virgules.

Visibilité

Cette option vous permet de contrôler les appareils sur lesquels votre module apparaît. Vous pouvez choisir de désactiver votre module individuellement sur les tablettes, les téléphones ou les ordinateurs de bureau. Ceci est utile si vous souhaitez utiliser différents modules sur différents appareils ou si vous souhaitez simplifier la conception mobile en supprimant certains éléments de la page.

Vous trouverez l’option de planification pour afficher ce module à certains moments (en savoir plus sur l’option planification)
L’option popup vous permettra d’ajouter une popup (en savoir plus sur l’extension popup).

Transitions

Les transitions vous permettent de modifier les options des animations.

Position

Ici, vous pouvez choisir le type de position de l’élément. Les éléments absolute flotteront à l’intérieur de leurs éléments parents. Les éléments fixed flotteront dans la fenêtre du navigateur. Les éléments positionnés de manière relative se trouvent statiquement dans leur conteneur parent, mais peuvent toujours être décalés sans perturber les éléments environnants.

Vous pouvez contrôler la position de l’élément sur l’axe z. Les éléments ayant des valeurs d’indice z plus élevées seront placés au sommet des éléments ayant des valeurs d’indice z plus faibles.

Scroll effects

L’option sticky vous offre la possibilité que cet élément reste à une distance fixe du bord supérieur ou inférieur de la fenêtre du navigateur lorsque l’utilisateur fait défiler la page.

À l’aide des effets de défilement, vous pouvez transformer les éléments de votre page au fur et à mesure que vous faites défiler. La transition de l’animation est basée sur le comportement de défilement de l’utilisateur. Une fois que l’élément entre dans la fenêtre du navigateur (en haut), l’animation commence, et une fois qu’il quitte la fenêtre (en bas), l’animation se termine. Comme toutes bonnes choses à utiliser avec modération.

Utilisation des sections pleine écran

Les sections plein écran vous donnent accès à un nouvel ensemble de modules. Ces modules agissent un peu différemment car ils profitent de toute la largeur de la fenêtre du navigateur. Les modules plein écran ne peuvent être placés que dans des sections plein écran.

Une fois que vous avez ajouté une nouvelle section plein écran à votre page, vous pouvez cliquer sur le bouton «Ajouter des modules» dans la section pour ajouter un module plein écran. Contrairement à la section normale, il n’y a pas de concept de lignes ou de colonnes, puisque les modules pleine largeur profitent toujours de 100% de l’écran. Les modules plein écran sont un excellent moyen d’ajouter une pause visuelle à la page!

Un bon exemple de module plein écran est le Slider plein écran. Ce slider fonctionne comme un slider normal, sauf qu’il s’étend à 100% de la largeur. Afficher un slider à une telle échelle peut être assez étonnant, mais le résultat peut être très agréable.

Utilisation des sections spéciales

Des sections spéciales ont été créées pour permettre des structures de colonnes plus avancées. Contrairement aux sections normales, lorsque vous utilisez une section spéciale, vous pouvez ajouter des variantes de colonnes complexes. Ces types de mises en page ne sont pas possibles en utilisant des sections normales.

Une fois que vous ajoutez une section spéciale à la page, vous remarquerez qu’une zone a un bouton «ajouter un module», tandis que l’autre a un bouton «insérer une ligne». La zone «insérer le module» vous permet d’ajouter directement un module sans utiliser de ligne. Vous pouvez ajouter autant de modules ici, sur une seule ligne, et ils couvriront la largeur verticale de la section, à côté de la structure de colonne que vous construisez. Cliquez sur «insérer une ligne» vous permettra d’insérer des lignes supplémentaires à gauche / droite de votre module. D’une certaine manière, cela peut être considéré comme l’ajout de lignes dans les lignes!

Le résultat est la possibilité de créer à peu près n’importe quelle structure de colonne dont vous pourriez rêver, et quelle que soit la structure que vous choisissez, nous nous sommes assurés que la combinaison aura fière allure!

Les lignes

Les lignes sont les différentes dispositions de colonnes qui peuvent être placées à l’intérieur des sections. Tout comme les modules, les lignes ont divers paramètres auxquels vous pouvez accéder en cliquant sur l’icône des paramètres en haut à gauche de la ligne. Les paramètres de lignes en particulier peuvent être utilisés pour augmenter considérablement la variété de mises en page construites avec Layer, car ils créent la structure dans laquelle vos modules sont logés.

La seule différence avec les sections se trouve dans l’onglet Contenu où vous trouverez la configuration des colonnes de votre ligne.

Options de contenu de la section

Choisissez la structure de colonne de votre ligne, modifier l’ordre, dupliquez ou supprimez une colonne.

Pour modifier les paramètres d’une colonne cliquez sur l’icône “paramètres” de la colonne choisie.

Une nouvelle popup s’ouvrira avec les paramètre de cette colonne. Les paramètres sont identiques à ceux des sections.

Articles en relation

Jila est une plateforme vous permettant de créer votre propre site Internet sans connaissances techniques. Grâce à nos nombreux outils professionnels et simplifiés tout le monde peut créer un site professionnel à son image.

© Copyright 2020-2021 | jila.fr
Développé en Provence

FONCTIONNALITÉS

Une plateforme ultra complète accessible à tous. Notre constructeur de page “Layer” vous permettra de créer votre site/blog en toute simplicité et sans connaissances techniques. Grâce au constructeur visuel, effectuez vos modifications en temps réel.

RESSOURCES

Nous mettons à votre disposition une documentation détaillée pour vous permettre de créer votre site Internet professionnel en toute autonomie. Nous vous proposerons également dans notre blog des tutoriels.

SUPPORT TECHNIQUE

Vous pouvez nous contacter par:

MENTIONS LÉGALES
Jila.fr – La fierté de créer son site Internet