Written by Vous souhaitez créer un site avec Joomla 4, très bon choix ! Et vous souhaitez maintenant l’installer sur votre hébergeur
Présentation de SP Page builder pour Joomla! 4 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 Joomla! 4 sur votre hébergeur.
Installer Joomla! 4 sur votre Mac avec MAMP.
Installer Joomla4 ! sous windows 10.
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.
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 .
SP Page Builder
Cliquez sur Nouveau pour créer votre nouvelle première page. Vous arriverez ensuite à l’interface suivante :
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.
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
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.
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. Addon text Block
Dans notre page, nous allons lui ajouter un paragraphe. Seul l’onglet Général change selon le type d’addon.
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 :
Editer une page avec SP Page Builder
Frontend Editor pour accéder à l’éditeur front-end
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.
É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.
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 Front-end
Avoir un site correctement responsive est aujourd’hui indispensable, n’hésitez donc pas à le tester grâce au 3 boutons. 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.
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 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.