Page Builder Sandwich devrait être compatible avec les différents modules de Jetpack.
Le module Markdown effectue une opération particulière lors de l’enregistrement du contenu, ce qui entraîne la perte des modifications lors de la conversion markdown. Pour gérer cela, le texte markdown dans l’éditeur backend est converti en balises HTML lors de l’enregistrement de vos modifications depuis le frontend. (Merci à Jake Jackson pour son aide)
Nous avons testé Page Builder Sandwich avec PHP 7 et tout devrait fonctionner correctement sans aucun problème.
Soyez prudent lors de la mise à niveau de votre site depuis une version antérieure vers PHP 7, car il existe de nombreuses incompatibilités avec les versions antérieures qui doivent être prises en compte dans l’ensemble de vos thèmes et extensions.
Une erreur Javascript survient lorsque Page Builder Sandwich et Materialize sont utilisés ensemble. Il y a un conflit entre materialize.js et le sélecteur de couleur du cœur de WordPress.
Un ticket a été ouvert à ce sujet sur le dépôt GitHub de Materialize : https://github.com/Dogfalo/materialize/issues/2821
L’extension continuera toujours de fonctionner correctement tant que vous ne désactivez pas la licence sur votre site. Une fois que vous l’avez désactivée, vous ne pouvez plus la réactiver.
Vous ne pourrez plus recevoir de mises à jour depuis votre tableau de bord WordPress, ni avoir accès aux versions plus récentes. Nous ne pourrons plus vous fournir notre formidable support personnalisé.
L’ajout de widgets peut être effectué en cliquant sur le bouton Élément Widget dans la section Éléments de l’inspecteur. Après avoir cliqué, une fenêtre contextuelle devrait apparaître, listant tous les widgets que Page Builder Sandwich a trouvés sur votre site.
Tous les widgets trouvés sur votre site WordPress peuvent être ajoutés, cependant certains widgets qui utilisent du code Javascript personnalisé/spécialisé dans leurs réglages pourraient ne pas fonctionner correctement. Les widgets qui utilisent les éléments suivants pourraient ne pas fonctionner :
Les widgets WordPress par défaut et les widgets créés de manière similaire ne devraient poser aucun problème.
Si vous avez absolument besoin que ce widget spécifique fonctionne, il existe une solution de contournement.
Vous pouvez utiliser l’extension Custom Sidebars par WPMU Dev pour créer une nouvelle barre latérale / zone de widget, y ajouter votre widget en utilisant la méthode habituelle dans Apparence > Widgets. Ensuite, dans Page Builder Sandwich, ajoutez un Élément Barre latérale et sélectionnez la barre latérale qui contient le widget dont vous avez besoin.
Une autre alternative consiste à recréer l’effet souhaité à l’aide des différents éléments et styles disponibles dans Page Builder Sandwich.
Lorsque vous achetez Page Builder Sandwich pour la première fois, un fichier .zip contenant l’extension sera automatiquement téléchargé sur votre ordinateur.
Si vous le perdez, vous pouvez télécharger à nouveau votre fichier .zip en accédant à ce lien : https://dashboard.freemius.com/license-recovery/203/page-builder-sandwich/
Saisir votre licence sur ce lien vous permettra de récupérer votre fichier .zip de Page Builder Sandwich, ainsi que votre licence et les informations de votre compte.
Techniquement, cela devrait fonctionner avec tous les thèmes sans exception.
Tout comme nos utilisateurs et clients, nous avons utilisé avec succès Page Builder Sandwich avec de très nombreux thèmes, notamment des thèmes du répertoire officiel WordPress.org, Genesis Themes, StudioPress Themes, Elegant Themes ainsi que des thèmes de ThemeForest.
Cependant, il peut arriver que votre thème utilise des méthodes non conventionnelles susceptibles d’empêcher Page Builder Sandwich de fonctionner correctement. Si cela se produit, veuillez nous envoyer une demande d’assistance et nous essaierons de résoudre le problème.
Pour supprimer des éléments dans Page Builder Sandwich, il suffit généralement de sélectionner le texte ou l’élément, puis d’appuyer sur la touche Suppr ou Retour arrière.
Une autre solution consiste à cliquer sur le bouton supprimer / retirer dans l’inspecteur :
Dans certains cas, cela ne fonctionne pas. Les éléments concernés sont généralement des conteneurs tels que des lignes, des colonnes ou des carrousels. Cela permet d’éviter les suppressions accidentelles lors de la suppression de contenu.
Pour supprimer ces éléments, cliquez sur le bouton supprimer / retirer dans les propriétés de l’élément au sein de l’inspecteur. Par exemple, pour supprimer une ligne, vous devrez utiliser cette zone :
Page Builder Sandwich est désormais disponible en :
Si vous souhaitez contribuer à Page Builder Sandwich en le traduisant dans votre langue, rendez-vous sur notre page Transifex !
Ajouter des images est très simple. Vous pouvez soit :
Nous nous sommes assurés que Page Builder Sandwich a un impact quasi nul sur les performances de votre site web. Lorsque vous êtes déconnecté, au minimum, seuls les styles CSS de ligne et de colonne sont mis en file d’attente, ainsi que les scripts JS et CSS nécessaires pour les shortcodes que vous avez utilisés.
Il y avait auparavant un problème concernant NextGen et Page Builder Sandwich.
Avant la version 2.12, PBS provoquait d’une manière ou d’une autre l’affichage par NextGen d’un message d’erreur qui entraînait un écran blanc sur votre site. Cela a été corrigé à partir de la version 2.12, donc si vous utilisez une version plus ancienne, veuillez effectuer la mise à jour.
Il existe des milliers de thèmes et d’autres extensions. Ainsi, bien que nous fassions de notre mieux pour concevoir le tout selon les normes, les choses peuvent parfois mal tourner.
Si vous constatez que Page Builder Sandwich ne fonctionne pas correctement avec votre configuration, voici quelques étapes que vous pouvez suivre pour résoudre le problème.
Consultez l’article ici : Le bouton « Modifier avec Page Builder Sandwich » n’apparaît pas Si cela ne résout pas le problème, lisez la suite.
Parcourez les différents articles de la catégorie Dépannage de la documentation.
WordPress, vos extensions, votre thème et même Page Builder Sandwich. Il est toujours bon d’être à jour. Vous assurer que vos éléments sont à jour signifie que vous disposerez des derniers correctifs de bugs et de vulnérabilités pour votre site.
Si vous ne pouvez pas modifier votre contenu avec Page Builder Sandwich (et qu’un message d’erreur est probablement apparu), il se peut que le contenu de la page actuelle sur laquelle vous vous trouvez soit entièrement généré par votre thème ou une extension. Pour vérifier cela, modifiez votre page/article dans l’administration normalement à l’aide de WordPress, puis vérifiez si votre contenu enregistré s’affiche sur le site. S’il n’apparaît pas, cela signifie que le contenu de la page/l’article est entièrement généré et ne peut pas être modifié à l’aide de PBS.
Parfois, une extension peut entrer en conflit avec Page Builder Sandwich. Pour déterminer quelle extension peut provoquer le conflit, désactivez une extension et vérifiez si PBS se remet à fonctionner. Répétez cette opération pour chacune de vos extensions activées. Si PBS commence à fonctionner de nouveau et que vous pouvez modifier vos pages, l’extension que vous venez de désactiver n’est pas compatible avec PBS. Dans ce cas, contactez-nous par e-mail à l’adresse [email protected] et informez-nous-en afin que nous puissions résoudre le problème.
Si la désactivation des extensions n’a rien donné, essayez de basculer vers le thème WordPress par défaut (les thèmes Twenty-Something). Si vous pouvez à nouveau modifier votre contenu avec Page Builder Sandwich, le thème que vous utilisez n’est pas compatible avec PBS. Envoyez-nous cette information par e-mail à [email protected] et informez-nous-en afin que nous puissions résoudre le problème.
Dans de rares cas, une extension de navigateur peut éventuellement empêcher le code Javascript d’un site web de fonctionner correctement. Pour vérifier si une extension de navigateur cause des problèmes, ouvrez votre navigateur en mode incognito (Chrome) ou en navigation privée et essayez d’accéder à PBS ; cela ouvrira un nouvel onglet sans aucune extension. Si cela fonctionne, c’est qu’une extension entre en conflit.
Il a été constaté que l’extension de navigateur PageXray causait des problèmes.
Vous pouvez intégrer du contenu provenant de divers sites comme des vidéos YouTube, des vidéos Vimeo, des Tweets et même des commentaires Reddit en collant leurs URL de permalien dans Page Builder Sandwich.
Veuillez noter qu’une ligne de texte entière ne doit contenir que l’URL
Page Builder Sandwich fonctionne en parallèle avec la fonctionnalité oEmbed de WordPress. Ainsi, les URL que vous pouvez intégrer dans l’administration devraient être prises en charge. Les extensions qui ajoutent la prise en charge d’autres fournisseurs oEmbed devraient également fonctionner.
Vous pouvez trouver une liste des fournisseurs oEmbed dans le codex : https://codex.wordpress.org/Embeds
Les shortcodes peuvent être collés ou saisis directement lors de l’édition. Après avoir saisi votre shortcode, appuyez sur Entrée ou sortez du shortcode et il devrait s’afficher immédiatement sous sa forme rendue.
Une autre façon d’ajouter des shortcodes est de cliquer sur l’élément Shortcode dans votre inspecteur. Cela ouvrira une fenêtre contextuelle répertoriant tous les shortcodes disponibles sur votre site. Sélectionnez-en un ou double-cliquez sur l’un d’eux pour l’insérer.
Vous pouvez modifier les shortcodes de 2 façons :
Les attributs de shortcode ne peuvent pas être détectés par Page Builder Sandwich. Vous devrez donc les saisir manuellement. Nous travaillons sur un moyen d’intégrer les shortcodes dans le système pour faciliter la tâche de tout le monde. Restez à l’affût pour cette nouveauté.
Vous pouvez intégrer du contenu provenant de divers sites comme des vidéos YouTube, des vidéos Vimeo, des photos Instagram, des photos Flickr, des Tweets et même des commentaires Reddit en collant directement leurs URL de permalien.
https://www.youtube.com/watch?v=dQw4w9WgXcQ
Vous pouvez trouver une liste des URL intégrables dans le codex WordPress : https://codex.wordpress.org/Embeds
Vous pouvez également installer d’autres extensions qui ajoutent la prise en charge d’URL d’intégration supplémentaires. Par exemple, les URL Wistia ne sont pas prises en charge nativement par WordPress ; vous pouvez installer leur extension pour activer l’intégration, après quoi PB Sandwich devrait également pouvoir les gérer.
Veuillez noter qu’une ligne entière de texte ne doit contenir que l’URL pour que cela fonctionne.
Vous pouvez également coller directement des codes d’intégration.
Les codes d’intégration ressemblent à ceci :
<iframe width="420" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
Veuillez noter qu’une ligne entière de texte ne doit contenir que le code d’intégration pour que cela fonctionne.
Cliquez sur l’outil « Ajouter un média », puis collez votre URL dans l’onglet « Insérer à partir d’une URL ».
Vous ne pouvez modifier que le contenu des pages, articles et types de publication personnalisés en utilisant Page Builder Sandwich.
Vous ne pouvez cependant pas modifier les fichiers de modèle de thème tels que :
Voyez les choses ainsi : s’il y a un lien « Modifier l’article » ou « Modifier la page » dans votre barre d’administration sur le front-end, alors la page devrait être modifiable.
Markdown est essentiellement une syntaxe que vous saisissez lors de la modification afin d’ajouter ou de modifier la mise en forme de votre texte. Cela ressemble à des touches de raccourci, mais au lieu d’appuyer sur la combinaison, vous la tapez.
Vous trouverez ci-dessous une liste de toutes les syntaxes Markdown prises en charge dans Page Builder Sandwich.
## Titre2
### Titre3
jusqu’à :
###### Titre6
> Citation
(4 espaces)Texte préformaté/Code
* Liste à puces - Liste à puces
1. Liste numérotée 1) Liste numérotée
- ------------------------------(ou plusieurs tirets)
La saisie d’URL sera automatiquement convertie en lien :
Rendez-vous sur https://pagebuildersandwich.com
Rendez-vous sur [Page Builder Sandwich](https://pagebuildersandwich.com
Page Builder Sandwich a été créé pour être aussi discret que possible, afin que les autres extensions ne rencontrent aucun problème de coexistence avec la nôtre.
Parfois cependant, il existe des exceptions. Vous trouverez ci-dessous une liste d’extensions qui présentent quelques particularités lorsqu’elles fonctionnent aux côtés de Page Builder Sandwich. Cela ne signifie pas nécessairement qu’elles ne fonctionnent pas ou qu’elles sont incompatibles, mais seulement que certains comportements peuvent être différents.
Nous continuerons à mettre à jour cette liste. Si vous avez constaté quelque chose, n’hésitez pas à envoyer un ticket d’assistance à [email protected]
Dans la version premium de Page Builder Sandwich, vous pouvez utiliser vos propres icônes SVG / vectorielles. Voici comment procéder :
Les icônes téléversées peuvent également être utilisées comme puces dans les listes à puces et comme icônes de bouton.
Remarque : Si votre icône n’apparaît pas dans vos recherches, il se peut que le nom de fichier n’ait pas été analysé correctement par PBS. Dans ce cas, vous pouvez utiliser les termes « custom » ou « upload » pour trouver vos icônes téléversées.
Vérifie si PBS est activé et en mode édition.
if ( PBSEditor.isEditing() ) {
// Faire quelque chose lors de l'édition.
}
Aucun.
Booléen. True lors d’une édition en cours, false hors édition.
Utilisé dans l’iframe utilisé par PBS pour afficher sa vue responsive pendant l’édition. Ceci est appelé juste avant la fermeture de la balise <head> et peut être utilisé pour ajouter des scripts et des styles.
Aucun.
add_action( 'pbs_iframe_header', 'change_bg_color' );
function change_bg_color() {
?>
<style>
body {
background-color: hotpink;
}
</style>
<?php
}
Si vous rencontrez des difficultés, nous sommes là pour vous aider ! Mais veuillez d’abord consulter les pages de documentation, vous pourriez y trouver la réponse et gagner du temps.
Envoyez-nous vos demandes d’assistance par e-mail à [email protected]
Déclenché lorsque l’utilisateur bascule entre les différentes vues adaptatives.
Aucun.
Vous pouvez empêcher PB Sandwich d’apparaître sur le front-end à l’aide du filtre pbs_is_editable_by_user.
Par exemple, pour empêcher PB Sandwich d’apparaître dans un type de publication personnalisé identifié par le slug slider, vous pouvez ajouter ce morceau de code dans votre fichier functions.php
add_filter( 'pbs_is_editable_by_user', 'stop_pbs_in_sliders' );
function stop_pbs_in_sliders( $editable ) {
if ( is_singular( 'slider' ) ) {
return false;
}
return $editable;
}
Pour désactiver PB Sandwich pour une page/un article spécifique, vous pouvez utiliser l’ID de la publication pour vérifier :
add_filter( 'pbs_is_editable_by_user', 'stop_pbs_for_123' );
function stop_pbs_for_123( $editable ) {
global $post;
if ( is_singular() && ! empty( $post ) ) {
if ( '123' === $post->ID ) {
return false;
}
}
return $editable;
}
PBS envoie des statistiques d’utilisation pour les utilisateurs ayant donné leur accord chaque fois qu’ils enregistrent dans l’éditeur de PBS. Ce filtre peut être utilisé pour cesser d’envoyer des données.
$true
Booléen. C’est toujours vrai.
Si vous rencontrez des difficultés, nous sommes là pour vous aider ! Mais veuillez d’abord consulter les pages de documentation, vous pourriez y trouver la réponse et vous gagnerez du temps.
Envoyez-nous vos demandes de support par e-mail à [email protected]
Déclenché lorsqu’une option (depuis l’inspecteur) a été modifiée.
Aucun.
PBS >= 4.3
PBS ajoute un wrapper pour identifier la zone de contenu d’un article. Ceci est appelé avant que le wrapper ne soit placé.
$content
Chaîne. Le contenu de l’article auquel le wrapper a été appliqué.
$all_shortcodes = PageBuilderSandwich::get_all_shortcodes()
Aucun.
Array. Un tableau de toutes les balises de shortcode détectées.
PBS >= 4.3
Remplace la décision de charger ou non PBS sur le front-end et d’autoriser l’utilisateur à utiliser PBS pour modifier la publication.
$is_editable
Booléen. True si la publication doit être modifiable avec PBS. False dans le cas contraire
Empêcher les post_types portfolio d’être modifiables avec PBS
add_filter( 'pbs_is_editable_by_user', 'disallow_portfolios' );
function disallow_portfolios( $is_editable ) {
global $post;
if ( $post ) {
if ( 'portfolio' === get_post_type( $post ) ) {
return false;
}
}
return $is_editable;
}
Utilisé au sein de l’iframe utilisée par PBS pour générer sa vue responsive lors de l’édition. Ceci est appelé juste avant la fermeture de la balise <body> et peut être utilisé pour ajouter des scripts et des styles.
Aucun.
PBS ajoute un wrapper pour identifier la zone de contenu d’un article. Ceci est appelé après que le wrapper a été placé.
$content
Chaîne. Le contenu de l’article avec le wrapper appliqué.
PBS >= 4.3
Récupère l’instance de PageBuilderSandwich
$pbs = PageBuilderSandwich::instance()
Aucun.
Objet PageBuilderSandwich. L’instance actuelle de la classe PBS.
PageBuilderSandwich::is_editable_by_user()
Aucun.
Booléen. True si PBS peut modifier la publication, false dans le cas contraire.
Un filtre pour modifier les styles CSS en cours d’enregistrement pour une publication. Ceci est appelé lorsqu’un enregistrement a été initié depuis l’éditeur PBS.
$style
Chaîne. Les styles CSS envoyés pour l’enregistrement.
$post_id
Entier. L’identifiant de la publication que nous enregistrons.
Appelé lorsque l’éditeur PBS termine son chargement (non appelé lorsque l’utilisateur clique sur le bouton pour commencer les modifications)
Faire quelque chose après le chargement de PBS
wp.hooks.addAction( 'pbs.init', function() {
console.log( 'PBS is ready!' );
}
Une liste de balises de shortcode à masquer dans le sélecteur de shortcodes de PBS. Utilisez ceci si vous avez des shortcodes apparaissant dans la fenêtre contextuelle du sélecteur que vous avez déjà dépréciés ou que vous souhaitez simplement masquer aux utilisateurs.
$shortcodes
Tableau. Un tableau de balises de shortcode.
Masquer le shortcode du sélecteur.
add_filter( 'pbs_shortcodes_to_hide_in_picker, 'hide_embed_shortcode' );
function hide_embed_shortcode( $shortcodes ) {
$shortcodes[] = 'embed';
return $shortcodes;
}
Ajoute des propriétés Javascript à l’objet pbsFrontendParams sur le front-end. L’objet pbsFrontendParams est disponible sur le front-end même lorsque l’utilisateur est connecté et en cours d’édition.
$params
Tableau. Un tableau de clés et de valeurs qui deviendront disponibles dans la variable Javascript globale pbsFrontendParams
Rendre une variable accessible sur le front-end
add_filter( 'pbs_localize_frontend_scripts, 'add_my_property' );
function add_my_property( $params ) {
// This will be available in Javascript under pbsFrontendParams.myProperty
$params['myProperty'] = 'My Property';
return $params;
}
Appelé juste avant que l’éditeur n’enregistre le contenu. Vous pouvez l’utiliser pour ajouter des données supplémentaires à envoyer lors de l’enregistrement (cela n’enregistre pas les données, cela les envoie simplement via Ajax au backend)
payload
Objet FormData. Les données envoyées via Ajax pour l’enregistrement.
wp.hooks.addAction( 'pbs.save.payload', function( payload ) {
// Ajouter des données à envoyer lors de l'enregistrement.
payload.append( 'my_data', 'My Data' );
}
La majeure partie de Page Builder Sandwich est en Javascript, et nous avons ajouté un ensemble de méthodes afin que les développeurs puissent étendre et ajouter davantage de fonctionnalités à notre constructeur de page.
Pour faciliter la tâche des développeurs, nous nous sommes inspirés du fonctionnement de WordPress – via les hooks !
Dans WordPress, vous utilisez généralement les fonctions add_filter() et add_action() pour modifier ou enrichir le comportement de WP. De la même manière dans PBS, vous pouvez utiliser wp.hooks.addFilter() et wp.hooks.addAction().
La façon de les utiliser est également la même : utilisez les filtres pour modifier des éléments et les actions pour effectuer des opérations supplémentaires. Ces deux appels de fonction sont essentiellement identiques à leurs homologues PHP, sauf qu’ils s’exécutent en Javascript.
Afin de ne pas confondre les hooks PHP et les hooks Javascript, nous avons nommé les hooks Javascript avec un « period-case » (terme inventé). Les hooks PHP utilisent tous le snake case :
Consultez les catégories Actions Javascript et Filtres Javascript dans le menu de gauche pour parcourir tous les hooks.
Pour les curieux, nous utilisons https://github.com/carldanley/WP-JS-Hooks pour ajouter ces astucieux appels de hooks en Javascript
Si vous ne retrouvez pas où vous avez rangé votre copie de l’extension Premium, vous pouvez vous rendre ici et saisir votre adresse e-mail pour la récupérer. L’extension vous sera envoyée par e-mail.
https://dashboard.freemius.com/license-recovery/203/page-builder-sandwich/
Ajoute des propriétés JavaScript à l’objet pbsParams sur le front-end. L’objet pbsParams est disponible sur le front-end lorsque l’utilisateur est connecté et en mesure de modifier la page.
Cette variable contient également de nombreuses propriétés utilisées par PBS lors de l’édition, telles que les nonces, une liste de tous les shortcodes chargés et les chaînes de traduction.
$params
Tableau. Un tableau de clés et de valeurs qui deviendront disponibles dans la variable JavaScript de niveau window pbsParams
Ajouter un shortcode non détecté dans l’éditeur
add_filter( 'pbs_frontend_scripts, 'add_my_shortcode' );
function add_my_shortcode( $params ) {
$params['shortcodes'][] = 'my_shortcode';
return $params;
}
Met en file d’attente un script ou un style avec PBS. Ceci est appelé uniquement lorsque la publication est modifiable avec PBS. Lorsque la page n’est pas modifiable avec PBS, cela n’est pas utilisé du tout.
Aucun.
Lorsque PBS se charge, met également en file d’attente my-script.js
add_action( 'pbs_enqueue_scripts, 'add_my_script' );
function add_my_script() {
wp_enqueue_script( 'my-script' , plugins_url( 'js/my-script.js', __FILE__ ) );
}
Il s’agit d’une fonctionnalité premium disponible dans la version 4.0.1+
Les liens d’ancrage avec défilement sur la même page sont des liens qui pointent vers un emplacement spécifique sur la même page. Lorsque vous cliquez sur un lien de même page, votre navigateur défile vers la zone ciblée.
Vous avez besoin de deux éléments pour créer un lien d’ancrage sur la même page :
Choisissez n’importe quel élément vers le bas de votre page, puis ouvrez ses propriétés. Dans la section avancée, ajoutez une classe personnalisée ou un ID personnalisé nommé « go_here »
Créez maintenant un lien ou ajoutez un élément bouton quelque part vers le haut de votre page. Au lieu d’ajouter une URL comme lien, utilisez « .go_here » (avec le point) si vous avez ajouté « go_here » en tant que classe personnalisée ; ou utilisez « #go_here » (avec le dièse) si vous l’avez ajouté en tant qu’ID personnalisé.
Après avoir enregistré votre page, lorsque vous cliquez sur votre lien/bouton, il devrait maintenant défiler de manière fluide vers l’élément situé au bas de votre page.
Les ancres nommées telles que
<a name="go_here"></a>
peuvent également être ciblées en ajoutant un lien vers « #go_here » (avec le dièse)
Vous pouvez également cibler d’autres zones de votre page, même en dehors de la zone de l’éditeur, tant que vous les ciblez à l’aide de leurs noms de classe ou de leurs ID.
Appelé après l’enregistrement du contenu. Ceci est appelé lorsqu’un enregistrement a été initié depuis l’éditeur PBS.
Aucun
Un filtre pour modifier les données de la publication à enregistrer. Il est appelé lorsqu’un enregistrement a été initié depuis l’éditeur PBS.
$post_data
Tableau. Les données finales de la publication à enregistrer, ceci est directement transmis à wp_update_post() par la suite.
$_POST
Tableau. Les données brutes de la publication envoyées depuis l’éditeur pour l’enregistrement. Le nonce a déjà été vérifié.
$post_id
Entier. L’ID de la publication que nous enregistrons.
add_filter( 'pbs_save_content_data', 'save_always_as_draft', 10, 3 );
function save_always_as_draft( $post_data, $_post, $post_id ) {
// For some reason, we always want the post to be a draft.
$post_data['post_status'] = 'draft';
return $post_data;
}
Appelé juste avant l’enregistrement du contenu. Ceci est appelé lorsqu’un enregistrement a été initié depuis l’éditeur PBS.
Aucun
Si vous êtes développeur de thèmes, inclure PBS dans votre thème peut considérablement augmenter la valeur de votre produit.
Contactez-nous à [email protected], collaborons !
CloudFlare est un CDN DNS gratuit largement utilisé. Il est excellent, mais PBS rencontre actuellement des problèmes avec la fonctionnalité Rocket Loader. Rocket Loader améliore le temps de chargement des fichiers Javascript, mais il perturbe les dépendances et l’ordre d’appel des scripts de PBS. Si Rocket Loader est activé, le bouton de modification de Page Builder Sandwich n’apparaîtra pas (et aucune erreur de console Javascript ne s’affichera).
Pour désactiver Rocket Loader, connectez-vous à votre compte CloudFlare et accédez aux paramètres de votre domaine. Rendez-vous dans les paramètres Speed :
Faites ensuite défiler vers le bas jusqu’aux paramètres de Rocket Loader, puis assurez-vous que le paramètre est réglé sur off :
Après avoir désactivé cette option, veillez à purger l’intégralité du cache de votre site depuis les paramètres de Cache :
Après avoir purgé la totalité de votre cache, vous pouvez actualiser la page et le bouton de modification de Page Builder Sandwich devrait maintenant s’afficher.
Un filtre pour modifier le contenu de la publication à enregistrer. Ceci est appelé lorsqu’un enregistrement a été initié depuis l’éditeur PBS.
$content
Chaîne. Le contenu final de la publication à enregistrer.
$post_id
Entier. L’ID de la publication que nous enregistrons.
Depuis la version 4.0, vous pouvez désormais basculer entre les vues ordinateur, tablette et téléphone mobile pendant l’édition ! Nous appelons cela le mode responsive. En mode responsive, votre site se redimensionne à une taille plus petite pour simuler son apparence sur des écrans plus petits.
Lorsque vous affichez votre site en vue tablette ou téléphone mobile, vous disposerez de fonctionnalités d’édition limitées. Avec cela, vous pouvez UNIQUEMENT effectuer les actions suivantes :
* PBS applique certains styles responsives à vos éléments et rangées, de sorte que certaines marges ne pourront pas être ajustées.
Voici quelques actions que vous ne pouvez pas effectuer :
Si vous visualisez votre site en vue tablette ou téléphone mobile, tout ajustement de marge que vous effectuez s’applique uniquement à la vue actuelle et à la vue inférieure. Cela vous permet d’ajuster vos designs pour les rendre plus attrayants sur des écrans plus petits, indépendamment de la version complète pour ordinateur.
Voici un exemple pour clarifier les choses.
Cela ne s’applique qu’aux ajustements de marges ; les modifications de texte ou de style de texte sont appliquées à toutes les tailles d’écran.
Lors de l’affichage dans les vues tablette ou téléphone mobile, vos rangées disposeront d’un nouveau bouton de barre d’outils en forme d’« œil » qui apparaîtra lorsque vous passerez la souris dessus. En cliquant dessus, vous pourrez afficher/masquer la rangée pour la taille d’écran actuelle.
Les rangées masquées deviendront légèrement transparentes pendant l’édition pour indiquer qu’elles seront masquées une fois l’édition terminée.
Veuillez noter que cette fonctionnalité n’est disponible que pour les rangées.
Si vous utilisez Varnish Cache et qu’après avoir enregistré vos modifications vous voyez toujours votre ancien contenu, il est alors possible que Varnish Cache ne se soit pas vidé automatiquement.
Il existe des extensions WordPress qui vous permettent de vider votre cache : https://wordpress.org/plugins/search/varnish+cache/
Si cela ne fonctionne pas, vous pouvez également purger manuellement Varnish Cache en exécutant cette commande dans un terminal :
curl -X PURGE http://mysite.com/my-page/
Markdown est essentiellement une syntaxe que vous saisissez lors de l’édition afin d’ajouter ou de modifier la mise en forme de votre texte. Ce sont comme des touches de raccourci, mais au lieu d’appuyer sur la combinaison, vous les saisissez au clavier.
Vous trouverez ci-dessous la liste de toutes les syntaxes Markdown prises en charge dans Page Builder Sandwich.
(Attention aux espaces)
# Titre1
## Titre2
jusqu’à :
###### Titre6
> Citation de bloc
(4 espaces)Texte préformaté/Code
* Liste à puces - Liste à puces
1. Liste numérotée 1) Liste numérotée
- ------------------------------(ou plusieurs tirets)
La saisie d’URL les convertira automatiquement en lien :
Rendez-vous sur https://pagebuildersandwich.com
Tapez « lorem » puis appuyez sur Tab pour générer un faux texte de remplissage.
Pour désactiver PBS, connectez-vous d’abord à votre tableau de bord / back-office, puis accédez à Extensions > Extensions installées :
Une fois sur la page des extensions, faites défiler votre liste d’extensions et recherchez celle de Page Builder Sandwich. Juste en dessous du nom, vous devriez voir un lien Désactiver ainsi que d’autres liens tels que Modifier ou Modifier la licence (cela peut varier selon votre site). Cliquez sur le lien Désactiver pour désactiver l’extension.
Dans la plupart des éléments (à l’exception des shortcodes toutefois), vous pouvez définir une animation d’entrée qui se déclenche lorsque l’élément devient visible sur votre écran.
Pour ce faire, survolez un élément pour faire apparaître la barre d’outils, puis cliquez sur le bouton d’engrenage.
Cela devrait ouvrir l’inspecteur. Rendez-vous dans la section Animations, ouvrez-la, puis choisissez une animation.
Après avoir choisi une animation, elle se jouera pour vous donner un aperçu. Vous pouvez affiner davantage l’animation grâce aux autres options proposées.
Les animations se déclenchent uniquement lorsque l’utilisateur fait défiler la page et que l’élément apparaît à l’écran. Si l’élément est déjà visible lorsque vous arrivez sur votre page, il ne s’animera pas.
Non, absolument pas ! Toutes vos pages et tout votre contenu devraient rester sur votre site. Cela signifie que vous pouvez désactiver PBS en toute sécurité lors de la mise à niveau de la version gratuite vers la version premium, ou lorsque vous effectuez simplement des tests.
Cependant, tout n’aura pas la même apparence. Vous remarquerez que certains éléments de votre page changeront car PBS contient des styles et des scripts supplémentaires requis par certains des éléments les plus élaborés.
Voici quelques éléments qui resteront lorsque vous désactiverez PBS :
Voici quelques éléments qui disparaîtront lorsque vous désactiverez PBS :
Si vous avez enregistré vos modifications sur votre page et…
cela peut signifier que l’enregistrement n’a pas déclenché la purge des données stockées par votre solution de mise en cache.
Si vous utilisez un type de solution de mise en cache – comme une extension de mise en cache telle que W3 Total Cache, un logiciel de mise en cache côté serveur tel que Memcached ou Redis, ou un cache DNS comme CloudFlare – elle n’a peut-être pas purgé votre contenu enregistré.
Une façon de vérifier si c’est le cas consiste à modifier votre page dans le back-end (de manière habituelle), puis à visualiser votre page sur le front-end. Si votre contenu n’a pas changé, votre cache ne s’est peut-être pas vidé automatiquement.
Certaines solutions de mise en cache non-WordPress disposent d’une extension WordPress complémentaire qui peut aider à purger ou vider le cache actuel, les solutions WordPress disposant généralement de boutons ou d’options prévus à cet effet.
Il est également possible qu’une erreur PHP se soit produite lors de l’enregistrement.
Pour vérifier si c’est ce qui arrive, ouvrez votre console de développement (de préférence dans Chrome), puis accédez à l’onglet Réseau. Une fois là-bas, enregistrez vos modifications dans PBS : vous devriez voir plusieurs entrées pointant vers admin-ajax.php. Si vous voyez cela en rouge, cela signifie qu’une erreur s’est produite. Vérifiez si vous voyez quelque chose comme ceci :
Si c’est le cas, veuillez nous envoyer un e-mail à [email protected] avec les identifiants de connexion nécessaires afin que nous puissions examiner la situation et la corriger pour vous.
Veuillez lire l’article sur la compatibilité avec Wordfence ici : http://docs.pagebuildersandwich.com/article/214-wordfence-firewall-setup-compatibility
Remarque : cela ne s’applique pas aux clients Envato
Si vous rencontrez des erreurs lors de l’activation de votre licence, voici quelques solutions à essayer…
Cela arrive principalement aux personnes effectuant une mise à jour vers une version supérieure. Si vous avez directement mis à jour les fichiers de l’extension manuellement et sauté l’ensemble des étapes de mise à jour ou de désactivation-activation, certains processus n’ont peut-être pas fonctionné correctement. Veuillez désactiver l’extension, puis la réactiver et tenter de saisir à nouveau votre licence.
Depuis la version 3.2, Page Builder Sandwich est intégré à Freemius. Il est arrivé que l’effacement des données Freemius corrige les erreurs d’activation de licence. Voici comment procéder.
Rendez-vous sur votre tableau de bord, puis modifiez votre URL en http://yoursite.com/wp-admin/admin.php?page=freemius (n’oubliez pas de modifier l’URL pour qu’elle corresponde à votre site). Si vous arrivez sur la page ci-dessous, vous êtes au bon endroit.
Cliquez sur le bouton Delete All Accounts, puis cliquez également sur le bouton Clear API Cache. Après avoir fait cela, essayez de saisir à nouveau votre clé de licence.
Si cela ne fonctionne pas, veuillez nous contacter à l’adresse [email protected] en nous fournissant des détails sur le problème et sur votre site.
Pour ajouter rapidement du texte factice, tapez le mot « lorem », puis appuyez sur Tab ou Entrée pour ajouter rapidement du texte de remplacement lorem ipsum :
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dolor sed numquam? Sapiente autem adipisci, minus expedita enim, suscipit laboriosam deleniti possimus sequi pariatur explicabo numquam alias atque officia sit.
Ici, j’ai ajouté une ligne avec une couleur d’arrière-plan, puis j’ai ajouté une image à l’intérieur. La voici :
Pour la faire « dépasser » au-dessus du conteneur, survolez avec votre souris l’élément que vous souhaitez déplacer. Ensuite, lorsque les contours apparaissent, déplacez votre souris au-delà du haut du contour. Cela devrait afficher la valeur actuelle de la marge supérieure :
Cliquez et faites glisser la marge supérieure vers le haut pour réduire votre marge, afin d’obtenir une valeur négative :
Maintenant, l’image « dépasse » de la ligne !
Si l’élément est tronqué lorsqu’il dépasse de la ligne, ouvrez l’inspecteur de propriétés de la ligne et désactivez l’option overflow hidden dans les options Avancées :
Pour intégrer du contenu provenant de sites Web externes, collez simplement l’URL puis appuyez sur Entrée. Par exemple, vous pouvez copier et coller cette URL depuis YouTube :
https://www.youtube.com/watch?v=dQw4w9WgXcQ
L’intégration via iframe est également possible en collant des codes d’intégration <iframe>. Par exemple, copiez et collez cette chaîne d’intégration :
<iframe width= »560″ height= »315″ src= »https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0″ frameborder= »0″ allowfullscreen></iframe>
Vous pouvez intégrer des URL de sites répertoriés dans le Codex WordPress : https://codex.wordpress.org/Embeds et de tout site compatible oEmbed.
Page Builder Sandwich fonctionne avec toutes les extensions de mise en cache. Cependant, vous pourriez rencontrer des problèmes si vous activez leur fonctionnalité de minification ou de mise en cache.
Assurez-vous simplement que la minification est désactivée pour les utilisateurs connectés, et tout devrait fonctionner correctement.
Nous ne présentons ici que les réglages de W3 Total Cache, mais les autres extensions de mise en cache et de minification devraient également proposer des réglages similaires.
Assurez-vous que l’option Don’t cache pages for logged in users est cochée sous Performance > Page Cache
Si vous utilisez la minification, assurez-vous que Disable minify for logged in users est coché sous Performance > Minify
Si vous essayez de faire glisser les poignées de marge ou de remplissage supérieur et inférieur et que les marges/remplissages de l’élément ne changent pas, il se peut que d’autres styles remplacent de force toute modification de style. Cela peut également se produire lorsque vous ne pouvez pas modifier les arrière-plans, les bordures ou lorsque les images transparentes reçoivent systématiquement une couleur d’arrière-plan.
Pour identifier le problème, ouvrez l’inspecteur de votre navigateur et inspectez l’élément. Parcourez les styles de cet élément. Si vous voyez quelque chose comme ceci :
Vous pouvez alors être certain que votre thème ou une extension empêche l’application de tout autre style à l’élément. Survolez la feuille de style avec la souris pour découvrir de quel thème/extension elle provient.
Pour corriger cela, supprimez la mention « ! important » du style, et vous devriez pouvoir à nouveau appliquer des styles. Il se peut que vous deviez contacter l’auteur du thème ou de l’extension pour corriger ce problème.
Remarque : Par défaut, l’en-tête est supprimé de la page d’accueil uniquement.
Pour supprimer l’en-tête ou le menu de n’importe laquelle de vos pages, vous aurez besoin d’une extension qui vous permet d’ajouter du CSS personnalisé, comme Jetpack.
Pour supprimer l’en-tête, vous aurez besoin de l’identifiant (ID) de votre publication, puis ajoutez ce CSS personnalisé (remplacez le 9999 ici par l’identifiant de votre publication) :
body.page-id-9999 #masthead {
display: none;
}
Pour supprimer les menus d’une page (remplacez le 9999 ici par l’identifiant de votre publication) :
body.page-id-9999 #header-wrapper {
display: none;
}
ou pour supprimer le menu de votre page d’accueil uniquement :
body.page-id-9999 #header-wrapper {
display: none;
}
Vous pouvez ajouter des images d’arrière-plan à vos lignes et arrière-plans. De plus, vous pouvez également teinter votre image d’arrière-plan avec une couleur pour qu’elle s’intègre mieux à votre design.
Par exemple, j’ai ici une ligne avec une image d’arrière-plan et du texte blanc superposé. Il est assez difficile de lire le texte actuellement en raison de l’image d’arrière-plan que j’ai choisie.
Pour améliorer l’apparence, nous pouvons ajouter de la couleur à notre image d’arrière-plan. Pour ce faire, survolez la ligne avec votre souris, puis cliquez sur l’icône d’engrenage de la ligne pour ouvrir ses propriétés. Accédez aux options d’Arrière-plan, puis activez la Teinte de l’image d’arrière-plan.
Une fois activée, modifiez la couleur d’arrière-plan et une teinte colorée sera désormais ajoutée à votre image d’arrière-plan. Vous pouvez également modifier l’intensité ou l’opacité de la teinte. Voici mon arrière-plan teinté en vert pour rendre le texte plus visible :
Page Builder Sandwich vérifie régulièrement si vous êtes toujours connecté à WordPress. Cela permet de s’assurer que vos modifications seront bien enregistrées lorsque vous cliquerez sur le bouton d’enregistrement. C’est également utilisé pour le verrouillage des publications et les enregistrements automatiques.
Nous nous appuyons sur l’API Heartbeat de WordPress pour effectuer nos vérifications, et celle-ci dépend à son tour des cookies et des sessions du navigateur. Ainsi, si vous continuez à recevoir ces popups « session expirée » pendant la modification, il se peut que quelque chose empêche WordPress de vous suivre correctement. Voici quelques démarches que vous pouvez effectuer pour résoudre ce problème :
Si vous avez installé des extensions de mise en cache, ou si vous utilisez une mise en cache DNS ou toute autre forme de cache, videz-les. Videz également le cache de votre navigateur. Il est possible que les scripts les plus récents de votre site ne vous soient pas fournis.
Il est également possible que vos cookies aient été corrompus ; cela peut être facilement résolu en supprimant les cookies de votre navigateur depuis ses réglages. Cette option se trouve généralement près de celle permettant de vider le cache de votre navigateur.
Allez dans Réglages > Général et vérifiez vos réglages. Recherchez les options Adresse web de WordPress (URL) et Adresse web du site (URL). Leurs domaines et protocoles doivent correspondre à votre domaine réel. Par exemple, si l’une contient « http:// » mais que vous accédez à votre site en utilisant « https:// », les réglages doivent alors indiquer « https:// ». Un autre problème courant est que l’une de ces URL comporte les « www » et l’autre non.
Celles-ci doivent correspondre :
ou :
Pour corriger cela, vous pouvez modifier les réglages dans Réglages > Général. Si vous ne pouvez pas modifier ces réglages, vous pouvez ouvrir votre client FTP, modifier le fichier wp-config.php et y ajouter les lignes :
define( 'WP_HOME', 'http://example.com' ); define( 'WP_SITEURL', 'http://example.com' );
| Version Lite | Non disponible |
| Version Premium | Toutes les fonctionnalités sont disponibles
|
Les carrousels sont une manière originale d’ajouter du contenu qui défile en boucle sous les yeux de l’utilisateur. Page Builder Sandwich dispose d’un élément de carrousel natif pouvant être utilisé, éliminant ainsi le besoin d’extensions de carrousel externes.
Cliquer sur le bouton d’engrenage de l’élément carrousel vous permet de configurer le comportement du carrousel, comme l’animation des diapositives, le délai et bien plus encore. Lors de la création, vous disposez de trois diapositives de carrousel sur lesquelles travailler, avec la possibilité d’ajouter ou de supprimer des diapositives. Toutes ces diapositives acceptent les éléments couramment utilisés, tels que du texte, des images et certains codes courts.
Changer de diapositive est aussi simple que de sélectionner les boutons de navigation eux-mêmes. L’ordre des diapositives peut également être modifié, via les propriétés (icône d’engrenage) également.
Pour modifier le statut de votre publication, survolez avec votre souris l’indicateur du menu déroulant sur le bouton d’enregistrement en haut à gauche de l’écran. Cela affichera plus d’options d’enregistrement.
Si vous utilisez la version lite, vous avez peut-être remarqué les drapeaux triangulaires jaunes. Ceux-ci indiquent si un certain bouton/élément/option est une fonctionnalité premium.
Si vous souhaitez les masquer, vous pouvez accéder à votre tableau de bord, vous rendre sur la page des réglages dans PBSandwich > Settings et cocher l’option Hide Premium Feature Flags
| Version Lite | Toutes les fonctionnalités sont disponibles |
| Version Premium | Toutes les fonctionnalités sont disponibles |
Cliquez sur l’élément HTML dans l’Inspecteur pour ajouter un nouvel élément HTML, une fenêtre modale devrait apparaître. Saisissez ou collez-y votre code HTML, puis cliquez sur enregistrer le HTML. Votre HTML devrait maintenant apparaître à l’intérieur de l’éditeur.
Survolez l’élément HTML avec votre souris pour afficher la barre d’outils. Vous pouvez modifier votre HTML en cliquant sur l’icône de crayon dans la barre d’outils, ou en double-cliquant sur l’élément lui-même.
Nous ne voulions pas d’une interface encombrée, et souhaitions que tout soit intuitif et facile à découvrir. Ainsi, même si l’interface utilisateur de Page Builder Sandwich a l’air simple, elle est particulièrement puissante et vous permet d’effectuer de nombreuses actions pendant l’édition.
Vous pouvez également faire beaucoup de choses pratiques à l’aide de votre curseur de souris. Des superpositions et des barres d’outils interactives apparaissent lorsque vous survolez différents éléments avec votre souris. Chacune d’entre elles permet d’effectuer différentes actions, telles que :
Une fois que vous commencez à éditer avec PBS, survolez le titre de votre page/article avec votre souris, un contour devrait apparaître autour. Cliquez sur le titre pour y placer votre curseur et le modifier.
Les outils de mise en forme ne sont pas disponibles dans la zone du titre, vous ne pouvez pas modifier ses styles ni ajouter d’éléments au titre.
Les lignes et colonnes sont des outils que vous pouvez utiliser pour créer du contenu structuré en sections.
Lorsque vous effectuez des modifications avec Page Builder Sandwich à partir d’une page/d’un article nouvellement créé(e), le contenu que vous saisissez sera entièrement placé dans une seule colonne. Cela convient parfaitement à la rédaction d’articles de blog, mais si vous souhaitez concevoir des mises en page spéciales pour des pages de destination ou des pages de contact, vous préférerez probablement une disposition en 2 colonnes ou même un mélange de différentes colonnes sur l’ensemble de votre page.
Vous pouvez ajouter des lignes et colonnes en utilisant ces boutons dans l’inspecteur :
Une fois ajoutée, votre nouvelle ligne sera entourée d’un contour :
Vous pouvez insérer ce que vous voulez à l’intérieur de vos lignes et colonnes : du texte, des codes courts (shortcodes), des widgets, et même ajouter d’autres lignes et colonnes.
Lorsqu’une ligne (ou un contenu à l’intérieur de votre ligne) est sélectionnée, d’autres options deviennent disponibles dans votre inspecteur. Vous pouvez utiliser ces boutons pour styliser davantage votre section :
Il existe également des options supplémentaires pour styliser vos colonnes en dessous de cela dans l’inspecteur.
Vous pouvez déplacer les lignes vers différents emplacements en cliquant et en maintenant enfoncé sur la ligne elle-même (si vous cliquez et maintenez enfoncé sur un élément à l’intérieur, c’est l’élément qui sera déplacé et non la ligne).
| Version Lite | Non disponible |
| Version Premium | Toutes les fonctionnalités sont disponibles
|
Vous pouvez éventuellement surligner du texte, puis cliquer sur l’élément bouton dans l’inspecteur. Cela devrait ouvrir une fenêtre modale dans laquelle vous pouvez saisir l’URL vers laquelle créer un lien pour votre bouton. Vous pouvez également y rechercher n’importe quelle page web existante sur votre site.
Contrairement aux autres éléments, les boutons sont placés en ligne, ce qui signifie qu’ils seront placés à côté d’autres textes (ou d’autres boutons). Vous ne pouvez pas glisser-déposer des boutons individuels vers d’autres emplacements, mais vous devez plutôt faire glisser le bouton avec le texte qui l’entoure.
Pendant l’édition, lorsque vous cliquez sur un bouton, vous pouvez voir des options de style supplémentaires dans l’inspecteur. Vous pouvez également survoler les boutons avec votre souris pour voir l’URL vers laquelle ils renvoient, ainsi que d’autres commandes.
Remarque : Effectuez cette opération lorsque PBS est déjà installé et activé, et que vous souhaitez le mettre à jour avec un fichier zip que vous avez téléchargé depuis le site ou reçu en pièce jointe par e-mail.
Remarque : Nous utilisons une autre extension pour effectuer les mises à jour, ce qui nous permet de mettre à jour PBS immédiatement sans avoir besoin de le désinstaller au préalable.
Allez dans Extensions > Ajouter, puis dans le champ de recherche, recherchez l’extension « Easy Theme and Plugin Upgrades »
Une fois que vous avez trouvé l’extension, installez-la et activez-la.
Après avoir activé l’extension Easy Theme and Plugin Upgrades, retournez dans Extensions > Ajouter, puis cliquez sur le bouton Téléverser une extension situé près du haut :
Choisissez et installez le fichier zip de Page Builder Sandwich,
Et voilà. Vous devriez maintenant disposer de la nouvelle version de PBS.
| Version Lite | Disponible avec un style limité |
| Version Premium | Toutes les fonctionnalités disponibles
|
Cliquez sur l’élément carte pour ajouter une carte à votre page. Dès que l’élément carte est sélectionné, l’inspecteur devrait afficher les paramètres de la carte. Vous pouvez saisir les coordonnées de latitude et de longitude ou une adresse dans le champ d’emplacement de l’inspecteur pour centrer votre carte sur cette zone. D’autres options de style y sont également disponibles.
Vous pouvez également manipuler l’élément carte en déplaçant la carte ou en effectuant un zoom avant/arrière. Notez que vos modifications sur la carte seront appliquées à l’élément.
Pour les utilisateurs premium, vous pouvez personnaliser le style de votre carte en choisissant une couleur pour la teinter ; une autre option consiste à utiliser snazzymaps.com pour générer des palettes de couleurs puis les utiliser. SnazzyMaps peut être utilisé pour créer des combinaisons de couleurs similaires à celle-ci : https://snazzymaps.com/style/20053/papuportal-dark Pour utiliser ces palettes de couleurs, copiez le tableau de style Javascript dans l’inspecteur.
La hauteur de la carte peut être ajustée, mais la largeur ne le peut pas et s’adaptera toujours à la largeur maximale disponible. Pour modifier sa taille, placez vos cartes dans des lignes et des colonnes. Vous pouvez également configurer les cartes pour qu’elles occupent toute la largeur du navigateur.
Vous pouvez utiliser votre souris pour placer rapidement votre curseur à différents endroits de votre contenu ou pour sélectionner différents éléments.
Vous pouvez également utiliser les touches fléchées de votre clavier pour déplacer votre curseur dans votre contenu. Vous pouvez vous en servir pour vous déplacer au-dessus ou en dessous des rangées.
Lorsque vous travaillez avec des rangées et des colonnes, vous pouvez cliquer sur les bords des rangées pour ajouter du contenu juste après ou avant votre rangée. Cela est particulièrement utile si vous avez plusieurs rangées imbriquées les unes dans les autres et que vous souhaitez ajouter du contenu entre elles.
Si vous ne voyez pas le bouton « Modifier avec Page Builder Sandwich » sur le front-end de votre site, voici quelques pistes à explorer :
Le bouton de modification pour PB Sandwich est disponible dans la barre d’administration sur votre front-end. Assurez-vous que la barre d’administration est visible en vous rendant dans votre administration et en allant dans Utilisateurs > Votre profil puis vérifiez que la case Afficher la barre d’outils lors de la visualisation du site est cochée.
Seuls les articles, les pages et les types de publication personnalisés sont modifiables sur le front-end. Vous ne pouvez modifier des éléments sur le front-end que si vous pouvez les modifier à l’aide de l’éditeur de contenu de WordPress dans le back-end. Les autres zones de votre site – par exemple, la liste des articles de blog sur la page d’accueil, la liste de tous les articles de blog, les listes de catégories, les pages 404, les pages de recherche – sont des pages dynamiques créées par WordPress en lien avec le thème que vous utilisez et ne peuvent pas être modifiées à l’aide de PB Sandwich.
Un bon indicateur pour savoir si la page web actuelle est modifiable est la présence de « Modifier l’article » ou « Modifier la page » dans votre barre d’administration.
Si votre page/article est généré(e) dynamiquement par un thème ou une extension, il ou elle ne sera pas modifiable avec Page Builder Sandwich (et très probablement pas non plus avec d’autres constructeurs de pages). Si vous remarquez que votre éditeur de contenu dans le back-end est vide, mais que l’affichage de votre page sur le front-end est rempli de contenu, c’est un bon indicateur que votre page est générée dynamiquement.
Pour vérifier si votre page est générée dynamiquement, affichez le code source de votre page web (clic droit, puis choisissez « Afficher le code source de la page »). Recherchez le texte « pbs-main-wrapper » ; si vous ne trouvez ce texte nulle part, c’est que votre page est générée dynamiquement.
Voici quelques exemples de contenu généré dynamiquement :
Dans certains cas, le thème n’affichait pas du tout le contenu s’il était vide, ce qui amenait PBS à penser à tort que la page n’était pas modifiable. Pour vérifier si c’est le cas, modifiez votre page/article dans l’éditeur du back-end, essayez d’ajouter n’importe quel texte dans votre contenu (par exemple « bonjour »), puis cliquez sur le bouton « Modifier avec Page Builder Sandwich » depuis cet écran.
Merci à Mathias Hellquist pour cette astuce !
Certains constructeurs de pages vous obligent à choisir entre l’éditeur de contenu par défaut de WordPress et leur propre éditeur. Si vous avez déjà modifié votre page avec un autre constructeur de page, il est possible que celui-ci se soit déjà « approprié » le contenu, empêchant les autres hooks/filtres de contenu de s’exécuter. De ce fait, Page Builder Sandwich peut parfois ne pas réussir à détecter où se trouve votre contenu et n’affichera pas le bouton de modification car il n’y a rien à modifier.
Pour corriger cela, choisissez simplement de ne pas utiliser ce constructeur de page pour cette page/cet article spécifique, et optez plutôt pour l’éditeur de contenu par défaut de WordPress.
Assurez-vous de disposer des droits de modification sur la page
Le bouton de modification n’apparaîtra pas si vous n’avez pas la permission de modifier la page. Par exemple, si vous êtes éditeur ou contributeur et que vous pouvez rédiger des articles de blog sur le site, cela ne signifie pas nécessairement que vous pouvez modifier la page d’accueil ou votre page de contact. Si vous voyez le bouton « Modifier l’article » dans votre barre d’administration, vous devriez également être en mesure de la modifier avec PB Sandwich. Demandez les privilèges de modification à l’administrateur de votre site si vous en avez besoin.
PB Sandwich utilise JavaScript de manière intensive. Si des erreurs JavaScript proviennent d’autres scripts présents sur votre site, cela peut empêcher PB Sandwich de fonctionner. Pour vérifier si c’est le cas, vous pouvez ouvrir la console de développement de votre navigateur pour rechercher les erreurs.
Je vous recommande d’utiliser Chrome pour cette étape. Faites un clic droit sur n’importe quel élément de la page, puis cliquez sur l’option « Inspecter ». Cela fera apparaître une nouvelle zone en bas de votre navigateur, cliquez sur l’onglet « Console ». Si vous avez des erreurs, vous devriez voir quelque chose de similaire :
Si vous avez effectivement une erreur, vous pouvez également obtenir un indice sur son origine en cliquant ou en survolant le nom du script avec votre souris :
Ces erreurs peuvent provenir de votre thème ou d’autres extensions installées. La résolution de ces erreurs permettra à PB Sandwich de fonctionner à nouveau.
Si votre thème ou l’une de vos extensions est à l’origine de l’erreur JavaScript, veuillez nous en informer par e-mail à [email protected] et nous ferons de notre mieux pour résoudre le problème 🙂
Cloudflare est un réseau de diffusion de contenu (CDN) et DNS gratuit très utilisé. C’est un excellent service, mais PBS rencontre actuellement des problèmes avec la fonctionnalité Rocket Loader. Rocket Loader améliore le temps de chargement des fichiers JavaScript, mais il perturbe l’ordre des dépendances et des appels des scripts de PBS. Si Rocket Loader est activé, le bouton de modification de Page Builder Sandwich n’apparaîtra pas (et aucune erreur JavaScript ne s’affichera dans la console).
Pour vérifier si votre site utilise le Rocket Loader de Cloudflare, affichez le code source de votre page web (clic droit, puis choisissez « Afficher le code source de la page »), puis recherchez le texte « rocketscript » ; si vous trouvez ce texte, cela signifie que Rocket Loader est activé.
Consultez l’article sur la compatibilité avec Cloudflare et Rocket Loader pour obtenir les instructions complètes sur la façon de le désactiver.
Très bien, à ce stade, si aucune des solutions ci-dessus ne fonctionne, il est peut-être temps d’expliquer pourquoi il n’apparaît pas et ce qu’il faut faire pour y remédier. Prêt ? C’est parti !
Page Builder Sandwich a besoin de savoir où se trouve le contenu de votre page/article. Pour ce faire, nous détectons le moment où WordPress charge le contenu de la publication et « marquons » cette zone, afin de pouvoir retrouver où se trouvent les éléments importants une fois que tout est chargé.
Parfois, certaines extensions contournent ou remplacent ce processus et essaient de charger le contenu à leur manière. Cela ne pose parfois aucun problème, mais dans certains cas, particulièrement lorsqu’il s’agit de charger le contenu de la publication principale, cela peut empêcher certaines extensions de fonctionner. Lorsqu’une autre extension contourne ce processus de chargement, les « repères » que nous avons placés peuvent être perdus et, lorsque vient le moment pour l’éditeur d’intervenir, il ne parvient plus à localiser votre contenu. Par conséquent, le bouton de modification n’apparaît pas ! Vous constaterez peut-être également que certaines extensions qui ajoutent du contenu à votre page, comme certaines extensions de partage sur les réseaux sociaux, cessent également de fonctionner pour cette même raison.
Page Builder Sandwich a besoin de savoir où se trouve le contenu de votre page/article, et il le fait en s’accrochant au filtre the_content et en ajoutant un conteneur (wrapper) autour de votre contenu principal. Certaines extensions peuvent outrepasser cela et écraser le contenu avec une fonction get_the_content() plus loin dans l’exécution. Malheureusement, cette pratique empêche TOUS les filtres the_content d’être appelés, et le conteneur de PBS est donc perdu. Les modifications apportées par d’autres extensions seraient également perdues.
Il n’y a rien de mal en soi à utiliser get_the_content(), mais cela peut avoir des effets néfastes si cette fonction est utilisée dans la requête principale et dans la page de modèle de publication individuelle (single post) au lieu de l’appel normal à the_content() où tous les filtres the_content sont exécutés.
Vous pouvez vérifier si les « repères » de Page Builder Sandwich sont absents en visitant votre page/article sur le front-end et en affichant le code source de la page tout en étant connecté. Cherchez dans le code si vous trouvez la chaîne :
data-name="main-content"
Si vous la trouvez, il s’agit probablement d’un problème JavaScript quelque part ; indiquez-nous simplement le thème et les extensions que vous utilisez et nous pourrons régler cela.
Mais si vous ne la trouvez pas, il se peut que votre thème (ou une extension, mais il s’agit très probablement du thème s’il s’agit d’une page ou d’un article de blog) effectue des opérations sur le contenu de la publication. Si tel est le cas, vous devriez contacter l’auteur du thème et lui signaler le problème ! Vous pouvez également lui montrer l’explication technique du « pourquoi » ci-dessus, cela peut aider au débogage 🙂
Si vous êtes à l’aise pour bricoler en PHP, vous pouvez essayer de corriger le problème en trouvant le fichier de modèle qui gère le contenu de la publication. Une solution que nous avons rencontrée consiste à remplacer les appels de :
$content = get_the_content();
par :
ob_start(); the_content(); $content = ob_get_clean();<br>
Remarque : la variable PHP peut être différente chez vous, mais le principe reste le même. Si cela fonctionne, il serait également préférable de créer un thème enfant plutôt que d’appliquer cette modification directement dans votre thème. Cette modification pouvant également entraîner des effets secondaires, il est préférable de consulter l’auteur de votre thème à ce sujet.
Page Builder Sandwich n’est pas un constructeur de page comme les autres, il est simple et facile à utiliser.
Vous pouvez regarder la vidéo ci-dessous pour un aperçu rapide.
Tout d’abord, créez une nouvelle page, un nouvel article ou un CPT. Ensuite, consultez votre nouvel article ou n’importe quel article existant sur votre site public (frontend). PBS fonctionne à 100 % en frontend, vous n’aurez pas besoin de bricoler dans le panneau d’administration (backend).
Il devrait y avoir un bouton « Page Builder Sandwich » en haut de votre page (dans votre barre d’administration), cliquez dessus pour commencer l’édition. Vous devriez voir la zone de mise en forme du texte apparaître depuis le haut, et le panneau d’ajout d’éléments apparaître sur le côté. La zone de contenu de votre thème est désormais votre éditeur !
Vous ne pouvez modifier que des pages individuelles avec PBS. Vous ne pouvez pas modifier une liste d’articles de blog ou une page 404, car celles-ci sont générées par votre thème. Les articles, les pages et les types de publication personnalisés (CPT) fonctionnent parfaitement.
C’est maintenant que la magie opère… une fois que vous êtes sur le site public et dans l’éditeur, cliquez sur n’importe quel texte de votre contenu ou cliquez dans votre zone de contenu et commencez à taper ! Contrairement à d’autres constructeurs de page, PBS vous permet de modifier directement le contenu sans avoir à passer par des fenêtres contextuelles.
Pendant l’édition, la zone située en haut s’appelle la barre de mise en forme du texte. Cette barre contient tous les outils de mise en forme que vous utiliserez pour styliser le texte, tels que : les couleurs, le gras, l’italique, les alignements, l’ajout de liens, les puces et bien plus encore. Survolez chaque bouton pour découvrir la fonction de l’outil.
Survolez avec votre souris le bouton Ajouter des éléments en haut à gauche de l’écran pour afficher le panneau d’ajout d’éléments. Vous pouvez également simplement déplacer votre souris vers le côté gauche de l’écran pour le faire apparaître.
Pour insérer un élément, maintenez le clic de votre souris dessus, puis faites-le glisser dans votre zone de contenu. La zone où l’élément sera placé s’affichera en surbrillance. Relâchez le bouton de votre souris pour placer l’élément.
Survolez avec votre souris n’importe quel élément présent dans votre contenu pour faire apparaître des contours et des barres d’outils au-dessus d’eux.
Vous pouvez survoler avec votre souris les bords des contours pour augmenter ou réduire les marges entre les éléments.
Vous pouvez également cliquer sur un bouton de la barre d’outils pour effectuer des actions rapides sur l’élément. En cliquant sur l’icône d’engrenage de la barre d’outils, vous ouvrirez l’inspecteur de propriétés qui contient plus d’options.
L’inspecteur de propriétés vous donne plus de contrôle sur l’apparence de vos éléments. Vous pouvez ajouter de nombreuses choses comme des ombres, des animations, modifier les couleurs de la carte, le rayon des bordures, et bien plus encore.
Vous pouvez également accéder aux propriétés des éléments parents. Par exemple, si vous placez une image dans une colonne et ouvrez l’inspecteur de propriétés, vous pouvez alors accéder aux propriétés de l’image, de la colonne dans laquelle elle se trouve et de la ligne qui contient la colonne.
L’inspecteur de propriétés contient de nombreux réglages différents pour différents éléments, alors assurez-vous de tous les explorer.
Page Builder Sandwich affiche les véritables shortcodes sur le frontend, et vous pouvez également les modifier facilement !
Si vous avez mémorisé vos shortcodes, vous pouvez les insérer en les tapant directement dans votre contenu. Mais si vous ne les avez pas tous mémorisés (qui fait ça ?), l’inspecteur répertorie tous les shortcodes disponibles sur votre site. Faites glisser un bouton Shortcode depuis l’inspecteur vers votre zone de contenu et trouvez celui que vous souhaitez insérer, puis cliquez dessus pour l’insérer.
Les shortcodes sont convertis en contenu réel sur le frontend. Pour les modifier, vous pouvez les sélectionner et examiner leurs attributs dans l’inspecteur. Ou, pour plus de contrôle, vous pouvez double-cliquer sur le shortcode pour le modifier sous sa forme brute. Après avoir effectué vos modifications, votre shortcode se mettra à jour pour refléter les changements.
Vous pouvez cliquer et glisser n’importe quoi et le déplacer n’importe où avec PBS. Lorsque vous faites glisser un élément, déplacez-le au-dessus d’un autre élément de la page, vous pouvez le déplacer au-dessus ou en dessous de tout autre contenu.
Enregistrer votre travail
Une fois que vous êtes satisfait de votre mise en page, cliquez simplement sur le bouton d’enregistrement en haut à gauche de votre page. C’est tout !
Page Builder Sandwich n’est pas comme les constructeurs de pages habituels, il est sans complication et simple à utiliser.
Vous pouvez regarder la vidéo ci-dessous pour un aperçu rapide.
Tout d’abord, créez une nouvelle page, un article ou un CPT. Ensuite, consultez votre nouvel article ou n’importe quel article existant sur votre front-end. PBS est 100 % front-end, vous n’aurez pas à bricoler dans le back-end.
Il devrait y avoir un bouton « Page Builder Sandwich » en haut de votre page (dans votre barre d’administration), cliquez dessus pour commencer l’édition. Vous devriez voir la zone de mise en forme du texte apparaître en haut, et le panneau d’ajout d’éléments apparaître sur le côté. La zone de contenu de votre thème est désormais votre éditeur !
Vous ne pouvez modifier que des pages individuelles avec PBS. Vous ne pouvez pas modifier une liste d’articles de blog ou une page 404, car celles-ci sont générées par votre thème. Les articles, pages et types de publication personnalisés fonctionnent sans problème.
C’est là que ça devient génial… une fois que vous êtes sur le front-end et dans l’éditeur, cliquez sur n’importe quel texte de votre contenu ou cliquez dans votre zone de contenu et commencez à taper ! Contrairement à d’autres constructeurs de pages, PBS vous permet de modifier directement le contenu sans avoir à passer par des boîtes de dialogue contextuelles.
Pendant l’édition, la zone située en haut s’appelle la barre de mise en forme du texte. Cette barre contient tous les outils de formatage que vous utiliserez pour styliser le texte : couleurs, gras, italique, alignements, ajout de liens, puces et bien plus encore. Survolez chaque bouton pour découvrir ce que fait l’outil.
Survolez avec votre souris le bouton Ajouter des éléments en haut à gauche de l’écran pour afficher le panneau d’ajout d’éléments. Vous pouvez également simplement déplacer votre souris vers le côté gauche de l’écran pour le faire apparaître.
Pour insérer un élément, maintenez le clic de votre souris sur celui-ci, puis faites-le glisser dans votre zone de contenu. La zone où l’élément sera placé sera mise en surbrillance. Relâchez le bouton de votre souris pour positionner l’élément.
Survolez avec votre souris n’importe quel élément présent dans votre contenu, et des contours ainsi que des barres d’outils devraient apparaître au-dessus d’eux.
Vous pouvez survoler avec votre souris les bords des contours pour augmenter ou réduire les marges entre les éléments.
Vous pouvez également cliquer sur un bouton de la barre d’outils pour effectuer des actions rapides sur l’élément. Cliquer sur l’icône d’engrenage de la barre d’outils fera apparaître l’inspecteur de propriétés qui contient plus d’options.
L’inspecteur de propriétés vous donne plus de contrôle sur l’apparence de vos éléments. Vous pouvez ajouter de nombreuses choses comme des ombres, des animations, changer les couleurs des cartes, le rayon des bordures et bien plus encore.
Vous pouvez également accéder aux propriétés des parents de l’élément. Par exemple, si vous placez une image à l’intérieur d’une colonne et ouvrez l’inspecteur de propriétés, vous pouvez alors accéder aux propriétés de l’image, de la colonne dans laquelle elle est contenue et de la ligne qui contient la colonne.
L’inspecteur de propriétés contient de nombreux réglages différents pour différents éléments, alors assurez-vous de tous les explorer.
Page Builder Sandwich vous affiche les véritables shortcodes sur le front-end, et vous pouvez également les modifier facilement !
Si vous avez mémorisé vos shortcodes, vous pouvez insérer des shortcodes en les tapant directement dans votre contenu. Mais si vous ne les avez pas tous mémorisés (qui fait ça ?), l’inspecteur répertorie tous les shortcodes disponibles sur votre site. Faites glisser un bouton Shortcode depuis l’inspecteur vers votre zone de contenu, trouvez celui que vous souhaitez insérer et cliquez dessus pour l’ajouter.
Les shortcodes sont convertis en contenu réel sur le front-end ; pour les modifier, vous pouvez les sélectionner et consulter leurs attributs dans l’inspecteur. Ou, pour plus de contrôle, vous pouvez double-cliquer sur le shortcode pour le modifier sous sa forme brute. Après avoir effectué vos modifications, votre shortcode se mettra à jour pour refléter les changements.
Vous pouvez cliquer, glisser et déplacer n’importe quoi où vous le souhaitez avec PBS. Lorsque vous faites glisser un élément, déplacez-le au-dessus d’un autre élément de la page : vous pouvez le placer soit au-dessus, soit en dessous de tout autre contenu.
Enregistrer votre travail
Une fois que vous êtes satisfait de votre mise en page, cliquez simplement sur le bouton d’enregistrement en haut à gauche de votre page. C’est tout !
L’extension Lite et l’extension Premium sont deux extensions différentes. Afin d’utiliser les fonctionnalités premium, vous devrez désactiver (ou désinstaller) la version Lite, puis installer et activer l’extension Premium, et enfin saisir votre clé de licence.
Remarque : Si vous activez à la fois l’extension lite et l’extension premium en même temps, l’extension vous demandera de désactiver celle que vous avez déjà avant de continuer.
Remarque pour les clients ayant acheté PBS sur pagebuildersandwich.com : Vous pouvez également télécharger l’extension depuis le site, la clé de licence actuelle que vous possédez devrait toujours fonctionner. Si ce n’est pas le cas, veuillez nous contacter et nous pourrons vous en délivrer une nouvelle.
Après avoir acheté PBS, vous devriez recevoir un e-mail contenant deux choses :
Installez et activez l’extension premium, et vous devriez alors voir apparaître cet écran :
Saisissez votre clé de licence ici et cliquez sur Agree & Activate License. Les fonctionnalités premium seront désormais disponibles.
Sinon, vous pouvez également vous rendre sur votre page d’extensions et trouver l’extension Page Builder Sandwich dans la liste :
Cliquez sur le lien Activate License , et vous devriez pouvoir y saisir votre licence.
Vous ne pouvez modifier que des pages ou des articles individuels à l’aide de Page Builder Sandwich. Voyez les choses ainsi : s’il existe une zone « Nouvel article » avec un éditeur de contenu dans l’administration pour cela, alors vous pouvez le modifier avec Page Builder Sandwich.
Vous devriez être en mesure de modifier le contenu de n’importe quel type de publication personnalisé.
Nous nous sommes assurés que Page Builder Sandwich a un impact quasi nul sur les performances de votre site Web. Lorsque vous êtes déconnecté, au strict minimum, seuls les styles CSS de ligne et de colonne sont mis en file d’attente, ainsi que les scripts JS et CSS nécessaires pour les shortcodes que vous avez utilisés.
Pour les visiteurs de votre site Web, au strict minimum, seuls les styles CSS de ligne et de colonne sont mis en file d’attente, et les scripts JS et CSS nécessaires pour les shortcodes que vous avez utilisés sont inclus.
Nous avons récemment apporté des correctifs liés au problème de compatibilité lorsque l’extension Page Builder Sandwich et l’extension IMPress for IDX Broker étaient activées ensemble. Cela provoquait un plantage sur le frontend pour les utilisateurs connectés.
Le correctif a rendu PBS à nouveau fonctionnel, mais nous avons dû retirer au widget IDX Broker la possibilité d’être inséré dans l’éditeur. Malgré cela, le widget IDX Broker peut toujours être utilisé dans votre menu Apparence > Widgets.
Pour vous permettre de travailler plus rapidement, vous pouvez utiliser divers raccourcis clavier disponibles avec Page Builder Sandwich.
Il s’agit de raccourcis pour les commandes hors mise en forme/outils. Pour les raccourcis de mise en forme/d’outils, survolez avec votre souris chaque bouton de la barre de mise en forme du texte pour afficher leur combinaison de touches de raccourci.
| Raccourci clavier | Description |
| CTRL+E (hors édition) | Commencer à éditer |
| CTRL+SHIFT+R (en cours d’édition) | Actualiser la page (puisque CTRL+R est utilisé pour aligner à droite) |
| CTRL+S | Enregistrer les modifications |
| CTRL+ESC | Ignorer les modifications et arrêter l’édition |
| CTRL+C | Copier |
| CTRL+V | Coller |
| CTRL+X | Couper |
| CTRL+ENTER | Saut de ligne / ligne suivante |
| CTRL+Z | Annuler |
| CTRL+SHIFT+Z (Mac) CTRL+Y (PC) |
Rétablir |