Créez votre site web avec Joomla! 4 et l'hébergeur Ionos

L'hébergeur Ionos propose une offre à 1€ HT pour la première année puis 10€ par an les années suivantes pour l'hébergement de votre site Web. 
Une offre qui regroupe tout le nécessaire pour la création de votre site Joomla! 4 : 

• 1 nom de domaine
• 1 boîte email 
• 100 GB espace web 
• 100 bases de données
• Une protection des données 
• Une gestion DNS avancée 
• Des accès FTP 
• Un certificat SSL 
• Une configuration rapide et simple 

Rendez-vous sur Ionos. 

Configuration de l'offre Ionos 

Rendez-vous sur la page d'accueil Ionos.
Entrez un nom de domaine disponible, choisissez si vous souhaitez héberger votre site en .fr ou en .com, il existe également de nombreuses autres extensions comme .net, .eu, .be … Mais nous vous conseillons de rester sur .fr ou .com.

Après avoir choisi votre nom de domaine, cliquez sur Ajouter puis Continuer.
Une fois sur votre panier de commande, vérifiez la formule d’hébergement ainsi que l’orthographe de votre nom de domaine. 

Panier de commande Ionos Hébergament et nom de domaine

Vous pouvez ensuite, cliquez sur Continuer. 

Vous arrivez à la page de connexion, vous pouvez vous créer un compte ou vous connecter.
Si vous choisissez de vous créer un compte, il vous suffira de rentrer vos informations personnelles, accepter les conditions générales de vente puis de confirmer votre commande. 

Connectez-vous à votre compte Ionos. 

Menu Ionos 

Depuis le menu Ionos, dirigez-vous vers Hébergement. 

Vous retrouvez votre nom de domaine inscrit dans Espace Web. 

Espace Web Ionos 

Sur l’écran vous remarquez qu’à côté de votre nom de domaine il y a un cadenas rouge, cliquez simplement dessus afin d'installer un certificat SLL pour que votre site soit accessible en HTPPS.

Création de la base de données pour votre site web Joomla!

Rendez-vous dans Base de données > Créer une base de données. 
Remplissez les champs Description et Mot de passe et cliquez sur Enregistrer
Une fois la base de données créées, vous retrouvez toutes les informations nécessaires pour installer Joomla!

Téléchargement de Joomla! 4 

Pour cela, rendez-vous sur Joomla.fr.

Site de Joomla.fr pour télécharger Joomla! 4 en français

Cliquez sur « Joomla! en Français » puis attendez que votre fichier se télécharge. 

Dirigez-vous vers les téléchargements de votre ordinateur puis zippé le fichier Joomla! 4, cela ne vous prendra que quelques secondes, faites un clique droit sur votre dossier et cliquez sur Compresser. 

Retournez sur votre menu Ionos, puis dans Hébergement > Espace Web > Charger  

Espace Web pour charger le dossier Joomla! 4

Déposez votre fichier Zip. 
Comme nous avons déposé un fichier zippé nous allons le dezipper, en le sélectionnant Actions > Décompresser.

Dézipper le dossier Joomla! 4

Puis Enregistrer. 
Votre pack Joomla! 4 est maintenant ajouté à Ionos.

Installation de Joomla! 4 

Dans votre barre de recherche saisissez votre nom domaine. 
Vous arrivez sur cette page 

Intallation de Joomla

Sélectionnez votre langue. 

Puis saisissez le nom de votre site puis cliquez sur Configuration des données de connexion.

Informations de connexion Joomla

Saisissez le nom du "Super Utilisateur" principal ainsi que le nom d’utilisateur pour ce compte "Super Utilisateur ".
Choisissez un mot de passe et entrez votre adresse e-mail. 
Puis cliquez sur Configuration de la connexion à la base de données. 

Sur cette page, vous allez rentrer toutes les informations concernant votre base de données précédemment créer. 

Informations sur la base de données 

Retournez sur Ionos, allez dans Hebergement > Base de données.
Puis cliquez sur la base de données précédemment crée et copiez le nom d’hôte que vous allez coller dans la case nom d’hôte. 

Caractéristiques de la base de données 

Ensuite copiez le nom d’utilisateur puis collez le dans la case nom d’utilisateur. 
Après ça saisissez le mot de passe de votre base de données. 
Puis le nom de votre base de données.

Vous pouvez ensuite cliquer sur Installer Joomla. 

Message de sécurité concernant la propriété du compte d'hébergement 

Un message s’affiche en haut de la page, nous allons devoir supprimer un fichier dans l’espace Web. 
Pour cela retournez sur Ionos, Hébergement > Utiliser l'espace Web > fichier Installation. 
Puis cherchez le document « Joomla_4 0.3-Stable-Full_Package.zip ». 

Supprésion du fichier dans installation 

Sélectionnez-le, puis appuyez sur Supprimer et Confirmer la suppression.

Retournez ensuite sur l'installation de Joomla et cliquez en bas de la page sur Installer Joomla.
Votre installation est terminée, vous pouvez cliquer sur Finalisation et accès au site. 

Connexion à Joomla! 4 

Vous pouvez alors vous connecter en frontend pour découvrir votre site. 
Ou pour commencer la construction de votre site rendez-vous sur le backend pour cela dans la barre de recherche, ajoutez "/administrator" à la suite de votre lien URL.

Connexion au backend de votre site Joomla! 4

Vous arrivez sur une page de connexion, rentrez vos identifiants puis connectez-vous. 

Les templates pour votre site Joomla! 4 

