cinnk magazine janvier 2016

Happy new year !

Toute l'équipe de Cinnk magazine vous souhaite une bonne et heureuse année 2016 !

Page builder CK, apprenez à construire votre contenu, page par page

Dans la galaxie des composants Joomla, il existe de nombreux d'outils vous aidant dans votre mise en page, tous ne sont pas de qualité égale et ne correspondent pas forcément à vos besoins. 
Une fois choisi votre template ou framework, on se heurte souvent à la nécessité de faire certains choix graphiques, soit par des shortcodes, soit par l'intégration de modules (slideshow, tabs) ou encore via les pagebuilder dont un tout récent : Pagebuilder CK.

page-builder-ck

Julian Fong - Flickr

Qu'est ce qu'un page builder ?

Si la notion de page builder vous est étrangère, lisez bien ce qui suit car il vous faut repenser votre contenu et la manière dont vous avez pris l'habitude de l'aborder.

Normalement, dans Joomla, le contenu est dynamique, rangé dans des catégories, et appelé via les éléments de menu de différentes manières ( article, liste d'articles, blogs, catégories, etc ...)

Dans un autre cms, wordpress, arrive la notion de pages qui sont en fait des articles statiques qui ne sont affectés à aucune catégorie, et sont appelés dans un menu, souvent celui du haut.

L'idée est intéressante, et des développeurs Joomla ont créé pour Joomla des compsants permettant de pratiquer de la sorte, et très vite équipés d'outils supplémentaires permettant de modifier substantiellement la disposition des éléments : ce sont les pages Builders.

Vous construisez ainsi vos pages, et les ajoutez à vos menus par un lien de menu du composant.
Parmis ceux ci , citons SP Page Builder, Jsn page builder, par exemple (à tester également).

Encore un outil CK

Derrière les initiales CK se cache modestement Cedric Keiflin, auteur prolixe de modules et composants Joomla: Maximenu CK, Template Creator CK, Slide Show CK, etc ...

Si la qualité est au rendez-vous avec Cedric, c'est autant par souci d'un code propre, que par une écoute des utilisateurs aboutissant à chaque fois sur une interface facile à prendre en main.

Page builder est donc le dernier né de la famille CK , découvrons ensemble s'il est digne de la réputation de ses ainés ...

Premiers pas dans Page Builder CK

Le téléchargement est facile et gratuit sur le site de Cédric Keiflin, s'en priver après avoir lu cet article serait une faute professionnelle. L'installation se fait par la gestion des extensions... Alors, allons y ...

Une fois installé, nous sommes avertis qu'un module, un plugin et un bouton plugin sont présents et activés sur le site.

Page Builder CK - Installation

Ce sera intéressant pour la suite.

Maintenant dans composants > Page builder CK vous accédez à une page quasi vide.
Normal, vous n'avez encore rien fait.

En cliquant sur Nouveau nous accédons à la page de création de page.

De suite, tout est clair et bien ordonné, une rangée est déjà présente.

Page Builder CK - Mise en page

Après avoir rempli le titre (1), vous pouvez ajouter des colonnes dans la rangée (2), choisir l'agencement (3), ajouter ad volo des rangées (4)
La mise en page se fera donc simplement, par lignes et par colonnes, et ceci sans limites ou presque.

Les modules de base

Sur la gauche vous avez des objets que l'on peut apparenter aux modules ou aux widgets wordpress ( les puristes m'excuseront ce nouveau parallèle ) et vous pouvez les glisser aux emplacements crées par vos soins.

Page Builder CK - Module de base

C'est simple, pratique et efficace.
Voici la liste de ces objets :

  • bloc de texte : édition de texte avec éditeur
    icon : Sélectionner une icône dans la liste
    Icone et texte : icône et texte dans un seul bloc
    Image : image simple
    Séparateur : Séparateur simple avec un texte
    Boite à message : un message avec un style prédéfini
    Onglets horizontaux : onglets avec contenu personnalisé
    Accordéon : accordéon avec contenu personnalisé
    Module : 'nimporte quel module de votre site
    Vidéo : utilisez n'importe quel service de vidéo

C'est donc déjà une bonne base pour attaquer vos mises en page

la configuration des modules

Sans entrer trop dans les détails, tout est explicite et intuitif, vous voulez changer un texte, vous cliquez dessus et votre éditeur apparaît, une image à modifier et c'est le selecteur qui montrera le bout de son nez.

Bref si vous êtes usager de Joomla, vous vous y retrouverez facilement.
De plus vous pouvez bouger les modules entre eux, ce qui n'est pas négligeable.

Les styles

Cedric a l'habitude de nous permettre de modifier beaucoup de styles, son template creator en est l'exemple. Là, tout y est et c'est rien de le dire.


En tant que formateur web, j'aborde la partie HTML et CSS car je considère qu'il faut que les utilisateurs connaissent un peu le moteur. Cela est très technique et peut rebuter, surtout qu'il faut beaucoup pratiquer pour acquérir les réflexes de nommage et le passage à la pratique est souvent difficile à appréhender.

