Advanced Gutenberg: Configuration des blocs

1. 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:

  • Modes: 4 styles prédéfinis

    • Défaut

    • Souligné

    • Au carré

    • Contour carré

  • Lien bouton:

    • URL du lien

    • Ouvrir dans un nouvel onglet: On / Off.

 

adv-button-settings

 

  • Texte / Couleur:

    • Taille du texte

    • Couleur de fond

    • Couleur du texte

 

text-color-button-settings

 

  • Frontière:

    • Rayon de la frontière

    • Style de bordure: solide, pointillé, crête, ...

    • Couleur de la bordure

    • Largeur de la bordure

 

adv-button-border

 

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

  • 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 (horizontale) offset, V (verticale) offset, flou, étalement), opacité et vitesse de transition.

 

survol du bouton avancé

 

2. 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 (liste, couleur et taille)

    • Hauteur de la ligne

    • Marge

    • Rembourrage

 

Paramètres de liste avancés

 

3. Bloc récapitulatif

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é

 

4. Bloc compteur (décompte)

 

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

 

5. 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: Allumé éteint

  • 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 d'image avancés

 

  • Sélecteur de points focaux: sélectionner un point pour faire la mise au point sur l'image ou définir la position horizontale / verticale

  • Superposition opacité par défaut

  • Superposition d'opacité en vol stationnaire

  • 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)

 

adv-image-hover

 

6. Bloc de 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. Lorsque l'option d'affichage du curseur est désactivée, voici les paramètres:

  • 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

 

Lorsque vous activez Curseur option, des options supplémentaires pour le curseur apparaîtront:

  • Nombre d'objets
  • Articles à montrer
  • Articles à faire défiler

slider-view-column

  • Mode centre
  • Pause en vol stationnaire
  • Lecture automatique
  • Vitesse de lecture automatique (ms)
  • Boucle infinie
  • Vitesse de transition (ms)
  • Afficher les points
  • Afficher les flèches
  • Taille de la flèche

 

slider-settings

  • Couleurs du curseur:
    • Couleur des flèches et des bordures
    • Couleur des points

 

couleur du curseur

 

7. 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

  • Infobulle de marqueur ouvert

  • Styles de carte: argent, rétro, nuit, ... et vous pouvez également ajouter votre style personnalisé.

 

paramètres de la carte

 

8. 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

 

9. 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, bas de page

    • 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.

10. Bloc d'accordéon avancé

Vous pouvez créer un Accordéon avancé lorsque vous devez afficher plus de contenu dans une zone plus petite en cliquant sur le bouton Avancée Accordéon bouton dans la catégorie Advanced Gutenberg. Après cela, il y aura 2 éléments d'accordéon de groupe à afficher par défaut.

 

adv-accordéon-block

 

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 entre chaque accordéon (vue Frontend uniquement)

    • Initial effondré: Faire tous les accordéons effondrés par défaut.

  • 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 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

 

adv-accordéon-settings

 

11. Bloc d'onglets avancés

De la même manière, 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 Onglet Avancé 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.

  • Style des onglets
    • Bureau, tablette ou mobile
    • Horizontal ou vertical
  • Paramètres des onglets
    • Onglet Ouverture initiale

 

adv-tab-settings

 

  • 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: aucun, solide, pointillé ou pointillé

    • Couleur

    • Largeur de la bordure, rayon

 

tab-settings1

 

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

 

paramètres de liens sociaux

 

13. Bloc de messages récents

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

 

14. 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

 

15. Images Slider Block

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 et 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

 

16. Bloc 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

 

17. Bloc bulletin

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

 

18. Bloc du 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: Haut, Droite, Gauche et Bas

    • Marge: Haut, Droite, Gauche et Bas

 

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 Min Hauteur (px, vw, vh)

    • Contenu Max Hauteur (px, vw, vh)

 

column-settings-2

 

19. Bloc de formulaire de connexion / enregistrement

Vous pouvez créer un formulaire de connexion ou un formulaire d'inscription pour votre site Web en cliquant Formulaire de connexion / inscription bouton dans la section Advanced Gutenberg.

 

login-form-block

 

Et vous pouvez changer de vue de Login à Register dans la barre de navigation de ce bloc ou sur le panneau de droite.

 

formulaire de connexion

 

Ensuite, vous pouvez accéder au volet de droite pour ajuster plus de détails sur le formulaire.

  • Forme initiale: Connexion ou Inscription

  • Rediriger après la connexion: Maison, tableau de bord ou personnalisé

  • Largeur de formulaire (px)

  • Afficher le logo

  • Logo Largeur (px)

  • Afficher l'icône du champ de saisie

  • Afficher le lien registre / en-tête

  • Couleur d'en-tête

  • Afficher le lien du mot de passe perdu

 

règlements de forme

 

  • Espace réservé d'entrée

    • Espace réservé à l'entrée de connexion

    • Espace réservé à l'entrée de nom d'utilisateur

    • Espace réservé d'entrée de courrier électronique

  • Texte / Couleur d'entrée

    • Couleur de fond d'entrée

    • Couleur d'entrée

    • Couleur du texte

  • Paramètres de bordure

    • Couleur de la bordure

    • Style de bordure

    • Largeur de la bordure

 

paramètres d'entrée-espace réservé

 

  • Paramètres du bouton Soumettre

    • Bordure et texte

    • Contexte

    • Rayon de bordure du bouton

    • Position du bouton

  • Soumettre le bouton

    • Survol des couleurs: Couleur de fond, texte et ombre

    • Ombre: Opacité, vitesse de transition et ombre (décalage H (horizontal), décalage V (vertical), flou, étalé)

  • Remarquer: Il est vivement recommandé d'activer Google reCaptcha pour éviter le spam bot. Vous pouvez l'activer dans Form Recaptcha dans Adv. Gutenberg> Email & Form .

 

Paramètres du bouton d'envoi

 

20. Bloc de barre de recherche

Vous pouvez créer un champ de recherche sur le frontend en cliquant sur le bouton Barre de recherche bouton dans la catégorie Advanced Gutenberg.

 

bloc de recherche

 

Vous pouvez ajuster les paramètres de la barre de recherche sur le panneau de droite.

  • Modes: il y a 2 styles prédéfinis: Default et Classic

  • Rechercher Bar State

    • Pleine largeur: On / Off

    • Largeur

  • Paramètres de l'icône de recherche

    • Icône de recherche sur la droite: On / Off

    • Icône de recherche

 

paramètres de la barre de recherche

 

  • Paramètres d'entrée de recherche

    • Rechercher un espace réservé

    • Couleur d'entrée: Couleur de fond et texte

 

paramètres d'entrée de recherche

 

  • Paramètres du bouton de recherche

    • Afficher le bouton d'envoi: activé / désactivé

    • Bouton de recherche sur la gauche: On / Off

    • Couleur de fond et texte

    • Rayon de la frontière

  • Survol des couleurs: Couleur de fond, texte et ombre

  • Survolez l'ombre: Opacité, vitesse de transition et ombre (décalage H (horizontal), décalage V (vertical), flou, étalé)

 

paramètres du bouton de recherche