Présentation de SP Page builder pour Joomla! 4

Joomla8 4 Présentation SP page builder

Nous allons voir ici comment utiliser un site Joomla! 4 avec le template Hélix totalement gratuit et avec la version gratuite du composant SP Page Builder. La version free du composant vous offre déjà la possibilité de créer facilement vos mises en pages de façon simple et intuitive.

Installer Joomla! 4 sur votre Windows avec WAMP

Installer Joomla! 4

Dans ce tutoriel, nous utiliserons la version 4 de Joomla. Vous pouvez l'installer en local sur votre Mac, Windows ou Linux, ou vous pouvez directement l'installer sur votre hébergeur. Vous pouvez suivre ces tutoriels pour installer correctement votre Joomla! 4 :

Installer Hélix

Votre CMS est confortablement installé en local ou sur un serveur distant, nous allons maintenant mettre notre template Hélix. Un template s'installe comme n'importe quelle extension. N'hésitez pas à suivre notre tutoriel dédié à l'installation d'une extension dans Joomla! 4

Une fois installé, il ne faut pas oublier de mettre le template Hélix par défaut. C'est très facile.Définir le template Hélix par défaut.

Styles des templates du site

Installer SP Page Builder

Comme nous l'avons vu en introduction, nous allons utiliser la version gratuite de SP page Builder Lite. Pour pouvoir télécharger Tout comme le template, un composant s'installe comme une extension.

/!\ Ce composant n'est pas encore tout à fait compatible avec l'éditeur JCE. Vérifiez donc qu'il ne soit pas mis en éditeur par défaut lorsque vous utilisez SP Page Builder s'il est installé sur votre site. Vous pourrez sans problème utiliser l'éditeur par défaut de Joomla! : TinyMCE.

/!\ Également, comme la version 4 est encore récente, il peut survenir des erreurs lorsque vous testez ce composant en local.

Créer une nouvelle page

Maintenant que tout est bien installé, nous pouvons enfin passer à la création de notre nouvelle page. Depuis le panneau d'administration, allez dans Composants > SP Page Builder.Interface du composant SP page Builder dans Joomla 4.

SP Page Builder

Cliquez sur Nouveau pour créer votre nouvelle première page. Vous arriverez ensuite à l'interface suivante :Création d'une nouvelle page.

Création d'une mise en page SP Page Builder

Le champ titre est obligatoire. Vous avez 3 boutons au milieu de la page, avec eux vous pouvez ajouter une nouvelle ligne pour ajouter vos éléments, importer un style/template ou récupérer un template page (uniquement avec la version pro). 

Nous nous intéresserons uniquement au premier bouton. Cliquez sur "Add New Row" pour ajouter votre première ligne à votre page. Vous devez ensuite choisir le nombre de colonnes.Définir le nombre de colonnes à votre ligne.

Ajouter une ligne à la page.

Il faut imaginer vos éléments que vous allez mettre comme des boites que vous pouvez superposer. Vous pourrez bien sûr rajouter une colonne ou en supprimer plus tard. Et il est possible d'ajouter autant de ligne que souhaitées.

Une fois que vous avez généré votre ligne. Vous pouvez lui ajouter des éléments appelés Addon.Ajouter des addons à votre ligne.

Ajouter des Addons

Nous avons pour l'exemple généré une ligne (Row) avec 2 colonnes de même taille. Cliquez sur Addon ou la colonne (voir les encadrer en rouge sur la capture d'écran ci-dessus) pour ajouter un nouvel élément.Les addons disponibles avec la version gratuite.

Listes des Addons

La version gratuite de SP Page Builder vos offres 14 Addons. Dans un premier temps, nous allons tester l'addon Text block, pour ajouter de façon simple du texte à votre page. N'hésitez pas à tester les autres pour voir plus en profondeur ce qu'ils peuvent apporter.

Apprenez à créer votre site wev avec Joomla! 4 Le livre

Joomla! 4 Le livre

version numérique

18.00€

version papier

29.00€

Addon text Block

