Comment construire un site Web avec le plugin WP Page Builder

Vous cherchez un moyen de créer votre propre site web sans avoir à engager de développeur? Ne cherchez plus: WP Page Builder est un plugin gratuit qui fait le gros du travail pour vous.

(Ceci est une publication sponsorisée.) Les constructeurs de pages WordPress sont le premier choix pour créer un site Web parfait sans l'aide d'un développeur. Et un nouveau produit est sur le marché que nous allons tester dans cet article. Il s’agit de WP Page Builder . Nous allons apprendre à utiliser ce plugin de création de page pour créer un site Web.

WP Page Builder est un plugin gratuit qui s’intègre à n’importe quel thème WordPress. Vous pouvez facilement faire glisser des éléments sur les pages que vous créez, sans avoir besoin de compétences en programmation.

Du moins, c’est le point de vue du développeur Themeum que je vais mettre à l'épreuve dans cet article. Est-ce que le plugin nous aide vraiment à construire un site web si facilement? Sommes-nous capables d'atteindre nos objectifs pour un site Web avec? Nous sommes sur le point de le savoir.

Reprenons le processus de création d’un site Web réel à l’aide du plug-in WP Page Builder. Nous allons créer un site Web de quelques pages simples sur le parc fictif Rockhedge Park. Nous en apprendrons davantage sur le plug-in, de l'installation au lancement du site Web.

Nos objectifs sont les suivants:

• créer rapidement le site Web,
• créer une page d'accueil avec les caractéristiques et les points forts du parc,
• créer une page vers aider les visiteurs à trouver le parc,
• créer une page de contact

Commençons par un site Web WordPress vierge, avec le thème Twenty Seventeen installé.

Installation du plug-in

WP Page Builder est gratuit et vous pouvez le télécharger à partir du site Web de Themeum . Il est également facile à installer via le panneau d’administration de WordPress, mais comme le plugin est nouveau, vous devrez faire défiler la liste pour le trouver.

Recherchez celui avec l’icône «P» bleue cool avec un carré à l’intérieur. .

Après l’installation, aucun écran de démarrage ne vous bluffera et la seule nouveauté dans ce domaine est la zone d'administration que vous remarquerez peut-être est un nouvel élément du menu. Il s'agit de la page de paramètres généraux du plug-in, dans laquelle vous pouvez contrôler certaines choses, telles que les types de publication que le plug-in doit prendre en charge et ceux qui doivent être en mesure de modifier une page avec le générateur de page.

J'aime le fait que le plugin ne prend pas en charge tout le panneau d'administration. C’est discret et vous n’êtes même pas obligé de l’utiliser pour créer des pages ou des posts:

Après avoir cliqué sur le bouton, vous accédez à un nouvel écran dans lequel le constructeur de pages apparaît réellement.

Grand aperçu )

L’apparence générale est très bonne. J'aime particulièrement le fonctionnement des options réactives. tout le site Web se réduit avec une belle animation lorsque vous cliquez sur l'icône de la tablette ou du téléphone portable.

L'ensemble du contenu et des options que vous pouvez modifier est affiché sur le côté gauche, ce qui est très pratique, car les panneaux d'édition ne sont pas mélangés avec le contenu réel. contenu de la page.

Ce que je trouve moins génial, ce sont les icônes des barres d’outils des rangées et des addons. Ils sont tout simplement trop petits et vous ne pouvez pas vraiment les distinguer les uns des autres sans vous rapprocher du moniteur. De plus, je devais réfléchir un peu aux éléments de menu de gauche, car le nom «Addons» me confondait un peu. Dans ce plug-in, les addons sont les éléments de contenu que vous placez sur votre site Web, et non des addons premium que vous pouvez installer pour rendre votre site Web encore plus cool.

Le support est une autre chose nécessaire. Il n'y en a pas. Il serait très agréable d’avoir un texte d’aide, même si le constructeur de pages semble être très facile à utiliser. Par exemple, l'onglet "Bibliothèque" n'a pas de contenu et je ne sais pas vraiment ce que c'est ou ce que je peux en faire.

Hormis ces petites choses, j'aime bien cet éditeur. Continuons pour configurer notre première page!

Création de la page d’accueil

Par défaut, vous pouvez placer le contenu créé avec WP Page Builder à un emplacement unique, où le contenu standard apparaîtrait. Bien que ce soit le comportement attendu avec la plupart des thèmes, ce n’est pas mon cas. Je ne souhaite pas que mon contenu soit regroupé dans le modèle par défaut:

C'est probablement la raison pour laquelle le plugin est fourni avec un modèle de page appelé Modèle de générateur de pages WP. Il répartit le contenu que vous créez sur l'ensemble de la page et seuls les en-têtes et les pieds de page du thème sont utilisés.

