DÉMO EDITOR CUSTOM COLOR PALETTE

• Tweetez
• Enregistrez
• Partagez
• E-mail
• LinkedIn
• WhatsApp

Bienvenue dans cette Démo pour personnaliser les blocs Gutenberg !

TABLE DES MATIÈRES

Animation Des Blocs

Cette extension utilise la bibliothèque AOS – Animate on scroll pour établir une animation des blocs de l’editeur Gutenberg.

Ajout du Panneau ECCP ANIMATION dans les paramètres du bloc de l’editeur Gutenberg, avec des options permettant l’animation des blocs selon plusieurs types: Fondu, Retournement, Rotation, Glisser, Zoom, ainsi qu’un délai, une durée et des paramètres plus avancés.

L’animation peut être immédiatement prévisualisée dans l’éditeur.

Dans l’onglet Personnaliser Front End de la page de réglages de l’extension, section Blocs de l’editeur Gutenberg:
options pour désactiver cette animation selon que la résolution d’écran corresponde a un Mobile ou Mobile & Tablette.

Vous pouvez voir au défilement de cette page de démo, différentes animations des blocs, avec pour le bloc bannière pleine largeur ci dessous l’effet zoom in down, variation de l’effet Zoom.

Barre Progression De Lecture

Dans la section Personnaliser Front End de la page de réglages de l’extension:
Options pour activer & personnaliser une barre progression de lecture pour les Articles, Pages & CPT.
Vous pouvez apercevoir en haut de cette page cette barre de progression de lecture au défilement de la page.

Vous pouvez de manière individuelle ou groupé désactiver cette barre de progression de lecture pour les pages.
Pour cela un champ de désactivation est ajouté dans l’édition rapide ou groupées pour l’écran en back office qui liste les pages, c’est a dire le menu Pages.

Bloc Accordéon

Aux Paramètres du bloc Panneau ECCP Styles vous avez des options de réglages pour le Titre du bloc Accordéon:
• Harmoniser le nombre de mots par ligne du Titre
• Définir la couleur d’arrière plan du Titre & Icône, panneau ouvert ou au survol.
Vous pouvez alors personnaliser le bloc Accordéon, comme les styles présentés ci-dessous.

Style Minimal Diviseur

Bloc Bannière Pleine Largeur

Pour bénéficier d’un alignement pleine largeur de la bannière, il faut au préalable activer dans l’onglet Personnaliser éditeur de la page d’option du plugin :
l’option d’alignement large pour l’éditeur de blocs.
Réglage de la hauteur de la bannière sur mobile dans le Panneau ECCP Styles des paramètres du bloc.

• Réglage du style Text Shadow pour le Titre & Texte dans le Panneau ECCP Styles des paramètres du bloc.
• Réglage du style Box Shadow pour le Bouton dans le Panneau ECCP Styles des paramètres du bloc.
• Le Bloc bannière est groupé ce qui permet d’avoir accès dans les paramètres du bloc Groupe au Panneau ECCP Styles et d’appliquer le style Forme de séparation Vagues pour le bas de la bannière.

Remarque
Dans le panneau ECCP Link des paramètres du bloc ou via la barre d’outils,vous pouvez ajouter en Front End un lien au bloc entier, un lien interne au bloc reste cliquable.

L’extension permet d’activer la Typographie Fluide pour les tailles de texte prédéfinies et les tailles personnalisés.
La Typographie Fluide permet aux tailles de texte de s’adapter aux changements de taille de l’écran, par exemple en augmentant la taille à mesure que la largeur de la fenêtre augmente, ou en la réduisant à mesure qu’elle diminue.
Le texte ci-dessous « Je décide d’apprendre a danser! » est avec une Typographie Fluide de 36px sur PC & 22px sur Mobile.

 

FORMATION ROCK 4 TEMPS

Je décide d’apprendre à danser

Découvrez Notre Formation

Bloc Bouton Style Contour

Réglage du style au survol dans le Panneau ECCP Styles des paramètres du bloc:
réglage de la couleur du Texte & Arrière plan & bordure & animations.

• L’extension ECCP ajoute un bouton format a la barre d’outils du bloc qui permet l’insertion d’une icône Dashicons a gauche ou droite du texte sélectionné du bouton.
Ce bouton est aussi activé pour la barre d’outils du bloc Paragraphe et permet d’insérer dans le texte une icône pour un espace sélectionné.
Vous pouvez aussi insérer une icône Font Awesome.


• Vous pouvez aussi sélectionner une icône Dashicons pour le bloc bouton dans la barre latérale de l’editeur, aux paramètres du bloc, Pannneau ECCP Icônes.

Bloc Bouton Style Plein

Réglage du style au survol dans le Panneau ECCP Styles des paramètres du bloc:
réglage de la couleur du Texte & Arrière plan & bordure.

• L’extension ECCP ajoute un bouton format a la barre d’outils du bloc qui permet l’insertion d’une icône Dashicons a gauche ou droite du texte sélectionné du bouton.
Ce bouton est aussi activé pour la barre d’outils du bloc Paragraphe et permet d’insérer dans le texte une icône pour un espace sélectionné.
Vous pouvez aussi insérer une icône Font Awesome.


• Vous pouvez aussi sélectionner une icône Dashicons pour le bloc bouton dans la barre latérale de l’editeur, aux paramètres du bloc, Pannneau ECCP Icônes.

Bloc Bouton style Outline hover arrow

Le style Outline hover arrow(Style contour au survol & icône >) est accessible dans le
Panneau Styles des paramètres du bloc.
Le style au survol en front end est appliqué automatiquement en fonction de la couleur d’arrière plan sélectionnée dans les paramètres du bloc bouton en back office.

Bloc Bouton style Fill hover arrow

Le style Fill hover arrow(Style plein au survol en forme de flèche) est accessible dans le
Panneau Styles des paramètres du bloc.

Bloc Bouton Style Download & Ombre Portée

Appliquer simplement le style Download(Télécharger) a partir du panneau style des paramètres du bloc.
Dans la page de réglages de l’extensiononglet Personnaliser éditeur, vous avez des options pour personnaliser les cinq préréglages d’ombre portée pour le réglage OMBRE aux paramètres des blocs Boutons,Colonnes,Image etc…

Bloc Boutons Style Biseau

Le style Biseau est accessible au Panneau Styles des paramètres du bloc
Fonctionne sur navigateur chrome & opera.
Crée des angles biseautés, il faut au préalable aux paramètres du bloc appliquer un
rayon de bordure.

Bloc Boutons Style Ouvrir vidéo dans une lightbox

Ce style appliqué au bloc boutons vous permet en Front End au clic du bouton d’ouvrir une vidéo YouTube dans une lightbox.
Vous devez aux paramètres du bloc boutons pour le Panneau ECCP Styles sélectionner:
• Ouvrir vidéo YouTube dans une lightbox
• Renseigner l’ID de la vidéo YouTube.
L’ID de la vidéo YouTube se trouve dans l’URL de la page vidéo, juste après le: v=
Par exemple pour:
https://www.youtube.com/watch?v=-lYGgbp0yeM&t=10s
ID= -lYGgbp0yeM

Pour terminer dans les paramètres du bloc bouton, définissez les réglages pour le style contour ou plein.

Bloc Citation

Ajout d’une option dans la page de réglages de l’extension, onglet Personnaliser Blocs Gutenberg, pour activer des styles personnalisés aux paramètres du bloc Citation.
Ci-dessous Bloc citation avec respectivement les styles:
• Quote(Citation)
• Fancy Quote(Citation fantaisiste)
• Parenthèse
• First Letter(Première Lettre)
• Arrow(Flèche)
Remarque
Le style Fancy Quote est identique a la variation du bloc citation Fancy Quote, disponible dans l’inséreuse de blocs sous la catégorie: BLOC PERSONNALISÉS ECCP.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Bloc Code

L’extension utilise la librairie highlightjs pour apporter une coloration syntaxtique au bloc code. Dans les paramètres de l’extension, onglet Personnaliser Blocs Gutenberg, vous pouvez choisir parmi une coloration syntaxtique claire ou sombre.
Ajout d’un bouton « copier dans le presse-papiers »,ce bouton permet de copier le code affiché en un seul clic.

// Suppression du champ: Site WEB  pour le formulaire de commentaire
function delete_comment_form_field_url($fields){
   unset($fields['url']);
   return $fields;
}
add_filter('comment_form_fields', 'delete_comment_form_field_url');

Bloc Colonnes

Bloc colonnes avec le style: Columns reverse mobile (Inversion colonnes sur mobile) sélectionné dans le Panneau Styles des paramètres du bloc,inversion appliquée jusqu’a une résolution de 781px.Si on n’a pas choisi d’empiler les colonnes sur mobile, alors les trois colonnes sont alignées cote à cote dans l’ordre inverse.

Application du style centré du texte pour les paragraphes sur mobile, dans le Panneau ECCP Styles des paramètres du bloc.
Ajout d’un lien au bloc entier pour la colonne de gauche,dans le panneau ECCP Link des paramètres du bloc ou via la barre d’outils,un lien interne au bloc reste cliquable.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Demo 07 Rock A 4 Temps

