bloggerselite logo

Comment créer un site web dynamique avec Astra et JetEngine

Comment créer un site web dynamique avec Astra et JetEngine

Il semblerait que les sites statiques soient devenus une chose du passé et que les sites dynamiques faciles à développer les aient remplacés pour toujours. Mais avec l’avènement de différents générateurs de sites statiques et de cadres spéciaux, le débat sur le type de site le plus optimal a repris de plus belle.

Cet article présente les différences entre les sites statiques et les sites dynamiques. Il donnera également un aperçu de la création d’un site dynamique à l’aide du plugin JetEngine et du thème Astra.

Qu’est-ce qu’un site web dynamique ?

Les sites web dynamiques se composent de pages dynamiques, comme des modèles modifiables. Ces sites s’adaptent à un utilisateur particulier en fonction de diverses caractéristiques, telles que l’emplacement, l’heure de la journée et l’interaction avec l’utilisateur.

Les exemples les plus frappants de sites dynamiques sont les pages basées sur des systèmes de gestion de contenu (CMS).

Dans cette catégorie, on trouve également des boutiques en ligne, des forums, des sites d’évaluation et d’autres plateformes permettant aux utilisateurs d’interagir avec eux.

Les pages dynamiques sont créées à la demande chaque fois qu’un utilisateur arrive sur la page. Les pages comprennent des espaces réservés pour des éléments spécifiques qui seront également chargés à la demande.

L’avantage est que vous pouvez toujours afficher le contenu le plus récent lorsqu’un utilisateur ouvre une page.

Sites web dynamiques vs sites web statiques

Avant de comparer les sites web dynamiques et statiques, précisons ce qu’est un site web statique.

Les sites statiques ont la même apparence et le même contenu pour tous les visiteurs.

Souvent, les sites comportant un minimum de pages ou dont le contenu ne nécessite pas de mises à jour régulières sont statiques, à savoir les pages de services commerciaux ou de produits, les catalogues de produits, les répertoires de documentation technique et les pages “À propos de nous”.

Il est toutefois possible d’ajouter des éléments dynamiques (commentaires, comptes d’utilisateurs, recherche) à ces pages à l’aide d’outils tiers.

Comment fonctionnent les pages dynamiques ?

Lorsque le visiteur arrive sur une page dynamique, le serveur trouve la page requise et l’envoie à l’interprète.

L’interprète construit alors la page à l’aide du modèle et la rapproche des éléments dynamiques de la base de données. La page retourne ensuite au serveur, qui l’envoie au navigateur de l’utilisateur pour qu’il l’affiche.

L’interprète utilise Java, PHP, ASP et d’autres langages de programmation pour traiter les pages côté serveur.

Lorsque je parle de sites web statiques, je veux dire que lorsqu’une page statique est demandée dans un navigateur, le serveur fournit immédiatement la page HTML finie dans sa forme originale.

Outre le HTML, seuls le CSS et le JavaScript sont utilisés pour les pages statiques, ce qui garantit un chargement rapide.

Fonctionnalité

L’une des principales caractéristiques des sites dynamiques est la séparation de la conception (modèle), du système de traitement de l’information (moteur) et du contenu.

En connectant un site dynamique à une base de données, vous pouvez facilement demander des informations de manière organisée et structurée afin de créer et d’afficher du contenu en fonction de vos besoins.

Les sites web dynamiques offrent un large éventail de fonctionnalités.

Pour les utilisateurs, il s’agit de la possibilité de s’enregistrer et de s’authentifier, de sauvegarder des informations personnelles, de faire des recherches sur le site, de remplir des formulaires, de créer une boutique en ligne et d’autres interactions.

Il semblerait que les sites statiques soient devenus une chose du passé et que les sites dynamiques faciles à développer les aient remplacés pour toujours. Mais avec l’avènement de différents générateurs de sites statiques et de cadres spéciaux, le débat sur le type de site le plus optimal a repris de plus belle.

Cet article présente les différences entre les sites statiques et les sites dynamiques. Il donnera également un aperçu de la création d’un site dynamique à l’aide du plugin JetEngine et du thème Astra.

Coût

Le coût des sites web dynamiques et statiques n’est pas univoque. N’attendez donc pas une réponse claire du type “un site web dynamique est moins cher qu’un site statique”.

Tout dépendra principalement du site lui-même :

  • la plateforme et le constructeur de site qu’il utilise
  • la manière dont il est construit
  • Le contenu
  • Le niveau de compétence des utilisateurs
  • La nécessité de faire appel à un programmeur ou à un développeur web, etc.

