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 régler certains paramètres du bouton:

  • Modes: 4 styles prédéfinis

    • Défaut

    • Décrit

    • Au carré

    • Contour carré

  • Lien du bouton:

    • URL du lien

    • Ouvrir dans un nouvel onglet: On / Off.

 

paramètres du bouton adv

 

  • Texte / Couleur:

    • Taille du texte

    • Couleur de l'arrière plan

    • Couleur du texte

 

paramètres des boutons de couleur du texte

 

  • Frontière:

    • Rayon de bordure

    • Style de bordure: solide, pointillé, faîtière, ...

    • 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 de bouton avancé

 

  • Flotter:

    • Paramètres de couleur: couleur d'arrière-plan, couleur de texte et couleur d'ombre. 

    • Ombre (décalage H (horizontal), décalage V (vertical), flou, étalement), opacité et vitesse de transition.

 

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 ajuster les paramètres depuis le panneau de droite:

  • Paramètres de texte

    • Taille du texte

  • Paramètres des icônes

    • Icône (liste, couleur et taille)

    • Hauteur de la ligne

    • Marge

    • Rembourrage

 

paramètres de liste avancés

 

3 . Bloc Résumé

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

 

résumé-contenu de gutenberg

 

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

  • Charge minimisée: pour 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: choisissez une couleur pour le résumé

 

résumé-paramètres

 

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, dans le panneau de droite, vous pouvez ajuster certaines options pour le compteur:

  • Paramètres de couleur: Couleur de l'en-tête, couleur du compte à rebours et couleur de la description

  • Colonnes: 1-3

  • Taille du numéro de compteur: définir la taille des nombres

  • Symbole de comptage: 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)

 

paramètres de décompte

 

5 . Bloc d'image avancé

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

 

bouton d'image avancée

 

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

  • Action au 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 point focal: sélectionner un point pour se concentrer sur l'image ou définir une position horizontale / verticale

  • Opacité de superposition par défaut

  • Superposition de l'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 Témoignage dans la catégorie Advanced Gutenberg . Ensuite, vous pouvez modifier l'avatar, le nom, le poste et la description du témoignage.

 

bouton-témoignage

 

Enfin, dans le panneau de droite, vous pouvez ajuster les paramètres du témoignage. Lorsque l'option Vue du curseur est désactivée, voici les paramètres:

  • Colonnes: La plage des colonnes en mode Normal est de 1 à 3 et en mode Curseur est de 4 à 10.

  • Avatar: Taille de l'avatar, couleur d'arrière-plan et paramètres de bordure, qui incluent la couleur, le rayon et la largeur

  • Couleurs du texte:

    • Couleur du nom

    • Couleur de position

    • Description Couleur

 

paramètres de témoignage

 

Lorsque vous activez Vue du curseur , quelques options supplémentaires pour le curseur apparaîtront:

  • Nombre d'objets
  • Éléments à afficher
  • Éléments à faire défiler

slider-view-column

  • Mode central
  • Pause en survol
  • 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

 

paramètres du curseur

  • Couleurs du curseur:
    • Couleur de la flèche et de la bordure
    • Couleur des points

 

couleur du curseur

 

7 . Bloc de carte

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

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

 

bloc de carte

 

Dans le panneau de droite, vous pouvez insérer un emplacement en saisissant la latitude et la longitude, ou en entrant une adresse, puis en appuyant sur le bouton Récupérer l'emplacement.

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

  • Ouvrir l'infobulle du marqueur

  • 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 sur un post en cliquant sur le Vidéo avancée dans la section Advanced Gutenberg . Ensuite, vous pouvez coller l'URL de Youtube ou Vimeo, ou utiliser n'importe quelle vidéo locale de votre serveur. Vous pouvez modifier l'image d'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.

  • Ouvrez la vidéo dans la boîte à lumière: la lightbox 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 vidéo

  • Paramètres de couleur: Couleur de superposition et couleur du bouton Lecture

  • Bouton jouer: Style d'icône, taille du bouton de lecture

 

paramètres vidéo avancés

 

9 . Bloc de table avancé

Vous pouvez créer un tableau en cliquant sur le Tableau avancé 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 tableau. D'autres paramètres peuvent être modifiés dans le panneau de droite.

  • modes

    • Défaut

    • Rayures

 

table de style

 

  • Paramètres de table

    • Largeur maximale: Réglez cette valeur à 0 pour rendre la largeur maximale équivalente à 100%

    • Cellules de table à largeur fixe

    • En-tête de table, bas de page

    • Frontière effondrée

 

paramètres-de-table-avancés1

 

  • Paramètres de cellule

    • Paramètres de couleur: Couleur d'arrière-plan, Couleur du texte

    • Frontière: style, couleur et largeur de la bordure

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

    • Alignement du texte: alignement horizontal et vertical

 

