Comment utiliser SiteOrigin Page Builder avec WordPress

Comme d'autres constructeurs de pages WordPress, SiteOrigin est là pour vous aider à créer un site Web puissant et réactif avec des connaissances en CSS et sans codage. Vous pouvez utiliser quelques thèmes de leur côté (gratuits et premium) ainsi que des plugins de création de pages gratuits et Pro.

J'ai testé la version Pro de SiteOrigin et créé une page de destination. Il est livré avec la fonctionnalité glisser-déposer et fonctionne avec n'importe quel thème et vous pouvez utiliser tous les widgets gratuits, Pro et WordPress en même temps. Lisons cet article pour en savoir plus sur l'installation et la configuration de SiteOrigin avec WordPress.

Pourquoi choisir SiteOrigin Page Builder ?

La construction du site commence à partir de la barre d'outils de WordPress Editor, que nous connaissons tous, à la fois Classic et Gutenberg. Il génère une petite quantité de code de sortie et il n'est pas gonflé, mais chaque ligne du code de sortie est optimisée autant que possible pour un constructeur d'une page.

Il a un aperçu en direct de chaque modification que vous avez apportée car il n'a pas de générateur frontal.

Vous pouvez également consulter facilement l'historique et revenir à une conception précédente si vous n'êtes pas satisfait de ce que vous avez fait. En outre, il utilise comme d'habitude les lignes et les widgets comme les autres constructeurs de pages.

Fonctionnalités de SiteOrigin Page Builder

La version gratuite de SiteOrigin est livrée avec des options "widgets" assez limitées, mais avec la version Pro, vous disposez d'un tas de widgets complémentaires utiles pour créer facilement votre site.

Générateur de type de publication personnalisé

L'une des fonctionnalités les plus populaires et les plus utiles de SiteOrigin est le générateur de type de publication personnalisé avec des mises en page de générateur de pages réutilisables et des modèles WooCommerce. C'est un peu différent des autres outils et je vais donner une explication un peu plus approfondie sur la façon de l'utiliser.

Il y a des étapes importantes à suivre pour que vous puissiez créer un modèle de type post personnalisé dans SiteOrigin.

Étape 1

Vous devrez ajouter un nouveau type de publication personnalisé, créer la mise en page du type de publication à l'aide de Page Builder et choisir les paramètres d'affichage du type de publication.

Depuis votre tableau de bord WordPress, accédez à Outils → Types de publication et cliquez sur le bouton Ajouter un nouveau, nommez-le Portfolio, par exemple. Maintenant, cliquez sur l'onglet Page Builder à côté des onglets Texte et Visuel, utilisez les boutons Page Builder Ajouter un widget et Ajouter une ligne pour créer votre présentation de type de publication personnalisée de portefeuille.

Veuillez noter que tout contenu que vous ajoutez au modèle sera affiché sur chaque publication de portfolio publiée à l'avenir. C'est donc assez utile si vous souhaitez afficher un bloc de contenu spécifique sur chacune de ces pages comme Call to Action, Abonnez-vous à notre newsletter, À propos de moi, Témoignages, etc.

Étape 2

Vous devez savoir comment ajouter du contenu à un type de publication personnalisé que vous avez créé.

Une fois que vous avez créé le portefeuille de type de publication personnalisé, vous pourrez voir l'élément de portefeuille dans la barre latérale gauche de votre tableau de bord WordPress. Cliquez dessus, puis cliquez sur Ajouter un nouveau.

Lorsque vous nommez votre élément Portfolio, il vous permet d'y ajouter du contenu. N'oubliez pas que vous ne pouvez modifier que les widgets qui ne font pas partie du modèle global et que ces widgets seront marqués avec lisez-moi un texte. Et enfin, comment ajouter ces publications dans un carrousel de publication ou un widget de boucle de publication.

Widget de boucle de publication

SiteOrigin a le widget Post Loop inclus, mais il repose sur des modèles de boucle à l'intérieur du thème actif.

Pour insérer le widget Post Loop, ajoutez simplement une ligne sur une page ou une publication à l'endroit où vous souhaitez qu'elle s'affiche, sélectionnez la disposition du blog ou de la grille et vous avez terminé. Ensuite, vous devrez choisir quel widget sera affiché en cliquant sur le bouton Créer une requête de publication.