Auparavant, on pouvait dire que les sites web statiques nécessitaient plus d’argent pour leur maintenance.

Mais aujourd’hui, vous pouvez utiliser WordPress, HTML et des générateurs de sites statiques pour créer des pages web statiques de manière efficace en termes de coûts et de temps.

Moteurs de recherche

Il n’y a pas de grande différence entre les sites web statiques et dynamiques en termes de référencement. Le fait que certaines pages web soient statiques et d’autres dynamiques ne signifie pas qu’un type particulier de site web est nettement meilleur pour les moteurs de recherche.

L’un des points auxquels il convient de prêter attention est l’URL. Les pages web statiques fonctionnent “naturellement”. L’organisation des URL dans des dossiers suit l’organisation de votre site web. Cela signifie que chaque page n’a qu’une seule URL, etc.

Dans le cas des pages web dynamiques, les performances en matière de référencement dépendent de la manière dont vous organisez votre site web – vous devez garantir que vos URL suivent la structure du site web.

Veillez donc à ce que les URL soient conviviales.

Un autre point critique pour le référencement est la vitesse de la page. Faites donc en sorte que votre site web dynamique ou statique soit aussi rapide que possible.

Enfin, tous les moteurs de recherche préfèrent les sites web régulièrement mis à jour et au contenu frais.

Les pages web dynamiques sont beaucoup plus faciles à renouveler que les pages statiques.

Vitesse du site web

Les pages statiques se chargent plus rapidement que les pages dynamiques. C’est un fait.

Le serveur web doit simplement copier le fichier de la page, ajouter des formulaires ou des éléments et l’envoyer au navigateur. Il y a très peu de traitement à effectuer et les ressources du serveur sont moins sollicitées.

Les pages dynamiques doivent être construites par le CMS avant d’être envoyées au navigateur de l’utilisateur. Le modèle de page doit être copié et chaque élément dynamique doit être trouvé dans la base de données et injecté dans la page.

Ce n’est qu’ensuite qu’elle peut être envoyée au navigateur de l’utilisateur.

Malgré la complexité accrue, si vous utilisez un thème WordPress léger et que vous construisez votre site web correctement, vous pouvez faire beaucoup pour minimiser les délais de traitement.

Comment créer un site web dynamique avec Astra et JetEngine

Vous pouvez construire un site web rapide et entièrement responsable facilement si vous utilisez les bons outils. Dans ce cas, il s’agit du thème WordPress Astra et du plugin JetEngine.

Comment installer le thème Astra

Il y a plusieurs façons d’installer le thème Astra.

Si vous êtes abonné à Crocoblock, vous trouverez Astra dans l’assistant d’installation.

  • Étape 1. Connectez-vous à votre compte Crocoblock et ouvrez le tableau de bord.
  • Téléchargez le ZIP contenant l’assistant d’installation.
  • Téléchargez l’assistant d’installation sur WordPress et lancez-le.
  • Trouvez Astra dans la page de l’assistant d’installation de Crocoblock et sélectionnez-le.
  • Choisissez le thème enfant pour sécuriser vos modifications CSS. Une fois l’assistant d’installation terminé, le thème Astra est installé, et c’est tout.
crocoblock recommended themes

La deuxième façon d’installer le thème Astra est de changer le thème dans le menu Apparence.

  • Allez dans Apparence > Thèmes dans le panneau d’administration.
  • Trouvez le thème Astra dans la liste et cliquez sur le bouton Installer.
install astra theme from wordpress dashboard

Cliquez sur le lien Activer et attendez que l’installation soit terminée.

activate astra theme

Il se peut que vous ne trouviez pas le thème Astra dans les options. Dans ce cas, allez sur https://wpastra.com/ et téléchargez-le.

installing astra from website

Vous pourrez ensuite le télécharger sur WordPress.

  1. Pour ce faire, sélectionnez Apparence > Thèmes.
  2. Trouvez “Add new“. Vous serez redirigé vers une autre page où vous trouverez le bouton “Upload theme”.
  3. Téléchargez le ZIP contenant Astra Theme, cliquez sur “Installer maintenant“, puis cliquez sur le bouton “Activer“.

Vous pouvez également trouver Astra Theme dans la barre de recherche des thèmes.

Lorsque vous aurez activé le thème Astra, vous le verrez dans vos thèmes.

astra installed

Félicitations ! Le thème Astra est installé sur WordPress !

Je vais maintenant passer à une autre étape – choisir le Starter Template.

