Documentation Advanced Gutenberg

I. INSTALLATION DE ADVANCED GUTENBERG

1.1 Installer

Pour installer notre plug-in, vous devez utiliser le programme d'installation standard de WordPress, ou décompresser et tout placer dans le dossier de / wp-content / plugin.

 

dossier d'installation-wp-media


Puis cliquez sur activer le plugin, pour voir le menu Advanced Gutenberg apparaître dans le menu de gauche de WordPress.

Advanced Gutenberg est accessible depuis le menu de Gutenberg. Vous avez également les paramètres dans le menu "Paramètres".

1.2 Mettre à jour le plugin

Pour mettre à jour Advanced Gutenberg, vous pouvez utiliser le programme de mise à jour par défaut de WordPress. Vous pouvez également supprimer et installer la nouvelle version à partir d’un fichier .zip téléchargé de www.joomunited.com. Dans tous les cas, vous ne perdrez aucun contenu car tout est stocké dans la base de données.

 

update-gutenberg

 

Assurez-vous de toujours avoir la dernière version pour éviter les problèmes de sécurité et de stabilité.

II. FONCTIONS COMMUNES

2.1. Liste de blocage

En utilisant notre plugin, vous pouvez créer plusieurs profils et sélectionner les blocs dans la liste. Liste de blocs sera disponible pour chaque profil.

Pour créer votre propre profil, vous pouvez utiliser le "Attribution de profil" onglet dans le "Advanced Gutenberg" menu. Choisissez l'un des profils et vous verrez la configuration du profil.

 

profils d'éditeur

 

Vous pouvez activer / désactiver les blocs dans Gutenberg en cliquant dessus. Lorsque vous avez terminé, appuyez sur le bouton Mettre à jour la liste pour mettre à jour les nouvelles icônes de bloc.

 

liste de blocage

 

blocks-list-2

 

Une fois enregistrés, les blocs seront disponibles dans votre éditeur.

 

bloc utilisé

 

Bloc de boutons avancé

Vous pouvez créer un Bouton avancé en cliquant sur son bouton dans la section Advanced Gutenberg.

 

bouton avancé

 

Sur le panneau de droite, vous pouvez ajuster certains paramètres du bouton:

  • Lien bouton: URL du lien, ouvrir dans un nouvel onglet (bouton bascule).
  • Texte / Couleur: Taille du texte
    • Paramètres de couleur: Couleur du texte et couleur de fond.

 

advanced-button-settings1

 

  • Frontière: rayon, style, couleur et largeur.

 

bordure de bouton avancée

 

  • Rembourrage: en haut, à droite, en bas et à gauche.

 

rembourrage avancé

 

  • Flotter:
    • Paramètres de couleur: Couleur d'arrière-plan, Couleur du texte et Couleur de l'ombre.
    • Ombre (H (horizontal) offset, V (verticale) offset, flou, étalement) et vitesse de transition.

 

survol du bouton avancé

 

Bloc de liste avancé

Vous pouvez créer un Liste avancée en cliquant sur son bouton dans la catégorie Advanced Gutenberg.

 

liste avancée

 

Après avoir saisi le contenu, vous pouvez régler les paramètres à partir du panneau de droite:

  • Paramètres du texte
    • Taille du texte
  • Paramètres d'icône
    • Icône de liste
    • Couleur de l'icône
    • Taille de l'icône
    • Hauteur de la ligne
    • Marge
    • Rembourrage

 

Paramètres de liste avancés

 

Bloc de résumé

Vous pouvez créer un Résumé bloquer en cliquant sur son bouton dans la catégorie Advanced Gutenberg après avoir défini au moins une balise Heading dans le message ou la page. Le résumé peut être aligné à gauche, au centre ou à droite. Pour le mettre à jour, utilisez le bouton Mettre à jour le résumé.

 

sommaire-gutenberg-contenu

 

