La création d’un site WordPress n’a rien d’intimidant, même si vous êtes débutant. Avec les bons outils et les bons conseils, vous pouvez créer rapidement un site web élégant et entièrement fonctionnel.
Ce guide vous montre comment créer un site WordPress à l’aide de Bricks Builder, un puissant constructeur de thèmes qui offre des possibilités de personnalisation étendues sans avoir à écrire une seule ligne de code.
Présentation de Bricks Builder
Bricks Builder est un constructeur de site visuel qui permet aux utilisateurs de créer des sites web personnalisés et réactifs directement dans l’environnement WordPress. Il est conçu pour améliorer l’expérience de l’utilisateur car il s’intègre parfaitement à WordPress, permettant aux débutants et aux développeurs expérimentés de construire des sites web visuellement grâce à une interface de type glisser-déposer.
Contrairement à Elementor et à d’autres constructeurs de sites, Bricks est un thème et non une extension. Il intègre presque toutes les fonctionnalités, alors que d’autres constructeurs de sites utilisent des extensions supplémentaires.
Il offre une expérience d’édition frontend en direct, ce qui signifie que vous pouvez voir vos changements en temps réel lorsque vous ajustez les éléments de conception et les mises en page.
Il fournit une boite à outils complète qui comprend des modèles préconçus, une vaste gamme d’éléments de conception et des options de personnalisation avancées pour un développement web plus détaillé.
En outre, Bricks Builder prend en charge les données dynamiques, ce qui permet aux utilisateurs de créer facilement des sites web axés sur les données et d’intégrer du contenu de manière dynamique dans leurs modèles.
Avantages de l’utilisation de Bricks pour WordPress
Bricks Builder se distingue par ses performances et sa flexibilité. Il s’agit d’une alternative plus récente mais robuste aux autres constructeurs, offrant :
- Vitesse – Bricks est incroyablement rapide et léger.
- Facilité d’utilisation – L’interface est intuitive, ce qui la rend facile pour les débutants et les professionnels.
- Personnalisation – Bricks offre de nombreuses possibilités de personnalisation par le biais de CSS et de JavaScript et est compatible avec une large gamme d’extensions WordPress.
Démarrer avec Bricks
Bricks est un thème premium qui nécessite un abonnement payant. Pour l’utiliser, vous devez acheter l’un de leurs plans. Une fois le paiement effectué, vous pouvez télécharger un fichier zip sur votre tableau de bord qui peut être téléversé sur votre site WordPress, ainsi qu’une clé de licence qui active Bricks dans votre installation WordPress.
Après avoir installé le thème Bricks, un nouvel élément de menu Bricks apparait dans votre tableau de bord WordPress.
Pour activer votre licence, allez dans le tableau de bord, cliquez sur Activer la licence, saisissez la clé de licence de votre compte Bricks et cliquez sur Activer. Cela vous permettra d’utiliser toutes les fonctionnalités du thème Bricks.
Si vous souhaitez essayer Bricks avant de l’acheter, vous pouvez créer un compte d’essai sur try.bricksbuilder.io. Cette plateforme vous donne accès à un site WordPress préconfiguré avec Bricks installé, vous permettant d’explorer ses fonctionnalités et ses capacités sans cout initial.
Comment lancer le constructeur de pages Bricks ?
Pour concevoir une nouvelle page avec le constructeur de pages Bricks, naviguez vers Pages > Ajouter ou cliquez sur une page existante. Vous pouvez lancer l’éditeur Bricks en cliquant sur Modifier avec Bricks.
Vous pouvez maintenant faire glisser les éléments du panneau Éléments pour concevoir votre page.
Comprendre l’interface Bricks
L’interface de Bricks s’intègre parfaitement à l’environnement WordPress.
Voici une décomposition de l’interface principale :
- Espace de travail du constructeur – La zone principale de Bricks est l’espace de travail du constructeur, qui est une représentation visuelle de votre site web. Vous pouvez y interagir directement avec vos pages, en faisant glisser des éléments, en les redimensionnant et en les réorganisant.
- Barre d’outils – En haut de l’espace de travail, la barre d’outils permet d’accéder rapidement à des fonctionnalités essentielles telles que l’enregistrement de votre travail, la prévisualisation de votre site et l’accès au menu des réglages et aux commandes réactives.
- Panneau des éléments – Sur le côté gauche de l’interface, le panneau des éléments est votre boite à outils. Il contient tous les éléments que vous pouvez utiliser sur votre site, tels que des zones de texte, des images, des boutons, etc. Vous pouvez faire glisser ces éléments depuis le panneau directement sur votre page.
- Vue de la structure – Souvent située à côté du panneau des éléments ou sous forme de bascule à l’intérieur de celui-ci, la vue de la structure fournit un aperçu hiérarchique de votre page. Cette vue est particulièrement utile pour comprendre la disposition et la profondeur des éléments de votre page, car elle vous permet de sélectionner et de modifier facilement les éléments imbriqués.
Utilisation de polices personnalisées dans Bricks
Bricks offre la possibilité de téléverser des polices de caractères personnalisées sur votre site WordPress. Pour cela, naviguez vers Bricks > Polices personnalisées.
Cette section vous permet de téléverser vos fichiers de police dans différents formats, y compris WOFF2, WOFF ou TTF. Vous pouvez également téléverser différentes variantes de polices, telles que thin, semi-bold, normal et bold.
Pour ajouter une police personnalisée, cliquez sur Ajouter. Saisissez ensuite un nom pour la police dans le champ Ajouter un titre. Ensuite, sélectionnez la variante de police que vous souhaitez téléverser, choisissez le style de police et cliquez sur Modifier.
Une liste déroulante apparait, proposant des champs pour téléverser le fichier de police. Sélectionnez votre fichier de police et téléversez-le. Vous pouvez répéter ce processus en cliquant sur Ajouter une variante de police pour autant de variantes que possible. Enfin, cliquez sur Publier.
Pour appliquer votre nouvelle police personnalisée au texte de votre site WordPress, suivez ces étapes :
- Allez sur la page où vous souhaitez utiliser la nouvelle police et cliquez sur Modifier avec Bricks.
- Cliquez sur le texte que vous souhaitez modifier.
- Des informations sur le texte sélectionné s’affichent dans le panneau de gauche. Cliquez sur STYLE.
- Développez le menu déroulant TYPOGRAPHIE pour afficher d’autres options.
- Dans le champ Famille de polices, parcourez les polices disponibles, y compris les polices Google et vos téléversements personnalisés.
- Sélectionnez votre police personnalisée dans la liste pour mettre à jour votre texte immédiatement.
Désormais, votre texte s’affichera avec votre police personnalisée, ce qui donnera à votre page une touche personnelle.
Utiliser des modèles dans Bricks
Les modèles sont une fonctionnalité fondamentale de Bricks et se déclinent en différents types, notamment les en-têtes, les pieds de page et les mises en page des articles de blog. Ces modèles peuvent aller d’une simple section, comme l’en-tête d’un site web ou une section Hero, à un contenu de page entière, comme les mises en page d’articles de blog, les pages d’archives, les résultats de recherche et les pages d’erreur.
Création d’un modèle
Pour créer un modèle :
- Accédez à Briques > Modèles dans votre tableau de bord.
- Choisissez d’ajouter un nouveau modèle ou d’importer un modèle existant.
- Cliquez sur Ajouter, sélectionnez le type de modèle, puis choisissez Modifier avec Bricks.
Création d’un nouveau modèle pour votre Bricks Builder.
Application de modèles
Pour appliquer un modèle à une page :
- Naviguez jusqu’à la page où vous souhaitez utiliser le modèle.
- Cliquez sur l’icône Modèles (dossier) dans la barre d’outils du constructeur pour ouvrir la section Modèles.
Appliquer des modèles aux pages Bricks. - Ici, vous pouvez accéder aux modèles que vous avez créés et aux modèles de la communauté.
- Sélectionnez le modèle souhaité et prévisualisez-le.
Boutique de modèles Bricks – contient des modèles communautaires, locaux et distants. - Vous pouvez enfin cliquer sur Insérer pour l’appliquer.
Choisissez et utilisez un modèle communautaire sélectionné.
Modèles distants
Les modèles de Bricks offrent des possibilités uniques que l’on ne trouve pas dans d’autres constructeurs de sites. Les modèles distants sont des modèles créés et utilisés dans d’autres sites que vous souhaitez utiliser dans votre site.
Pour permettre à d’autres sites d’utiliser vos modèles Bricks, allez dans Bricks > Réglages > Modèles dans votre tableau de bord WordPress et cochez la case Accès à mes modèles.
Utilisez Whitelist URLs et Password Protection pour restreindre l’accès aux modèles aux personnes qui connaissent le bon mot de passe.
Pour utiliser des modèles d’autres sites, allez dans Bricks > Réglages > Modèles, faites défiler jusqu’à la section Modèles distants et collez l’URL du site Bricks dont vous souhaitez récupérer les modèles dans le champ URL du modèle distant.
Si vous définissez un mot de passe, vous devez vous assurer que vous l’écrivez dans le champ Mot de passe du modèle distant. Cliquez ensuite sur Enregistrer les réglages.
Pour utiliser ces modèles, accédez au constructeur de pages et cliquez sur Modèles comme auparavant ; une nouvelle section Modèles distants apparait avec tous les modèles du site distant.
Utilisation de données dynamiques dans Bricks
Bricks vous permet d’incorporer des données dynamiques dans vos modèles et pages, ce qui en fait un outil polyvalent pour la création de sites web dynamiques.
Vous pouvez inclure divers éléments dynamiques tels que des images mises en avant, des titres d’articles, des dates de publication, des noms d’auteurs, des catégories, des étiquettes, des titres de sites et tous vos champs personnalisés.
Les données dynamiques sont particulièrement utiles lorsque vous créez des modèles spécifiques dans Bricks, comme le modèle de votre article de blog ou les modèles pour les types de publications personnalisés, tels que les annonces de propriétés individuelles.
Pour ajouter des données dynamiques, commencez à saisir { sur le canevas ou cliquez sur l’icône du « boulon » à côté de la plupart des champs dans le panneau des réglages.
Voici comment créer un modèle d’article unique à l’aide de données dynamiques avec Bricks :
- Accédez à Bricks > Modèle pour créer un nouveau modèle. Attribuez un titre à votre modèle, définissez son type sur Unique, puis publiez-le ou enregistrez comme brouillon.
- Cliquez sur Modifier avec Bricks pour commencer à configurer votre modèle afin d’utiliser des données dynamiques.
- Modifiez le style de la page comme vous le souhaitez. En règle générale, vous souhaitez que des éléments tels que le titre de l’article, l’image mise en avant, la date de publication, le nom de l’auteur et le contenu de l’article s’affichent de manière dynamique.
- Sur un canevas vierge, ajoutez un titre et un contenu en insérant
{post_title}dans un élément Heading et{post_content}dans un élément de texte Basic.
Utilisation de données dynamiques dans Bricks.
Pour définir ce modèle par défaut pour tous les articles, procédez comme suit
- Cliquez sur l’icône des réglages dans la barre d’outils, allez à Réglages du modèle > Conditions, puis cliquez sur le bouton + AJOUTER UNE CONDITION.
- Sélectionnez Type de publication et indiquez Articles.
Définissez le modèle par défaut pour tous les articles. - Assurez-vous de sauvegarder et de mettre à jour la page du modèle sur WordPress. Ensuite, naviguez vers la page Articles pour voir chaque article formaté avec le nouveau modèle sans style supplémentaire.
Le modèle est utilisé pour tous les articles.
Pour simplifier le style de ce modèle, ajoutez un article par défaut qui servira de référence pour les éléments dynamiques :
- Cliquez sur l’icône des paramètres dans la barre d’outils et allez dans Réglages du modèle > POPULER LE CONTENU.
- Choisissez Article/page unique comme type de contenu et sélectionnez un article spécifique comme contenu du modèle. Si aucun n’apparait, assurez-vous d’en rechercher un, puis cliquez sur APPLIQUER LA VUE D’ENSEMBLE.
Ajoutez un message par défaut qui servira de référence pour les éléments dynamiques. - Vous pouvez maintenant facilement afficher des éléments tels que le titre et le contenu de l’article à l’aide du modèle d’article sélectionné.
L’article par défaut sélectionné s’affiche lorsque vous personnalisez une page avec des données dynamiques.
En outre, Bricks prend en charge l’utilisation du contenu des champs personnalisés avancés (ACF), améliorant ainsi votre capacité à créer des pages détaillées et personnalisées.
Gestion des envois de formulaires avec Bricks
La fonction d’envoi de formulaire a été introduite dans Bricks 1.9.2 pour vous permettre de capturer les envois de formulaire. Cela vous permet de créer une table personnalisée nommée bricks_form_submissions dans votre base de données (avec le préfixe de votre base de données WP).
Vous pouvez activer le nouveau réglage Enregistrer les envois de formulaire dans la base de données sous Bricks > Réglages > Général > Divers.
Cliquez ensuite sur Enregistrer les réglages. Un onglet Envois de formulaires apparaitra (Briques > Envois de formulaires), contenant vos différentes tables d’envois de formulaires.
Collecte des envois de formulaires
La collecte des envois de formulaires dans Bricks ne nécessite pas d’extension supplémentaire. Il vous suffit d’utiliser l’élément Formulaire pour créer un formulaire et de définir les champs correctement.
Dans le panneau de configuration, cliquez sur Actions, puis sélectionnez l’action Enregistrer l’envoi.
Ensuite, cliquez sur Enregistrer les réglages d’envoi pour donner au formulaire un nom descriptif. Ce nom sera utilisé pour accéder aux données du formulaire.
Désormais, lorsque vous enregistrez et ouvrez la page, vous pouvez remplir le formulaire et revenir ensuite à la page de soumission de formulaire. Vous pouvez remplir le formulaire, puis revenir à Bricks > Envoi de formulaire pour consulter les données du formulaire.
Vous pouvez également télécharger un fichier CSV des différents formulaires soumis. Dans la section Bricks > Réglages > Général > Divers où vous avez configuré cette fonctionnalité, vous pouvez réinitialiser ou supprimer la table de la base de données.
Utiliser WooCommerce avec Bricks
WooCommerce est une extension gratuite qui améliore votre site WordPress avec des fonctionnalités de commerce électronique. Elle est mondialement reconnue comme une solution open source de premier plan pour la mise en place et la gestion d’une boutique en ligne.
Bricks s’intègre parfaitement avec WooCommerce, fournissant un constructeur robuste dans le thème pour créer l’ensemble de votre boutique, de la page principale de la boutique aux pages de produits individuels, aux archives de produits, aux paniers, aux commandes et aux pages de compte.
Bricks propose des éléments et des modèles spécialisés pour WooCommerce, vous permettant de concevoir la mise en page de votre boutique.
Pour commencer à utiliser le WooCommerce Builder dans Bricks, installez et activez l’extension WooCommerce. Une fois activée, vous pouvez utiliser Bricks pour concevoir et personnaliser visuellement divers modèles WooCommerce, de la même manière que vous gèreriez les mises en page d’un article.
Pour créer une page de boutique simple :
- Naviguez vers Pages et sélectionnez la page Boutique.
- Cliquez sur Modifier avec Bricks. Le panneau Éléments contient divers éléments de produit. Ceux-ci vous permettent d’afficher des produits, des titres, des descriptions, des prix et bien d’autres choses encore, ce qui facilite la création de modèles dynamiques.
Utiliser WooCommerce avec Bricks Builder. En utilisant ces éléments, vous pouvez arranger et styliser votre page comme vous le souhaitez.
Comme pour la création d’un modèle d’article unique, vous pouvez créer un modèle de produit unique et définir ses conditions pour qu’il fonctionne avec tous les produits.
Boucles de requête dans Bricks
Le constructeur de boucles de requête vous permet d’interroger votre base de données en fonction de vos paramètres de requête et de rendre les résultats de la requête que vous souhaitez afficher à l’intérieur de la boucle. Il peut être utilisé dans des éléments de mise en page tels que le conteneur, l’accordéon et le diaporama.
Vous pouvez interroger des types de publications, des termes de taxonomie et des utilisateurs. Par exemple, vous pouvez interroger une liste d’auteurs de blogs, de membres de la communauté et de membres de l’équipe.
Pour utiliser la boucle de requête, ajoutez un élément Container au canevas. Activez le réglage Utiliser la boucle de requête pour transformer votre conteneur en élément de boucle.
Une fois le réglages Utiliser la boucle de requête activé, vous verrez apparaitre un contrôle de requête (icône d’infini). Cliquez sur l’icône pour ouvrir le contrôle de requête et définir les paramètres de requête pour récupérer le contenu de votre base de données.
Le conteneur sert maintenant d’élément répétiteur. Tous les éléments à l’intérieur de ce conteneur sont répétés autant de fois qu’il y a de résultats de requête. Ce guide académique explique comment cela fonctionne.
Prix de Bricks
Bricks n’a pas de plan gratuit. Ils créent seulement un compte pour vous permettre d’essayer leur thème, mais vous ne pouvez pas l’utiliser pour votre site à moins de payer.
Bricks propose des plans de base et un plan à vie. Le plan à vie offre des privilèges illimités, mais c’est vous qui décidez ce que vous voulez.
Ils offrent la commodité d’avoir presque tout ce dont vous avez besoin au sein de la plateforme, ce qui contribue à un flux de travail transparent et efficace et en fait un investissement rentable pour ceux qui recherchent une solution de conception de sites web robuste et polyvalente.
Évaluation de Bricks : Cela vaut-il la peine d’essayer ?
Un inconvénient potentiel est que Bricks ne propose pas de version gratuite, contrairement à Elementor. Cependant, Bricks Builder a attiré l’attention de l’industrie grâce à son mélange de simplicité et de fonctionnalités puissantes.
Une étude réalisée en 2024 par The Admin Bar auprès de 1144 professionnels de WordPress indique que « Bricks est le seul constructeur de pages à avoir augmenté ses chiffres par rapport à l’année dernière, avec 32 % du total », comme le montre le tableau suivant :
Cela montre à quel point les professionnels de WordPress l’adoptent, même s’il s’agit d’un produit relativement nouveau sur le marché.
Bricks fonctionne comme un thème complet. Cela signifie que vous ne pouvez pas mélanger les fonctionnalités d’autres thèmes avec son constructeur de pages. De plus, en termes de vitesse, Bricks Builder est réputé pour être plus rapide qu’Elementor Pro, car il s’agit d’un nouveau constructeur de pages conçu pour des sites web très performants.
L’utilisation d’un constructeur de pages conçu uniquement pour la vitesse ne garantit pas les meilleures performances. Quel que soit le type de site web que vous construisez, votre hébergeur joue un rôle crucial dans ses performances.
Chez Kinsta, nous sommes connus pour fournir un hébergement WordPress haut de gamme avec des dizaines de fonctionnalités haut de gamme. Nous en sommes fiers !
Nous opérons sur une architecture entièrement conteneurisée alimentée exclusivement par Google Cloud Platform sur le réseau Premium Tier de Google. Cela nous permet de vous fournir une large sélection des serveurs de données les plus rapides, des performances incroyables, une mise en cache au niveau du serveur, des ressources dédiées et une sécurité renforcée.
Consultez les avis de nos clients ou contactez-nous pour en savoir plus sur notre solution d’hébergement infogéré et sur son excellence.
Résumé
Cet article a exploré le Bricks Builder, son fonctionnement, certaines de ses fonctionnalités, et comment les utiliser. Nous avons examiné son approche thématique complète, ses capacités de personnalisation et ses avantages en termes de performances.
Bien que Bricks ne dispose pas d’une version gratuite comme Elementor, son design intégré et ses mises à jour fréquentes peuvent vous permettre d’optimiser les performances de votre site web.
Avez-vous des questions sur l’utilisation du constructeur de thèmes WordPress Bricks ? N’hésitez pas à nous en faire part dans les commentaires ci-dessous !
Joel est un développeur d'interfaces publiques qui travaille chez Kinsta en tant que rédacteur technique. Il est un enseignant passionné par l'open source et a écrit plus de 200 articles techniques, principalement autour de JavaScript et de ses frameworks.
Laisser un commentaire