Choisir le modèle

Le premier message que vous verrez après avoir installé Astra sera celui-ci :

astra template

Cliquez sur le bouton Démarrer pour activer les modèles de démarrage.

astra templates activating

Une fois le processus terminé, vous devrez choisir le constructeur de pages :

astra select page builder

Après avoir choisi celui qui vous convient, vous serez redirigé vers la page Modèles de démarrage, où vous verrez la liste des modèles gratuits et premium.

choosing template

Cliquez sur le modèle que vous souhaitez intégrer. J’utiliserai “Montagne”.

choosing template mountain

Dans la fenêtre qui s’ouvre, vous trouverez trois boutons : Prévisualiser le site, Importer le site complet, Importer le modèlemaison“.

choosing template whole

Décidez si vous avez besoin de l’ensemble des fonctionnalités du modèle ou de certaines parties. J’opterai pour le site complet.

Cliquez sur le bouton correspondant pour commencer l’importation.

L’étape suivante consiste à choisir l’objectif du modèle :

choosing template purpose

Il vous sera demandé d’entrer votre nom, mais vous pouvez sauter cette étape.

template imported

Une fois le modèle importé, vous pouvez commencer à construire votre site web dynamique.

Principales fonctionnalités du thème Astra

La principale caractéristique d’Astra est sa facilité d’utilisation et sa flexibilité. Il convient aux sites web de tous types, des blogs aux boutiques WooCommerce.

Le thème pèse moins de 50 Ko, ce qui permet un chargement rapide des pages (surtout si la mise en cache, la compression gzip et l’optimisation des images sont configurées).

Les autres caractéristiques essentielles sont les suivantes :

  • Vous pouvez tout personnaliser en utilisant des constructeurs de pages par glisser-déposer comme Elementor ou en utilisant l’éditeur WordPress natif.
  • Tous les modèles sont réactifs et s’affichent parfaitement sur les ordinateurs et les smartphones.
  • Vous pouvez apporter des modifications rapidement sur l’ensemble du site Web en utilisant le personnalisateur. Vous pouvez y accéder dans Apparence > Personnaliser dans le tableau de bord de WordPress. Tout ce que vous modifiez sur le site web apparaîtra dans l’aperçu en temps réel, de sorte que vous saurez toujours à quoi ressemblera votre site avant de le publier.
  • De nombreux outils de personnalisation sont disponibles. Vous pouvez changer les couleurs primaires du thème, modifier la mise en page, utiliser les polices Google, etc. Il existe même des options pour configurer le pied de page, la barre latérale, le titre, etc.

Vous pouvez configurer globalement des éléments tels que la typographie afin que votre site web ait une apparence uniforme. Cela signifie que vous n’aurez pas besoin de changer les polices sur chaque page.

Vous pouvez également désactiver une barre latérale ou un pied de page sur plusieurs pages sans avoir à accéder à chacune d’entre elles.

Il est également facile de modifier l’affichage des barres latérales, d’inclure des fils d’Ariane ou même de modifier les messages, le titre et les métadonnées du blog, les commentaires, la catégorie et l’auteur.

Pour cela, vous disposez du plugin Astra Bulk Edit. Il vous permet de gagner du temps lors de l’ajustement des paramètres de métadonnées, tels que la barre latérale et la position du titre de votre site Web. Il vous permet d’appliquer les modifications simultanément à des centaines de pages si nécessaire.

Astra vous permet de configurer les en-têtes de page de manière dynamique. Ils changent en fonction du contenu que vous souhaitez y afficher. Par exemple, il peut s’agir de numéros de téléphone, de liens vers des médias sociaux ou de CTA.

Vous pouvez également définir le mode d’affichage des en-têtes sur le site web. Par exemple, définissez un en-tête spécifique pour une page d’accueil qui ne s’affiche que lorsqu’un visiteur ayant un rôle spécifique est connecté.

Qu’est-ce que le plugin JetEngine ?

JetEngine est un plugin de contenu dynamique qui vous aide à construire des sites web complexes, à concevoir des structures de site web avancées, à implémenter des fonctionnalités dynamiques et à concevoir le tout de manière rentable.

Pour installer JetEngine, vous aurez besoin de l’assistant d’installation de Crocoblock.

Après avoir saisi le code de licence, vous devez choisir l’installation de JetPlugins pour obtenir le plugin JetEngine séparément.

jetengine installation

Trouvez JetEngine et cliquez sur la case à cocher appropriée pour le choisir dans la liste.

