Présentation des widgets

Liste des outils disponibles

 

Templates de présentation

Les templates de présentation sont en fait des blocs de html prédéfinis. Ils vous permettent d'organiser le contenu de vos pages en colonnes qui vont s'ajuster à la largeur de la page et se réorganiser lorsque l'espace devient trop restreint (mobile). Vous pouvez les insérez dans votre éditeur en quelques clics et vous n'aurez ensuite qu'à entrer votre contenu dans les boîtes. Lorsque vous les ajoutez dans votre éditeur, ils apparaissent avec des encadrés, vous permettant de bien voir les « boîtes » dans lesquelles le contenu se trouve. Vos possibilités sont nombreuses car ils peuvent même être combinés entre eux.

 

1 colonne

1re colonne. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac mi arcu. Nunc ultrices magna odio. Aenean consequat euismod lacus eu elementum. Nulla euismod auctor fringilla. Integer in pulvinar lorem. Suspendisse tristique ante quis dapibus ultrices. Quisque nec purus in ipsum elementum pulvinar. Suspendisse suscipit sodales lorem eget feugiat.

 

2 colonnes

1re colonne. Nullam et neque posuere, ullamcorper orci vitae, varius lorem. Suspendisse pulvinar bibendum nisi, ac aliquam mauris aliquam vel. Sed commodo ultrices nisl eget venenatis. Ut in diam eget neque dictum ultricies vitae eu est. Etiam in sapien venenatis, pulvinar quam eget, vehicula justo. Mauris vel massa quis ante commodo vestibulum. In pharetra elit non dolor cursus, nec tincidunt mauris dictum. Etiam eu consequat elit. In quis faucibus magna, vel ornare nulla. Etiam consequat venenatis mattis.
2e colonne. Fusce ut ante ultrices, gravida ipsum eu, iaculis quam. Suspendisse potenti. Vestibulum gravida auctor posuere. Duis sed ligula vitae sapien hendrerit molestie et suscipit tortor. In malesuada lorem quis sem laoreet, eu hendrerit lacus convallis. Duis vel magna ut mauris cursus mollis. Duis consequat magna ut nunc varius tempus at ut ante. Pellentesque ut molestie nunc. Nullam placerat nec ante quis dictum. Curabitur et aliquam neque.

 

3 colonnes

1re colonne. Pellentesque ut molestie nunc. Nullam placerat nec ante quis dictum. Curabitur et aliquam neque. Fusce laoreet, nunc vel finibus euismod, nisl erat viverra metus, id finibus ipsum tortor ac tellus. Suspendisse fringilla metus sit amet risus finibus, vel ornare nisl laoreet. Fusce faucibus risus sed dignissim eleifend. Quisque malesuada ex sed elit varius, sed efficitur magna facilisis.
2e colonne. Morbi imperdiet non urna eget malesuada. Donec vitae arcu mi. Suspendisse potenti. Donec porta euismod tristique. Nulla facilisi. Nulla non sollicitudin sapien, et tincidunt metus. Morbi ut tortor dolor. Nulla id augue facilisis, sollicitudin ligula ac, semper magna. Aliquam elementum cursus justo, sit amet semper mi dictum eget. Integer tristique odio egestas, condimentum lacus vitae, cursus eros. Mauris id sollicitudin lacus. Maecenas a molestie augue. Fusce faucibus dolor vitae placerat vehicula.
3e colonne. In iaculis felis sapien, non sodales arcu accumsan sed. Mauris nisi odio, fringilla in felis vel, fermentum condimentum ipsum. Pellentesque ullamcorper ante vitae sagittis euismod. Etiam eu dui vulputate, sollicitudin lacus eget, rhoncus augue. Ut velit mi, sodales at nunc ut, rutrum tincidunt erat. Aliquam erat volutpat. Duis id tellus luctus, aliquam magna id, blandit enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper ultricies tortor et sodales.

 

4 colonnes