Dans la dernière étape, cliquez sur votre type de publication personnalisé dans la liste déroulante Type de publication en haut du widget du générateur de requêtes.

Si vous voulez le faire dans le post carrousel, la seule différence est de choisir le widget post carrousel au lieu de Post Loop, le reste de la procédure est le même.

Générateur de modèles WooCommerce

Les modèles WooCommerce permettent de créer de belles pages spécifiques à WooCommerce et une apparence visuelle de produit unique. L'interface WooCommerce Template Builder est divisée en sept onglets :

1. Produit
2. Archives des produits
3. Boutique
4. Chariot
5. Panier vide
6. Vérifier
7. Mon compte

Pour WooCommerce, tous les éléments individuels dont vous avez besoin pour créer le produit unique sont distribués sous forme de widget, ce qui vous permet de créer facilement des produits. Vous pouvez créer une mise en page et utiliser des widgets WooCommerce comme le prix, le SKU, l'ajout au panier, la description courte/longue, l'image du produit, le titre, etc.

Il existe également un widget très utile pour une vente incitative de produit, qui vous donne la liberté d'utiliser la fonctionnalité WooCommerce Upsell. Cependant, veuillez noter que la conception de ces widgets et pages WooCommerce est définie par votre thème CSS et qu'elle peut être modifiée à l'aide de CSS.

D'autres widgets sont courants comme les cartes, les accordéons, les CTA, les onglets, les widgets sociaux, les carrousels, etc.

Avec l'abonnement Pro, vous n'obtenez pas seulement Pro Page Builder, mais vous accédez à toutes les fonctionnalités Pro, thèmes Premium, CSS et widgets.

Prix ​​et forfaits de SiteOrigin Page Builder

SiteOrigin propose deux modèles de tarification. Le premier et le plus utile est un abonnement annuel, qui se décline en 3 forfaits.

• Unique pour un emplacement au prix de 29$
• Affaires jusqu'à 5 sites au prix de 49$
• Développeur pour sites illimités au prix de 99$

De plus, il existe une licence d'un an où vous avez tout de même, sauf que ce n'est pas l'abonnement mais un an de mises à jour et de support.

• Unique pour un emplacement au prix de 38$
• Affaires jusqu'à 5 sites au prix de 64 $
• Développeur pour sites illimités au prix de 128$

Configuration requise pour le système/l'hébergement de SiteOrigin

Même s'il est un peu difficile de trouver la configuration système requise de SiteOrigin. D'après certains forums de support et commentaires en ligne, il semble que PHP 7.4 avec au moins 512 Mo de mémoire PHP fera l'affaire. Cependant, j'ai utilisé VultrHF avec 2 Go de mémoire PHP à des fins de test.

Bien sûr, vous auriez besoin de la dernière version de WordPress et de tous les autres plugins à jour.

Installer et configurer le générateur de pages SiteOrigin

En ce qui concerne l'installation et la configuration, SiteOrigin offre quelque chose d'intéressant que la plupart des constructeurs de pages n'offrent pas.

Comme pour tout dans WordPress, vous devez installer gratuitement SiteOrigin directement à partir du référentiel, puis vous téléchargez la version Pro téléchargée à partir de votre compte SiteOrigin. Une fois l'installation terminée, suivez les étapes et installez/activez les plugins recommandés.

Après avoir installé avec succès l'ensemble de plugins, vous devez activer la licence et les widgets dont vous avez besoin. Quant à la licence, elle doit être activée tout de suite et pour les widgets, vous pouvez les activer maintenant ou plus tard lorsque vous en aurez besoin.

Ce qui est génial avec SiteOrigin, c'est que vous n'avez pas besoin d'activer les widgets dont vous n'avez pas besoin et, ce faisant, vous pouvez économiser des ressources et n'avoir fonctionnel que les options dont vous avez besoin. Les bleus sont actifs et les gris sont des widgets inactifs.

Lorsque vous avez terminé, vous pouvez commencer à créer votre site en utilisant le générateur de page SiteOrigin. Accédez à Pages → Ajouter une nouvelle et en cliquant sur la flèche déroulante, il vous sera proposé d'ajouter une nouvelle page avec SiteOrigin Page Builder et Block Editor → sélectionnez SiteOrigin Page Builder.

