Ja Page Builder : Le complément de vos templates Joomlart T3

Joomlart sort son page builder, qui vous permettra de construire des pages hors de vos templates, mais également de les intégrer dans vos templates Joomlart T3 tels que PurityIII ou les excellents templates du club Joomlart

Instructions d’installation

Cette section vous aidera à installer JA Builder sur votre site Joomla.

Configuration requise

JA Site Builder est prévu pour Joomla 3. Veuillez vous assurer que votre système répond aux exigences suivantes:

Logiciel

  • Software: PHP (Magic Quotes GPC off): 5.3.1 + (5.4+ conseillé)

Bases de données

  • MySQL(InnoDB support Obligatoire): 5.1+

  • MSSQL 10.50.1600.1+

  • PostgreSQL 8.3.18+

Serveurs Web

  • Apache 2.x+

  • Microsoft IIS 7

  • Nginx 1.0 (1.1 recommended)

Exigence de navigateur

  • Firefox 4+

  • IE (Internet Explorer) 8+

  • Google Chrome 10+

  • Opera 10+

  • Safari 5+

Environnement de développement

Au cours du processus de développement, il est préférable d’utiliser Localhost. Vous pouvez utiliser les serveurs suivants sur votre PC pour développer votre site.

Windows

  • WAMPSEVER

  • XAMPP for Windows

Linux

  • LAMP Bubdle

  • XAMPP for Linux

Mac OS

  • MAMP & MAMP Pro

  • XAMPP for Mac OS


Guide d’installation

Télécharger les packages

Accéder à la page de téléchargement du builder puis téléchargez le paquet ou téléchargez tous les fichiers.

  • Full package

  • JA Builder template

  • JA Builder component

  • JA Universal Builder plugin

Installez JA Site Builder sur votre site Joomla

À partir de votre panneau de configuration du backend, allez à: "Extensions →gérer → Installation", parcourez votre ordinateur vers le package d'installation du générateur Site JA, puis cliquez sur "Télécharger et installer"

install package

Définissez le template JA Builder comme style de template par défaut (facultatif: au cas où vous souhaitez utiliser le template pour votre site entier - tous les éléments du menu). Aller à : « Extensions → templates », définir Builder JA comme votre style de template par défaut.

default template style

Activez le plugin JA Builder. Allez à "Extensions → Plugin", trouvez et activez le plugin JA builder.

enable plugin

Tutoriel vidéo

Cette vidéo est un guide rapide pour utiliser JA Builder pour créer un site Joomla,

Créer une page

Dans cette section, nous vous aiderons à travailler avec le générateur, à créer des pages, des sections, à travailler avec des pages Joomla et des extensions tierces.

Créer une page JA Builder

Tout d'abord, vous devez comprendre la structure d'une mise en page ddu builder. La mise en page comprend 3 sections principales, pour chaque section, vous pouvez ajouter autant de blocs de contenu que vous le souhaitez.

page structure

  • Header - Les blocs de contenu ajoutés à la section d'en-tête sont affichés dans les pages affectées au même style de template

  • Content - Les blocs de contenu ajoutés à la section "contenu" sont affichés uniquement dans la page.

  • Footer - Les blocs de contenu ajoutés à la section "pied de page" sont affichés dans les pages qui sont affectées au même style de template,

1. Créez une nouvelle page

Accédez au menu "Pages", le panneau répertorie toutes les pages créées. Cliquez sur le bouton "Nouveau" pour créer une nouvelle page.

page list

Dans la création d'une nouvelle page, ajoutez le titre de la page et les informations supplémentaires pour le menu.

new page

Il existe un autre moyen de créer une page JA Builder. Sur le front-end, lorsque vous éditez une page, vous verrez un bouton "Créer une page" sur la barre supérieure, vous pouvez créer une nouvelle page à partir de là.

add page front

2. Modifier la page

Après avoir créé une nouvelle page, cliquez sur "Modifier en direct" pour modifier la page sur le frontal.

create new page

Cliquez sur le bouton "Live Edit" pour commencer à éditer la page.

edit page front

Maintenant, ajoutez un bloc de contenu à l'en-tête, au contenu principal ou au pied de page. Comme mentionné, le bloc de contenu ajouté à la section en-tête et pied de page sera affiché dans toutes les pages qui utilisent la même mise en page.

add block

Ensuite, sélectionnez le type de bloc puis la disposition et le style.

add content block

Une fois terminé, vous pouvez modifier le bloc et les éléments dans le bloc de contenu.

