Options du template

Cette section vous permet de styliser les jeux de couleurs de votre site.

Corps de page

Ici, vous pouvez configurer les paramètres de couleur pour le body.

Option	Par défaut	Description
Couleur d'arrière-plan	#eee	Vous permet de définir la couleur d'arrière-plan par défaut pour le corps de l'ensemble du site.
Couleur du Texte	#333	Définissez la couleur du texte du contenu du corps.
Couleur du lien	#007bff	Définissez la couleur des liens dans le contenu du corps.
Couleur du Lien au Survol	#007bff	Définissez la couleur des liens survolés par la souris

 

En-tête

Ici, vous pouvez définir les palettes de couleurs d'en-tête pour votre site.

Option	Par défaut	Description
Couleur d'arrière-plan	#333	Permet de définir la couleur d'arrière-plan par défaut de la section d'en-tête pour l'ensemble du site.
Couleur du Texte	#fff	Définit la couleur du texte pour la section d'en-tête.
Couleur du Texte du Logo	#007bff	Définit la couleur pour votre logo texte.
Couleur du Slogan Logo	#007bff	Définit la couleur pour la ligne de slogan dans votre logo texte.
Couleur d'arrière-plan	#fff	Définit la couleur d'arrière-plan de l'en-tête fixe.

Menu principal

Ici, vous pouvez définir les palettes de couleurs du menu principal pour votre site.

Option	Par défaut	Description
Couleur du lien	#333	Définit la couleur du lien pour le menu principal.
Couleur du Lien Actif	#007bff	Définit l'apparence d'un lien pendant son activation.
Couleur du Lien au Survol	#007bff	Définit la couleur de survol du lien pour le menu principal.

Menu Déroulant

Ici, vous pouvez définir les couleurs du menu déroulant pour votre site.

Option	Par défaut	Description
Couleur d'arrière-plan	#fff	Vous permet de définir la couleur d'arrière-plan par défaut pour le menu déroulant.
Couleur du lien	#333	Définissez la couleur du lien dans le menu déroulant pour les éléments de sous-menu.
Couleur du lien actif	#fff	Définissez la couleur des liens au survol par la souris
Couleur du fond actif	#007bff	Définissez la couleur d'arrière-plan des liens survolés.
Couleur du Lien au Survol	#fff	Définissez la couleur pour les liens actifs; les liens deviennent actifs lorsque vous cliquez dessus.
Couleur de l'arrière-plan au survol	#007bff	Définissez la couleur d'arrière-plan pour les liens actifs.

Off-Canvas

Ici, vous pouvez définir les jeux de couleurs Off-Canvas pour votre site.

Option	Par défaut	Description
Couleur d'arrière-plan	#fff	Définit la couleur d'arrière-plan par défaut pour le menu off-canevas.
Couleur de texte	#007bff	Définit la couleur du texte pour les éléments de menu dans le Off-Canvas.
Couleur du lien	#333	Définit la couleur du lien dans le menu off-canevas pour les éléments de menu et de sous-menu.
Couleur du lien actif	#fff	Définissez la couleur des liens actifs (les liens deviennent actifs une fois que vous cliquez dessus).
Couleur du fond actif	#007bff	Définissez la couleur d'arrière-plan pour les liens actifs.

 

Le gestionnaire de mise en page offre la possibilité de créer une mise en page flexible à partir de la collection d'éléments disponibles. 

Une mise en page se compose de sections, de grilles et d’éléments qui peuvent être facilement gérés avec la fonctionnalité de glisser-déposer intégrée. It permet la personnalisation de chaque section avec les paramètres de conception, Paramètres responsives, paramètres d'animation et autres.

 

Structure de mise en page

• La mise en page basée sur les positions des modules inclut un système de grille responsive qui s’adapte de manière appropriée jusqu'à 12 colonnes à mesure que la taille du périphérique ou de la fenêtre d'affichage augmente. Vous pouvez sélectionner le nombre de colonnes désiré dans la grille des colonnes prédéfinies ou créer votre propre disposition de grille personnalisée.

• L'icône avec des flèches vous permet de modifier la position des lignes en les déplaçant vers le haut ou le bas. Utilisez l'icône plus pour ajouter une nouvelle ligne, puis sélectionnez la structure de colonne et insérez les positions de module en conséquence.