Le backend de votre site utilise le template Cassiopeia qui est fourni automatiquement lors de l’installation de Joomla. Mais nous allons voir ensemble qu’il existe plein d’autres templates qui vous permettront de personnalisé votre site. 

Rendez-vous sur le site Cinnk.com. 
Puis dans Articles, vous trouverez l’article qui répertorie plus de 400 templates compatibles avec Joomla! 4, comme JoomShapper, Joomlart, GavickPro…
Ou l'article qui regroupe plusieurs templates gratuits et disponibles avec Joomla! 4.
Vous trouverez des templates avec un design simple et épuré comme Stark ou même, un template pour créer un magazine en ligne, SJ Basic4. 

Nous allons utiliser le template Helix Ultimate, un template disponible chez JoomShaper, c’est l’un des meilleurs templates gratuits proposés par un des leaders des templates et extensions pour Joomla!.

Dans l’article de Cinnk, cliquez sur Télécharger.

Article Cinnk Templates gratuits et disponibles pour Joomla! 4

Vous arrivez sur le site de JoomShaper, cliquez sur Download Free puis Download et de nouveau Download. 

Téléchargement Hélix Ultimate sur JoomShaper 

Votre template se télécharge. 

Rendez-vous dans les téléchargements de votre ordinateur. 
Pour le télécharger sur notre site Joomla, nous allons zipper le fichier pour cela faites un clique droit puis cliquez sur Compresser. 

Ajouter Helix Ultimate à votre site Joomla! 4

Dans le panneau d'administration, dirigez-vous vers System > install > Extensions. 
Glissez et déposez votre fichier zippé. 
Une fois votre dossier téléchargé, rendez-vous dans Sytem > Site Template Styles >  Défault > helixutimate. 

Ajouter Hélix Ultimate comme template 

Vous pouvez vous rendre sur votre frontend pour découvrir votre site avec votre nouveau template. 

La première extension de votre site vient d'être installé.
À noter, que lors de chaque extension, il est important de nettoyer le répertoire /tpm, un raccourci temporaire qui stock des fichiers de l'exécution de l'installation. 

Changer la langue de votre site  

Dans le panneau d'administration, cliquez sur System > Install > languages > dans la barre de recherche taper French > Install.
Une fois votre Language pack est installé, cliquez sur System > Manage > Languages > dans la colonne « défault » > cliquer sur French. 

Votre site Joomla! 4 est maintenant en Français. 

Pour rester dans le domaine des langues, il est également possible de réaliser une substitution de langue afin de traduire automatiquement certaines chaines de caractères, aussi bien en Frontend qu'en Backend.

Télécharger SP Page Builder facilement  

Pour télécharger l'extension SP Page Builder, une extension qui va vous permettre de facilement gérer vos mises en pages, sans toucher une ligne de code, rendez-vous sur JoomShaper.

Cliquez sur Page Builder > en bas de la page cliquez que Download Lite Version 

Télécharger la version gratuite de SP Page Builder

Puis cliquez de nouveau sur Download.
Votre fichier se télécharge.

Rendez-vous dans les téléchargements de votre ordinateur. Pour ajouter SP Page Builder à notre site Joomla, nous allons zipper le fichier pour cela faites un clique droit puis cliquez sur Compresser. 

Dans le panneau d’administration, dirigez-vous vers System > Extensions 
Puis glissez et déposez votre fichier zippé.
L’installation de SP Page Builder est terminée. 

Vous retrouverez votre extension dans Composants > SP Page Builder 

Création d'une page avec SP Page Builder  

Pour découvrir l’extension, nous allons créer une page d’accueil, cliquez sur Nouveau 
Donnez un titre à votre page comme « Accueil ».

Deux choix s’offrent à vous, vous pouvez faire de choix d’utiliser un template SP Page Builder mais pour cela il faudra vous munir de la version Pro de SP Page Builder ou alors vous pouvez créer simplement et gratuitement vos pages. 

Si vous choisissez de créer vos pages, cliquez sur ADD New Row.
C’est ici que vous allez pouvoir ajouter des addons à vos pages, avec la version gratuite vous avez tout l’essentiel pour construire une page soit un bloc texte, des icônes, l’ajout d’encart vidéo ou photo ou même d’un bouton …

Addons disponible avec la version gratuite de SP Page Builder

Créez votre page d’accueil, en complétant vos addons, vous pouvez ajouter plusieurs Row pour construire votre page. 

Exemple de composition de page d'accueil

Une fois terminé, vous pouvez cliquer sur Enregistrer et fermer. 

Et pour avoir un aperçu de votre page cliquez sur Preview. 

Accèder à la preview d'une page Joomla 

Rattacher une page SP Page Builder au menu principal  

Nous allons maintenant rattacher la page que nous venons de créer au menu principal afin que les visiteurs de votre site arrivent sur cette page. 

Sur le panneau d’administration, dirigez-vous vers Menus > Menu Principal > Nouveau
Donner un titre à votre lien de menu.
Sélectionner le type de lien de menu, SP PAGE BUILDER > Page 
Sélectionner la page que nous venons de créer "Accueil"
Vous pouvez Enregistrer et fermer. 

Ajouter un lien de menu 

Dans la colonne Accueil, cliquez sur le rond gris afin de définir votre nouvelle page comme page d’accueil de votre site 

Définir une page comme page d'accueil 

Retournez sur le fronted de votre site pour découvrir votre page d’accueil. 

Vous savez maintenant comment créer un site Joomla! 4 avec l’hébergeur Ionos. 

À vous de construire votre site selon vos envies, mais si jamais vous avez besoin d’aide nous restons à votre disposition sur notre forum.