Construction de page Joomla! par drag & Drop avec JSN PageBuilder

JSN PageBuilder de Joomlashine permet de créer des mises en pages personnalisées pour Joomla!. Le principe est d'organiser un article en page comportant des lignes et des colonnes. L'utilisation est simple, et accessible pour tous les utilisateurs, y compris les débutants.

Dans ce tutoriel, nous allons vous présenter JSN PageBuilder et vous montrer, par des exemples, comment construire une page.

Installation de JSN PageBuilder sur Joomla!

Pour ce tutoriel, nous utiliserons le version PRO de l'extension.
Connectez vous à la page d'extension de PageBuilder JSN et choisissez la solution qui vous convient.
Si vous choisissez la version gratuite, sachez qu'elle sera limitée.

jsn page builder

  • Connectez-vous sur l'administration de Joomla!
  • Allez dans Extensions → Gestion des extensions
  • Sélectionnez Archive à envoyer
  • Choisissez le fichier d'archive au format .ZIP
  • Cliquez sur Envoyer & installer.
  • Patientez jusqu'à la fin de l'installation
  • Suivant votre besoin, cochez la case pour recevoir des notifications par e-mail en cas de mise à jour.
  • Cliquez sur le bouton Finish comme sur l'image ci-dessous.

jsn page builder 2

2. Créez un article Joomla!

Rendez-vous dans Contenu → Gestion des articles → Ajouter un article (vous pouvez également consulter le chapitre Gestion de contenu du livre Joomla!).
Vous pouvez remarquer qu'une nouvelle fonctionnalité est disponible dans l'écran d'édition en haut de la zone de contenu qui vous permet de basculer entre l'éditeur par défaut et Pagebuilder.

jsn page builder 4

Cliquez sur le bouton PageBuilder

3. Ajoutez une ligne

Vous pouvez ajouter des lignes avec un nombre prédéfini de colonnes. Cliquez sur le bouton "Ajouter une ligne" et choisissez les colonnes dont vous avez besoin. Dans cet exemple, nous avons choisi deux colonnes.

jsn page builder 8

Maintenant que nous avons une nouvelle ligne, il est temps d'ajouter des éléments.

4. Ajouter un élément Texte

Cliquez sur le bouton "Ajouter élément".

jsn page builder 5

Dans la liste, choisissez "Text".

jsn page builder 6

Dans l'écran suivant vous pouvez ajouter votre titre et le texte, ainsi vous aurez l'aperçu du résultat final. Pour les options avancées, cliquez sur l'onglet de Style pour choisir les polices, les marges et l'animation.

jsn page builder 7

Lorsque vous avez terminé, cliquez sur le bouton "Save".

5. Ajoutez un module Joomla!

Cliquez sur "Ajouter un élément" et sélectionnez l'élément "Joomla Module".

jsn page builder 9

1 - Ajoutez un titre
2 - Choisissez le module

jsn page builder 10

Cliquez ensuite sur le bouton "Save".

6. Ajoutez un élément image

Pour ajouter une image, cliquez sur le bouton "Element" comme précédemment.
Choisissez l'élément Image.

jsn page builder 11

1 - Ajoutez un titre.
2 - Choisissez le fichier image.
3 - Définissez un texte alternatif.
4 - Choisissez la taille de votre image.
5 - Générez éventuellement un lien.

jsn page builder 12

Cliquez ensuite sur Save.

Il existe de nombreux autres éléments disponibles dans JSN PageBuilder tels que des onglets, de l'audio, des vidéos, etc...

7. Résultat final

Accédez à la page de votre site et regardez le résultat (cette page n'est qu'un exemple).

jsn page builder 13

Note : Traduit de l'anglais JSN PageBuilder, easy Drag-and-Drop Joomla Pages.

Notez cet article:
2
Ajoutez un CSS personnalisé à votre site Joomla! a...
Personnaliser les boutons BBCode dans Kunena

Articles en relation

Commentaires 2

 
iorbita le vendredi 20 février 2015 09:41

Bonjour,
... oui produit sympa sur papier, mais à l'usage j'ai perdu plus de temps avec leur mise en page qu'en passant par JCE et en codant à la main: trop de bugs avec les extensions de NoNumber et leur support n'est franchement pas à la hauteur, cela fait une semaine que j'attends des réponses sur leur forum, on me promet qu'on va y répondre et j'attends toujours... seul regret c'est d'avoir pris la version Pro pour un an.
Le produit est à mon avis encore trop jeune, peut-être plus tard j'essaierai à nouveau, mais pour le moment il m'a refroidi, je retourne à mes vieilles habitudes :(

Bonjour, ... oui produit sympa sur papier, mais à l'usage j'ai perdu plus de temps avec leur mise en page qu'en passant par JCE et en codant à la main: trop de bugs avec les extensions de NoNumber et leur support n'est franchement pas à la hauteur, cela fait une semaine que j'attends des réponses sur leur forum, on me promet qu'on va y répondre et j'attends toujours... seul regret c'est d'avoir pris la version Pro pour un an. Le produit est à mon avis encore trop jeune, peut-être plus tard j'essaierai à nouveau, mais pour le moment il m'a refroidi, je retourne à mes vieilles habitudes :(
Guest - Frédéric le lundi 20 avril 2015 01:19

Visiblement ça ne marche pas en suivant la procédure.

Alerte
Table 'basejoomla.b63eg_updates' doesn't exist SQL=SHOW FULL COLUMNS FROM `b63eg_updates`

Erreur
Composant : erreur à l'installation

Visiblement ça ne marche pas en suivant la procédure. [quote]Alerte Table 'basejoomla.b63eg_updates' doesn't exist SQL=SHOW FULL COLUMNS FROM `b63eg_updates` Erreur Composant : erreur à l'installation[/quote]
Déjà inscrit ? Connectez-vous ici
Guest
dimanche 26 mars 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.