Dans notre page, nous allons lui ajouter un paragraphe. Seul l'onglet Général change selon le type d'addon.Un addon de type texte block.

Addon text block

1. General

Dans l'onglet Général, nous avons toujours le paramètre Admin label qui vous permet de mieux identifier vos éléments si vous avez plusieurs, ils seront plus facilement distinguables entre eux.

Vous pouvez également lui mettre un titre que vous pourrez styliser selon vos envies, le titre n'est pas obligatoire.

Les options suivantes permettent de paramétrer votre addon selon ce qui est proposé.

Il est possible d'ajouter une class CSS à votre Addon pour lui ajouter un style plus spécifique de ce qui est proposé.

2. Style

Dans l'onglet Style, vous disposez de certaines options pour effectuer un style de façon plus globale à l'élément.

3. Advenced

Dans l'onglet Avancé, vous aurez des options sur la position de l'addon et sur la visibilité de l'élément, vous pourrez définir sur quel type d'écran il sera visible dekstop, tablette et/ou mobile, vous pourrez également choisir par quel groupe, il sera vu, car vous disposez d'un paramètre pouvant autoriser l'affichage  de cette addon à un certain groupe, par défaut, il est sur Public.

Éditeur Front-End

Avec SP Page Builder vous avez un éditeur Front-end, c’est-à-dire que vous pouvez éditer votre page directement sur la partie visuelle, très pratique pour voir directement nos modifications. Pour cela, il faut d'abord créer votre page lui mettre un titre puis Enregistrer votre page. Une fois votre premier enregistrement de la page, vous verrez apparaître 2 nouveaux boutons à droite de votre titre : Accéder à l'éditeur Frontend du composant SP Page Builder.

Editer une page avec SP Page Builder

  1. Frontend Editor pour accéder à l'éditeur front-end 
  2. Preview pour avoir un aperçu de la page une fois enregistrée

Cliquez sur le premier bouton, Frontend Editor vous pouvez y accéder également depuis la liste de vos pages ce bouton est disponible à côté du nom de la page. L'éditeur Frontend de SP Page Builder.

Éditeur frontend

La logique reste la même vous pouvez créer des lignes et y ajouter les colonnes puis vos addons. Vous pouvez faire glisser vos Addons grâce au drap en drop.Ajouter un addon grâce au drap & drop de l'éditeur frontend de SP Page Builder.

Editeur Frontend

Vous pouvez aussi avoir un aperçu de votre page selon 3 tailles d'écrans standard, desktop, tablette et mobile. Menu de l'éditeur frontend SP Page Builder.

Menu de l'éditeur Front-end

Avoir un site correctement responsive est aujourd'hui indispensable, n'hésitez donc pas à le tester grâce au 3 boutons.

Assistance Joomla!

Icone assistance

Vous créez ou générez un site web et vous avec besoin de conseils ou d'une intervention afin de mener à bien votre projet. Contactez nous, nous pourrons rapidement vous assister par mail ou par téléphone.

Associer votre page à un élément de menu

Maintenant que votre page est toute belle, il faut l'associer un élément de menu pour qu'elle puisse être vu et admirer.

Rendez-vous sur votre panneau d'administration et à partir du menu allez vers Menus > Gestions des liens. Ici, vous pouvez ajouter un nouveau lien de menu ou modifier un ancien.Définir le type de menu.

Editer un lien de menu.

Une fois sur l'éditeur de votre élément de menu. Cliquez sur le bouton Sélectionner du premier paramètre. Puis saisissez SP Page Builder > Page Liste des différents type de lien de menu disponible.

Liste des types de menu.

Un nouveau champ apparaît qui vous permettra de choisir la page SP Page Builder que vous souhaitez associer à ce lien. N'oubliez pas d'ajouter un titre et un menu à votre lien, tout est expliqué dans le tutoriel : Ajouter un élément de menu.

Nous avons vu qu'avec le composant SP Page Builder il est très intuitif de créer une mise en page, n'hésitez pas à tester la version gratuite. La version pro est intéressante, car elle propose 56 Addons, et elle permet également d'utiliser la mise en Page SP Page Builder sur vos articles.