customize block

Selon le bloc de contenu ajouté et le contenu du bloc, les paramètres peuvent être différents pour vous aider à personnaliser facilement.

Faites la même chose pour ajouter un autre bloc de contenu. Une fois terminé, publiez la page pour que le visiteur puisse voir la page.

publish page

Créer une page par défaut de Joomla

La structure d’une page par défaut de Joomla comporte

joomla layout

  • Header - Les blocs de contenu ajoutés à la section d'en-tête sont affichés dans les pages affectées au même style de template.

  • Top - Les blocs de contenu ajoutés à la section « Top » sont affichés dans les pages qui utilisent la même mise en page

  • Content - Il s'agit du contenu principal de la page chargé à partir du type de menu.

  • Bottom - Les blocs de contenu ajoutés à la section "contenu" sont affichés uniquement dans la page.

  • Footer - Les blocs de contenu ajoutés à la section « Footer » sont affichés dans les pages qui utilisent la même mise en page

1. Créer un nouveau lien de menu

Vous pouvez créer un nouvel élément de menu Joomla normalement, accédez à Menu »Menu principal» et créez un nouveau lien de menu. Par exemple, nous créons un lien de menu des articles en Catégorie Blog intitulé «Blog». Voici le réglage du menu.

blog menu

2. Modifiez la page Joomla

Dans la partie frontale, ouvrez la page Blog que nous venons de créer à l'étape 1 et cliquez sur le bouton Edit.

edit blog page

Vous pouvez ajouter un bloc de contenu aux sections suivantes:

  • Header

  • Top

  • Bottom

  • Footer

N'oubliez pas que les blocs de contenu ajoutés aux sections En-tête et Pied de page sont affichés dans toutes les pages qui utilisent le même style de modèle tandis que les blocs de contenu ajoutés aux sections «Top» et «Bottom» ne s'affichent que sur cette page.

Cliquez sur "Add bloc" pour la section spécifique, puis sélectionnez la mise en page et le style de mise à jour de contenu, la personnalisation du bloc de contenu basé sur les configurations prises en charge.

blog page block

Dans la section "Contenu", il dispose de 2 blocs internes: "Contenu principal" qui charge le contenu du type de menu et le "Barre latérale" qui charge les modules à partir d'une position définie.

content section

Vous pouvez configurer le bloc Contenu principal et le bloc latéral, survolez le bloc et cliquer sur l'icône de configuration. Vous pouvez modifier la largeur ou le bloc (basé sur le système de grille Bootstrap 12), sélectionnez le type de contenu: content (pour charger un contenu depuis le type de menu) et module (Charger des modules à partir de la position définie du module).

main content setting

Dans le cas où vous voulez créer une disposition sur 3 colonnes, clonez un bloc puis configurez la largeur des 3 blocs, cela peut être: 6-3-3, 2-8-2.

clone block

Maintenant, vous pouvez créer des modules dans l’administration de votre site et l’affecter à la position du module que vous avez configurée pour le bloc puis sélectionner pour afficher dans l'élément de menu.

sidebar module

Faites la même chose pour créer d'autres pages par défaut Joomla comme: Contact, Single Article, Banner, etc.

Compatibilité d'Extensions Tierces

Le builder peut fonctionner avec toutes les extensions tierces comme EasySocial EasyDiscuss, EasyBlog, Virtuemart, Mijoshop, etc

Dans cette documentation, nous utiliserons EasyDiscuss comme exemple mais vous pouvez faire la même chose pour les autres extensions.

1. Installer l’extension tierce

Téléchargez l'extension et installez-la normalement sur votre site Joomla.

2. Créer des pages pour l’extension tierce

Cette étape dépend de l'extension spécifique, mais normalement, vous créez l'élément de menu et sélectionnez le type de menu pour charger le contenu de l’extension tierce. Dans ce cas, nous créerons un menu: EasyDiscuss » Frontpage Layout » Frontpage Layout nommé: Discussion pour charger le contenu du composant EasyDiscuss.

easy discuss menu

3. Modifier la page

Sur front-end, ouvrez la page et cliquez sur le bouton "Edit page" pour modifier la page.

easy discuss page