Demo 07 Rock A 4 Temps

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Bloc Colonne

Style ordre colonne sur mobile & responsive trois colonnes

Aux paramètres du bloc, Panneau styles, ajout des styles: Ordre Col 1,Ordre Col 2, Ordre Col 3,
afin de spécifier pour un bloc à trois colonnes, l’ordre des colonnes sur mobile.

Remarque
Si on veut placer uniquement une colonne en premier sur mobile sans affecter l’ordre des deux autres colonnes, il suffit simplement de lui assigner le style: Ordre Col 1.
Nativement pour un bloc a trois colonnes la disposition en une seule colonne sur mobile est établi jusqu’a une résolution de 781px.
Aux paramètres du bloc parent Colonnes, Panneau Styles, vous pouvez appliquer le style Responsive Three Columns(Trois colonnes responsives).
Avec ce style pour une résolution comprise entre 600px et 781px, la 1ère colonne occupe toute la largeur avec les deux autres colonnes en dessous sur une même ligne.

Pour l’exemple ci-dessous l’ordre sur mobile est:
• Colonne 3
• Colonne 1
• Colonne 2

Colonne 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Colonne 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Colonne 3

Bloc Derniers Articles

Dans la page d’options du plugin Onglet:
Personnaliser Blocs Gutenberg/Bloc Derniers Articles.
• Activation du style Card(Carte)
Le style Carte n’est fonctionnel que pour la disposition en grille des derniers articles.
• Option pour activer un zoom au survol de 5%.

Dans la page d’options du plugin Onglet:
Personnaliser Blocs Gutenberg/Bloc Lire La Suite.
• régles de style pour la balise lire la suite

Pour l’image mise en avant utiliser la taille moyenne sans aucun alignement, dans les paramètres du bloc.

Aux paramètres du bloc Panneau Styles, le syle Carrousel, vous permet d’afficher vos articles par pagination dans une disposition en grille de trois colonnes par défaut.
Sélectionner aux paramètres du bloc dans le Panneau tri et filtrage le nombre d’éléments.
Fonctionne sur navigateur chrome & edge & opera

Bloc Boucle De Requête

Aux paramètres du bloc, Panneau ECCP Styles vous avez les options de réglages suivantes:

Paramètres affichage publication
• Ombre portée
• Rayon de bordure
• Effet translation au survol

Personnaliser la pagination
• Style liens suivant & précédent
• Paramètres numéros pages

Dans la page d’options du plugin Onglet:
Personnaliser Blocs Gutenberg/Bloc Boucle De Requête

• Vous pouvez activer l’utilisation d’un avatar personnalisé pour le bloc Boucle De Requête.
Télécharger ensuite dans la médiathèque votre avatar personnalisé.
Cet avatar personnalisé doit être une image au format carrée, par exemple de 150 * 150px.
En back office pour un site en ligne, vous devez ensuite activer cet avatar personnalisé en sélectionnant l’option avatar personnalisé dans le menu Réglages/Commentaires section avatar par défaut.

Dans la page d’options du plugin Onglet:
Personnaliser Blocs Gutenberg/Bloc Lire La Suite

• régles de style pour la balise lire la suite

Pour avoir le même rendu que le bloc boucle de requête ci-dessous, vous devez insérer un bloc espacement entre le bloc Date de la publication & le bloc Catégories d’articles.

Bloc Détails

Ce bloc introduit par la version WordPress 6.3 peut par exemple permettre d’établir une FAQ comme ci-dessous.
l’extension ECCP Ajoute un contrôle alignement dans la barre d’outils du bloc.
Dans les paramètres du bloc Panneau ECCP Styles,ajout des options:
• Icône Dashicons Arrows, en remplacement de l’icône par défaut, pour indiquer si le contenu du bloc détails est affiché ou masqué.
• Largeur du bloc
• Rayon de bordure

Le contrôle alignement est expérimental si vous rencontrez un problème avec l’alignement gauche ou droite , insérer en dessous du Bloc Détails un bloc espacement de 1px.

Bloc Embed Vidéos You Tube

Vidéo réglée a une largeur de 640px dans l’onglet Personnaliser éditeur de la page d’options du plugin, menu:
embeds responsive(par exemple intégration de vidéos YouTube).
Suite a la modification de taille, le plugin gère les alignements (left, center,right) de la vidéo.

Bloc Espacement

Gestion du responsive, réglages Hauteur Espacement en pixel dans le Panneau ECCP Styles des paramètres du bloc, pour les Tablettes & Mobiles.
Par défaut à l’activation du mode responsive, hauteur espacement de 50px pour les tablettes et 30px pour les mobiles.

Bloc FAQ Yoast SEO

Options dans la page de réglage de l’extension, onglet Personnaliser Blocs Gutenberg, pour transformer en Front End le bloc FAQ Yoast SEO en Accordéon et modifier sa largeur.
Ce bloc fait parti de l’extension Yoast SEO, il comporte des données structurées, ce qui permet d’avoir des résultats enrichis dans le moteur de recherche de Google.

Bloc Fil D’Ariane Yoast SEO

Dans la page de réglage de l’extension, onglet Personnaliser Blocs Gutenberg, vous pouvez régler pour le fil d’ariane:
• Couleur
• Activer un style personnalisé comme ci-dessous
Ce bloc fait parti de l’extension Yoast SEO, voir la documentation de l’extension pour l’intégration du fil d’ariane.
Les réglages apportées par l’extension ECCP sont pris en compte par le Bloc Fil d’ariane mais aussi par l’intégration dans votre thème, comme avec l’exemple de code ci-aprés.

add_filter( 'the_content', 'add_breadcrumb_yoast_seo'); 

// Ajout du fil d'ariane au début du contenu des articles
function add_breadcrumb_yoast_seo($content) {

    if(is_single()){ 
		if ( function_exists('yoast_breadcrumb') ) {
			// Ajout du fil d'ariane yoast SEO
			$content .= yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
		}
    }
	
   return $content; 
};

Bloc Galerie

Style Carte

Dans le Panneau ECCP Styles des paramètres du bloc, sélection d’un style par défaut.
Pour appliquer le style Carte aux images du bloc galerie à partir du Panneau Styles, il faut au préalable avec le réglage natif de l’editeur ajouter un rayon de bordure de 1px aux images pour déplacer la légende en dessous de l’image.

Dans la page de réglages de l’extension Onglet Personnaliser Front End
vous pouvez activer l’option lightbox.
La fenêtre contextuelle Fancybox permet alors d’apporter une lightbox aux images & galeries WordPress.
Cette lightbox est présente pour la galerie ci-dessous avec un thème clair.
Vous pouvez paramétrer: un thème sombre ou clair,sélectionner le type de vignettes,délai du diaporama …..
Vous pouvez zoomer avec: les boutons + ou – de la barre d’outils de la lightbox, molette de la souris, touches + ou – du clavier numérique, clic pour un zoom intermédiaire, double clic pour un zoom max.

Style Arrière Plan

Dans le Panneau ECCP Styles des paramètres du bloc Galerie, réglage d’un style Défaut & d’un rayon de bordure global de 10px commun a toutes les images de la galerie, puis à partir du panneau Dimensions on régle l’espacement des blocs images & marges internes de la galerie avec les mêmes valeurs prédéfinies, il ne reste plus qu’à appliquer un rayon de bordure de 10px a la galerie et une couleur d’arrière-plan.

Style Justifié

Dans le Panneau ECCP Styles des paramètres du bloc, sélectionner le style Justifié.
Ce style va permettre de justifier toutes les images entre elles en fonction de leur format.
Les images sont affichées dans une grille dont il est possible d’ajuster la hauteur des lignes d’images et la largeur des colonnes, ce qui aura pour effet de modifier la disposition des images.
Vous pouvez régler un zoom au survol des images de la galerie.
Le réglage d’espacement entre les images se fait a partir du Panneau Dimensions Espacement des blocs.
Ce style est appliqué a partir d’une résolution d’écran de 700px.

Remarque:
Si vous activez l’effet de zoom au survol des images,vous ne pourrez pas régler d’ ombres portées pour les images.

Style Masonry

Dans le Panneau ECCP Styles des paramètres du bloc, sélectionner le style Masonry qui apporte une nouvelle mise en page attrayante.
Vous pouvez régler un zoom au survol des images de la galerie.
Le réglage d’espacement entre les images se fait a partir du Panneau Dimensions Espacement des blocs.
Ce style est appliqué a partir d’une résolution d’écran de 481px.

Remarque:
Si vous activez l’effet de zoom au survol des images,vous ne pourrez pas régler d’ ombres portées pour les images.

Style Carré

Dans le Panneau ECCP Styles des paramètres du bloc, sélectionner le style Carré.
il est possible d’ajuster la hauteur des lignes d’images, ce qui a pour effet de modifier la taille des images et donc le nombre de colonnes.
Vous pouvez régler un zoom au survol des images de la galerie.
Le réglage d’espacement entre les images se fait a partir du Panneau Dimensions Espacement des blocs.

Remarque:
Si vous activez l’effet de zoom au survol des images,vous ne pourrez pas régler d’ ombres portées pour les images.