• Les sections, les lignes et les éléments peuvent être ajoutés, modifiés, copiés et supprimés directement dans le gestionnaire de mise en page.

Gérer la mise en page

Dans la mise en page, une section peut être éditée glissée-déposée, copiée, une nouvelle section peut être ajoutée et une nouvelle ligne peut également être ajoutée dans la section. Nous pouvons également éditer, supprimer et copier une colonne en particulier.

• Glisser déposer: Cliquez sur l'icône Glisser pour glisser-déposer des rangées / colonnes afin d'organiser votre mise en page.

• Modifier: cliquez sur l'icône en forme de crayon pour modifier les sections et les rangées.

• Copier: cliquez sur l'icône Copier pour dupliquer une section, une ligne ou un élément.

• Supprimer: cliquez sur l'icône poubelle pour supprimer une section, une ligne ou un élément.

• Nouvelle ligne: Cliquez sur Nouvelle ligne pour ajouter une nouvelle ligne.

• Nouvelle section: Cliquez sur Nouvelle section pour ajouter une nouvelle section en-dessous de la section ciblée.

   

Element

Vous pouvez créer de nouveaux éléments en cliquant sur l'icône Ajouter qui apparaît en bas au centre lors du survol de l'élément.

Voici les éléments de cette section:

• Position de module

• Zone de composant

• Messages

• Bannière

Si vous avez déjà ajouté une zone de composant ou de messages auparavant alors vous ne serez pas en mesure de les ajouter à nouveau.
Ajoutez un élément de message pour afficher les erreurs, les avertissements et les avis. Si vous ne l'ajoutez pas, vous ne pourrez pas voir les messages de notification.

Section

Nous pouvons ajouter une nouvelle section en cliquant sur l'option Ajouter une nouvelle section indiquée dans les options au niveau de la ligne ou nous pouvons également ajouter une nouvelle section en cliquant sur le bouton Ajouter une section en bas de la mise en page.

Options d'édition de l'élément et de la section

Les éléments et la section ont les mêmes options d'édition, à savoir Paramètres généraux, Paramètres de design et Paramètres responsive.

• Paramètres généraux: les paramètres généraux disposent d'options permettant de définir la position du module, le titre, la classe personnalisée et l'ID personnalisé d'un élément.

• Paramètres de design: dans cet onglet nous avons des options d'animation et de fond personnalisé. Pour activer les options d'arrière-plan, nous devons activer l'option d'arrière-plan personnalisé.

Voici les options pour l'arrière-plan dans les paramètres de design:

Option	Par défaut	Description
Couleur d'arrière-plan	Aucune	Définir la couleur d'arrière-plan pour la colonne ciblée
Image d'arrière-plan	Aucune	Définir l'image d'arrière-plan pour la colonne ciblée
Répétition de l'arrière-plan	Héritage	Définir l'image d'arrière-plan de la colonne ciblée
Sélectionnez une taille pour l'arrière-plan	Héritage	Réglez l'affichage de l'image d'arrière-plan. Vous pouvez sélectionner l'une des valeurs suivantes: cover, contain et hériter
Sélectionnez l'attachement d'arrière-plan	Héritage	Définir le style d'attachement d'image d'arrière-plan: Faire défiler – l'image de fond défile avec le contenu , Fixé – l'image de fond est fixe et le contenu défile sur elle
Sélectionnez une position d'arrière-plan	Héritage	Choisissez la position de l'image d'arrière-plan dans la liste Déroulante.
Vidéo d'arrière-plan	Aucune	Définir la vidéo d'arrière-plan pour la colonne ciblée

 

• Paramètres d'animation: Ici vous obtiendrez différentes options d'animation qui permettent d'animer une colonne, une section et un élément particuliers. Vous pouvez définir le délai d'animation qui indiquera un délai pour le début d'une animation.

• Paramètres responsive: Cela vous permet de contrôler la visibilité des colonnes. Vous pouvez utiliser des points d'arrêt pour définir des dispositions de contenu différentes en fonction de la largeur du périphérique, vous pouvez définir la taille de la colonne sur la disposition de contenu...