1re colonne. In iaculis felis sapien, non sodales arcu accumsan sed. Mauris nisi odio, fringilla in felis vel, fermentum condimentum ipsum. Pellentesque ullamcorper ante vitae sagittis euismod. Etiam eu dui vulputate, sollicitudin lacus eget, rhoncus augue. Ut velit mi, sodales at nunc ut, rutrum tincidunt erat. Aliquam erat volutpat. Duis id tellus luctus, aliquam magna id, blandit enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper ultricies tortor et sodales.
2e colonne. Suspendisse potenti. Vestibulum gravida auctor posuere. Duis sed ligula vitae sapien hendrerit molestie et suscipit tortor. In malesuada lorem quis sem laoreet, eu hendrerit lacus convallis. Duis vel magna ut mauris cursus mollis. Duis consequat magna ut nunc varius tempus at ut ante. Pellentesque ut molestie nunc. Nullam placerat nec ante quis dictum. Curabitur et aliquam neque. Fusce laoreet, nunc vel finibus euismod, nisl erat viverra metus, id finibus ipsum tortor ac tellus.
3e colonne. Pellentesque ut molestie nunc. Nullam placerat nec ante quis dictum. Curabitur et aliquam neque. Fusce laoreet, nunc vel finibus euismod, nisl erat viverra metus, id finibus ipsum tortor ac tellus. Suspendisse fringilla metus sit amet risus finibus, vel ornare nisl laoreet. Fusce faucibus risus sed dignissim eleifend. Quisque malesuada ex sed elit varius, sed efficitur magna facilisis.
4e colonne. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac mi arcu. Nunc ultrices magna odio. Aenean consequat euismod lacus eu elementum. Nulla euismod auctor fringilla. Integer in pulvinar lorem. Suspendisse tristique ante quis dapibus ultrices. Quisque nec purus in ipsum elementum pulvinar. Suspendisse suscipit sodales lorem eget feugiat.

 

Widgets disponibles

Il y a aussi plusieurs widgets qui sont présentement disponibles. En voici la liste.

 

Absolunet Products List

Ce widget vous permet d'insérer une liste de produit dans vos pages de contenu. Plusieurs configurations sont disponibles : nombre de produits à afficher, utilisation ou non d'un carrousel, tri des produits, etc. La sélection des produits affichés se fait dans la configuration du widget, à l'aide de règles. Un peu comme pour les promotions, vous pouvez spécifier des règles et les combiner. (attribut de produit + condition + valeur) Par exemple, vous pourriez mettre une condition sur l'id ou le sku des produit avec des valeurs multiples, pour choisir des produits bien spécifiques. Vous pourriez aussi choisir les produits appartenant à une catégorie précise.

 

Produits
 

 Absolunet 2 columns, 3 columns, 4 columns

Les widgets à 2, 3 ou 4 colonnes vous permettent d'insérer des blocs de contenu avec une image, un titre, un texte et un bouton. Les champs sont optionnels. Il est possible de les configurer pour qu'ils ne soient pas affichés sur le mobile, ou qu'ils n'aient pas d'image pour le mobile. Une image différente est spécifiée pour le desktop et le mobile, ce qui vous permet d'afficher une image de meilleure qualité selon la taille de l'écran. Si aucun texte n'est spécifié pour le bouton, il n'est pas affiché, mais le lien spécifié est sur l'image.

 

Widget 3 colonnes

Premier bloc

Suspendisse pulvinar bibendum nisi, ac aliquam mauris aliquam vel. Sed commodo ultrices nisl eget venenatis. Ut in diam eget neque dictum ultricies vitae eu est.

Voir
Widget 3 colonnes

Deuxième bloc

Suspendisse pulvinar bibendum nisi, ac aliquam mauris aliquam vel. Sed commodo ultrices nisl eget venenatis. Ut in diam eget neque dictum ultricies vitae eu est.

Cliquez ici
Widget 3 colonnes