Album D’images

Transformer le bloc Galerie en un album d’images, pour cela sélectionner le style Album dans le Panneau ECCP Styles des paramètres du bloc.
Vous pouvez alors définir :
• Le nom de l’album
• La couleur et la taille de texte pour le nom de l’album
Dans les paramètres du bloc Galerie, Lien vers –> sélectionner Fichier Média.

En Front End & Back Office seule la 1ère image du bloc Galerie sera alors visible avec en premier plan le nom de l’album.
En Front end vous pouvez visionner les images de l’album grace a la lightbox apportée par l’extension.
La lightbox est activée dans la page de réglages de l’extension Onglet Personnaliser Front End.

Pour régler la taille de l’image qui sert de couverture a cet album:
• Grouper le bloc galerie a partir de la barre d’outils du bloc.
Vous pouvez alors régler la largeur, dans le Panneau ECCP Styles des paramètres du bloc Groupe.
• 2ème solution: insérer le bloc galerie dans un bloc 2 colonnes.

Concours Rock 4 Temps

Concours Rock 4 Temps

Concours Rock 4 Temps

Concours Rock 4 Temps

Concours Rock 4 Temps

Concours Rock 4 Temps

Concours Rock 4 Temps

Concours Rock 4 Temps

Concours Rock 4 Temps

Style albums d’images avec une disposition Masonry

La disposition grille du bloc Groupe établi a partir de WordPress 6.6 et l’extension ECCP permette de réaliser cette mise en page d’albums d’images.

Ajouter un bloc Grille avec une mise en page Manuelle de 3 colonnes.
Pour chaque élément de la grille ajouter un bloc galerie avec un lien vers fichier Média.
Le bloc galerie est ensuite transformé en album d’images à partir du Panneau ECCP Styles des paramètres du bloc.

Dans le Panneau ECCP styles sélectionner le style Album, vous avez accés aux options de réglages:
Nom de l’album, Couleur & taille du texte, effet ombre de texte, zoom au survol.
Pour les albums N°6 & 7 & 8, sélectionner le bloc galerie correspondant, puis dans le
Panneau Dimensions des paramètres du bloc, régler une disposition sur 1 colonne et 2 lignes.

A partir du Panneau Dimensions des paramètres du bloc Grille, régler l’espacement des blocs pour ajuster l’écartement de la grille.
Dans le Panneau Styles sélectionner le style personnalisé « Layout One Column Mobile ».
On obtiend ainsi une disposition sur une colonne pour les mobiles, jusqu’à une résolution de 600px.

En Front end vous pouvez visionner les images de l’album grace a la lightbox apportée par l’extension.
La lightbox est activée dans la page de réglages de l’extension Onglet Personnaliser Front End.

ALBUM N°1

ALBUM N°1

ALBUM N°1

ALBUM N°2

ALBUM N°2

ALBUM N°2

ALBUM N°3

ALBUM N°3

ALBUM N°3

ALBUM N°4

ALBUM N°4

ALBUM N°4

ALBUM N°5

ALBUM N°5

ALBUM N°5

ALBUM N° 6

ALBUM N° 6

ALBUM N° 6

ALBUM N°7

ALBUM N°7

ALBUM N°7

ALBUM N°8

ALBUM N°8

ALBUM N°8

Slider Effet De Transition Fondu

Dans la page de réglages de l’extension Onglet Personnaliser Bloc Gutenberg vous devez activer pour le bloc galerie l’option qui permet de charger les scripts et styles nécessaire a la librairie Swiper afin de transformer en Front End le bloc galerie en slider.

Dans le Panneau ECCP Styles des paramètres de réglages du bloc Galerie, sélectionner le style Slider,vous avez alors accés aux options de réglage:
Alignement pleine largeur,Largeur du slider, Lecture automatique avec délai de lecture par slide, Navigation Par Points, Navigation Par Flêches, Navigation Par Barre De Défilement,Effet De Transition .

Effets de transition
• Fondu
• Retournement
• Cube
• Flux d’images
• Cartes

Pour l’effet de transition flux d’images, les Navigations Par Flêches & Barre De Défilement sont désactivées car ne conviennent pas pour cet effet.
Par défaut l’effet de transition est fondu, les autres effets ne sont pas disponible pour une lecture automatique ou un alignement pleine largeur du slider.

Slider Lecture Automatique

Slider Effet De Transition Flux D’images

crédit: images voiture ancienne Pixabay

Dans la page de réglages de l’extension Onglet Personnaliser Bloc Gutenberg vous devez activer pour le bloc galerie l’option qui permet de charger les scripts et styles nécessaire a la librairie Swiper afin de transformer en Front End le bloc galerie en slider.

Effets de transition
Pour l’effet de transition flux d’images, les Navigations Par Flêches & Barre De Défilement sont désactivées car ne conviennent pas pour cet effet.
De même cet effet n’est pas disponible pour un alignement pleine largeur du slider.

Pour des images 4/3 ou 16/9 prendre comme base les réglages par défaut
et à adapter selon votre résolution d’écran:
• Angle de rotation: 25°
• Étirement espace entre les slides: 10px
• Décalage profondeur par slide: 100px
• largeur slider: 400px en 4/3 , 330px en 16/9

Pour des images 3/4 comme ci-dessous la base de réglages est la suivante:
• Angle de rotation: 15 °
• Étirement espace entre les slides: 0px
• Décalage profondeur par slide: 300px
• largeur slider: 350px

Slider Effet De Transition Cube

crédit: images voiture ancienne Pixabay

Dans la page de réglages de l’extension Onglet Personnaliser Bloc Gutenberg vous devez activer pour le bloc galerie l’option qui permet de charger les scripts et styles nécessaire a la librairie Swiper afin de transformer en Front End le bloc galerie en slider.

Effets de transition
Cet effet n’est pas disponible pour un alignement pleine largeur du slider.

Slider Effet De Transition Cartes

crédit: images voiture ancienne Pixabay

Dans la page de réglages de l’extension Onglet Personnaliser Bloc Gutenberg vous devez activer pour le bloc galerie l’option qui permet de charger les scripts et styles nécessaire a la librairie Swiper afin de transformer en Front End le bloc galerie en slider.

Effets de transition
Cet effet n’est pas disponible pour un alignement pleine largeur du slider.

Réglages par défaut:
• Décalage slide: 8px
• Angle de rotation par slide: 4°
• largeur slider: 300px

Slider En Pur CSS

Le Slider est réalisé uniquement en CSS, sans JavaScript, grâce à de nouvelles fonctionnalités CSS.

Aux paramètres du bloc Galerie, Panneau Styles, sélectionner le style ECCP Slider afin de transformer en Front End le bloc galerie natif de WorPress en un Slider.

Caractéristiques :
• Responsive: largeur automatique en fonction de la taille medium_large de la première image.
• Navigation avec boutons & marqueurs de défilement intégrés du navigateur.
• Animation fluide au défilement (fade-in / fade-out).

Fonctionne sur navigateur chrome,edge, opera,safari

Ce slider est une fonctionnalité intégré dans une nouvelle extension développé par Rouergue Création.
Cette extension de 9ko seulement,est disponible sur le répertoire officiel de WordPress: Slider Native Gallery Responsive

Comparaison images AVANT/APRÉS

Dans le Panneau ECCP Styles des paramètres de réglages du bloc Galerie
sélectionner le style Comparaison images Avant/Aprés. Cela permet d’activer en Front End une comparaison pour une galerie composée de deux images qui présentent des différences, avec un effet de slide au survol des images.

• Pour que ce style fonctionne vous devez incorporer le bloc galerie dans bloc a 2 colonnes.
• Veiller dans les paramètres du bloc galerie a ne mettre aucun lien pour les images.
• Les intitulés « AVANT » & « APRÉS » sont renseignés avec la légende de l’image.

Bloc Groupe

Dans le Panneau ECCP Styles des paramètres du bloc, sélectionner le style défaut.
Vous avez alors accés aux paramètres arrondi de la bordure & Box Shadow .

Style Slider Bannière

Dans la page de réglages de l’extension Onglet Personnaliser Bloc Gutenberg vous devez activer pour le bloc galerie l’option qui permet de charger les scripts et styles nécessaire a la librairie Swiper afin de transformer en Front End le bloc Groupe ou Galerie en slider.

Le slider fonctionne pour un bloc groupe qui regroupe des blocs bannières.


Dans le Panneau ECCP Styles des paramètres du bloc, sélectionner le style slider pour activer le slider et ses options de réglages:
Alignement pleine largeur,Largeur du slider, Lecture automatique avec délai de lecture par slide, Navigation Par Points, Navigation Par Flêches, Navigation Par Barre De Défilement,couleur navigation par flêches et par points .

Si vous sélectionner un alignement pleine largeur, vous devez également renseigner pour chaque bannière aux paramètres du bloc :
1ère Méthode
• La hauteur minimale de la bannière avec la hauteur de votre image en taille réelle:

• La hauteur de la bannière sur mobile:


2ème Méthode
A partir de WordPress 6.5, vous pouvez sélectionner aux paramètres du bloc une Proportion de taille, par ex: Large – 16:9 , dans ce cas le paramètre de hauteur minimale de la Bannière n’est pas pris en compte.

 

FORMATION ROCK 4 TEMPS

Je décide d’apprendre à danser !

Souscrire 5€/Mois

 

Rock That Paris

Passion 4 Temps !

Style Slider Témoignages

Dans la page de réglages de l’extension Onglet Personnaliser Bloc Gutenberg,vous devez activer pour le bloc galerie, l’option qui permet de charger les scripts et styles nécessaire a la librairie Swiper, afin de transformer en Front End le bloc Groupe ou Galerie en slider.

Le slider fonctionne pour un bloc groupe qui regroupe des blocs bannières.



Dans le Panneau ECCP Styles des paramètres du bloc, sélectionner le style slider pour activer le slider et ses options de réglages:
Alignement pleine largeur,Largeur du slider, couleur arrière-plan & rayon de bordure, Lecture automatique avec délai de lecture par slide, Navigation Par Points, Navigation Par Flêches, Navigation Par Barre De Défilement, couleur navigation par flêches et par points .

Chaque bannière ne comporte aucune image de fond, et correspond a un slide de témoignage,qui est composé des blocs suivants:



Bloc image avec une taille de 110px * 110px,auquel on applique via les paramètres du bloc le style Arrondis.
• 1er bloc paragraphe: Nom de la personne
• 2ème bloc paragraphe: le témoignage
• 3ème bloc paragraphe:
L’extension ECCP ajoute un bouton format a la barre d’outils du bloc Paragraphe qui permet pour un espace sélectionné l’insertion d’une icône Dashicon, en l’occurence: star-filled.



Remarques:
• Si vous souhaitez appliquer une couleur d’arrière plan au slider, au préalable régler pour chaque bloc Bannière l’opacité du calque de superposition a 0.
• Avec des blocs bannières regroupés, vous créer ainsi les compositions que vous souhaitez, afin de les présenter sous forme de slide.

Alain BLADOU

« Gîte à la hauteur de nos espérances. Deco très soignée et chaleureuse. Nous avons passé un super moment merci beaucoup à Amélie pour son accueil et sa disponibilité. Nous reviendrons ! »

        

Georges BOUILLANT

«Nous avons passé 2 nuits dans le gîte d’Amélie , et avons particulièrement apprécié la proximité du bourg , du port et de la mer qui permet de se promener, d’aller acheter le pain à pied . Hôte très accueillant et arrangeant . »

        

Gilles DUPONT

« Nous sommes 5 amis et avons passé un excellent séjour de 2 nuits dans la maison d’Amélie.La pièce de vie est spacieuse et lumineuse grâce à la grande baie vitrée.Encore merci Amelie et Justine »

        

Style Table des matières

Dans le Panneau Styles des paramètres du bloc ajout du style Table Of Contents(Table des matières).
Ce style permet d’afficher uniquement en Front End une Table des matières de la publication en cours.Vous devez également au préalable dans le paramètre du bloc groupe
Panneau avancé/élément HTML sélectionner une balise <article>.

Cette Table des matières est visible en haut de cette page .

Dans les paramètres du bloc groupe vous pouvez modifier:
• La couleur d’arrière plan, couleur & taille & graisse du texte , rayon de bordure, etc..

Dans le Panneau ECCP styles des paramètres du bloc vous pouvez modifier:
• Réglage largeur du bloc Groupe donc de la Table Des Matières.

Dans la page de paramètres de l’extension,
onglet Personnaliser Blocs Gutenberg/Bloc Groupe/style table des matières:
• Titre,couleur du titre,pour la table des matières
• Activer un soulignement des liens au survol
• Décalage des ancres de navigation pour un en-tête fixe

Retrouver aussi le bloc Table des matières en téléchargement dans l’onglet compositions des paramètres de l’extension.
Une fois la composition insérée dans la publication, La synchronisation peut être désactivée en un clic grâce au menu «Détacher la composition» de la barre d’outils du bloc.

Style Formes de séparation

Dans le Panneau ECCP Styles des paramètres du bloc, sélectionner le style Formes de séparation, vous avez le choix parmi 18 styles de formes, avec réglage de la hauteur, largeur, couleur de fond, retournement.

Vous pouvez afficher les formes de séparation a l’intérieur ou à l’extérieur du bloc Groupe.

Formes positionnés a l’extérieur du bloc Groupe
C’est la configuration par défaut pour une expérience plus aboutie dans l’editeur.
Avec cette configuartion les marges externes prédéfinies ne fonctionnent pas, seulement des marges externes personnalisées.

Formes positionnés a l’intérieur du bloc Groupe
Convient en particulier lorsque vous souhaitez appliquer une forme de séparation a une image de fond.
Cette configuration est plus difficile a utiliser dans l’editeur, car les formes sont affichées avec des pseudo-éléments CSS.
Ainsi lorque vous cliquez dans le bloc Groupe, la forme de séparation peut se déplacer ou disparaitre. Pour la faire apparaitre, sélectionner le bloc Groupe, puis cliquer sur l’icône « hamburger » de la barre d’outils de l’editeur(Vue d’ensemble du document) puis refermer cette vue. Utiliser ce même mode opératoire si vous souhaitez modifier les paramètres de la forme de séparation.

Exemple: style Ventilateur & Incurvé pour le bloc groupe ci-dessous

Style Images Disposées en Cercle

• Insérer un bloc groupe avec une disposition grille.
• Pour chaque élément de la grille insérer un bloc image.
• Selon le format de vos images, appliquez pour chaque image, le style Arrondi ou Circle 4/3 ou circle 16/9 définit aux Panneau Styles des paramètres du bloc image.
• Dans le Panneau ECCP Styles des paramètres du bloc Groupe, sélectionner le style Images disposées en cercle.
Vous pouvez alors régler la taille & espacement des images sur PC & Mobile.
Le point de rupture mobile est définit a 600px par défaut.
• Pour avoir une disposition des images autour d’un cercle, un offset est appliquée aux images.Veillez a mettre un bloc espacement avant & aprés le bloc groupe supérieur a la taille des images.
Dans le Panneau ECCP Styles des paramètres du bloc , vous pouvez gérer le style responsive du bloc Espacement.

Style Popup

Dans le Panneau ECCP Styles des paramètres du bloc, sélectionner le style popup, pour activer en Front End une fenêtre modale selon deux modes de déclenchement:
• Délai d’ouverture automatique
• Clic d’un bouton
Il ne peut y avoir qu’un Popup par publication.

Le délai d’ouverture automatique est conditionné a la non présence d’un cookie que vous pouvez activer.
Le cookie a une durée de vie réglable de 1 à 6 mois.
Le cookie est crée lors de la 1ère fermeture du Popup, il a pour nom: eccp-cookie.
Le cookie est lié a la publication ou le Popup est affiché.

Pour une ouverture du Popup au clic d’un bouton, vous devez ajouter via les paramètres avancés du bloc bouton la classe: eccp-popup-trigger.

Construction du Popup
Le bloc Groupe pour lequel on active un Popup, doit être dans la publication pour laquelle on souhaite afficher le Popup.
Pour une publication établi avec Elementor, il vous suffit de créer une composition, et de l’ajouter via un shortcode.
En effet l’extension ECCP ajoute des shortcodes et des fonctions PHP à l’interface d’administration des compositions.

Le bloc groupe étant un container, vous pouvez établir le design qui vous convient avec tous les blocs Gutenberg a votre disposition.
Une restriction , le 1er bloc interne du bloc Groupe doit être un bloc paragraphe qui va contenir le bouton de fermeture du Popup.
Ce bouton sera une icône Dashicon.
L’extension ECCP ajoute un un bouton format a la barre d’outils du bloc Paragraphe qui permet pour un espace sélectionné l’insertion d’une icône Dashicon no, soit: X .

Ajouter via les paramètres avancés du bloc Paragraphe la classe: eccp-popup-close.
Il ne vous reste plus qu’a sélectionner via la barre d’outils du bloc, un alignement a droite du bloc paragraphe.

Pour le style du Popup, vous avez tous les paramètres du bloc Groupe, mais aussi a partir du Panneau ECCP Styles:
• Réglage largeur, elle sera par défaut a 100% sur mobile.
• Régle CSS box-shadow pour ajouter un effet d’ombre portée.

Visibilité du Popup
Le Panneau ECCP Visibilité vous permet d’afficher ou masquer le bloc Groupe sur mobile,tablette ou ordinateur et donc par voie de conséquence votre Popup.

Désactivation du Popup
Si vous souhaitez désactiver momentanément le Popup, il vous suffit de sélectionner le mode de déclenchement: Aucun Déclencheur.

Démo du Popup
Pour voir le Popup, cliquer sur le bouton « Popup » ci-dessous.

 

Apprendre À Danser

Avec notre formation en ligne, au travers de vidéos, vous allez apprendre à danser les passes du
Rock A 4 Temps .
Chaque passe de danse est décomposée afin de la rendre accessible au plus grand nombre.

Découvrez Notre Formation

Style Google Maps

