Créez vos pages Joomla! n’a jamais été aussi simple

Cédric Keiflin .

Page Builder CK est un outil qui se présente comme un éditeur de contenu. La différence ici c’est qu’on peut créer des structures complexes avec des lignes et des colonnes et du contenu spécifique (images, icones, sliders, accordéons, onglets, …) en quelques minutes sans connaissances en codage.

page-builder-ck

Cet outil s’adresse aux débutants qui veulent créer leur site sans connaissances particulières, mais aussi aux professionnels qui désirent augmenter leur productivité en créant du contenu de qualité très rapidement. De plus le contenu peut ensuite être facilement édité et manipulé par l’utilisateur final sans formation lourde.

Comment ça marche ?

Vous créez une nouvelle page qui sera vierge et ne contient qu’une ligne. Dans cette ligne vous pouvez glisser-déposer n’importe quel élément qui se trouve dans le menu de gauche.

page-builder-ck-001

On peut créer des colonnes d’un simple clic sur le bouton « + » et sélectionner parmi les options de largeurs prédéfinies.

page-builder-ck-003

Dans chaque colonne on ajoute alors l’élément que l’on veut.

Les éléments présents par défaut dans l’interface sont :

  • texte : pour écrire un texte avec un éditeur de texte classique ;
  • icone : sélection d’une icone parmi la librairie Font Awesome qui compte plusieurs centaines d’icones disponibles en 1 clic ;
  • icone et texte : permet d’avoir directement une icone suivie d’un titre et d’une zone de texte ;
  • image : pour ajouter une image dans votre page, il suffit de glisser- déposer l’image de votre ordinateur dans la zone pour qu’elle soit automatiquement uploadée sur votre site ;
  • séparateur : pour créer une séparation horizontale entre vos éléments ;
  • message : affiche un message pour attirer l’attention du lecteur ;
  • onglets horizontaux : pour afficher votre contenu dans des onglets et gagner de la place ;
  • accordéons : pour afficher votre contenu dans des accordéons et gagner de la place ;
  • module : pour charger n’importe quel module du site, et si besoin en créer un à la volée directement dans l’interface ;
  • vidéo : vous permet d’afficher des vidéos responsive, que ce soit des vidéos hébergées sur votre site, ou des vidéos hébergées sur des plateformes comme Youtube ;
  • audio : lecteur audio pour offrir la possibilité au visiteur de jouer un morceau.

En plus des éléments par défaut vous pouvez obtenir des éléments supplémentaires en installant l’extension Page Builder CK Params qui est un complément payant. Cette extension ajoute de nombreuses fonctionnalités très utiles pour l’utilisation de Page Builder CK.
Voici la liste des éléments supplémentaires disponibles actuellement (cette liste étant destinée à évoluer avec le temps et les demandes des utilisateurs) :

  • cartes Google ;
  • sliders d’images ;
  • témoignages ;
  • nombres animés ;
  • boutons (avec action au clic) ;
  • formulaires de contact ;
  • tables (de la simple table, à la table de prix évoluée).

D’autres éléments viendront étoffer cette liste pour vous permettre d’aller toujours plus loin plus facilement dans la création de votre contenu.

Edition des styles

Chaque ligne, chaque bloc et chaque élément de la page peut être stylé indépendamment. En cliquant sur le bouton « CSS » vous ouvrez une fenêtre d’édition qui vous permet de définir l’allure de l’élément :

  • couleur de fond, dégradé, image de fond ;
  • couleur du texte, gras italique et autres options, taille, police d’écriture, sélection d’une police Google ;
  • marges internes et marges externes sur toutes les faces indépendamment ;
  • coins arrondis, bordures sur chaque face ;
  • ombre ;
  • CSS personnalisés pour ajouter n’importe quelle règle à l’élément courant et laisser parler votre imagination ;
  • vidéo d’arrière-plan.

page-builder-ck-004

Animations

Vous pouvez ajouter des animations à n’importe quelle ligne ainsi qu’à n’importe quelle colonne :
Fondu ; mouvement ; rotation ; zoom ; vous avez le choix de les combiner et de leur durée. L’animation se déclenchera alors lorsque le visiteur fera défiler la page et qu’il arrivera au niveau de la zone à animer.

page-builder-ck-005

La baguette magique

La baguette magique
Grâce à Page Builder CK Params on peut utiliser la baguette magique, mais à quoi sert-elle ?
Cette petite icone renferme une possibilité de design très intéressante car elle vous affiche un panneau dans lequel vous n’avez qu’à cliquer pour affecter un design prédéfini à votre élément. Près d’une 40aine de styles de bloc très design et près d’une 20aine d’ombres que vous pouvez utiliser sans modération en un seul clic sur la miniature.

page-builder-ck-007