Cliquez ensuite sur le bouton Continuer pour procéder à l’installation.

Vous verrez le plugin dans le tableau de bord Croco et sur le côté gauche du panneau d’administration.

jetengine installed

Caractéristiques principales du site Web dynamique de JetEngine

Le plugin JetEngine contient tout ce dont vous avez besoin pour construire un site web dynamique. Il fournit 15 fonctions dynamiques pour développer une structure de site web complexe, mais il n’est pas nécessaire de les utiliser toutes en même temps.

En fonction de l’objectif du site, il est raisonnable de commencer par les bases et de voir si vous avez besoin d’ajouter quelque chose de plus.

Construisons un blog simple avec des critiques de livres.

Types d’articles personnalisés

Je commencerai par créer des Custom Post Types (CPT), le principal moyen de structurer le contenu de votre site web et la fonctionnalité de base pour fournir un contenu dynamique.

Dans votre panneau d’administration, choisissez Post Types > Add New.

creating cpt

Donnez un nom à votre CPT. L’intitulé du type de message sera créé automatiquement.

Vous pouvez également remplir les étiquettes :

cpt labels

Une fois que vous avez terminé, cliquez sur le bouton “Ajouter un type de message“. C’est fait !

book review cpt

Ajoutons maintenant quelques critiques de livres. Trouvez l’option “Ajouter une nouvelle critique de livre” et cliquez dessus pour créer un billet de critique.

book review

Insérez le texte et les images nécessaires, intégrez la vidéo si vous avez une critique vidéo, et appuyez sur le bouton “Publier“.

Ajoutez autant d’articles que nécessaire avant de créer des méta-boîtes personnalisées.

book reviews all

Méta-boîtes personnalisées

J’aurai besoin de champs personnalisés pour ajouter des détails supplémentaires sur les articles. Dans mon cas, il s’agira du titre du livre, de l’auteur, du nombre de pages, de l’image et du genre.

Allez dans JetEngine > Meta Box > Add New. Insérez les informations nécessaires dans General Settings.

meta box

Ensuite, ajoutez les méta-champs requis pour votre CPT. J’en ai ajouté 5, mais vous pouvez en ajouter autant que vous le souhaitez.

meta fields

Ensuite, j’attache la Meta Box nouvellement créée au CPT.

Dans les paramètres généraux, vous devez choisir le CPT que vous avez créé pour vous assurer que la boîte méta est appliquée. J’ai une revue de livres, j’ai donc activé cette méta-boîte dans le CPT de la revue de livres.

N’oubliez pas d’enregistrer les modifications !

Ensuite, je suis allée sur mon premier billet de critique de livre et j’ai rempli les détails de chaque livre dans les champs méta que j’ai créés précédemment.

Vous devez répéter cette procédure pour chaque article.

meta box

Les champs personnalisés permettent de s’assurer que si vous modifiez certains détails, ils seront appliqués automatiquement chaque fois que votre article de critique de livre sera affiché sur le site Web.

Vous n’aurez donc pas besoin de parcourir tout le site pour trouver la critique en question et y apporter des modifications.

Grille d’affichage dynamique

Organisons maintenant toutes les critiques dans une grille claire et affichons-les sur la page d’accueil.

Allez dans JetEngine > Listings > Add New. Choisissez votre CPT pour l’option “From Post Type”, donnez à votre liste un nom pour l’identifier facilement.

Choisissez Blocks (Gutenberg) et appuyez sur Create Listing Item. Vous serez redirigé vers la page où vous pourrez commencer à construire la mise en page de votre annonce.

listing

Les principales caractéristiques dynamiques que j’ai utilisées sont Image dynamique, Champ dynamique, Lien dynamique et Méta dynamique.

Commençons par ajouter une image dynamique à cette mise en page. Comme source, j’ai choisi l’étiquette que j’ai précédemment ajoutée à mon champ méta. La taille de l’image que j’ai choisie est moyenne.

dynamic image

N’oubliez pas d’indiquer les métadonnées comme source pour obtenir tous les détails nécessaires.

listing settings

Insérez les champs obligatoires, organisez-les pour trouver les plus attrayants et cliquez sur le bouton Mettre à jour.

Affichage de la grille d’évaluation sur la page d’accueil

L’étape suivante consiste à afficher la grille d’inscription avec tous les avis. Pour cela, vous devez choisir la page sur laquelle vous souhaitez afficher la grille.

Je vais choisir la page d’accueil et l’éditer avec Elementor.