Le contenu a maintenant une meilleure apparence. Je pense que ce constructeur de page pourrait s'intégrer dans n'importe quel thème utilisant ce modèle de page.

OK, le thème est installé, le générateur de page est installé et la page est préparée. Que faisons-nous ensuite? Je suis sûr que vous avez déjà occupé ce poste auparavant avec les générateurs de page; vous ne savez simplement pas quoi faire de la page. Vous ne savez même pas ce que vous pouvez faire avec la page. C’est le problème standard de la «toile vierge».

Cependant, j’ai découvert un élément appelé «Layouts» dans la barre latérale du plugin. Et la façon dont cela fonctionne m'a impressionné.

Mise en page

Les mises en page sont des pages complètes, prêtes à être importées dans votre site Web WordPress. Ça a l'air cool, n'est-ce pas? Regardez ceci:

Comme vous pouvez le constater, il existe de nombreux modèles et la plupart des ils sont payés. Quelques-uns sont gratuits, cependant, et vous pouvez les utiliser pour vous inspirer.

La meilleure partie de cette importation est qu’elle ne gonfle pas WordPress. Vous pouvez effacer le contenu de la page en deux clics et il ne reste plus rien. Même les images ne sont pas chargées dans la bibliothèque de WordPress.

Vous pouvez tester de nombreux concepts et options et tout adapter à vos besoins sans pour autant avoir à importer une tonne de choses inutilisées importées dans votre installation WordPress. J'aime vraiment ça.

Composer la page d'accueil

Mon idée initiale pour la page d'accueil était de donner quelques images du parc et de mettre en valeur certains éléments.

Après m'être inspiré des dispositions préparées par Themeum j'ai commencé avec une image d'en-tête et j'ai créé mes autres pages, ainsi que la navigation principale.

J'ai décidé de ne pas utiliser de mises en page car les blocs et les addons sont très simples à utiliser, et ils sont livrés avec des valeurs par défaut. content.

J'ai commencé avec une grande section d'image située juste sous l'en-tête, avec un arrière-plan fixe et un titre générique.

Grand aperçu )

La configuration de cette section était très simple, mais la police personnalisée pour les en-têtes m'a posé quelques problèmes. J'ai compris que je devais supprimer ma sélection précédente, puis je pouvais choisir une nouvelle famille de polices.

Une chose que j'aime bien est la façon dont vous pouvez ajuster le remplissage de l'addon en direct à l'écran:

Pour la section suivante, j'ai décidé d'utiliser un bloc de contenu prédéfini, qui me convient parfaitement. L'ajouter à la page est également très simple: déposez-le simplement à l'endroit souhaité et ajustez le contenu de l'échantillon.

Grand aperçu )

Remplir le contenu a été un jeu d'enfant, et j'ai rapidement atteint la dernière section, l'appel à l'action. Là, j'ai utilisé le bloc d'appel à l'action avec un contenu très simple.

Et voilà! Le processus de création de la page était très simple et j'ai bien aimé.

Création de la page «Nous trouver»

La ​​page suivante est celle où les gens peuvent facilement trouver notre parc. Cela impliquait l'utilisation de sections plus avancées, telles qu'une carte.

Malheureusement, l'addon de carte n'étant pas disponible dans la version gratuite du plug-in, j'ai donc décidé de l'écrire moi-même et de voir à quoi ressemblerait la base de code du plug-in.

Le code n'est pas mal du tout. C’est clair et facile à lire, malgré le fait qu’il n’ya presque pas de commentaires en ligne. Je n’ai trouvé aucune documentation, j’ai donc dû creuser pour voir comment étendre le plugin. Et il ne semblait pas que j'avais besoin de beaucoup de choses – juste une classe et un filtre d'addon.

Module d'extension de Google Map personnalisé

Lorsque vous ne disposez d'aucune documentation, la meilleure approche consiste à copier et à ajuster le code existant. ] De nombreuses options de configuration semblent être disponibles, dont certaines nécessitent une documentation solide. Mais dans notre cas, nous allons créer une iframe Google Map simple en utilisant une clé API Google, avec un emplacement pour interroger et la hauteur de l’iframe.