Des styles prédéfinis mais pas que ! En effet cette baguette magique vous donne également accès à un panneau dans lequel vous pouvez gérer vos propres styles !

Grâce à cette interface vous pouvez :

  • enregistrer un style que vous venez de créer sur un élément ;
  • voir la liste des styles que vous avez enregistrez avec une prévisualisation du rendu ;
  • éditer directement le style et le mettre à jour ;
  • supprimer les styles que vous ne voulez plus ;

Petite astuce : ces styles personnalisés sont stockés dans des fichiers, vous pouvez donc les récupérer, les partager, et les utiliser sur d’autres sites !

page-builder-ck-008

Intégration dans les articles
et ailleurs… partout en fait !

Le bouton de l’éditeur

Vous pouvez créer des pages, mais pas uniquement. Page Builder CK vous permet d’insérer le contenu d’une page dans un article, mais aussi partout où vous avez accès à un éditeur de texte avec les boutons additionnels.
Page Builder CK est livré avec un bouton éditeur qui s’intègre dans l’éditeur avec les autres boutons.

page-builder-ck-009

Grâce à ce bouton vous pouvez charger n’importe quelle page n’importe où, mais aussi charger plusieurs pages, en gros vous faites comme vous voulez !
Le bouton détecte automatiquement les tags de page que vous avez déjà insérés et vous propose de les éditer directement dans une fenêtre popup. Vous pouvez aussi créer des pages à la volée de la même manière si vous n’avez pas encore créé la page que vous voulez appeler.

Intégration directe comme éditeur d’article

Au-dessus de l’article vous avez un autre bouton qui vous propose de basculer sur Page Builder CK. Alors là, si vous l’acceptez votre mission sera d’éditer votre article directement avec l’interface de Page Builder CK !

page-builder-ck-010

Une fois l’interface activée elle sera automatiquement reconnue lors de l’édition de cet article. Pas besoin de créer des pages avant de créer les articles, tout se fait au même endroit. Le contenu est directement stocké dans votre article.
Profitez pleinement des catégories, des tags, des options de publication et toutes les options natives de Joomla! et des articles tout en profitant de la puissance et de la simplicité de Page Builder CK.

Sauvegarde automatique

Page Builder CK pense à votre bien-être et sauvegarde automatiquement jusqu’à 5 versions de vos pages. Vous pouvez les restaurer instantanément depuis l’interface d’édition de la page.
Ne perdez plus vos modifications, et revenez en arrière si vous rencontrez un souci, c’est un gage de sécurité.
Info : si vous utilisez l’édition directe dans les articles il faut activer l’historique natif des articles pour créer des sauvegardes, c’est alors Joomla! qui le fera pour vous.

Module Page Builder CK

Créer des pages et des articles c’est bien mais le contenu d’une page de site ne s’arrête pas à ça. C’est pour cela que Page Builder CK est livré avec un module spécifique qui vous permet de profiter de l’interface pour créer vos modules.
Vous pouvez le publier où vous voulez, créer autant de modules que vous voulez.

Appel de page existante – Modèles ?

Modèle or not Modèle, telle est la question. De quoi on parle ? Tout simplement d’une option de Page Builder CK qui vous permet d’appeler une page existante, mais directement dans la page que vous être en train de créer.
Ici on parle donc bien de modèle, des pages que vous créez avec des styles et contenus que vous pouvez ensuite réutiliser à l’infini dans toutes les autres pages en un seul clic.

Demandez à charger une page et l’interface vous affiche la liste des pages existantes, il suffit alors de la sélectionner pour l’intégrer dans votre page en cours. En haut, ou en remplacement de la page complète, c’est vous qui choisissez.

À venir bientôt …

La fonctionnalité en cours de développement est une librairie en ligne qui vous affiche une liste de modèles que vous pouvez insérer dans votre page en un clic.
La librairie fonctionnera avec une API hébergée sur JoomlaCK qui enverra les informations sur votre site pour afficher les modèles.
La librairie sera mise à jour directement sur JoomlaCK sans intervention de votre part et l’utilisation de modèles se fera en un clic de la même manière que l’insertion de vos propres pages.
Au programme, des blocs de présentations classiques, des présentations de personnes, des zones de contacts, des tables de prix, et sûrement d’autres à venir encore !
D’ailleurs si vous voulez proposer vos créations pour les partager avec les autres utilisateurs, n’hésitez pas à me contacter !

En espérant vous offrir un meilleur environnement créatif pour vos sites web. Joomla!, tous ensembles.
Cédric KEIFLIN
http://www.joomlack.fr
http://www.template-creator.com

À propos de l'auteur

cedric-keiflin
Cédric Keiflin

Développeur passionné de Joomla! Fondateur du site Joomlack.com.

Sur ce site, nous utilisons des cookies.