La mise en page est la même que la mise en page par défaut de Joomla et comporte également 5 sections:

  • Header - Les blocs de contenu ajoutés à la section d'en-tête sont affichés dans les pages affectées au même style de template.

  • Top - Les blocs de contenu ajoutés à la section « Top » sont affichés dans les pages qui utilisent la même mise en page

  • Content - Il s'agit du contenu principal de la page chargé à partir du type de menu.

  • Bottom - Les blocs de contenu ajoutés à la section "contenu" sont affichés uniquement dans la page.

  • Footer - Les blocs de contenu ajoutés à la section « Footer » sont affichés dans les pages qui utilisent la même mise en page

extension page

Vous pouvez ajouter des blocs de contenu aux sections header, top, bottom et footer. Pour la section de contenu, configurez de la même façon que la section de contenu principal de la page par défaut de Joomla et donc vous pouvez:

  • Modifier la largeur de chaque bloc

  • Changer le type pour module ou pour contenu, si module, on peut définir la position du module pour charger des modules à partir de la position

  • Dupliquez un bloc pour créer une section de contenu principal à plusieurs colonnes.

  • Changez de position pour les blocs avec les fonctions de déplacement gauche et droite dans chaque bloc.

main content setting

Intégration à un site template T3 Framework

Vous pouvez utiliser JA Builder dans un site web basé sur T3 Framework template (Templates basés sur Bootstrap 3) comme Uber, JA Teline V. Voici les étapes:

Installez JA Builder

  • Étape 1 - Téléchargez le package JA Builder et installez-le sur votre site Joomla

  • Étape 2 - Activer le plugin JA Universal Builder enable plugin

Créer la mise en page pour votre T3 Template

Comme JA Builder utilise la mise en page pleine largeur, nous devons créer la même mise en page pour votre framework de template T3. Par exemple, nous allons intégrer JA Builder à un site Web basé sur le template JA Restaurant.

Étape 1 - Créez le fichier builder.php:

Ouvrez le dossier: templates\ja_restaurant\tpls et créez un nouveau fichier de mise en page nommé builder.php puis ajouter le code suivant au fichier:

 

<?php

/**

*------------------------------------------------------------------------------

 * @package       T3 Framework for Joomla!

*------------------------------------------------------------------------------

 * @copyright     Copyright (C) 2004-2013 JoomlArt.com. All Rights Reserved.
 * @license       GNU General Public License version 2 or later; see LICENSE.txt
 * @authors       JoomlArt, JoomlaBamboo, (contribute to this project at github 
 *                & Google group to become co-author)
 * @Google group: https://groups.google.com/forum/#!forum/t3fw
 * @Link:         http://t3-framework.org 

*------------------------------------------------------------------------------

*/

defined('_JEXEC') or die;

?>

<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>"
          class='<jdoc:include type="pageclass" />'>
<head>
        <jdoc:include type="head" />
        <?php $this->loadBlock('head') ?>
</head>
<body>
<div class="t3-wrapper"> <!-- Need this wrapper for off-canvas menu. Remove if you don't use of-canvas -->
  <?php $this->loadBlock('header') ?>
        <!-- MAIN CONTENT -->
        <?php if($this->hasMessage()) : ?>
        <jdoc:include type="message" />
        <?php endif ?>
        <jdoc:include type="component" />
        <!-- //MAIN CONTENT -->
  <?php $this->loadBlock('footer') ?>
</div>
</body>
</html>

 

 

Étape 2 – Collez le fichier de mise en page dans le dossier :templates\ja_restaurant\tpls

Étape 3 - Accédez à votre site Joomla back-end, aller à : Extensions » Templates et dupliquez n’importe quel style de template de JA Restaurant.

duplicate template

Étape 4 - Ouvrez le style de template copié, dans le panneau "Layout", choisissez la mise en page "builder" que nous venons de créer.

builder layout

Étape 5 - Accédez à Composant » JA Builder et créez la nouvelle page puis appuyez sur "Live Edit" pour modifier la page en frontal.

edit created page

Pour la page, cela utilisera Header et footer depuis le template JA Restaurant, vous pouvez donc ajouter le bloc de contenu à la section "contenu".

t3 framework edit

Une fois terminé, publiez la page, la page comprendra l’en-tête et le pied de page chargés de blocs du template JA Restaurant et le contenu ajoutés par JA Builder.

published page builder

Autres tutoriels

À venir

Mise à jour

À venir

Sauvegarder
Choix utilisateur pour les Cookies
Nous utilisons des cookies afin de vous proposer les meilleurs services possibles. Si vous déclinez l'utilisation de ces cookies, le site web pourrait ne pas fonctionner correctement.
Tout accepter
Tout décliner
Fonctionnels