Dans le Panneau ECCP Styles des paramètres du bloc Groupe, sélectionner le style Google Maps, pour afficher en Front End une carte Google Maps.
Vous devez au préalable dans la page de réglage du plugin, onglet Personnaliser Front End entrer une clé API Google Maps Embed.

Vous avez accés aux réglages suivant:
• Emplacement:  l’adresse du lieu, ou monument a afficher sur la carte
• Zoom: 1: Le Monde, 5: Le Continent, 10: La Ville, 15: Les Rues,
20: Les Bâtiments
• Hauteur: hauteur de la carte en pixel
• Hauteur de la carte sur mobile en pixel: pour une résolution <= 480px
• Largeur du bloc groupe: Vous pouvez ainsi régler la largeur de la carte

Espacements Fluides & Tailles personnalisées Fluides

L’extension permet d’activer la Typographie Fluide pour les tailles de texte prédéfinies et les tailles personnalisés, ainsi que les Espacements Fluides.
La Typographie Fluide permet aux tailles de texte de s’adapter aux changements de taille de l’écran, par exemple en augmentant la taille à mesure que la largeur de la fenêtre augmente, ou en la réduisant à mesure qu’elle diminue.
Il en est de même pour les Espacements Fluides qui s’appliquent aux sept valeurs prédéfinies pour les marges internes, externes et espacement des blocs qui sont disponibles dans la section Dimensions de l’onglet Style aux paramètres du bloc.

Bloc Icônes de réseaux sociaux

• Ajout d’icônes sociales personnalisées: YouTube Music & Signal, fonctionnel a partir de WordPress 6.9.
• Dans le Panneau Styles des paramètres du bloc sélectionner le style Rectangular Shape(Forme rectangulaire).
Pour les icônes de réseaux sociaux, saisissez le libellé dans les paramètres du bloc, ou via le contrôle personnalisé Texte de la barre d’outils.
Le libellé sera visible au survol de l’icône de réseau social.
Corrélation des tailles des icônes avec les tailles de texte prédéfinies de l’editeur Gutenberg.
Dans le panneau style des paramètres du bloc vous avez aussi les styles:
Float Right(Flottant à droite): icônes sociales flottantes à droite
Float Left(Flottant à gauche): icônes sociales flottantes à gauche

• Twitter
• YouTube
• Facebook
• Pinterest

Bloc icônes sociales avec liens de partage

Dans le Panneau Styles des paramètres du bloc sélectionner le style Rectangular Shape(Forme rectangulaire).
Pour les icônes de réseaux sociaux, saisissez le libellé dans les paramètres du bloc, ou via le contrôle personnalisé Texte de la barre d’outils.
Le libellé sera visible au survol de l’icône de réseau social.
Dans le panneau ECCP styles des paramètres du bloc, activer l’option pour transformer le lien de profil en lien de partage.
Le résultat est visible en haut de page et avec le style flottant à droite de cette page.
Le lien de partage pour le réseau social Pinterest transmet l’URL de l’Image En Avant si elle est présente pour les articles & types de publication personnalisées.
Retrouver des bloc icônes sociales avec styles liens de partage en téléchargement dans l’onglet Compositions de la page de réglages de l’extension.
Aprés importation dans l’écran des compositions, vous pouvez ensuite afficher ces compositions avant et/ou aprés tous type de publication via l’onglet Compositions de la page de réglages de l’extension.

Bloc Image

Style Filtre Niveaux De Gris

Style Filter: Grayscale(Filtre: gris) dans le Panneau Styles des paramètres du bloc.
Réglage de la légende pour l’image dans l’onglet Personnaliser Blocs Gutenberg de la page d’options du plugin, menu Bloc Image:
taille du texte & marge interne.
Réglage d’un zoom au survol des images dans le Panneau ECCP Styles des paramètres du bloc.

Dans la page de réglages de l’extension Onglet Personnaliser Front End
vous pouvez activer l’option lightbox.
La fenêtre contextuelle Fancybox permet alors d’apporter une lightbox aux images & galeries WordPress.
Cette lightbox est présente pour l’image ci-dessous avec un thème clair.
Vous pouvez paramétrer: un thème sombre ou clair,sélectionner le type de vignettes,délai du diaporama …..
Vous pouvez zoomer avec: les boutons + ou – de la barre d’outils de la lightbox, molette de la souris, touches + ou – du clavier numérique, clic pour un zoom intermédiaire, double clic pour un zoom max.

Style Masque Circulaire Image 16/9

Application du style Cercle img 16/9 dans le Panneau Styles des paramètres du bloc.

Style Card(Carte)

Sélectionner une résolution Taille Originale dans les réglages du bloc.
Fonctionne pour un alignement à gauche ou à droite de l’image.
Style Card(Carte): dans le Panneau Styles des paramètres du bloc.

Dans le panneau ECCP Styles des paramètres du bloc :
– Réglage de la largeur de l’image
– Effet Box Shadow
Ex: H=0  V= 0  Rayon de flou= 4  Rayon de diffusion= 2  Couleur= #000
Opacité= 20%
– Effet de zoom au survol

Rayon de bordure avec le réglage natif de Gutenberg depuis
WordPress 6.0.
Ce style Carte est expérimental si vous rencontrez un problème avec l’alignement gauche ou droite de l’image, insérer en dessous de l’image un bloc espacement de 1px.

Style Otogone

Dans le Panneau Styles des paramètres du bloc, sélection du style Octogone.
Fonctionne sur navigateur chrome & opera.

Style Polaroïd

Dans le Panneau Styles des paramètres du bloc, sélection du style Polaroïd.
Ce style est limité a la taille moyenne de l’image qui comporte une légende.

Style Bordure Animée

Dans le Panneau Styles des paramètres du bloc, sélection du style Bordure Animée.
Pour garantir une bonne animation, régler le rapport hauteur/largeur
sur 1:1

Bloc Image En Avant

Aux paramètre du bloc dans le Panneau Styles,ajout du style Overlay Opacity Hover(Opacité Superposition Au Survol). Avec ce style L’opacité du calque de superposition apparait désormais au survol de l’image en avant.

Bloc Liste

Style Des Puces

Style des puces respectivement : Liste ordonnée,check,
cercle duotone,push spin,add circle fill,etc.. sélectionné dans la barre d’outils ou le Panneau ECCP Styles des paramètres du bloc.

Dans le Panneau ECCP Styles des paramètres du bloc, réglages :
– Sélection icône des puces
– Couleur des puces
– Taille des puces
– Largeur du bloc Liste

Soulignement du texte selon une palette de 7 couleurs sélectionnées dans le menu Souligner Couleurs de la barre d’outils du bloc.

1. Liste ordonnée de style: Ordonned Disk
   1. Liste indentée
2. Liste ordonnée de style: Ordonned Disk
3. Liste ordonnée de style: Ordonned Disk

• Établissement de la charte graphique : Palette des couleurs, Typographie, Logo
• Refonte complète : des pages du site avec le constructeur de page Elementor

• Création : Formulaire d’inscription à une Newsletter
• Ajout d’une nouvelle rubrique : Formation Rock 4 Temps, Je décide d’apprendre à danser !, avec intégration de la passerelle de Paiement Stripe

• Intégration de cours en vidéos : accessible uniquement pour les Membres Premium
• Établissement de la charte graphique : Palette des couleurs, Typographie, Logo

• Refonte complète : des pages du site avec le constructeur de page Elementor
• Remplacement du player vidéos : pour la rubrique Photos/Vidéos j’utilise maintenant un Player Vidéos Moderne.

Style Accordion(Accordéon)

Le style Accordion(Accordéon) permet de transformer le bloc liste en Accordéon basculable visible uniquement en Front End.
Ce style s’applique uniquement a une liste non ordonnée.
Commencer par sélectionner le style Accordéon dans le Panneau Styles des paramètres du bloc.
Le 1er élément de la liste correspondra par exemple a une question.
Indentez le deuxième élément de la liste qui correspondra a la réponse.
Continuez ainsi de suite pour avoir le visuel du bloc liste en back office comme ci dessous.
Par défaut les questions sont mises en caractères gras sur Front End.
Vous pouvez régler la largeur de l’accordéon via le Panneau ECCP Styles des paramètres du bloc Liste.

• Question N°1
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• Question N°2
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Bloc Média & Texte

Style Half Background(demi-arrière-plan) sélectionné dans le Panneau Styles des paramètres du bloc.
Activer le style box shadow dans le Panneau ECCP Styles des paramètres du bloc pour régler le demi-arrière plan de l’image.
Paramètres pour l’exemple ci-dessous:
Couleur ombre de boite: #0E6487  X:20  Y:20  Flou:0  Diffuser:0

Demo Rock A 4 Temps

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Bloc Navigation

Pour les liens de menu ajout aux paramètres du bloc du Panneau ECCP Icônes qui permet d’appliquer une icône en préfixe de l’item de menu.

Aux paramètres du bloc Navigation ajout du Panneau ECCP Styles pour définir:

Menu PC
• La couleur de texte & d’arrière-plan de l’item de menu actif
• Une animation des items de menu au survol, vous avez le choix parmi neuf animations de menu.
• Options de réglages pour les sous-menu: style au survol, largeur

