Test blocs Fundamental

Utilité et définitions des blocs

Poursuite des test du Théme Fundamental même si un tutoriel de ce thème existe déjà. Mon but étant de décortiquer les blocs des thèmes pour concrete5 que j'utilise. Pour moi, ça me servira de pense-bête et pour certains lecteurs ou visiteurs qui utilisent ou aimeraient utiliser ce thème ça peut leur faciliter la tâche.

Il est évident que si je fais ça, c'est bien sur, en langue française pour les français. Je pense que la majorité des thèmes fabriqués par les développeurs, sont dans la langue de Shakespear et ça nous pose problème lorsque l'on est Français.

Je ne suis pas un spécialiste des tutos mais je m'y attelle avec plaisir.


Présentation des 12 blocs


Blocs Fundamental

Le bloc Alert semble être un bouton spécial avec un éditeur de texte complet que l'on peut paramétrer. Une petite croix à droite permet de le fermer.

Alert TypeStandardSuccesWarningInfo
Alert StyleSquareRadiusRound
Alert Closeouinon
×
Bloc Alert

Back To Top est un bouton spécial de Haut de page paramétrable avec un choix de nombreuses icônes. C'est tout indiqué pour cette longue page. (voir le style d'icône en bas de page)


Back To Top

Button

J'ai fais un article complet sur ce bloc qui est un bloc contenant pas loin de 800 pictogrammes pour agrémenter les sites web. Donc, allez lire ce bloc.


Call to Action est comme son nom anglais l'indique, un bouton paramétrable d'appel à l'action.

" c'est une mention incitant le contact publicitaire ou le destinataire d’un document de marketing direct à entreprendre plus ou moins immédiatement une action recherchée par l’annonceur ( prise de RV, retour coupon, clic sur un bandeau, etc.)."

Vous pourrez donc : Ecrire un titre, écrire un texte, choisir et positionner une icône, choisir un bouton, la taille de l'ensemble et les couleurs.



Appel à l'action

Si vous voulez contacter l'éditeur de ce site web, n'hésitez pas, je suis là pour répondre


Dropdown

Ce bloc va servir à créer des listes déroulantes universelles, qui se fixeront aux éléments dont nous avons besoin. Un message plus ou moins long est attaché à Dropdown. Quand vous cliquez sur le bouton, le message se déroule, quand vous re-cliquez sur le bouton, le message est masqué.

Voyons à quoi il ressemble vous pouvez cliquer !


Dropdown

Test du bloc Dropdown

On peut se rendre compte à quoi peut servir ce bloc. Au départ, c'est un simple bouton paramétrable en taille, dimensions, style, couleurs etc..

Et, lorsque l'on clique dessus, le message que l'on écrit, apparaît. C'est une sorte de menu, masquant un message, ainsi, on peut en mettre plusieurs l'un sous l'autre comme je l'avais fait sur cette page.

J'ai inséré 2 " Dropdowns" dans la colonne de droite de ma page d'accueil.

Cela peut être intéressant, car à chaque clic, ça se déplie et ça se replie et l'ouverture du message peut être, à gauche, au centre, ou à droite.

Video Flex

A ce jour je n'ai pas réussi à paramétrer ce bloc. Le site web d'origine nous dit qu'il sert, je cite : " Il permet aux navigateurs de mettre automatiquement à l'échelle, les objets vidéos".

Ce qui veut dire que l'on peut ajouter n'importe quelle vidéo et qu'elle seront automatiquement réglé pour toutes les dimensions des appareils telles que les écrans d'ordinateur ou les écrans plus petits !

J'ai fais plusieurs tentatives avec ce bloc et pour le moment, ce n'est pas concluant. Il faudra que je ressaye à nouveau.

En fait, je reviens plusieurs mois après l'édition de cette page. Video Flex, je sais à quoi ça sert, maintenant.

Je pensais que je pouvais intégrer des vidéos venant de mon disque dur ou des vidéos venant d'autres sources.

Erreur..!

Il ne sert qu'à être utilisé à travers YouTube ou Vimeo. Là, oui, il fonctionne.
Vous pouvez aller voir un test sur cette page.


Image Lightbox

Ce bloc permet d'avoir une lightbox, c'est à dire, de disposer des images qui défileront de gauche à droite ou de haut en bas. Un bloc paramétrable dont voici un exemple.

Les images sont sous forme de petites vignettes et lorsque l'on clique sur une image, ça ouvre une lightbox.

Vous devez d'abord créer des collections d'images au départ, dans la section du tableau de bord et la section fichiers.

J'avais donc, au préalable créer une collection : "Graffitis".


Graffitis


Modal

Le bloc Modal est un peu comme le bloc Dropdown à la différence que c'est une boîte de dialogue modale, utile pour ajouter du contenu pertinent qui est caché jusqu'à ce que le visiteur clique dessus. Le texte surgit en dehors du bouton. Voyons-ça!


Bloc Modale