Avec l'outil de Page builder CK, vous comprendrez enfin à quoi servent les notions CSS si longuement acquises mais pas assez exploitées faute de pratique.

Bordures, couleurs de fond en dégradé, google font , border radius, tout y est.

Page Builder CK - Style CSS

De plus, vous avez une prévisualisation directe, chose qu'aucun autre page builder ne vous propose....

La boutique

Trucs @ Astuces Joomla! 3Le livre 100 Trucs & Astuces pour Joomla! 3
vous permet de faire les bons choix parmi ceux qui s'offrent à vous lors de la création de votre site web ou lors de l'ajout de fonctionnalités ou d'extension grâce à de simple conseils, de vous simplifier la tâche grâce à des astuces et des mini-tutoriels pour gagner du temps dans la gestion de votre site Joomla!, ainsi que dans l'organisation de sa sécurité, son référencement, ses performances, et bien plus encore.

Mise en page dynamique

De manière intuitive vous allez découvrir les fonctionnalités css2 , puis être subjugué par les CSS3 (les fameuses animations) à tel point que vous ne pourrez vous en passer.

Animations Css3

Ainsi, outre le fait que l'on peut afficher des modules de Joomla pour avoir un affichage un peu fun, (slideshow, tabbers, etc .. ) Page Builder CK vous propose d'animer vos rangées une par une, mais également vos colonnes :

Page Builder CK - Animation CSS3

Un petit bouton vous permet de jouer l'animation avant de valider, afin de vérifier si cela correspond à vos attentes.

Vidéos d'arrière plan

Chaque rangée, mais également chaque colonne, peut disposer d'une vidéo d'arrière plan, hébergée dans vos dossiers.

Page Builder CK - Vidéo d'arrière plan

Un bouton de prévisualisation est présent, vous voyez en direct ce à quoi ressemblera votre bloc avec la vidéo en fond.

Comment afficher vos pages ?

Comme indiqué en début d'article, l'appel se fait depuis les liens de menus, par le type
Page builder CK > simple page


C'est le comportement normal de tous les Page Builder, vous passez outre le contenu Joomla ! MAIS, et j'écris volontairement un gros MAIS ...


Cédric Keiflin a pensé à tout et nous offre d'insérer du contenu de page Builder CK dans un article.

Souvenez-vous du bouton plugin installé au départ..


Un nouveau bouton est désormais sous vos articles.

Page Builder CK - Affichage de page dans les articles Joomla!

En cliquant dessus un popup s'ouvre, proposant soit de créer une nouvelle page (1) soit d'insérer une page existante (2)

Page Builder CK - Affichage de page dans les articles Joomla! popup

Cette fonctionnalité inexistante nulle part ailleurs m'a fait définitivement craquer pour ce page builder, car cela nous permets de gérer ce page builder également en tant que contenu Joomla (avec des pages dans des catégories, des tags, des intros etc. ) et donc de l'intégrer également dans des composants, modules qui gèrent du contenu spécifiquement Joomla.

Et dans les modules Joomla ?

Les bonnes nouvelles ne s'arrètent pas là : CK page builder est également accessible depuis un type de module Page Builder CK.
Vous pouverz donc construire des modules personnalisés avec du contenu que vous créerez dans une interface similaire à celle du composant, un véritable couteau suisse !

Édition en fontend

Vous pouvez éditer vos pages en frontend du site. Plus besoin de basculer entre l'admin et le front, il vous suffit de vous loguer sur la page de votre site pour éditer directement l'article et le contenu de Page Builder CK.

Évolutions récentes

En perpetuelle recherche de l'outil parfait, CK nous offre ( le terme est choisi ), depuis peu , de charger les images par Drag and Drop. Votre image sera glissée et déposée depuis votre ordinateur directement dans votre objet image, et chargé dans le dossier de votre site préalablement renseigné dans la configuration.À noter aussi l'apparition du versionning, fonctionnalité non négligeable.

Et pour aller plus loin...

Parce que ce travail de titan mérite salaire, certaines options supplémentaires (mais non obligatoires pour faire fonctionner le Page builder) ont été développées à part dans un plugin Page Builder Params, vous permettant notamment d'insérer :

  • un nombre animé
  • une carte google
  • un slider d'images
  • des témoignages d'utilisateurs

Un import– export de page est disponible avec ce plugin, permettant de dupliquer d'un site à l'autre vos données.

Pour le coût modeste que cela représente, je ne saurais que trop vous le recommander, vous économiserez d'autres achats...

En conclusion

J'ai été véritablement conquis par ce composant, et le travail méritant de Cédric, membre fortement investi dans la communauté francophone, le tester après avoir lu ces lignes n'est plus une option, c'est un devoir !! 

Notez cet article:
8
Quoi de neuf ce mois-ci
Le sondage du mois

Commentaires

 
Pas encore de commentaire
Déjà inscrit ? Connectez-vous ici
Guest
samedi 18 novembre 2017
Si vous souhaitez vous inscrire, veuillez saisir un nom d'utilisateur, mot de passe et nom.

Image Captcha

Sur ce site, nous utilisons des cookies.