Sur le panneau de droite, vous pouvez ajuster certaines options:

  • Charge minimisée: afficher / masquer le résumé par défaut
  • Titre de l'en-tête du résumé: le texte d'en-tête du résumé, qui s'affiche lorsque le Charge minimisée l'option est activée
  • Couleur d'ancre: choisir une couleur pour le résumé

 

paramètres de résumé

 

Bloc Compteur

 

Vous pouvez créer un Compter jusqu'à bloquer, éventuellement avec un symbole, en cliquant sur son bouton dans la catégorie Advanced Gutenberg.

 

compter jusqu'à

 

Ensuite, à partir du panneau de droite, vous pouvez ajuster certaines options du compteur:

  • Paramètres de couleur: Couleur d'en-tête, couleur Count Up et couleur Description
  • Colonnes: 1-3
  • Taille du compteur: définir la taille des nombres
  • Symbole Compteur: ajouter un caractère avant ou après le compteur
  • Bouton à bascule: définir la position du symbole (On signifie que le symbole vient après les chiffres)

 

compte à rebours

 

Bloc d'image avancé

le Image avancée bloc peut être utilisé pour créer une image. Pour en ajouter un, cliquez sur le bouton Image avancée bouton de la catégorie Advanced Gutenberg, puis choisissez une image à insérer.

 

bouton image avancée

 

Ensuite, vous pouvez changer le titre de l'image et son sous-titre. Vous pouvez ajuster les paramètres de l'image à partir du panneau de droite.

  • Action sur clic: soit ouvrir l'image dans une lightbox, soit ouvrir une URL personnalisée
  • URL du lien: Ouvrir le lien dans un nouvel onglet (bouton bascule)
  • Ouvrir un lien dans un nouvel onglet
  • Taille de l'image: si l'image doit être affichée en pleine largeur ou avec une hauteur et une largeur personnalisées
  • Paramètres de couleur: Couleur du titre, Couleur du sous-titre, Couleur de la superposition
  • Alignement du texte: alignement vertical (haut, centre, bas), alignement horizontal (gauche, centre, droite)

 

paramètres d'image avancés

 

Bloc témoignage

Vous pouvez insérer un témoignage dans votre contenu en cliquant sur le bouton Témoignage bouton dans la catégorie Advanced Gutenberg. Ensuite, vous pouvez modifier l'avatar, le nom, le poste et la description du témoignage.

 

bouton de témoignage

 

Enfin, dans le panneau de droite, vous pouvez ajuster les paramètres du témoignage.

  • Slider view: bouton à bascule
  • Colonnes: La plage des colonnes dans la vue normale est comprise entre 1 et 3 et dans la vue coulissante, entre 4 et 10.
  • Avatar: Taille de l'avatar, couleur de l'arrière-plan et paramètres de la bordure, y compris la couleur, le rayon et la largeur
  • Couleurs du texte:
    • Nom Couleur
    • Couleur de position
    • Description Couleur

 

paramètres de témoignage

 

Bloc de carte

Pour utiliser le Carte Pour bloquer, vous devez ajouter une clé API Google dans la configuration. Après cela, vous devriez suivre cette lien, cliquer sur Activer les API et les services bouton, puis recherchez et activez l’API de géolocalisation, l’API JavaScript de Maps.

Une fois ajouté, vous pouvez créer la carte en cliquant sur le bouton Carte bouton dans la catégorie Advanced Gutenberg.

 

bloc de carte

 

Dans le panneau de droite, vous pouvez insérer une position en saisissant la latitude et la longitude ou en entrant une adresse, puis en appuyant sur le bouton Fetch Location.

Certaines options supplémentaires pour la carte sont disponibles:

  • Le niveau de zoom
  • la taille
  • Icône de marqueur
  • Titre du marqueur
  • Description du marqueur
  • Styles de carte: argent, rétro, nuit, ... et vous pouvez également ajouter votre style personnalisé.

 

paramètres de la carte

 

Bloc vidéo avancé