Menu Mobile
• Définir le point d’arrêt Mobile du Menu
• Effet slide de la droite
• Réduire les sous-menus
• Bordure items menu

Remarque
Aux paramètres du bloc Navigation, Panneau Mise en Page, vous avez établi:
• Justification à gauche ou aucune
Les réglages apportées par l’extension sont optimisées.
• Justification au centre
Pour un menu simple sans sous-menu, l’utilisation d’une icône en préfixe de l’item de menu,
est incompatible avec l’activation des bordures.
• Justification à droite
L’utilisation d’une icône en préfixe de l’item de menu,est incompatible avec l’activation des bordures.

Bloc Notes De Bas De Page

Lorsqu’on clique sur une note de bas de page¹, celle-ci est mise en évidence
pour indiquer visuellement celle que l’on doit consulter, grâce aux paramètres d’arrière plan & d’ombre portée ajoutés aux paramètres du bloc.

Dans ce paragraphe de texte vous avez une note de bas de page², ainsi que dans le paragraphe précédent.
cliquez dessus pour voir la note mise en évidence en bas de page.

Bloc Paragraphe

Style de notification & Lettrine

AApplication du style Info(ci-dessous) sélectionné dans la barre d’outils ou le Panneau Styles des paramètres du bloc Paragraphe.
Réglage de la largeur du bloc paragraphe dans le Panneau ECCP Styles des paramètres du bloc.
L’ activation de la Lettrine au Panneau Typographie du bloc, affiche des options de réglages dans le Panneau ECCP Styles, afin de personnaliser la Lettrine comme dans ce paragraphe.

INFO
Un espace en trop entre deux lettres, un écart irrégulier entre les paragraphes ou les intertitres… Traquez toutes les petites coquilles, histoire de livrer un article 100% cohérent et agréable à parcourir. Après tout, les détails font la perfection, n’est-ce pas ?

Surlignement du texte

Surlignement du texte selon une palette de 7 couleurs sélectionnées dans le menu Surlignage Couleurs de la barre d’outils du bloc.
Le surlignement du texte concerne toutes les barres d’outils de bloc qui présentent un menu format comme les blocs liste, paragraphe,titre.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lien externe & soulignement simple

Un contôle Liens Externes est présent dans le menu format de la barre d’outils.
Concerne toutes les barres d’outils de bloc qui présentent un menu
format comme les blocs liste, paragraphe,titre.
Permet l’ajout d’une icône Dashicons External après le lien sélectionné avec réglage de la couleur du lien + icône selon une palette de 7 couleurs.
Cela met en évidence que c’est un lien externe qui redirigera l’utilisateur
vers un autre site Web.

Un contôle Souligner est présent dans le menu format de la barre d’outils,il permet un soulignement simple du texte.

Ceci est un Lien Externe avec une icône positionnée aprés le lien pour indiquer a l’utilisateur que ce lien redirigera vers un autre site Web.
Voilà un soulignement simple du texte.

Contour du texte

Contour du texte selon une palette de 7 couleurs sélectionnées dans les menus Contour Couleurs, Contour Double Couleurs, Contour Pointillé Couleurs de la barre d’outils du bloc.
Le Contour du texte concerne toutes les barres d’outils de bloc qui présentent un menu format comme les blocs liste, paragraphe,titre.
Le contour du texte se fait selon un trait simple,double,pointillé.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Info-Bulle

Un contôle Ajouter info-bulle est présent dans le menu format de la barre d’outils.
Concerne toutes les barres d’outils de bloc qui présentent un menu
format comme les blocs liste, paragraphe,titre.
Le bouton Ajouter info-bulle affiche une fenêtre modale dans laquelle vous pouvez saisir le message de votre info-bulle pour l’élément de texte sélectionné.
Une fois le message saisi et appliqué, l’élément de texte sélectionné est souligné par un double trait, le message apparait dans une info-bulle au survol de l’élément de texte.

La couleur du texte et arrière plan etc.. de l’info-bulle sont personnalisable dans la page de réglages de l’extension:
Onglet Personnaliser bloc Gutenberg/BLOC PARAGRAPHE/Format info-bulle

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Bouton copier dans le presse papier

Un contrôle Bouton Copier Texte est présent dans le menu format de la barre d’outils.
Concerne toutes les barres d’outils de bloc qui présentent un menu format comme les blocs liste, paragraphe,titre.
Il permet de positionner aprés le texte sélectionné,un bouton d’action qui permet de copier dans le presse papier le texte sélectionné.
il applique également un encadrement par une bordure fine du texte sélectionné.

Ce bouton d’action copier dans le presse papier n’est actif qu’en Front End.

Remarque
Si vous ne souhaitez pas de bordure pour le texte sélectionné, renseignez dans le menu Apparence/Personnaliser/CSS additionnel la régle suivante:

.copy-text-container {
      border:none!important;
}

Exemple bouton d’action copier dans le presse papier
Mode de récupération WordPress accessible via l’url directe:
votresite.com/wp-login.php?action=entered_recovery_mode

Insertion Icône Font Awesome

Un contrôle Insertion Icône Font Awesome est présent dans la barre d’outils.

il permet l’insertion en ligne d’une icône Font Awesome 4.7 avec sélection de la couleur dans les champs de texte tels que: des blocs Paragraphe,Liste,Titre,
Bouton…

Bloc Séparateur

Ajout du contrôle Alignement dans la barre d’outils du bloc.
Le contrôle alignement est expérimental si vous rencontrez un problème avec l’alignement gauche ou droite , insérer en dessous du Bloc Séparateur un bloc espacement de 1px.

Aux paramètres du bloc Panneau ECCP Styles ajout d’options de réglage:
• Hauteur
• Largeur
Ces réglages s’appliquent pour les styles Défaut & ECCP Pointillés

Ajout au Panneau Styles des paramètres du bloc : style ECCP Pointillés.
Ce style est une personnalisation du style pointillés natif du bloc séparateur.

Séparateur avec icône
On utilise un bloc Groupe avec une disposition en rangée dans lequel on insère deux blocs Séparateur et un bloc Paragraphe.

Le bloc Paragraphe va permettre a partir de la barre d’outils du bloc d’insérer une icône Font Awesome ou Dashicons.

Aux paramètres du bloc Groupe veiller a ce que l’option Autoriser le passage sur plusieurs lignes ne soit pas activée

Style ECCP Pointillés

Séparateur avec icône

Bloc Tableau

Application du style ECCP Stripes(ECCP Rayures) sélectionné dans le Panneau Styles des paramètres du bloc, activer section d’en-tête dans le Panneau réglages du tableau.

Dans le Panneau ECCP Styles des paramètres du bloc, réglages :
• Couleur du texte & arrière plan pour l’en-tête.
• Panneau ECCP Corps Du Tableau: couleur du texte & arrière plan pour les lignes paires.
• Activer colonnes triables.

Dans le Panneau Couleur  natif des paramètres du bloc:
• Couleur du texte & arrière plan pour les lignes impaires

• Ajout d’une option dans la page de réglages de l’extension pour activer les tables responsives. Pour une résolution d’écran <= 767px la colonne de gauche est fixe et le reste des colonnes peuvent défiler.

Style Bouton pour un lien de la table
On peut appliquer le style d’un bouton a un lien de la table avec le contrôle Style Bouton du menu format de la barre d’outils du bloc.
C’est le cas pour le lien Chorégraphie de la table ci-dessous.
Les icônes sont insérées avec le bouton Appliquer Icônes Dashicons de la barre d’outils du bloc.


Icône en forme de croix
Dans une cellule du tableau insérer un espace insécable: ALT + 255.
Sélectionner l’espace insécable & avec le menu format: Mettre en évidence de la barre d’outil appliquer une couleur de texte.
Enfin avec le bouton Icônes Dashicons de la barre d’outils du bloc, sélectionner l’icône
en forme de croix: no
Vous pouvez aussi simplement sélectionner une Icône Font Awesome avec le contrôle Icône FA de la barre d’outils du bloc.

Bloc Titre

Dans le Panneau ECCP Styles des paramètres du bloc, réglages :
• Rayon de bordure
• Effet Ombre De Texte
• Effet contour du texte
• Application d’une icône dashicons en préfixe du titre

Soulignement du texte sélectionné selon la palette de couleurs ou une palette de 7 couleurs personnalisées présente dans le menu Souligner Couleurs de la barre d’outils du bloc.

Surlignement du texte sélectionné selon la palette de couleurs ou une palette de 7 couleurs personnalisées présente dans le menu Surlignage Couleurs de la barre d’outils du bloc.

Bloc Titre D’Archive

Aux paramètres du bloc, ajout du Panneau ECCP Styles avec des réglages pour un effet ombre & contour du texte.

Pour le titre ci-dessus en exemple voici les réglages:
• Couleur du titre: #333333

Effet ombre de texte:
• Couleur: #FFFFFF
• Longueur horizontale: -1
• Longueur verticale: -1
• Rayon de flou: 0

Effet contour du texte:
• Couleur: #B39DDB
• Épaisseur: 5px

Bloc Titre De La Publication