paramètres de cellule unique

 

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

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 Avancée Accordéon dans la catégorie Advanced Gutenberg . Après cela, 2 éléments d'accordéons de groupe s'afficheront par défaut.

 

bloc-accordéon

 

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

  • Paramètres d'accordéon:

    • Espacement inférieur: Définissez l'espace entre chaque accordéon (vue frontale uniquement)

    • Initial effondré: Rend tous les accordéons réduits par défaut.

  • Paramètres d'en-tête

    • Style d'icône d'en-tête

    • Paramètres de couleur: Couleur d'arrière-plan, couleur du texte et couleur de l'icône

 

adv-accordéion-header

 

  • Paramètres de couleur du corps

    • Couleur de l'arrière plan

    • Couleur du texte

  • Paramètres de bordure

    • Style de bordure: solide, pointillé ou pointillé

    • Paramètres de couleur

    • Largeur de bordure, rayon

 

paramètres-accordéon

 

11 . Bloc d'onglets avancés

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

 

tabulation

 

Ensuite, vous pouvez ajuster les options de tabulation, de corps ou de bordure à partir du panneau de droite.

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

 

adv-tab-settings

 

  • Couleurs des onglets

    • Couleur de l'arrière plan

    • Couleur du texte

    • Couleur d'arrière-plan de l'onglet actif

    • Couleur du texte de l'onglet actif

 

tab-settings

 

  • Couleurs du corps

    • Couleur de l'arrière plan

    • Couleur du texte

  • Paramètres de bordure

    • Style: aucun, solide, pointillé ou pointillé

    • Couleur

    • Largeur de bordure, rayon

 

tab-settings1

 

Vous pouvez partagez très facilement vos liens sociaux 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 régler 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 des publications récentes

Il existe 3 mises en page 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  Messages récents dans la catégorie Advanced Gutenberg .

 

bloc-posts-récents

 

Vous pouvez voir comment les blocs seront affichés dans le frontend dans l'image ci-dessus ou dans notre Démonstration Advanced Gutenberg.

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

  • Colonnes (pour la vue Grille uniquement)

  • Afficher l'image sélectionnée

  • Afficher l'auteur du message

  • Afficher la date de publication

  • Afficher le lien En savoir plus

  • Lire plus de texte

  • Afficher l'extrait de message

  • Texte du premier message comme extrait: afficher une partie du premier texte trouvé dans le post comme extrait.

 

paramètres-récents

 

14 . Bloc de produits Woo

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

 

woo-block

 

Vous pouvez voir comment les blocs seront affichés dans le frontend dans l'image ci-dessus ou dans notre Démonstration Advanced Gutenberg

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

  • Paramètres des produits

    • État du produit

    • Catégorie

  • Paramètres de mise en page

    • Colonnes

    • Nombre de produits

    • Ordre

 

woo-settings

 

15 . Images Slider Block

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

 

nouveau-curseur-image

 

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

 

curseur d'image

 

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

Paramètres d'image

  • Action au clic: Aucun, Ouvrir l'image dans la lightbox et Ouvrir le lien personnalisé

  • Pleine largeur

  • Hauteur automatique

  • Toujours afficher la superposition

Paramètres de couleur

  • Couleur du survol

  • Couleur 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 de formulaire de contact

Vous pouvez recevoir une notification de contact par e-mail du client avec ce bloc. Vous pouvez créer ce formulaire en cliquant sur  Formulaire de contact 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.

  • Expéditeur de l'e-mail: Vous pouvez modifier les paramètres. Un e-mail sera envoyé à l'e-mail administrateur (par défaut) chaque fois qu'un formulaire de contact est soumis.

  • Étiquette de texte:

    • Espace réservé d'entrée de nom

    • Espace réservé pour la saisie du courrier électronique

    • Espace réservé d'entrée de message

    • Soumettre du texte

    • Texte d'avertissement de champ vide

    • Soumettre un texte de réussite

 

contact-settings1

 

  • Couleur d'entrée: Couleur d'arrière-plan et couleur du texte

  • Paramètres de bordure: Couleur de bordure, style de bordure et rayon de bordure

  • Soumettre les paramètres du bouton:

    • Paramètres de couleur: Bordure et texte, arrière-plan

    • Rayon de bordure du bouton

    • Position du bouton: Gauche, centre et droite

contact-settings2

 

17 . Bloc bulletin

Afin d'obtenir l'e-mail client, vous pouvez créer le bloc e-mail en cliquant sur Bulletin dans la catégorie Advanced Gutenberg .

 

bulletin

 