Vous pouvez créer une vidéo pour un article en cliquant sur le bouton Vidéo avancée bouton dans la section Advanced Gutenberg. Ensuite, vous pouvez coller l’URL depuis Youtube ou Vimeo, ou utiliser n’importe quelle vidéo locale de votre serveur. Vous pouvez modifier l'aperçu en cliquant sur le bouton Modifier dans le coin supérieur gauche.

 

vidéo avancée

 

Ensuite, vous pouvez ajuster les paramètres de la vidéo dans le panneau de droite.

  • Ouvrir la vidéo dans la boîte à lumière: la visionneuse offre des options d'affichage supplémentaires
  • Pleine largeur: si elle est désactivée, vous devez définir une largeur personnalisée pour la vidéo.
  • Hauteur de la vidéo
  • Paramètres de couleur: Couleur de superposition et couleur du bouton de lecture
  • Bouton jouer: Style des icônes, taille du bouton de lecture

 

paramètres vidéo avancés

 

Bloc de table avancé

Vous pouvez créer une table en cliquant sur le bouton Tableau avancé bouton dans la catégorie Advanced Gutenberg.

 

bouton de table avancé

 

Vous pouvez modifier le tableau après avoir défini le nombre de colonnes et de lignes.

 

table avancée

 

Après cela, vous pouvez saisir du texte ou ajuster les lignes et les colonnes de l'éditeur lui-même, juste au-dessus du bloc de table. Plus de paramètres peuvent être modifiés dans le panneau de droite.

  • modes
    • Défaut
    • Rayures

 

table de style

 

  • Paramètres de la table
    • Largeur maximale: Définissez ce paramètre sur 0 pour que la largeur maximale soit équivalente à 100%.
    • Cellules de tableau de largeur fixe
    • En-tête de table
    • Pied de table
    • Bordure effondrée

 

advanced-table-settings1

 

  • Paramètres de cellule
    • Paramètres de couleur: Couleur de fond, Couleur du texte
    • Frontière: style de bordure, couleur et largeur
    • Rembourrage: rembourrage en haut, en bas, à gauche et à droite
    • Alignement du texte: alignement horizontal et vertical

 

paramètres unicellulaires

 

Vous pouvez même fusionner des cellules (à l’aide du bouton Maj) et scinder les cellules fusionnées avec le Tableau avancé bloc.

Bloc accordéon

Vous pouvez créer un Accordéon lorsque vous devez afficher plus de contenu dans une zone plus petite en cliquant sur le bouton Accordéon bouton dans la catégorie Advanced Gutenberg.

 

bloc accordéon

 

Une fois créé, vous pouvez ajuster les options d’en-tête, de corps et de bordure à partir du panneau de droite.

  • Paramètres d'accordéon:
    • Espacement inférieur: Définir l'espace au bloc suivant. Ceci remplacera l'option Espacement des blocs (vue Frontend uniquement)
  • Paramètres d'en-tête
    • Style d'icône d'en-tête
    • Paramètres de couleur: Couleur de fond, couleur du texte et couleur de l'icône

 

en-tête d'accordéon

 

  • Paramètres de couleur du corps
    • Couleur de fond
    • Couleur du texte
  • Paramètres de bordure
    • Style de bordure: solide, en pointillé ou en pointillé
    • Paramètres de couleur
    • Largeur de la bordure
    • Rayon de la frontière
  • État des accordéons: Activez ces paramètres pour réduire tous les accordéons.

 

réglages d'accordéon

 

Bloc de tabulation

De même, vous pouvez créer un Languette bloquer lorsque vous avez besoin d'afficher plus de contenu dans une zone plus petite. Pour en insérer un, cliquez sur le bouton Languette bouton dans la catégorie Advanced Gutenberg.

 

bloc de tabulation

 

Ensuite, vous pouvez régler les options d'onglet, de corps et de bordure à partir du panneau de droite.

  • Onglet Couleurs
    • Couleur de fond
    • Couleur du texte
    • Couleur de fond de l'onglet actif
    • Couleur du texte de l'onglet actif

 

