Style accordeon sur les lignes

Un effet accordéon sur les lignes

Les styles personnalisés applicables aux lignes s'enrichissent d'un nouveau style nommé "Accordéon". Cet effet, que vous avez peut-être déjà utilisé sur les widgets de vos menus verticaux est désormais applicable à toutes vos pages web conçues à l'aide de l'outil de création de pages.

Application du style

Comme pour les autres styles personnalisées applicables aux lignes, vous retrouverez cet effet dans le menu déroulant "Style", situé en bas à gauche de l'outil de création de pages.

Style accordeon

Exemple d'utilisation

Sur une page produit de votre boutique, vous pouvez appliquer le style "Accordéon" à plusieurs lignes contenant chacune d'elles des informations complémentaires sur votre article, comme l'illustre l'exemple ci-dessous :

Exemple style accordeon

Dans cet exemple, deux lignes ont été ajoutées, ayant respectivement pour titre "Détails du produit" puis "Matière et entretien". Le style "Accordéon" a ensuite été appliqué à chacune d'elles. Cliquer sur le titre d'une ligne aura pour effet d'en afficher le contenu ou de le masquer s'il est visible. Deux lignes ne peuvent être affichées simultanément, l'affichage d'une ligne cachera automatiquement le contenu de toutes les lignes sur lesquelles le style "Accordéon" est appliqué.

Avantages

Le premier avantage est un allègement du contenu de vos pages. Vous masquez des informations que vous considérez secondaires, laissant le choix à l'internaute de les afficher ou non.

Le second avantage est que vous réduisez ainsi la hauteur de vos pages, ce qui n'est pas négligeable, notamment lors d'une consulation de votre site internet depuis un terminal mobile.

Enfin, vous apportez de l'animation dans vos pages, les rendant ainsi plus modernes.

Forcer l'ouverture d'une ligne au chargement de la page

Peut-être souhaiterez-vous que le contenu d'une ligne soit affiché par défaut ? Dans ce cas, il va vous falloir ajouter deux classes CSS sur la ligne concernée :

  1. Dans le menu déroulant "Style", choisissez "Avancé".
  2. Dans le champ "class" qui apparaît, saisissez alors les noms "row-panel" puis "open", séparé d'un espace.

La classe "open", combinée à la classe "row-panel", permet ainsi de forcer l'ouverture de la ligne au chargement de la page.

Ce style ne concerne que les thèmes responsive, conçus à partir des frameworks Bootstrap ou EMS Framework.

Personnalisation Pages