Voici à quoi ressemble notre classe:

 class JakubMikita_Addon_GoogleMap {

    fonction publique get_name () {
        return 'jakubmikita_googlemap_block';
    }
    fonction publique get_title () {
        renvoyer 'Google Map';
    }
    fonction publique get_icon () {
        retourne 'wppb-font-location-map';
    }

    // Bloc Google Map Paramètres Champs
    fonction publique get_settings () {

        $ settings = array (
            'apikey' => array (
                'type' => 'text',
                'title' => __ ('clé API Google Maps', 'wp-pagebuilder'),
            ),
            'place' => array (
                'type' => 'text',
                'title' => __ ('Map place', 'wp-pagebuilder'),
            ),
            'hauteur' => tableau (
                'type' => 'numéro',
                'title' => 'Height',
                'unit' => array ('px', 'em', '%'),
                'responsive' => true,
                'std' => array (
                    'md' => '500px',
                    'sm' => '500px',
                    'xs' => '500px',
                ),
                'tab' => 'style',
                'selector' => '{{SELECTOR}} iframe {height: {{data.height}}; } ',
            ),
        )
        retourne $ settings;
    }

    // Google Map Render HTML
    fonction publique render ($ data = null) {
        $ settings = $ data ['settings'];
        $ apikey = isset ($ settings ['apikey'])? $ settings ['apikey']: false;
        $ place = isset ($ settings ['place'])? $ settings ['place']: false;

        $ output = '';
        return $ output;
    }

    // Modèle de carte Google
    fonction publique getTemplate () {
        $ output = '';
        return $ output;
    }

}

Ça a l'air simple, non? En haut, trois méthodes identifient l'addon: nom, titre et icône.

La méthode suivante, get_settings () consiste à définir toutes les entrées de l'utilisateur. Nous les définissons comme un tableau; Je viens de regarder d'autres addons pour comprendre les champs que je peux ajouter. Assez simple et facile à mettre en œuvre.

J'ai découvert que la méthode suivante, render () était utilisée à l'avant. Il récupère tous les paramètres utilisateur et renvoie l'iframe de la carte.

La dernière méthode, getTemplate () est utilisée dans l'écran de création de page. Avoir deux méthodes rend le même code n'est pas génial, mais je suppose que la raison en est que la seconde doit être analysée avec JavaScript.

Une autre chose qui fonctionnerait mieux serait la méthode d'enregistrement d'un addon. Si cela était un addon plus avancé, je voudrais inclure le CSS et JavaScript dans des fichiers séparés. Pas très pratique, mais aussi pas la fin du monde.

La dernière chose à faire pour enregistrer l'addon est de l'inclure dans le tableau, ce que nous pouvons faire avec un simple filtre:

 add_filter ('wppb_available_addons ', fonction ($ addons) {
    $ addons [] = 'JakubMikita_Addon_GoogleMap';
    renvoyer $ addons;
});

C’est tout. Le processus est rapide et simple. Voici notre addon personnalisé:

Nous avons maintenant une superbe carte pleine page sur cette page

Création de la page «Contactez-nous» [19659017] Pour la dernière page, mettons un formulaire de contact. J'étais sur le point d'installer l'un des plugins de formulaire de contact les plus populaires lorsque j'ai remarqué l'addon «Form».

De manière surprenante, lorsque j'ai déposé l'addon sur la page, j'ai vu tous les champs que je voulais déjà être configurés et alignés correctement.

La partie la plus intéressante est que WP Page Builder s'intègre aux plugins Contact Form 7 et weForms. Vous pouvez même ajouter un simple CAPTCHA ou utiliser reCAPTCHA de Google après avoir fourni les clés du site Web.

Complément très cool. Les soumissions au formulaire arrivent dans ma boîte de réception sans aucun problème, y compris tous les champs, et l'utilisateur voit un beau message de confirmation lors de l'envoi du formulaire.

Résumé

Je dois dire que WP Page Builder est un plugin solide. Bien sûr, il a quelques défauts, mais c’est encore un produit récent, et je suis sûr que Themeum corrigera tous les bugs et apportera les améliorations mentionnées dans cet article.

L’atmosphère générale du plugin est excellente. Le plugin supporte la majeure partie des tâches lourdes, et vous n’avez pas à penser à la façon dont vous voulez faire ce que vous voulez car c’est déjà la plupart du temps déjà fait. Le contenu par défaut fait vraiment du bon travail et accélère le travail.

Themeum a raison: construire une page avec son plugin est simple, mais pas parce que le plugin est basique. Le plugin est intuitif, mais regorge d’addons sympas.

J’ai utilisé seulement quelques addons, mais le plugin en contient beaucoup plus. Les blocs que vous passeriez normalement des heures à essayer d'imaginer comment les implémenter constituent un glisser-déposer lorsque vous utilisez le plug-in WP Page Builder.

Par exemple, des barres de progression, des icônes sociales, des témoignages et des zones de contenu pivotantes sont prêts et en attente. à utiliser. Il est difficile de transmettre l’expérience écrite. Vous devez simplement installer le plug-in et voir par vous-même.

(ms, ra, al, il)