Aux paramètres du bloc, ajout du Panneau ECCP Styles avec des réglages pour un effet ombre & contour du texte.

Pour le titre ci-dessus en exemple voici les réglages:
• Couleur du titre: transparent

Effet ombre de texte:
• Couleur: #FFFFFF
• Longueur horizontale: -1
• Longueur verticale: -1
• Rayon de flou: 0

Effet contour du texte:
• Couleur: #333333
• Épaisseur: 5px

Composition Attention

Composition à télécharger au format json dans l’onglet Compositions de la page d’options du plugin.

Composition Alerte

Composition à télécharger au format json dans l’onglet Compositions de la page d’options du plugin.

Composition Métadonnées Article

Composition à télécharger au format json dans l’onglet Composition de la page d’options du plugin(nécessite WordPress 6.9).
Cette composition est une personnalisation du bloc groupe, elle permet d’afficher les métadonnées d’un article et est utile par exemple pour un thème de bloc:
• Nom de l’auteur
• Date de publication
• Catégorie
• Date de modification
• Nombre de commentaire
• Temps de lecture estimé

Composition Chronologie Animée

Source: Damon Cook

Ajout à partir de l’inséreuse de blocs de la composition Chronologie Animée sous la catégorie Compositions ECCP.


Vue Liste de la composition


La disposition et l’apparence de la chronologie est crée avec des blocs suivants:
• Un bloc Groupe avec une classe CSS attribuée: animated-timeline.
On ajoute aussi la classe animated-timeline–circles pour avoir un séparateur de démarcation de forme circulaire uniquement en Front end , en back office le séparateur reste un « t ».
Si l’on souhaite le séparateur en « t » pour l’interface publique il faudra supprimer
la classe: animated-timeline–circles
• Un bloc Colonnes avec trois colonnes imbriquées.
• Le premier bloc colonne représente la date de l’événement. Exemple :
« 2024, 2 avril »
• Le deuxième bloc colonne représente un séparateur vertical de chronologie.
le verrouillage de bloc est actif pour empêcher l’éditeur de supprimer
ou de déplacer accidentellement ce bloc.
il comporte un bloc Paragraphe qui est le symbole de démarcation.
• Le troisième bloc colonne est l’endroit où le contenu sera affiché pour chaque      événement sur la chronologie.

Il suffit donc de dupliquer le bloc colonnes conteneur des trois colonnes pour ajouter un évènement dans la chronologie.
En Front End la chronologie est animée au défilement de la page.

Vous pouvez modifier:
• La couleur de la ligne verticale de séparation, avec la couleur d’arrière plan de la colonne intitulé dans la vue liste: Séparateur vertical chronologie.
• La couleur du symbole de démarcation, avec la couleur de texte & Arrière Plan du paragraphe intitulé dans la vue liste: Symbole de démarcation
• La couleur de la ligne de démarcation horizontale avec la couleur de bordure inférieure pour le bloc colonnes intitulé dans la vue liste: Colonnes avec bordure inférieure.

2024

2 Avril

–

WordPress 6.5 – ‘Regina’

Gestion des polices Google via la bibliothèque de polices, affichage des horodatages, des résumés rapides et de l’historique des révisions via Style Book, outils d’arrière-plan améliorés, proportions et ombres de boîte pour les dispositions et les groupes de blocs, vues de données, glisser-déposer amélioré, contrôles de liens améliorés. , de nouvelles API d’interactivité et de liaisons de blocs, de nouveaux outils d’apparence pour les thèmes classiques sans utiliser theme.json, des dépendances de plugin et diverses améliorations de performances et d’accessibilité.

2023

7 Novembre

–

WordPress 6.4 – ‘Shirley’

Nouveau thème par défaut « Twenty Twenty-Four », améliorations de l’écriture, palette de commandes améliorée, filtrage de motifs avancé, outils de conception de blocs étendus, fonctions de visionneuse d’images, renommage des blocs de groupe, aperçus d’images dans la vue Liste, exportation de modèles personnalisés sous forme de fichiers JSON, nouveaux crochets de bloc fonctionnalité et diverses améliorations de performances et d’accessibilité.

2023

8 Avril

–

WordPress 6.3 – ‘Lionel’

Gestion complète du contenu via l’éditeur de site, aperçu du thème de bloc, nouvelle section Mes modèles pour les arrangements de blocs enregistrés, gestion des préférences de modèle et d’éditeur via la palette de commandes, outils de conception et flux de travail améliorés, nouveau bloc Notes de bas de page et détails, améliorations des performances et de l’accessibilité. Paramètres de rapport hauteur/largeur de l’image, édition sans distraction pour l’éditeur de site, barre d’outils supérieure mise à jour, vue de liste améliorée, création de modèles de modèles.

Composition Navigation Par Onglets

Ajout à partir de l’inséreuse de blocs de la composition Navigation Par Onglets sous la catégorie Compositions ECCP.


Vue Liste de la composition


La disposition et l’apparence de la composition est crée avec les blocs suivants:
• Le bloc Boutons avec trois boutons ou chaque bouton va représenter un onglet
avec son item de menu.
• Trois blocs Groupe pour le contenu de chaque onglet.

Chaque bloc bouton a le style Tab Item (Item onglet) sélectionné au Panneau styles des paramètres du bloc.
Chaque bloc groupe a le style Tab Content(Contenu de l’onglet) sélectionné au Panneau styles des paramètres du bloc.

Vous pouvez régler
• La couleur de l’item de menu via la couleur de texte du bouton aux paramètres du bloc
• La couleur au survol de l’onglet & l’onglet actif via la couleur de texte pour le Style Plein Au Survol du Panneau ECCP Styles des paramètres du bloc bouton.

Ajout d’onglets
Pour ajouter un onglet et son contenu:
• il vous suffit de dupliquer un bloc bouton & un bloc groupe.

Afficher le contenu au survol des onglets
Si vous souhaitez l’ouverture au survol des onglets plutôt qu’au clic, il faut ajouter a la publication un bloc HTML contenant le code JS ci-dessous.

Transition fluide
Pour une transition fluide du contenu des onglets, il faut au préalable dans la page de réglage de l’extension ECCP onglet PERSONNALISER FRONT END, définir la transition d’affichage multi-page du navigateur Google Chrome.

<script>
	document.addEventListener('DOMContentLoaded',function(){
		jQuery(function($){
			$('.is-style-tab-item').mouseenter(function(){
				$(this).click();
			});
		});
	});
</script>

À Propos

Qui suis-je ?

Je suis née dans le département de l’Aveyron appelé aussi le Rouergue.

Après plusieurs années passés dans un grand groupe d’électronique, puis divers sous-traitant, J’ai suivi une formation professionnelle pour acquérir de nouvelles compétences , mais aussi structurer consolider celles acquises en autodidacte.

A la fin de cette formation,
j’ai obtenu la certification professionnelle CNP 2083 :
Réaliser un site internet WordPress.

Galerie

Composition Grille De Cartes

 

Derniers Sons

Conception Sonore

Créez des sons uniques et apprenez les bases de la synthèse sonore.

 

Studio

Synchroniser Votre Midi

Avec une large gamme de VCO, VCA et modèles de synthèse hybride.

 

Derniers Sons

Ingénierie

Entrez dans le studio et écoutez ce qui se passe dans les coulisses.

Modèle Header

Modèle header d’un thème de blocs comme Twent Twenty Five
Dans le Panneau ECCP Styles des paramètres du bloc sélectionner le style En-Tête, vous pouvez alors:
• Activer un En-Tête Épinglé
• Activer l’effet ombre de boite

• Activer une Animation Arrière-Plan Header Au Scroll
Cette animation est conçu pour un en-tête transparent superposé a un bloc cover avec une image de fond.

– Au 1er bloc groupe du header qui contient la navigation on applique une couleur d’arrière-plan personnalisée, et non une couleur de la palette de couleurs de l’editeur.
On applique une marge haute négative égale a la hauteur du header.
– Pour le Header,activer aux paramètres du bloc un en-tête épinglé.
Avec ces réglages, on vient de superposer le header, sur l’image de fond du bloc bannière.
– Bloc Navigation, comme le header est superposé sur l’image de fond du bloc bannière, sélectionner une couleur par exemple blanche pour les items de menu.

L’animation initiale applique un arrière plan transparent au header, puis au scroll on redonne une opacité progressive de l’arrière plan qui fait apparaitre la couleur d’arrière plan personnalisée que l’on a définit.

voir une DÉMO

Variation du bloc citation: Fancy Quote

Ajout à partir de l’inséreuse de blocs de la variation Fancy Quote sous la catégorie
BLOCS PERSONNALISÉS ECCP.

C’est une variation du bloc natif de WordPress citation.
Le réglage de la couleur des quotes commun avec la composition blockquote se trouve dans l’onglet Compositions de la page d’options du plugin menu: Téléchargement & réglages de la composition blockquote.

Ceci est une citation avec la variation de bloc Fancy Quote.
Cette variation se trouve dans l’inséreuse de bloc sous la catégories
BLOCS PERSONNALISÉS ECCP accessible par l’icone + de l’editeur Gutenberg. Le réglage pour la couleur des quotes se trouve dans la page d’options du plugin.

