Vous souhaitez cr\u00e9er un site avec Joomla 4, tr\u00e8s bon choix ! Et vous souhaitez maintenant l’installer sur votre h\u00e9bergeur<\/p>\n
\nPr\u00e9sentation de SP Page builder pour Joomla! 4 Nous allons voir ici comment utiliser un site Joomla! 4 avec le template H\u00e9lix totalement gratuit et avec la version gratuite du composant SP Page Builder. La version free du composant vous offre d\u00e9j\u00e0 la possibilit\u00e9 de cr\u00e9er facilement vos mises en pages de fa\u00e7on simple et intuitive. Installer Joomla! 4 sur votre Windows avec WAMP
\nInstaller Joomla! 4
\nDans 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\u00e9bergeur. Vous pouvez suivre ces tutoriels pour installer correctement votre Joomla! 4 :<\/p>\n
Installer Joomla! 4 sur votre h\u00e9bergeur.
\n Installer Joomla! 4 sur votre Mac avec MAMP.
\n Installer Joomla4 ! sous windows 10.<\/p>\n
Installer H\u00e9lix
\nVotre CMS est confortablement install\u00e9 en local ou sur un serveur distant, nous allons maintenant mettre notre template H\u00e9lix . Un template s’installe comme n’importe quelle extension. N’h\u00e9sitez pas \u00e0 suivre notre tutoriel d\u00e9di\u00e9 \u00e0 l’installation d’une extension dans Joomla! 4.
\nUne fois install\u00e9, il ne faut pas oublier de mettre le template H\u00e9lix par d\u00e9faut. C’est tr\u00e8s facile.
\n Styles des templates du site
\nInstaller SP Page Builder
\nComme nous l’avons vu en introduction, nous allons utiliser la version gratuite de SP page Builder Lite. Pour pouvoir t\u00e9l\u00e9charger Tout comme le template, un composant s’installe comme une extension.
\n\/!\\ Ce composant n’est pas encore tout \u00e0 fait compatible avec l’\u00e9diteur JCE. V\u00e9rifiez donc qu’il ne soit pas mis en \u00e9diteur par d\u00e9faut lorsque vous utilisez SP Page Builder s’il est install\u00e9 sur votre site. Vous pourrez sans probl\u00e8me utiliser l’\u00e9diteur par d\u00e9faut de Joomla! : TinyMCE.
\n\/!\\ \u00c9galement, comme la version 4 est encore r\u00e9cente, il peut survenir des erreurs lorsque vous testez ce composant en local.
\nCr\u00e9er une nouvelle page
\nMaintenant que tout est bien install\u00e9, nous pouvons enfin passer \u00e0 la cr\u00e9ation de notre nouvelle page. Depuis le panneau d’administration, allez dans Composants > SP Page Builder .
\n SP Page Builder
\nCliquez sur Nouveau pour cr\u00e9er votre nouvelle premi\u00e8re page. Vous arriverez ensuite \u00e0 l’interface suivante :
\n Cr\u00e9ation d’une mise en page SP Page Builder
\nLe champ titre est obligatoire. Vous avez 3 boutons au milieu de la page, avec eux vous pouvez ajouter une nouvelle ligne pour ajouter vos \u00e9l\u00e9ments, importer un style\/template ou r\u00e9cup\u00e9rer un template page (uniquement avec la version pro).
\nNous nous int\u00e9resserons uniquement au premier bouton. Cliquez sur \u00ab\u00a0Add New Row\u00a0\u00bb pour ajouter votre premi\u00e8re ligne \u00e0 votre page. Vous devez ensuite choisir le nombre de colonnes.
\n Ajouter une ligne \u00e0 la page.
\nIl faut imaginer vos \u00e9l\u00e9ments que vous allez mettre comme des boites que vous pouvez superposer. Vous pourrez bien s\u00fbr rajouter une colonne ou en supprimer plus tard. Et il est possible d’ajouter autant de ligne que souhait\u00e9es.
\nUne fois que vous avez g\u00e9n\u00e9r\u00e9 votre ligne. Vous pouvez lui ajouter des \u00e9l\u00e9ments appel\u00e9s Addon.
\n Ajouter des Addons
\nNous avons pour l’exemple g\u00e9n\u00e9r\u00e9 une ligne (Row) avec 2 colonnes de m\u00eame taille. Cliquez sur Addon ou la colonne (voir les encadrer en rouge sur la capture d’\u00e9cran ci-dessus) pour ajouter un nouvel \u00e9l\u00e9ment.
\n Listes des Addons
\nLa 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\u00e7on simple du texte \u00e0 votre page. N’h\u00e9sitez pas \u00e0 tester les autres pour voir plus en profondeur ce qu’ils peuvent apporter. Addon text Block
\nDans notre page, nous allons lui ajouter un paragraphe. Seul l’onglet G\u00e9n\u00e9ral change selon le type d’addon.
\n Addon text block
\n1. General
\nDans l’onglet G\u00e9n\u00e9ral, nous avons toujours le param\u00e8tre Admin label qui vous permet de mieux identifier vos \u00e9l\u00e9ments si vous avez plusieurs, ils seront plus facilement distinguables entre eux.
\nVous pouvez \u00e9galement lui mettre un titre que vous pourrez styliser selon vos envies, le titre n’est pas obligatoire.
\nLes options suivantes permettent de param\u00e9trer votre addon selon ce qui est propos\u00e9.
\nIl est possible d’ajouter une class CSS \u00e0 votre Addon pour lui ajouter un style plus sp\u00e9cifique de ce qui est propos\u00e9.
\n2. Style
\nDans l’onglet Style, vous disposez de certaines options pour effectuer un style de fa\u00e7on plus globale \u00e0 l’\u00e9l\u00e9ment.
\n3. Advenced
\nDans l’onglet Avanc\u00e9, vous aurez des options sur la position de l’addon et sur la visibilit\u00e9 de l’\u00e9l\u00e9ment, vous pourrez d\u00e9finir sur quel type d’\u00e9cran il sera visible dekstop, tablette et\/ou mobile, vous pourrez \u00e9galement choisir par quel groupe, il sera vu, car vous disposez d’un param\u00e8tre pouvant autoriser l’affichage de cette addon \u00e0 un certain groupe, par d\u00e9faut, il est sur Public.
\n\u00c9diteur Front-End
\nAvec SP Page Builder vous avez un \u00e9diteur Front-end, c\u2019est-\u00e0-dire que vous pouvez \u00e9diter votre page directement sur la partie visuelle, tr\u00e8s pratique pour voir directement nos modifications. Pour cela, il faut d’abord cr\u00e9er votre page lui mettre un titre puis Enregistrer votre page. Une fois votre premier enregistrement de la page, vous verrez appara\u00eetre 2 nouveaux boutons \u00e0 droite de votre titre :
\n Editer une page avec SP Page Builder <\/p>\n
Frontend Editor pour acc\u00e9der \u00e0 l’\u00e9diteur front-end
\nPreview pour avoir un aper\u00e7u de la page une fois enregistr\u00e9e<\/p>\n
Cliquez sur le premier bouton, Frontend Editor vous pouvez y acc\u00e9der \u00e9galement depuis la liste de vos pages ce bouton est disponible \u00e0 c\u00f4t\u00e9 du nom de la page.
\n \u00c9diteur frontend
\nLa logique reste la m\u00eame vous pouvez cr\u00e9er des lignes et y ajouter les colonnes puis vos addons. Vous pouvez faire glisser vos Addons gr\u00e2ce au drap en drop.
\n Editeur Frontend
\nVous pouvez aussi avoir un aper\u00e7u de votre page selon 3 tailles d’\u00e9crans standard, desktop, tablette et mobile.
\n Menu de l’\u00e9diteur Front-end
\n Avoir un site correctement responsive est aujourd’hui indispensable, n’h\u00e9sitez donc pas \u00e0 le tester gr\u00e2ce au 3 boutons. Associer votre page \u00e0 un \u00e9l\u00e9ment de menu
\nMaintenant que votre page est toute belle, il faut l’associer un \u00e9l\u00e9ment de menu pour qu’elle puisse \u00eatre vu et admirer.
\nRendez-vous sur votre panneau d’administration et \u00e0 partir du menu allez vers Menus > Gestions des liens . Ici, vous pouvez ajouter un nouveau lien de menu ou modifier un ancien.
\n Editer un lien de menu.
\nUne fois sur l’\u00e9diteur de votre \u00e9l\u00e9ment de menu. Cliquez sur le bouton S\u00e9lectionner du premier param\u00e8tre. Puis saisissez SP Page Builder > Page
\n Liste des types de menu.
\nUn nouveau champ appara\u00eet qui vous permettra de choisir la page SP Page Builder que vous souhaitez associer \u00e0 ce lien. N’oubliez pas d’ajouter un titre et un menu \u00e0 votre lien, tout est expliqu\u00e9 dans le tutoriel : Ajouter un \u00e9l\u00e9ment de menu.
\nNous avons vu qu’avec le composant SP Page Builder il est tr\u00e8s intuitif de cr\u00e9er une mise en page, n’h\u00e9sitez pas \u00e0 tester la version gratuite. La version pro est int\u00e9ressante, car elle propose 56 Addons, et elle permet \u00e9galement d’utiliser la mise en Page SP Page Builder sur vos articles.<\/p>\n","protected":false},"excerpt":{"rendered":"
Vous souhaitez cr\u00e9er un site avec Joomla 4, tr\u00e8s bon choix ! Et vous souhaitez maintenant l’installer sur votre h\u00e9bergeur<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-555","post","type-post","status-publish","format-standard","hentry","category-articles"],"yoast_head":"\n