Trouvez le widget Listing Grid et faites-le glisser à l’endroit voulu.

listing displaying

Ensuite, vous devez choisir le modèle de liste que vous avez créé auparavant. Je choisis mon modèle d’annonce de fiction :

listing displaying

Comme vous pouvez le voir, les critiques de livres sont maintenant organisées dans la grille.

Appuyez sur le bouton Mettre à jour et regardons ce que nous avons.

listing grid final

Cela semble un peu simpliste, mais vous pouvez toujours utiliser les capacités de stylisme d’Elementor ou le JetStyleManager gratuit pour Gutenberg pour le rendre attrayant et conforme à vos goûts.

Autres fonctionnalités dynamiques de JetEngine

J’ai créé un site web dynamique simple en utilisant les fonctionnalités essentielles, mais vous devez savoir que JetEngine est plus que cela.

Le plugin fournit des outils permettant d’aller bien au-delà de certains sites élémentaires. Que fournit JetEngine, et comment pouvons-nous améliorer ce blog de critique de livres avec d’autres fonctionnalités dynamiques ?

  • Ajouter des magasins de données. En utilisant le module Data Store de JetEngine, nous permettons aux utilisateurs de créer des collections directement dans le compte du site web.
  • Configurer les relations entre les articles. Je peux créer des articles sur les écrivains, les rendre parents et relier les critiques de leurs romans en tant qu’articles enfants.
  • Ajouter des taxonomies et des termes. Il s’agit d’un instrument supplémentaire pour structurer le contenu du site web. Par exemple, je peux ajouter une étiquette à chaque critique – Fiction, Drame, Documentaire – pour que les visiteurs puissent lire les critiques d’un genre particulier.

D’autres fonctionnalités dynamiques de JetEngine, telles que le constructeur de graphiques et de tableaux, Extended Query Loop, Glossaires, Repeater Custom Field, Options Page, et d’autres, donnent plus de possibilités pour construire n’importe quel type de site web – boutique en ligne, site web d’hôtel, ou annuaire WordPress avancé.

Meilleurs exemples de sites web dynamiques construits avec Astra et JetEngine

Jetons un coup d’œil à quelques exemples frappants de sites web dynamiques construits avec le thème Astra et JetEngine (et d’autres plugins Crocoblock).

Le premier exemple est themummasecret, créé par Thor Solutions. Les développeurs ont utilisé les champs personnalisés de JetEngine pour ajouter des détails supplémentaires aux fiches produits et appliquer les en-têtes de page dynamiques d’Astra.

Thor Solutions a également utilisé JetWooBuilder et JetTabs.

themummasecret

Le deuxième site est EAF, créé par Tommy Callaghan et Manna Design. Les développeurs ont utilisé le thème Astra, JetEngine pour les CPT et les boîtes méta pour ajouter des attributs aux articles de blog (date, auteur).

Ils ont également utilisé JetElements, JetTabs et JetThemeCore.

eaf

Un autre exemple est Flames and Roses de Thomas Anderson.

flamesandroses

Outre le thème Astra et JetEngine, le développeur a utilisé JetElements, JetWooBuilder et JetTricks.

Ressources complémentaires :

Conclusion

Voilà pour notre étude de cas sur la création de pages web dynamiques avec Astra et JetEngine. Comme vous pouvez le constater, la lutte entre sites statiques et sites dynamiques est inégale car ils ont des objectifs différents.

En un mot, les sites dynamiques et statiques ont tous deux leurs propres caractéristiques, et sont performants dans différentes niches.

Astra est conçu pour offrir une vitesse de chargement des pages impressionnante, tout en présentant un aspect remarquable. Vous pouvez créer un énorme site web avec des images, des messages, des mises en page personnalisables, des fonctions de glisser-déposer et bien d’autres choses encore sans toucher à une ligne de code.

En ajoutant JetEngine, vous rendez votre site web plus structuré et plus facile à gérer, vous étendez ses fonctionnalités et vous affichez le contenu de manière dynamique.

Cette combinaison offre donc des possibilités pratiquement illimitées pour le développement de blogs, de boutiques en ligne, de sites commerciaux, de sites immobiliers et bien d’autres encore.

Si vous avez déjà créé un site web dynamique en utilisant Astra et JetEngine, n’hésitez pas à le partager avec nous !

Partager cet Article :
Newsletter
Recevez des astuces et des ressources gratuites directement dans votre boîte de réception.
Derniers Articles
☰ Navigation Rapide
0
J'adorerais vos pensées, veuillez commenter.x