Vous pouvez modifier les paramètres de la newsletter sur 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 du formulaire (px)

  • Étiquette de texte:

    • Espace réservé pour la saisie du courrier électronique

    • Soumettre du texte

    • Texte d'avertissement de champ vide

    • Soumettre un texte de réussite

 

newsletter-settings1

 

  • Couleur d'entrée: Couleur d'arrière-plan et couleur du texte

  • Paramètres de bordure: Couleur de bordure, style de bordure et rayon de bordure

  • Soumettre les paramètres du bouton:

    • Paramètres de couleur: Bordure et texte, arrière-plan

    • Rayon de bordure du bouton

 

newsletter-settings2

 

18 . Bloc Gestionnaire de colonnes

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

 

add-column-manager-block

 

Ensuite, vous pouvez ajouter tous les types de blocs souhaités dans chaque colonne. Voici un bloc de gestionnaire de colonnes comprenant 2 colonnes: celle de gauche est Image avancée et celle de droite est Paragraphe, Liste avancée.

 

bloc-gestionnaire de colonnes

 

Et sur le panneau de droite, vous pouvez ajuster les paramètres du bloc Gestionnaire de colonnes.

  • Paramètres responsive

    • Style pour chaque type d'appareil: ordinateur de bureau, tablette, mobile

    • Espace entre les colonnes

    • Rembourrage: haut, droit, gauche et bas

    • Marge: haut, droite, gauche et bas

 

paramètres de colonne-1

 

 

  • Paramètres de ligne

    • Colonnes encapsulées: si vos colonnes sont survolées, elles seront séparées sur une nouvelle ligne (par exemple: utilisez-la avec l'espacement des colonnes).

    • Balise Wrapper: Div, Header, Main, ...

    • Largeur maximale du contenu (px vw,%)

    • Hauteur minimale du contenu (px, vw, vh)

    • Hauteur maximale du contenu (px, vw, vh)

 

paramètres de colonne-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 / enregistrement dans la section Advanced Gutenberg .

 

login-form-block

 

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

 

connexion-inscription-formulaire

 

Et puis vous pouvez aller dans le panneau de droite pour ajuster plus de détails sur le formulaire.

  • Formulaire initial: Connexion ou Inscription

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

  • Largeur de forme (px)

  • Afficher le logo

  • Largeur du logo (px)

  • Afficher l'icône du champ de saisie

  • Afficher le lien d'enregistrement / d'en-tête

  • Couleur d'en-tête

  • Afficher le lien de mot de passe perdu

 

form-state-setttings

 

  • Espace réservé d'entrée

    • Espace réservé d'entrée de connexion

    • Espace réservé pour la saisie du nom d'utilisateur

    • Espace réservé pour la saisie du courrier électronique

  • Texte / Couleur d'entrée

    • Entrer la couleur d'arrière-plan

    • Couleur d'entrée

    • Couleur du texte

  • Paramètres de bordure

    • Couleur de la bordure

    • Style de bordure

    • Largeur de la bordure

 

paramètres de l'espace réservé d'entrée

 

  • Soumettre les paramètres des boutons

    • Bordure et texte

    • Contexte

    • Rayon de bordure du bouton

    • Position du bouton

  • Soumettre le survol du bouton

    • Couleurs de vol stationnaire: Couleur d'arrière-plan, de texte et d'ombre

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

  • Remarquer: Nous vous recommandons fortement d'activer Google reCaptcha pour éviter les robots de spam. Vous pouvez l'activer dans Form Recaptcha dans  Adv. Gutenberg> E-mail et formulaire .

 

soumettre les paramètres du bouton

 

20 . Bloc de barre de recherche

Vous pouvez créer une zone de texte de recherche sur le frontend en cliquant sur le Barre de recherche 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 existe 2 styles prédéfinis: par défaut et classique

  • État du barreau de recherche

    • Pleine largeur: On / Off

    • Largeur

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

    • Icône de recherche à droite: On / Off

    • Icône de recherche

 

paramètres de la barre de recherche

 

  • Rechercher les paramètres d'entrée

    • Espace réservé de recherche

    • Couleur d'entrée: couleur d'arrière-plan et de texte

 

paramètres de recherche

 

  • Paramètres du bouton de recherche

    • Afficher le bouton de soumission: On / Off

    • Bouton de recherche à gauche: On / Off

    • Couleur d'arrière-plan et de texte

    • Rayon de bordure

  • Couleurs de vol stationnaire: Couleur d'arrière-plan, de texte et d'ombre

  • Hover Shadow: Opacité, vitesse de transition et ombre (décalage H (horizontal), décalage V (vertical), flou, étalement)

 

paramètres du bouton de recherche