Troisième bloc

Suspendisse pulvinar bibendum nisi, ac aliquam mauris aliquam vel. Sed commodo ultrices nisl eget venenatis. Ut in diam eget neque dictum ultricies vitae eu est.

 

 Absolunet Text and Image

Ce widget vous permet de créer un bloc avec une grande image, avec ou sans version mobile. Le titre, le sous-titre, le texte et le lien sur l'image sont optionnels. Le thème "light" vous permet d'afficher le texte plus foncé sur une image plus pâle, et le thème "dark" inversement. Les éléments peuvent être alignés à gauche, à droite ou centrés sur l'image. L'image en version desktop/tablet peut être pleine largeur ou restreinte à la largeur du site.

 

Soyons inspirés!

Lorem ipsum dolor sit amet

Soyons inspirés!

Lorem ipsum dolor sit amet

 

 

Absolunet Video and Image

Ce widget vous permet d'insérer un vidéo (youtube ou vimeo) dans votre contenu. Celui-ci peut être affichée pleine largeur ou selon la largeur du site. Il peut aussi être affiché ou non en version mobile. Le widget peut également servir à insérer une image, avec les mêmes options (pleine largeur ou non, affichage ou non en mobile).

 

Utilisation du widget Video and Image dans un template

Vous pouvez aussi utiliser le widget video and image pour insérer une image dans un template à 2, 3 ou 4 colonnes, afin que celle-ci se redimensionne adéquatement pour suivre la mise en page de votre contenu.

Image dans un template
Fusce ut ante ultrices, gravida ipsum eu, iaculis quam. Suspendisse potenti. Vestibulum gravida auctor posuere. Duis sed ligula vitae sapien hendrerit molestie et suscipit tortor. In malesuada lorem quis sem laoreet, eu hendrerit lacus convallis. Duis vel magna ut mauris cursus mollis. Duis consequat magna ut nunc varius tempus at ut ante. Pellentesque ut molestie nunc. Nullam placerat nec ante quis dictum. Curabitur et aliquam neque.
Ut in diam eget neque dictum ultricies vitae eu est. Etiam in sapien venenatis, pulvinar quam eget, vehicula justo. Mauris vel massa quis ante commodo vestibulum. In pharetra elit non dolor cursus, nec tincidunt mauris dictum. Etiam eu consequat elit. In quis faucibus magna, vel ornare nulla. Etiam consequat venenatis mattis.

 

Petits conseils pour l'utilisation des outils

 

Ajouter des retours de ligne avant d'insérer un template ou un widget

Lorsque vous insérez un widget ou un template dans l'éditeur, il est recommandé d'ajouter quelques retours de ligne et de cliquer au milieu de ceux-ci avant de faire l'insertion. Lorsque votre template ou votre widget est inséré, il devient plus difficile d'entrer d'autre contenu après celui-ci s'il n'y a pas de retour de ligne à sa fin. Toutefois, si vous oubliez de le faire et que vous n'arrivez plus à insérer de contenu supplémentaire, vous pouvez toujours cliquer sur le petit bouton "HTML" de l'éditeur (dernier bouton), pour voir les balises HTML (la source) du contenu et ajouter manuellement une balise p ou br à la toute fin.

 

Surveiller les boîtes des templates

Lorsque vous insérez un template dans votre contenu, des lignes pleines servent à identifier les rangées (row) de contenu, et des lignes pointillées indiquent les colonnes (column). Cette délimitation des boîtes vous permettra de vous assurer que le contenu se trouve bien à l'intérieur de la zone souhaitée. Il faut faire attention avec ceux-ci car parfois, en effaçant les caractères à l'intérieur d'une boîte, il est aussi possible d'effacer la boîte elle-même! Assurez-vous que les lignes pleines et pointillées sont toujours présentes. Il est toujours possible de faire un retour en arrière (ctrl+z au clavier ou bouton avec la flèche bleue dans l'éditeur).