Présentation des paramètres de l'onglet avancé

Contrairement au Paramètres Dans l'onglet Paramètres, ces configurations restent cohérentes pour tous les éléments. En explorant ces paramètres, vous pouvez personnaliser efficacement les fonctionnalités les plus avancées de chaque élément et maximiser leur potentiel.

Afficher sur

L' Afficher sur Le paramètre vous permet de choisir si un élément ou une section particulière est visible sur des types d'écran spécifiques : ordinateur de bureau, tablette ou vue mobile. 

Le réglage de ce paramètre vous permet de masquer ou d'afficher du contenu en fonction de l'appareil, garantissant ainsi que votre page est optimisée pour différentes expériences utilisateur.

Comment fonctionne « Afficher activé » :

• Bureau: Contrôle si l'élément ou la section est visible lorsque la page est affichée sur des écrans de bureau (écrans plus grands, généralement supérieurs à 1024 pixels de large).
• Tablette: Contrôle la visibilité sur les tablettes (écrans de taille moyenne, généralement entre 768 pixels et 1024 pixels de large).
• Autre numéro: Contrôle la visibilité sur les appareils mobiles (petits écrans, généralement inférieurs à 768 pixels de large).

Cas d'utilisation dans GemPages

• Conception mobile d'abord: Si vous avez une grande image ou une section détaillée qui a fière allure sur un ordinateur de bureau mais qui ne s'adapte pas bien aux écrans plus petits, vous pouvez masquez cet élément sur les appareils mobiles et remplacez-le par une version plus adaptée aux mobiles.
• Dispositions personnalisées pour différents appareils:Une grille de produits complexe peut bien fonctionner sur un ordinateur de bureau, mais sur mobile, vous pouvez simplifier la mise en page en masquant la grille et en affichant à la place une liste à une seule colonne.
• Messages ciblés: Si vous souhaitez afficher différents messages marketing aux utilisateurs sur différents appareils (par exemple, proposer une remise exclusive sur mobile) de manière sélective, ce paramètre vous permet d'afficher certains éléments en fonction de l'appareil de l'utilisateur.

espacement

Dans l' espacement section, vous pouvez ajuster les 4 dimensions de la Marge et la Rembourrage. 

Marge 

Marge est l'espace situé à l'extérieur de la bordure d'un élément. Il contrôle l'espace entre l'élément et les autres éléments de la page. Les marges sont transparentes et éloignent l'élément de son contenu environnant, créant ainsi un tampon autour de lui.

Dans GemPages, vous pouvez utiliser des marges pour contrôler la distance entre différents éléments, comme entre deux images ou entre un bouton et un bloc de texte, pour créer une séparation visuelle ou un espace blanc.

Rembourrage

Le remplissage est l'espace situé à l'intérieur de la bordure d'un élément, mais à l'extérieur de son contenu. Il définit la quantité d'espace entre le contenu de l'élément (comme du texte ou une image) et la bordure de l'élément.

Dans GemPages, Rembourrage est utilisé pour créer de l'espace au sein d'un élément. Par exemple, vous pouvez ajouter un espace à un bouton afin d'espacer le texte qu'il contient, ce qui agrandit le bouton et améliore son équilibre visuel.

Forme

Frontière

La bordure est la ligne qui entoure le contenu et le remplissage d'un élément. Elle définit le contour ou le bord d'un élément, tel qu'un bouton, une image ou une zone de texte. Les bordures peuvent avoir différentes largeurs, styles (pleins, en tirets, en pointillés, etc.) et couleurs.

Cas d'utilisation dans GemPages

Les bordures sont utilisées pour mettre en valeur, définir ou séparer visuellement des éléments. Par exemple, l'ajout d'une bordure autour d'un bouton d'appel à l'action le fait ressortir plus clairement, ou l'application de bordures autour d'images leur donne un aspect encadré.

Coin (rayon de bordure)

Le coin, souvent appelé rayon de bordure, contrôle la rondeur des coins d'un élément. Il définit le degré de courbure ou de netteté des coins. Lorsque vous appliquez un rayon de bordure, les coins de l'élément deviennent arrondis, les valeurs plus grandes rendant les coins plus circulaires.

Cas d'utilisation dans GemPages

Vous pouvez utiliser le rayon de bordure pour adoucir l'apparence des éléments en leur donnant des coins arrondis. Cela est particulièrement utile pour les boutons, les images et les conteneurs pour lesquels vous souhaitez créer une esthétique moderne, conviviale ou épurée. Par exemple, une image rectangulaire peut être transformée en cercle en définissant le rayon de la bordure à 50 %.

Shadow

Une ombre ajoute un effet d'ombre autour d'un élément, lui donnant de la profondeur et une impression de superposition ou d'élévation. Les ombres peuvent être ajustées par la couleur, le rayon de flou, la propagation et le décalage (la distance par rapport à l'élément).