onglets

 

  • Couleurs du corps
    • Couleur de fond
    • Couleur du texte
  • Paramètres de bordure
    • Style: solide, en pointillé ou en pointillé
    • Couleur
    • Largeur
    • Rayon

 

tab-settings1

 

Bloc de liens sociaux

Vous pouvez partagez vos liens sociaux très facilement en utilisant le Liens sociaux bloc, qui peut être créé en cliquant sur son bouton dans la catégorie Advanced Gutenberg.

 

Liens sociaux

 

Vous pouvez utiliser l'icône prête à l'emploi ou télécharger votre propre icône et ajuster d'autres options à partir du panneau de droite.

  • Icônes prédéfinies: vous pouvez télécharger votre icône personnalisée
  • Couleur d'icône prédéfinie
  • Paramètres des icônes
    • Taille de l'icône
    • Espace d'icônes

 

paramètres de liens sociaux

 

Bloc des publications récentes

Trois mises en page sont disponibles pour afficher vos publications récentes: les vues Grille, Liste et Curseur. Vous pouvez créer n’importe laquelle de ces vues en cliquant sur le bouton Messages récents bouton dans la catégorie Advanced Gutenberg.

 

Blocs récents

 

Vous pouvez voir comment les blocs seront affichés dans l'interface dans l'image ci-dessus ou dans notre Advanced Gutenberg Demo.

Dans le panneau de droite, vous pouvez ajuster les paramètres de chaque mise en page:

  • Commandé par