A quoi peut bien servir ce bloc ?

On a comme dans les autres blocs, plusieurs paramètres pour utiliser ce bloc.

Ce qui est intéressant, c'est le fait que ce qui est écrit dans l'éditeur de texte, s'ouvre dans une petite fenêtre pop-up. On ne s'y attend pas forcément, ça peut servir.

Et, la croix bien visible en haut à droite pour fermer la fenêtre pop-up.

×

Vous noterez que j'ai arrêté de mettre des images des paramétrages des blocs en détail. Ce sont à peu de choses près, les mêmes images avec les réglages à effectuer.



Panel

Le bloc Panel semble être une composante fondamentale simple, permettant de décrire les sections de pages facilement. La largeur étant contrôlée par les colonnes de la grille.

Je n'ai pas encore bien saisis à quoi sert ce bloc ? Mais, je le met quand-même.

J'ajoute donc ce Bloc Panel qui comprend 2 types :

  1. Standard
  2. Callout

et 2 styles :

  1. Square
  2. Radius

Princing Table

Ce bloc semble être un tableau de tarifs pour du marketing et pour abonnement. Les tables se remplissent à 100% de leur conteneur. J'écris un exemple pour comprendre :"Princing Table".

Je ne vend pas de tee-short Ourson à 10€ disponible en 4 couleurs. Le bouton : "Ajouter au panier" est fictif.

  • Tee-short Ourson
  • 10€
  • Tee-short Ourson disponible en 4 couleurs
  • Blanc
  • Rouge
  • Vert
  • Bleu
  • Ajouter au panier

Simple Document

Ce bloc va nous servir à ajouter des documents et des fichiers avec un aspect professionnel. J'ai choisi un fichier musical mais j'aurais pu choisir un PDF ou autre. Ce bloc comporte un tas de paramètres c'est pourquoi je vous fais une impression écran de la fenêtre des paramètres, juste en dessous du bouton.

En fait, ce bloc sert, à proposer des fichiers que l'on peut disposer les uns sous les autres, au téléchargement.

Bon, allez, je rajoute un autre exemple sous le fichier musical. Ce sera un PDF que je viens de découvrir en surfant sur le web et qui est en rapport avec c5.



2 334,13 KB MP3 admin 12 févr. 2015 à 18:19
Description du document. J'ai choisi un fichier MP3 mais j'aurais pu choisir un autre format.

2 083,42 KB PDF
Un tutoriel de 2011 de l'agence de communication COTEO

Bloc simple document

Tabs/ Accordion

Ce bloc sert à mettre des éléments qui nous aidera à les organiser dans un seul conteneur.

J'aime assez ce que propose ce bloc nommé : " Tabs/Accordion".

Ma première entrée dans la table. J'ai choisis au pif une icône : "Android" pour tester ce bloc

La deuxième entrée du bloc pour voir ce que cela donne en réel.

Troisième entrée de la Tabs/Accordion pour comprendre l'utilité du bloc.

Je sais, j'écris plus ou moins n'importe quoi dans le bloc d'édition complet qui permet d'ajouter des liens, de la couleur par exemple.

La dernière entrée de ce bloc test. On voit que l'on pourrait ajouter d'autres entrées dans la table.


Fin de ce tutorial

Voilà, c'est la fin du tuto sur la présentation des 12 blocs du thème Fundamental pour concrete5.7.3

Si vous voulez commenter, le bloc de commentaires est là pour vous, en bas de page.


Ma préférence va aux blocs (sans être dans l'ordre) : " Dropdown - Modal - Simple Document et Tabs/Accordion"

Et vous !


Et vous, quels sont vos blocs préférés ?

Je reviens vers vous, nous sommes le 27/01/2016, soit plusieurs mois après l'édition initiale de cette page, et je voulais ajouter quelques lignes pour vous dire que le thème Fundamental a évolué et à ajouter un moyen d'éditer des infobulles dans l'éditeur de texte. L'icône se nomme Tooltips. Il me semble que c'est une bonne chose si on en abuse pas de trop.

Tooltips permet en surlignant un mot, ou un groupe de mots, d'ajouter un autre texte sous la forme d'une infobulle et d'un point d'interrogation. Je trouve ça génial.

Une fois surligné, comme si on voulais éditer un lien ou styliser ce qu'on a surligné, il suffit d'ouvrir l'icône Tooltips, une fenêtre s'ouvre donnant le choix de plusieurs emplacements de l'infobulle et plusieurs formes. Et, bien sûr, on a droit à un champ pour écrire le texte de l'infobulle.

Pour cette fois-ci, je vais en abuser pour vous montrer les différents styles et formes, et aussi, pour m'en rendre compte par moi-même.


Avec l'actualisation du thème, 3 blocs supplémentaires sont venus s'ajouter à la panoplie des blocs.

  • Un bloc section
  • Un groupe de boutons
  • Le Slick Slider que j'utilise sur cette page.


Chargement de la conversation