Cas d'utilisation dans GemPages

Les ombres créent généralement un effet tridimensionnel sur les éléments plats, les faisant ressortir de la page. Par exemple, vous pouvez ajouter une ombre subtile à une carte ou à un bloc de texte pour créer une impression de profondeur ou appliquer une ombre plus spectaculaire pour mettre en valeur un élément important comme une image de produit.

Poste

Le CSS position La propriété est essentielle pour contrôler le positionnement des éléments sur une page web. Elle définit le positionnement d'un élément dans la mise en page à l'aide de différentes valeurs.

• Statique: Méthode de positionnement par défaut. L'élément apparaît dans le flux normal du document, s'empilant naturellement avec les autres éléments selon leur ordre dans le code HTML.
• Relatif: L'élément conserve son flux normal, mais peut être décalé de sa position initiale grâce aux propriétés de décalage (haut, droite, bas, gauche). L'espace initialement occupé est conservé.
• Absolu: L'élément est positionné par rapport à l'ancêtre le plus proche qui a un relative, absolute, ou fixed position. Il est supprimé du flux normal du document, il n'affecte donc pas le positionnement des autres éléments.
• Important: L'élément se comporte comme relative jusqu'à ce que la page soit déroulée jusqu'à un certain point, puis elle « colle » en place comme fixed. Ceci est couramment utilisé pour les en-têtes collants ou les barres flottantes.
• Fixé: L'élément est positionné par rapport à la fenêtre du navigateur et reste visible au même endroit, même lors du défilement. Utile pour les éléments d'interface persistants comme les boutons flottants ou la navigation fixe.

Cas d'utilisation dans GemPages

• Éléments superposés : Grâce au positionnement absolu, vous pouvez créer des éléments superposés, comme placer du texte sur une image. Ajustez le index z pour contrôler quel élément apparaît en haut.
• Ajustements de décalage: Vous pouvez utiliser des décalages en haut, à gauche, en bas ou à droite pour affiner le placement d'une image ou d'un texte qui doit être légèrement décalé par rapport à sa position habituelle sans affecter les autres éléments.

Opacité

L'opacité est le degré de transparence d'un élément, déterminant la quantité d'arrière-plan ou d'éléments sous-jacents visibles à travers lui. La valeur d'opacité varie de 0 % à 1 %, où :

• 0%:L'élément est entièrement transparent (complètement invisible).
• 100 %:L'élément est totalement opaque (complètement visible).
• Toute valeur entre les éléments est partiellement transparent, permettant une visibilité variable.

Animation

Les animations sont classées en effets d'apparition et de survol. Activez/désactivez Animation sur ON pour développer ses paramètres, choisissez celui que vous préférez et configurez-le pour aligner l'animation avec vos attentes.

Quand apparaît

• Sélectionnez Fondu, Glissement, Zoom ou Secouer comme effet d'apparition. Appuyez sur Aucun si vous ne souhaitez pas ajouter d'effet lorsque l'élément apparaît.
• Ajustez la vitesse, le délai et l'atténuation pour obtenir l'effet souhaité.

Lorsque vous survolez

Choisir Aucun pour aucun effet ajouté, ou choisissez parmi les effets Zoom et Shake.

Cas d'utilisation dans GemPages

• Bouton d'appel à l'action Shake:Vous pouvez faire bouger ou rebondir un bouton pour attirer l'attention de l'utilisateur et l'encourager à cliquer. Par exemple, un bouton « Acheter maintenant » peut utiliser l'effet de tremblement au survol ou après un délai spécifique pour le faire ressortir.
• Fondu de section lors du défilement : Des sections spécifiques peuvent disparaître ou glisser lorsque les utilisateurs font défiler une page. Cet effet crée une expérience plus engageante, guidant les utilisateurs à travers le contenu d'une manière visuellement attrayante.
• Zoom sur l'image au survol:Pour ajouter de l'interactivité, vous pouvez configurer les images pour qu'elles zooment lorsque l'utilisateur passe la souris dessus, ce qui fonctionne bien pour les images de produits ou les éléments visuels dans les galeries.
• Animation de texte:Vous pouvez animer des éléments de texte pour qu'ils glissent ou s'estompent lors du chargement ou du défilement, mettant ainsi l'accent sur les messages ou les titres importants.

Interaction

Créez une interaction de déclenchement pour l'élément.

Une fois que vous cliquez sur Créer, vous serez redirigé vers le Paramètre d'interaction.

classe CSS

Une classe CSS est un style réutilisable pour les éléments HTML. Elle permet de maintenir une apparence cohérente pour ces éléments sur l'ensemble de votre site web.