commandé par

  • Catégorie
  • Nombre d'objets
  • Les colonnes (uniquement pour l'affichage en grille)
  • Afficher l'image sélectionnée
  • Affichage Auteur Auteur
  • Afficher la date de publication
  • Afficher le lien En savoir plus
  • Lire plus de texte
  • Afficher le post extrait
  • Premier message comme extrait: afficher une partie du premier texte trouvé dans post sous forme d'extrait.

 

articles récents

 

Bloc de produits Woo

Il y a 2 mises en page disponibles pour le Woo Produits bloquer: les vues Normal et Diapositive peuvent afficher les produits WooCommerce sur votre blog WordPress. Vous pouvez insérer ce bloc en cliquant sur le bouton Woo Produits bouton dans la catégorie Advanced Gutenberg.

 

woo-block

 

Vous pouvez voir comment les blocs seront affichés dans l'interface dans l'image ci-dessus ou dans notre Advanced Gutenberg Demo

Sur le panneau de droite, vous pouvez ajuster les paramètres de chaque mise en page:

  • Paramètres de produits
    • État du produit
    • Catégorie
  • Paramètres de mise en page
    • Les colonnes
    • Nombre de produits
    • Ordre

 

woo-settings

 

Images Curseur

Si vous souhaitez afficher plusieurs images sous forme de diapositive, cliquez sur Curseur d'images bouton dans la catégorie Advanced Gutenberg.

 

nouveau-image-slider

 

Puis en appuyant sur Ajouter des images bouton pour choisir vos images montrées dans la diapositive. Après cela, vous pouvez saisir le texte Titre et texte description pour chaque image.

 

curseur d'image

 

Vous pouvez modifier les paramètres du curseur sur le panneau de droite.

Paramètres d'image

  • Action sur clic
    • Aucun
    • Ouvrir l'image dans la lightbox
    • Ouvrir le lien personnalisé
  • Pleine largeur
  • Hauteur automatique
  • Toujours montrer la superposition

Paramètres de couleur

  • Survoler la couleur
  • Titre du titre
  • Couleur du texte

slide-settings-1

 

Alignement du texte

  • Alignement vertical
    • Haut
    • Centre
    • Bas
  • Alignement horizontal
    • La gauche
    • Centre
    • Droite

slide-settings-2

 

Formulaire de contact

Vous pouvez recevoir une notification de contact par courrier électronique avec ce bloc. Vous pouvez créer ce formulaire en cliquant sur Formulaire de contact bouton dans la catégorie Advanced Gutenberg.

 

formulaire de contact

 

Vous pouvez modifier les paramètres du Formulaire de contact sur le panneau de droite.

  • Remarquer: Il n'apparaîtra pas si vous activez l'option reCAPTCHA dans les paramètres.
  • Email de l'expéditeur: Vous pouvez changer dans les paramètres. Un email sera envoyé à l'email administrateur (par défaut) chaque fois qu'un formulaire de contact est soumis.
  • Étiquette de texte:
    • Nom d'espace réservé d'entrée
    • Espace réservé d'entrée de courrier électronique
    • Espace réservé à la saisie de message
    • Soumettre le texte
    • Texte d'avertissement de champ vide
    • Soumettre le texte de réussite

 

contact-settings1

 

  • Couleur d'entrée: Couleur de fond et couleur du texte
  • Paramètres de bordure: Couleur de la bordure, style de la bordure et rayon de la bordure
  • Paramètres du bouton Soumettre:
    • Paramètres de couleur: Bordure et texte, fond
    • Rayon de bordure du bouton
    • Position du bouton: Gauche, centre et droite

contact-settings2

 

Bloc Newsletter

Pour obtenir le courrier électronique du client, vous pouvez créer le bloc de courrier électronique en cliquant sur Bulletin bouton dans la catégorie Advanced Gutenberg.

 

bulletin

 

Vous pouvez modifier les paramètres de la lettre d’information dans le panneau de droite.

  • Remarquer: Il n'apparaîtra pas si vous activez l'option reCAPTCHA dans les paramètres.
  • Paramètres du formulaire:
    • Style de formulaire: Par défaut / Alternative
    • Largeur de formulaire (px)
  • Étiquette de texte:
    • Espace réservé d'entrée de courrier électronique
    • Soumettre le texte
    • Texte d'avertissement de champ vide
    • Soumettre le texte de réussite

 

newsletter-settings1

 

  • Couleur d'entrée: Couleur de fond et couleur du texte
  • Paramètres de bordure: Couleur de la bordure, style de la bordure et rayon de la bordure
  • Paramètres du bouton Soumettre:
    • Paramètres de couleur: Bordure et texte, fond
    • Rayon de bordure du bouton

 

newsletter-settings2

 

Gestionnaire de colonnes

Si vous voulez créer un bloc contenant d'autres blocs à l'intérieur, vous devez choisir Gestionnaire de colonnes dans la catégorie Advanced Gutenberg. Le style du bloc apparaîtra lors de la création d'un nouveau.

 

add-column-manager-block

 

Ensuite, vous pouvez ajouter le type de bloc souhaité dans chaque colonne. Voici un bloc du gestionnaire de colonnes comprenant 2 colonnes: la gauche, Image avancée, et la droite, Paragraphe, Liste avancée.

 

gestionnaire de colonnes

 

Et sur le panneau de droite, vous pouvez ajuster les réglages du bloc du gestionnaire de colonnes.

  • Paramètres responsive
    • Style pour chaque type d'appareil: Desktop, Tablet, Mobile
    • Espace entre les colonnes
    • Rembourrage
    • Marge

 

column-settings-1

 

 

  • Paramètres de ligne
    • Colonnes enveloppées: Si vos colonnes sont dépassées, elles seront séparées en une nouvelle ligne (par exemple: Utilisez ceci avec l'espacement des colonnes).
    • Wrapper Tag: Div, En-tête, Principal, ...
    • Contenu Largeur max (px vw,%)
    • Contenu Max Hauteur (px, vw, vh)

 

column-settings-2

 

2.2. Configuration

Pour utiliser la fonction de légende et de légende des images, vous devez activer le Ouvrir les galeries dans la lightbox et Légende options respectivement dans L'onglet Configuration de Advanced Gutenberg dans les paramètres.

 

adv-gutenberg-settings

 

  • Ouvrir les galeries dans la lightbox: Ouvrir les images de la galerie sous forme de popups de style lightbox
  • Légende: Charger les images (alt) en tant que légende pour les images lightbox
  • Supprimer Autop: Supprimer la fonction autop de WordPress, utilisée pour empêcher l'ajout de paragraphes non désirés dans certains blocs
  • Clé Google API: cette clé API est requise pour utiliser le bloc de carte

Paramètres de blocs

  • Activer l'espacement des blocs: Appliquez automatiquement un espacement vertical minimal entre les blocs - la valeur par défaut est none et les valeurs doivent être exprimées en pixels.
  • Couleur de l'icône des blocs: Définir la couleur des icônes de blocs sur l’administrateur, s’applique uniquement aux blocs Advanced Gutenberg
  • Largeur de l'éditeur: Définir la taille de l'éditeur Gutenberg
  • Vignette par défaut: Définir la vignette de publication par défaut à utiliser dans les blocs Publications récentes
  • Activer le guide visuel des colonnes: Activer la bordure pour matérialiser Adv. Bloc de colonnes Gutenberg

Vous pouvez aussi trouver Adv. Paramètres Gutenberg dans le coin supérieur droit de votre éditeur, à côté du Réglages icône.

 

éditeur-adv-gutenberg-settings

 

2.3 Configuration des blocs par défaut

 

Afin d’ajuster les blocs dans Advanced Gutenberg, vous pouvez aller au menu Advanced Gutenberg> Configuration> onglet Configuration par défaut des blocs.

 

default-blocks-config

 

Pour chaque bloc, vous pouvez modifier ses paramètres par défaut en cliquant sur le bouton adjacent. Réglages icône.

 

blocs-éditer

 

2.4 Email et formulaire

Paramètres de messagerie

Vous pouvez définir les informations sur l'expéditeur et le destinataire de Formulaire de contact bloc:

 

Paramètres de messagerie

 

Formulaire ReCaptcha

Tout d'abord, vous devez enregistrer reCaptcha sur votre site. icipuis cliquez sur Console d'administration bouton pour entrer l'information.

Après cela, remplissez le site reCAPTCHA et la clé secrète reCAPTCHA. N'oubliez pas d'activer l'option reCAPTCHA. Vous pouvez également sélectionner la langue et le thème pour reCAPTCHA.

 

forme-recaptcha

 

Formulaires de données

De là, vous pouvez télécharger Formulaire de contact et Bulletin d'information Les données. Vous pouvez exporter un fichier .CSV ou .JSON.

 

Données de formulaire

 

2.5 styles personnalisés

le Advanced Gutenberg La configuration vous permet également de définir des extraits de code CSS personnalisés pouvant être utilisés dans votre éditeur et les options des balises HTML. Pour utiliser des styles personnalisés, accédez à la Styles personnalisés une page de Advanced GutenbergA gauche du menu.

Pour créer un nouveau style, cliquez sur le bouton «Ajouter une nouvelle classe» bouton en bas de la liste des styles. Vous pouvez modifier votre code CSS directement dans le champ CSS personnalisé.

 

styles-personnalisés-gutenberg

 

Toutes les modifications que vous apportez seront affichées dans la partie gauche de la page. Ils seront appliqués à la chaîne avec «Exemple de texte». Le texte situé au-dessus et sous la chaîne indique comment vos styles apparaîtront parmi le reste des éléments.
Après avoir modifié votre style personnalisé, enregistrez-le à l'aide de la commande “Enregistrer les styles” bouton.
Pour appliquer un style à l'élément dans l'éditeur, vous devez sélectionner l'élément et choisir un style dans la liste déroulante nommée "Styles personnalisés". Pour revenir au style par défaut et supprimer tous les styles personnalisés, choisissez la commande "Paragraphe" option.

 

bloc de style css personnalisé