Variation du bloc groupe: Info Box

Ajout à partir de l‘inséreuse de blocs de la variation Info Box sous la catégorie
BLOCS PERSONNALISÉS ECCP.
Cette variation combine les blocs Titre, Colonnes, Paragraphe, Bouton, Image dans un groupe,soit six blocs au total, avec gestion du responsive.

Dans le panneau ECCP Link des paramètres du bloc ou via la barre d’outils,vous pouvez ajouter en Front End un lien au bloc entier, un lien interne au bloc reste cliquable.

 

Apprendre À Danser

Avec notre formation en ligne, au travers de vidéos, vous allez apprendre à danser les passes du
Rock A 4 Temps .
Chaque passe de danse est décomposée afin de la rendre accessible au plus grand nombre.

Découvrez Notre Formation

Variation du bloc Paragraphe: Click to Tweet

Ajout à partir de l‘inséreuse de blocs de la variation Click to Tweet sous la catégorie
BLOCS PERSONNALISÉS ECCP.
L’ajout d’une fonction « Cliquer pour Tweeter » a vos articles est un excellent moyen d’encourager vos lecteur a partager votre contenu.
Cette variation définit une taille de texte à 25px et un effet Box Shadow, le bouton « Click to Tweet » n’est visible qu’en Front End.

Découvre les personnalisations des blocs Gutenberg dans la démo du plugin
Editor Custom Color Palette
#WordPressClick to Tweet

Variation du bloc Colonne: Pricing Table

Ajout à partir de l’inséreuse de blocs de la variation Pricing Table sous la catégorie
BLOCS PERSONNALISÉS ECCP.
Cette variation utilise beaucoup de réglages apportés par ce plugin, successivement:
• Réglage de largeur & Hauteur pour le bloc separateur
• Style check pour les listes a puces, avec réglages de la couleur & taille des puces
• Style au survol pour les boutons
• Effet Box Shadow pour les colonnes

Variation du bloc Groupe: Témoignage

Ajout à partir de l’inséreuse de blocs de la variation du bloc Groupe Témoignage sous la catégorie
BLOCS PERSONNALISÉS ECCP.

Cette variation combine successivement trois blocs en alignement centré:
• Bloc Image
• Bloc Paragraphe pour le Témoignage
• Bloc Paragraphe pour le Nom

Par défaut le bloc groupe à les réglages suivant:
• couleur d’arrière plan: E6E8ED
• rayon de bordure 8px
• marge interne en espacement fluide de 16px sur mobile à 24px sur PC

Remarque
Je rapelle qu’au Panneau styles des paramètres du bloc Image, l’extension ECCP apporte le style Image Circulaire pour des images au format 4/3 ou 16/9.

« Gîte à la hauteur de nos espérances. Deco très soignée et chaleureuse. Nous avons passé un super moment merci beaucoup à Amélie pour son accueil et sa disponibilité. Nous reviendrons ! »

Alain BLADOU

Variation du bloc Groupe: Countdown Timer

Ajout à partir de l‘inséreuse de blocs de la variation du bloc Groupe Countdown Timer sous la catégorie BLOCS PERSONNALISÉS ECCP.
Cette variation combine seulement un bloc paragraphe pour un texte d’intro au compte à rebours et applique une classe is-style-eccp-countdown au bloc Groupe. Le compte a rebours est visible uniquement en Front End.

Dans le Panneau ECCP Styles des paramètres du bloc Groupe, sélectionner le style Compte à rebours, et activer le compte à rebours en paramétrant la date de l’évènement.
Par défaut en Back Office et Front End on a juste un effet Box Shadow, et le texte d’introduction : « Prochain Spectacle » que vous pouvez personnaliser, ou supprimer selon votre convenance.
Le reste des paramètres de réglages natif des blocs Groupe & paragraphe ainsi que ceux apportés par l’extension permettent d’obtenir un compte à rebours de forme rectangulaire ou circulaire.

Vous pouvez activer un compte à rebours de style circulaire.
Pour ce style il est alors impératif de renseigner une date de départ du compte à rebours.
Si la date de départ sélectionée est supérieure a la date actuelle,le compte a rebours est initialisé a 0, il ne démarrera qu’a la date départ et prendra fin a la date de votre évènement.

Cette variation du bloc groupe est expérimentale si vous rencontrez un problème avec l’alignement gauche ou droite du bloc groupe, insérer en dessous du bloc un espacement de 1px.

Compte à rebours rectangulaire

Compte à rebours circulaire

Variation du bloc Boucle De Requête

Filtrer Par Catégories

• Ajout à partir de l‘inséreuse de blocs sous la catégorie BLOCS PERSONNALISÉS ECCP de la variation du bloc boucle de requêtes: Filtrer le bloc boucle de requête par catégorie.
Cette variation affiche par défaut les articles dans une disposition en grille de 3 colonnes, applique une classe: is-style-filtering-query-loop-by-categories.
Paramètrer cette variation du bloc boucle de requête selon le type de publication souhaitée.

• Ajouter au dessus de cette variation du bloc boucle de requête, un bloc boutons qui ne comportera qu’un seul bouton.
Aux paramètres du bloc boutons sélectionner dans le Panneau ECCP Styles le style:
Filtrer le bloc boucle de requête par catégories.
Sélectionner:
– le type de filtre(boutons ou liste déroulante)
– la publication en accord avec celle du bloc boucle de requête
– la taxonomie(exemple category pour les articles)
Remarque
– Si vous avez des catégories Parent & Enfant, prévilégier un type de filtre par liste déroulante.
– Le seul paramètre du bloc Boutons appliqué en Front End est l’Espacement des blocs,pour lequel vous devez définir une valeur personnalisée(les valeurs prédéfinies ne sont pas prises en compte).

• Aux paramètres du bloc bouton, sélectionner le style contour ou plein, définissez la couleur, taille texte etc.., tous les paramètres ne sont pas appliqués en Front End, vous pouvez définir:
– couleur de texte & au survol
– couleur d’arrière plan & au survol
– couleur de bordure & au survol
– taille de texte personnalisée(les valeurs prédéfinies S , M , L etc.. ne sont pas prises en compte)
– apparence: normal gras,italique etc..
– bordure compléte et non dissociée
– Rayon complet et non dissocié
– Marges internes personnalisées

Le style au survol du bouton correspondra en Front End au style de la catégorie active.
Vous pouvez filtrer les Articles et les Types De Publications Personnalisées.
Le filtrage par catégories fonctionne avec un rechargement de la page.
Il ne peut y avoir q’un filtrage du bloc boucle de requête par page.

Filtrer articles ou CPT par catégories similaires à la publication actuelle

Ajout à partir de l‘inséreuse de blocs sous la catégorie BLOCS PERSONNALISÉS ECCP de la variation du bloc boucle de requêtes: Filtrer le bloc boucle de requête par catégories similaires a la publication actuelle Article ou CPT.
Cette variation affiche par défaut les articles dans une disposition en grille de 3 colonnes, applique une classe: is-style-filtering-query-loop-similar-post.
Paramètrer cette variation du bloc boucle de requête selon le type de publication souhaitée, le filtrage par catégories similaires est effectif en Front End.

Cette variation du bloc boucle de requête permet d’établir en fin d’une publication Article ou CPT une section pour afficher les publications similaires.
Vous pouvez afficher cette variation de manière automatique a la fin d’une publication.
• il faut créer une composition à partir de cette variation du bloc boucle de requête.
• sur la page de réglages de l’extension, onglet Compositions,vous avez une section pour Ajouter automatiquement du contenu avant et/ou après vos publications, articles, pages ou tout type de publication personnalisée, sélectionner alors votre composition.

Variation du bloc Colonne: Flip Box

Ajout à partir de l‘inséreuse de blocs de la variation du bloc Colonne Flip Box sous la catégorie BLOCS PERSONNALISÉS ECCP.
Cette variation combine un bloc colonne, un bloc groupe qui contient lui même deux autres blocs groupe:


Vous devez en back office remplir le contenu des deux blocs groupe qui concerne la face avant et arrière du Flip Box.
La fonctionnalité de retournement du Flip Box ne sera visible qu’en Front End.
La hauteur de la colonne Flip Box Vertical est fixé par défaut a une hauteur min de 350px, au besoin ajouter un bloc espacement en dessous du bloc Colonnes.
Rappel: Gestion du responsive pour le bloc espacement, réglages Hauteur Espacement en pixel dans le Panneau ECCP Styles des paramètres du bloc, pour les Tablettes & Mobiles.

Remarque:
Les icônes de la face avant & arrière du Flip Box font partie d’un bloc Paragraphe dans lequel on a juste mis un espace insécable(raccourci clavier: ALT + 255).
L’extension ECCP ajoute un bouton format a la barre d’outils du bloc Paragraphe qui permet l’insertion d’une icône Dashicon pour un espace sélectionné.

Voir toutes les fonctionnalités de l’extension

Obtenir cette extension

• Tweetez
• Enregistrez
• Partagez
• E-mail
• LinkedIn
• WhatsApp