Pr\u00e9sentation de Bricks Builder<\/h2>\n
Bricks Builder<\/a> est un constructeur de site visuel qui permet aux utilisateurs de cr\u00e9er des sites web<\/a> personnalis\u00e9s et r\u00e9actifs<\/a> directement dans l’environnement WordPress. Il est con\u00e7u pour am\u00e9liorer l’exp\u00e9rience de l’utilisateur car il s’int\u00e8gre parfaitement \u00e0 WordPress, permettant aux d\u00e9butants et aux d\u00e9veloppeurs<\/a> exp\u00e9riment\u00e9s de construire des sites web visuellement gr\u00e2ce \u00e0 une interface de type glisser-d\u00e9poser.<\/p>\n Contrairement \u00e0 Elementor<\/a> et \u00e0 d’autres constructeurs de sites, Bricks est un th\u00e8me et non une extension. Il int\u00e8gre presque toutes les fonctionnalit\u00e9s, alors que d’autres constructeurs de sites utilisent des extensions suppl\u00e9mentaires.<\/p>\n Il offre une exp\u00e9rience d’\u00e9dition frontend en direct, ce qui signifie que vous pouvez voir vos changements en temps r\u00e9el lorsque vous ajustez les \u00e9l\u00e9ments de conception et les mises en page.<\/p>\n Il fournit une boite \u00e0 outils compl\u00e8te qui comprend des mod\u00e8les pr\u00e9con\u00e7us, une vaste gamme d’\u00e9l\u00e9ments de conception et des options de personnalisation avanc\u00e9es pour un d\u00e9veloppement web plus d\u00e9taill\u00e9.<\/p>\n En outre, Bricks Builder prend en charge les donn\u00e9es dynamiques, ce qui permet aux utilisateurs de cr\u00e9er facilement des sites web ax\u00e9s sur les donn\u00e9es et d’int\u00e9grer du contenu de mani\u00e8re dynamique dans leurs mod\u00e8les.<\/p>\n Bricks Builder se distingue par ses performances et sa flexibilit\u00e9. Il s’agit d’une alternative plus r\u00e9cente mais robuste aux autres constructeurs, offrant :<\/p>\n Bricks est un th\u00e8me premium qui n\u00e9cessite un abonnement payant. Pour l’utiliser, vous devez acheter l’un de leurs plans. Une fois le paiement effectu\u00e9, vous pouvez t\u00e9l\u00e9charger un fichier zip sur votre tableau de bord qui peut \u00eatre t\u00e9l\u00e9vers\u00e9 sur votre site WordPress, ainsi qu’une cl\u00e9 de licence qui active Bricks dans votre installation WordPress<\/a>.<\/p>\n Apr\u00e8s avoir install\u00e9 le th\u00e8me Bricks, un nouvel \u00e9l\u00e9ment de menu Bricks<\/strong> apparait dans votre tableau de bord WordPress<\/a>.<\/p>\n Pour activer votre licence, allez dans le tableau de bord, cliquez sur Activer la licence<\/strong>, saisissez la cl\u00e9 de licence de votre compte Bricks et cliquez sur Activer<\/strong>. Cela vous permettra d’utiliser toutes les fonctionnalit\u00e9s du th\u00e8me Bricks.<\/p>\n Si vous souhaitez essayer Bricks avant de l’acheter, vous pouvez cr\u00e9er un compte d’essai sur try.bricksbuilder.io<\/a>. Cette plateforme vous donne acc\u00e8s \u00e0 un site WordPress pr\u00e9configur\u00e9 avec Bricks install\u00e9, vous permettant d’explorer ses fonctionnalit\u00e9s et ses capacit\u00e9s sans cout initial.<\/p>\n Pour concevoir une nouvelle page avec le constructeur de pages Bricks, naviguez vers Pages<\/strong> > Ajouter<\/strong> ou cliquez sur une page existante. Vous pouvez lancer l’\u00e9diteur Bricks en cliquant sur Modifier avec Bricks<\/strong>.<\/p>\n Vous pouvez maintenant faire glisser les \u00e9l\u00e9ments du panneau \u00c9l\u00e9ments<\/strong> pour concevoir votre page.<\/p>\n L’interface de Bricks s’int\u00e8gre parfaitement \u00e0 l’environnement WordPress.<\/p>\n Voici une d\u00e9composition de l’interface principale :<\/p>\n Bricks offre la possibilit\u00e9 de t\u00e9l\u00e9verser des polices de caract\u00e8res<\/a> personnalis\u00e9es sur votre site WordPress. Pour cela, naviguez vers Bricks<\/strong> > Polices personnalis\u00e9es<\/strong>.<\/p>\n Cette section vous permet de t\u00e9l\u00e9verser vos fichiers de police dans diff\u00e9rents formats, y compris WOFF2, WOFF ou TTF. Vous pouvez \u00e9galement t\u00e9l\u00e9verser diff\u00e9rentes variantes de polices, telles que thin, semi-bold, normal et bold.<\/p>\n Pour ajouter une police personnalis\u00e9e, cliquez sur Ajouter<\/strong>. Saisissez ensuite un nom pour la police dans le champ Ajouter un titre<\/strong>. Ensuite, s\u00e9lectionnez la variante de police que vous souhaitez t\u00e9l\u00e9verser, choisissez le style de police et cliquez sur Modifier<\/strong>.<\/p>\n Une liste d\u00e9roulante apparait, proposant des champs pour t\u00e9l\u00e9verser le fichier de police. S\u00e9lectionnez votre fichier de police et t\u00e9l\u00e9versez-le. Vous pouvez r\u00e9p\u00e9ter ce processus en cliquant sur Ajouter une variante de police<\/strong> pour autant de variantes que possible. Enfin, cliquez sur Publier<\/strong>.<\/p>\n Pour appliquer votre nouvelle police personnalis\u00e9e au texte de votre site WordPress, suivez ces \u00e9tapes :<\/p>\n D\u00e9sormais, votre texte s’affichera avec votre police personnalis\u00e9e, ce qui donnera \u00e0 votre page une touche personnelle.<\/p>\n Les mod\u00e8les sont une fonctionnalit\u00e9 fondamentale de Bricks et se d\u00e9clinent en diff\u00e9rents types, notamment les en-t\u00eates, les pieds de page et les mises en page des articles de blog. Ces mod\u00e8les peuvent aller d’une simple section, comme l’en-t\u00eate d’un site web ou une section Hero, \u00e0 un contenu de page enti\u00e8re, comme les mises en page d’articles de blog, les pages d’archives, les r\u00e9sultats de recherche et les pages d’erreur.<\/p>\n Pour cr\u00e9er un mod\u00e8le :<\/p>\n Pour appliquer un mod\u00e8le \u00e0 une page :<\/p>\n Les mod\u00e8les de Bricks offrent des possibilit\u00e9s uniques que l’on ne trouve pas dans d’autres constructeurs de sites. Les mod\u00e8les distants sont des mod\u00e8les cr\u00e9\u00e9s et utilis\u00e9s dans d’autres sites que vous souhaitez utiliser dans votre site.<\/p>\n Pour permettre \u00e0 d’autres sites d’utiliser vos mod\u00e8les Bricks, allez dans Bricks<\/strong> > R\u00e9glages<\/strong> > Mod\u00e8les<\/strong> dans votre tableau de bord WordPress et cochez la case Acc\u00e8s \u00e0 mes mod\u00e8les<\/strong>.<\/p>\n Utilisez Whitelist URLs<\/strong> et Password Protection<\/strong> pour restreindre l’acc\u00e8s aux mod\u00e8les aux personnes qui connaissent le bon mot de passe.<\/p>\n Pour utiliser des mod\u00e8les d’autres sites, allez dans Bricks<\/strong> > R\u00e9glages<\/strong> > Mod\u00e8les<\/strong>, faites d\u00e9filer jusqu’\u00e0 la section Mod\u00e8les distants<\/strong> et collez l’URL du site Bricks dont vous souhaitez r\u00e9cup\u00e9rer les mod\u00e8les dans le champ URL <\/strong>du mod\u00e8le distant.<\/p>\n Si vous d\u00e9finissez un mot de passe, vous devez vous assurer que vous l’\u00e9crivez dans le champ Mot de passe<\/strong> du mod\u00e8le distant. Cliquez ensuite sur Enregistrer les r\u00e9glages<\/strong>.<\/p>\n Pour utiliser ces mod\u00e8les, acc\u00e9dez au constructeur de pages et cliquez sur Mod\u00e8les<\/strong> comme auparavant ; une nouvelle section Mod\u00e8les distants<\/strong> apparait avec tous les mod\u00e8les du site distant.<\/p>\n Bricks vous permet d’incorporer des donn\u00e9es dynamiques<\/a> dans vos mod\u00e8les et pages, ce qui en fait un outil polyvalent pour la cr\u00e9ation de sites web dynamiques.<\/p>\n Vous pouvez inclure divers \u00e9l\u00e9ments dynamiques tels que des images mises en avant, des titres d’articles, des dates de publication, des noms d’auteurs, des cat\u00e9gories, des \u00e9tiquettes, des titres de sites et tous vos champs personnalis\u00e9s.<\/p>\n Les donn\u00e9es dynamiques sont particuli\u00e8rement utiles lorsque vous cr\u00e9ez des mod\u00e8les sp\u00e9cifiques dans Bricks, comme le mod\u00e8le de votre article de blog ou les mod\u00e8les pour les types de publications personnalis\u00e9s, tels que les annonces de propri\u00e9t\u00e9s individuelles.<\/p>\n Pour ajouter des donn\u00e9es dynamiques, commencez \u00e0 saisir Voici comment cr\u00e9er un mod\u00e8le d’article unique \u00e0 l’aide de donn\u00e9es dynamiques avec Bricks :<\/p>\n Pour d\u00e9finir ce mod\u00e8le par d\u00e9faut pour tous les articles, proc\u00e9dez comme suit<\/p>\n Pour simplifier le style de ce mod\u00e8le, ajoutez un article par d\u00e9faut qui servira de r\u00e9f\u00e9rence pour les \u00e9l\u00e9ments dynamiques :<\/p>\n En outre, Bricks prend en charge l’utilisation du contenu des champs personnalis\u00e9s avanc\u00e9s (ACF), am\u00e9liorant ainsi votre capacit\u00e9 \u00e0 cr\u00e9er des pages d\u00e9taill\u00e9es et personnalis\u00e9es.<\/p>\n La fonction d’envoi de formulaire a \u00e9t\u00e9 introduite dans Bricks 1.9.2 pour vous permettre de capturer les envois de formulaire. Cela vous permet de cr\u00e9er une table personnalis\u00e9e nomm\u00e9e Vous pouvez activer le nouveau r\u00e9glage Enregistrer les envois de formulaire dans la base de donn\u00e9es<\/strong> sous Bricks<\/strong> > R\u00e9glages<\/strong> > G\u00e9n\u00e9ral<\/strong> > Divers<\/strong>.<\/p>\n Cliquez ensuite sur Enregistrer les r\u00e9glages<\/strong>. Un onglet Envois de formulaires apparaitra (Briques<\/strong> > Envois de formulaires<\/strong>), contenant vos diff\u00e9rentes tables d’envois de formulaires.<\/p>\n La collecte des envois de formulaires dans Bricks ne n\u00e9cessite pas d’extension suppl\u00e9mentaire. Il vous suffit d’utiliser l’\u00e9l\u00e9ment Formulaire<\/strong> pour cr\u00e9er un formulaire et de d\u00e9finir les champs correctement.<\/p>\n Dans le panneau de configuration, cliquez sur Actions<\/strong>, puis s\u00e9lectionnez l’action Enregistrer l’envoi<\/strong>.<\/p>\n Ensuite, cliquez sur Enregistrer les r\u00e9glages d’envoi<\/strong> pour donner au formulaire un nom descriptif. Ce nom sera utilis\u00e9 pour acc\u00e9der aux donn\u00e9es du formulaire.<\/p>\n D\u00e9sormais, lorsque vous enregistrez et ouvrez la page, vous pouvez remplir le formulaire et revenir ensuite \u00e0 la page de soumission de formulaire. Vous pouvez remplir le formulaire, puis revenir \u00e0 Bricks <\/strong>> Envoi de formulaire<\/strong> pour consulter les donn\u00e9es du formulaire.<\/p>\n Vous pouvez \u00e9galement t\u00e9l\u00e9charger un fichier CSV des diff\u00e9rents formulaires soumis. Dans la section Bricks<\/strong> > R\u00e9glages<\/strong> > G\u00e9n\u00e9ral<\/strong> > Divers<\/strong> o\u00f9 vous avez configur\u00e9 cette fonctionnalit\u00e9, vous pouvez r\u00e9initialiser ou supprimer la table de la base de donn\u00e9es.<\/p>\n WooCommerce<\/a> est une extension gratuite qui am\u00e9liore votre site WordPress avec des fonctionnalit\u00e9s de commerce \u00e9lectronique. Elle est mondialement reconnue comme une solution open source<\/a> de premier plan pour la mise en place et la gestion d’une boutique en ligne.<\/p>\n Bricks s’int\u00e8gre parfaitement avec WooCommerce, fournissant un constructeur robuste dans le th\u00e8me pour cr\u00e9er 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.<\/p>\n Bricks propose des \u00e9l\u00e9ments et des mod\u00e8les sp\u00e9cialis\u00e9s pour WooCommerce, vous permettant de concevoir la mise en page de votre boutique.<\/p>\n Pour commencer \u00e0 utiliser le WooCommerce Builder dans Bricks, installez et activez l’extension WooCommerce. Une fois activ\u00e9e, vous pouvez utiliser Bricks pour concevoir et personnaliser visuellement divers mod\u00e8les WooCommerce, de la m\u00eame mani\u00e8re que vous g\u00e8reriez les mises en page d’un article.<\/p>\n Pour cr\u00e9er une page de boutique simple :<\/p>\n En utilisant ces \u00e9l\u00e9ments, vous pouvez arranger et styliser votre page comme vous le souhaitez.<\/li>\n<\/ol>\n Comme pour la cr\u00e9ation d’un mod\u00e8le d’article unique, vous pouvez cr\u00e9er un mod\u00e8le de produit unique et d\u00e9finir ses conditions pour qu’il fonctionne avec tous les produits.<\/p>\n Le constructeur de boucles de requ\u00eate vous permet d’interroger votre base de donn\u00e9es en fonction de vos param\u00e8tres de requ\u00eate et de rendre les r\u00e9sultats de la requ\u00eate que vous souhaitez afficher \u00e0 l’int\u00e9rieur de la boucle. Il peut \u00eatre utilis\u00e9 dans des \u00e9l\u00e9ments de mise en page tels que le conteneur, l’accord\u00e9on et le diaporama.<\/p>\n 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\u00e9 et de membres de l’\u00e9quipe.<\/p>\n Pour utiliser la boucle de requ\u00eate, ajoutez un \u00e9l\u00e9ment Container au canevas. Activez le r\u00e9glage Utiliser la boucle de requ\u00eate<\/strong> pour transformer votre conteneur en \u00e9l\u00e9ment de boucle.<\/p>\n Une fois le r\u00e9glages Utiliser la boucle de requ\u00eate<\/strong> activ\u00e9, vous verrez apparaitre un contr\u00f4le de requ\u00eate (ic\u00f4ne d’infini). Cliquez sur l’ic\u00f4ne pour ouvrir le contr\u00f4le de requ\u00eate et d\u00e9finir les param\u00e8tres de requ\u00eate pour r\u00e9cup\u00e9rer le contenu de votre base de donn\u00e9es.<\/p>\n Le conteneur sert maintenant d’\u00e9l\u00e9ment r\u00e9p\u00e9titeur. Tous les \u00e9l\u00e9ments \u00e0 l’int\u00e9rieur de ce conteneur sont r\u00e9p\u00e9t\u00e9s autant de fois qu’il y a de r\u00e9sultats de requ\u00eate. Ce guide acad\u00e9mique<\/a> explique comment cela fonctionne.<\/p>\n Bricks n’a pas de plan gratuit. Ils cr\u00e9ent seulement un <\/a>compte<\/a> pour vous permettre d’essayer leur th\u00e8me, mais vous ne pouvez pas l’utiliser pour votre site \u00e0 moins de payer.<\/p>\n![\"Interface](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/bricks-editing-interface-1.png\")
Avantages de l’utilisation de Bricks pour WordPress<\/h3>\n
\n
D\u00e9marrer avec Bricks<\/h2>\n
![\"Tableau](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/bricks-dashboard.jpg\")
![\"Configurer](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/bricks-license-1.png\")
![\"Bienvenue](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/welcome-bricks-1.png\")
Comment lancer le constructeur de pages Bricks ?<\/h3>\n
![\"Lancer](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/launch-bricks.png\")
Comprendre l’interface Bricks<\/h3>\n
![\"Lab\u00e9liser](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/bricks-interface-label.png\")
\n
Utilisation de polices personnalis\u00e9es dans Bricks<\/h2>\n
![\"Utiliser](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/custom-font-bricks.png\")
![\"Ajoutez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/add-font-1.png\")
![\"Page](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/fonts-page-1.png\")
\n
![\"Utiliser](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/use-custom-font-1.png\")
Utiliser des mod\u00e8les dans Bricks<\/h2>\n
Cr\u00e9ation d’un mod\u00e8le<\/h3>\n
\n
![\"Cr\u00e9ation](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/new-template.png\")
Application de mod\u00e8les<\/h3>\n
\n
![\"Appliquer](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/apply-template.png\")
![\"Boutique](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/templates-store.png\")
![\"Choisissez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/use-template-from-community.png\")
Mod\u00e8les distants<\/h3>\n
![\"Autorisez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/remote-templates.png\")
![\"Utiliser](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/Use-remote-templates-1.png\")
Utilisation de donn\u00e9es dynamiques dans Bricks<\/h2>\n
{<\/code> sur le canevas ou cliquez sur l’ic\u00f4ne du \u00ab boulon \u00bb \u00e0 c\u00f4t\u00e9 de la plupart des champs dans le panneau des r\u00e9glages.<\/p>\n\n
{post_title}<\/code> dans un \u00e9l\u00e9ment Heading<\/strong> et {post_content}<\/code> dans un \u00e9l\u00e9ment de texte Basic<\/strong>.\n![\"Utilisation](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/dynamic-data-1.png\")
\n
![\"D\u00e9finissez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/default-post-template-1.png\")
![\"Le](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/post-template.png\")
\n
![\"Ajoutez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/defualt-post-1.png\")
![\"L'article](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/customize-dynamic-page-1.png\")
Gestion des envois de formulaires avec Bricks<\/h2>\n
bricks_form_submissions<\/code> dans votre base de donn\u00e9es (avec le pr\u00e9fixe de votre base de donn\u00e9es WP).<\/p>\n![\"G\u00e9rer](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/form-submissions-bricks.png\")
Collecte des envois de formulaires<\/h3>\n
![\"Ajoutez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/form-element.png\")
![\"D\u00e9finissez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/save-submission-action.png\")
![\"D\u00e9finissez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/form-name-1.png\")
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/bricks-form-submission-page.png\")
![\"R\u00e9initialiser](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/reset-delete-database-table.png\")
Utiliser WooCommerce avec Bricks<\/h2>\n
![\"\u00c9l\u00e9ments](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/product-elements.png\")
\n
![\"Utiliser](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/bricks-wocommerce.png\")
Boucles de requ\u00eate dans Bricks<\/h2>\n
![\"Utilisation](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/query-loops-1.png\")
Prix de Bricks<\/h2>\n
![\"Structure](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/biricks-pricing-1.png\")