Personnellement, ce n'est pas le plus grand fan des constructeurs de pages backend à l'ère des constructeurs front-end. Cependant, cela signifie qu'il consommera moins de ressources et qu'il est plus léger pour votre serveur. Pas si affamé que les constructeurs en général.

Voici à quoi ressemble le constructeur de page en mode Live Editing, qui est le plus utile. L'éditeur back-end est assez difficile et prend du temps car vous devez appuyer sur l'aperçu à chaque fois pour voir les modifications que vous avez apportées.

Lorsque vous cliquez sur la page Modifier, vous vous retrouverez dans l'éditeur principal, à partir de là, cliquez simplement sur Live Editor dans la barre d'outils et vous vous retrouverez dedans.

Sur le côté gauche, vous avez une barre latérale similaire à Personnaliser, à partir de laquelle vous créez réellement le site et sur le côté droit, elle rechargera la vue pour afficher les modifications après toute modification.

Il ne prend en charge aucun type de glisser-déposer directement dans le site, mais tout doit être fait via le personnalisateur de la barre latérale gauche.

Dans le coin supérieur gauche, vous verrez la barre d'outils avec 4 éléments. De gauche à droite, ils feraient ce qui suit.

L'icône d'engrenage ouvrira les widgets disponibles que vous pouvez insérer dans les lignes que vous avez créées. Vous pouvez voir les widgets WordPress et ceux de SiteOrigin au même endroit. Cependant, vous pouvez également choisir sur le côté gauche pour ne voir que WordPress ou uniquement SiteOrigin.

L'icône suivante est un Burger, qui ajoutera une nouvelle ligne et c'est le moment où vous choisissez la disposition des lignes. Ne vous inquiétez pas si vous devez modifier la mise en page, cela peut être fait à tout moment plus tard.

Après avoir cliqué sur l'icône Mise en page, cela ouvrirait en fait l'option d'importation/exportation de la mise en page existante. Ce que j'ai remarqué, c'est que SiteOrigin manque de plus de mises en page et de designs plus modernes. De plus, à partir de cet outil, vous pouvez cloner des pages existantes que vous avez déjà créées ou mettre en miroir des sections/blocs.

La dernière icône est l'historique, l'endroit où vous pouvez revenir en arrière si vous n'aimez pas les résultats ou simplement si vous avez fait une erreur.

Performances du générateur de pages SiteOrigin sur Cloudways

Comme on pouvait s'y attendre, SiteOrigin fonctionne assez bien car il n'a pas beaucoup de surcharge dans le code et c'est assez simple, ce qui est à la fois l'avantage et l'inconvénient. Nous devons mentionner que nous n'avons fait aucune optimisation d'image.

– Résultats de SiteOrigin sur GTMetrix

– Résultats de SiteOrigin sur Pingdom Tools

– Résultats de SiteOrigin sur WebPageTest

Avis des utilisateurs de SiteOrigin Page Builder

Et ce qui est toujours l'une des choses que vous devriez vérifier avant d'installer un plugin, ce sont les critiques et les notes sur le référentiel de plugins WordPress.org. Pour SiteOrigin, il y a jusqu'à présent 922 évaluations 5 étoiles et les critiques récentes sont impressionnantes.

Sommaire

Si vous avez besoin d'un outil léger pour créer un site Web simple ou une page de destination, SiteOrigin pourrait être le choix parfait pour vous. L'inconvénient est qu'il n'offre pas de générateur d'en-tête et de pied de page, vous avez donc besoin d'un thème qui permettra de modifier l'en-tête et le pied de page de votre site.

La courbe d'apprentissage est raide et vous avez besoin d'une certaine expérience avec WordPress et d'une compréhension des widgets et des éléments. L'absence d'un éditeur frontal est également un facteur limitant pour les débutants et cela nécessite certainement des connaissances et des compétences CSS pour que votre résultat final soit impressionnant. Cependant, en tant que développeur, la plupart des fonctionnalités sont assez pratiques même si elles ne sont pas très intuitives pour les débutants.

L'écosystème autour de SiteOrigin n'est pas aussi grand que pour certains autres constructeurs de pages, mais nous devons prendre en compte qu'il compte 1 million d'installations actives pour la version gratuite et 900 000 pour le Widget Bundle et certains des auteurs externes de modules complémentaires ont plus de 30 000 installations actives.