DÉMO EDITOR CUSTOM COLOR PALETTE

• Tweetez
• Enregistrez
• Partagez
• 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 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
Au Panneau Styles des paramètres du bloc Bannière, le style lien Bloc permet d’étendre a tous le bloc Bannière un lien appliqué a un bloc Titre imbriqué dans le bloc bannière.

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.

• L’extension ECCP ajoute un bouton format a la barre d’outils du bloc qui permet l’insertion d’une icône 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 un icône pour un espace sélectionné.


• Vous pouvez aussi sélectionner une icône 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 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 sélectionner une icône 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 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 Download & Ombre Portée

Appliquer simplement le style Download a partir du panneau style des paramètres du bloc.
Dans la page de réglages de l’extension onglet 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 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
• Fancy Quote
• Parenthèse
• First Letter
• Arrow
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 Colonne

Bloc colonne avec le style: Column Reverse On Mobile (Inversion des colonnes sur mobile) sélectionné dans le Panneau Styles des paramètres du bloc.
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.

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.

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 Derniers Articles

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

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.

• 
  ROCK 4 TEMPS Fête Ses 4 Ans
  par Rouergue Creation
  6 février 2021
  LA VIE DU SITE ROCK 4 TEMPS Crée en début 2017, le site ROCK 4 TEMPS fête ses 4 ans d’existence en 2021.
  En 2020[…]
• 
  Présentation 4ème Saison Cours En Vidéos
  par Rouergue Creation
  18 septembre 2020
  Le Tournage A compter du 22 juin en pleine période de déconfinement, la danse de couple a été autorisé dans les conditions habituelles.
  Le tournage[…]
• 
  Rock That Paris
  par Rouergue Creation
  1 février 2020
  Introduction: Rock 4 You organise le samedi 8 février 2020 à Paris un concours de Rock 4 Temps.
  A cette occasion, j’ai l’honneur d’être invité[…]

Bloc Boucle De Requête

Dans la page d’options du plugin Onglet Personnaliser Blocs Gutenberg/Bloc Boucle De Requête.
• Activation du style Card
Le style Carte n’est fonctionnel que pour la disposition en grille.
• Option pour activer un zoom au survol de 5% par défaut uniquement en
Front End.
• 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 l’image 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 Galerie

Style Card

Dans le Panneau ECCP Styles des paramètres du bloc, sélection d’un style par défaut.
Pour appliquer le style card 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

Le bloc Galerie est Ajouté dans un bloc Groupe ou Grouper a partir de la barre d’outil du bloc galerie.
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 bloc images.
Dans les paramètres du bloc groupe, on applique une couleur de fond et un rayon de bordure de 10px, puis à partir du panneau Dimensions une marge interne égale a l’espacement des blocs images de la galerie.

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.
Le résultat n’est visible qu’en Front End.
Pour avoir un aperçu dans l’éditeur, dans les paramètres avancés des blocs images, ajoutez la classe eccp-landscape lorsque la largeur
de l’image > hauteur.

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

Simple Slider

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 .

Slider Lecture Automatique

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 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 douze styles de formes, avec réglage de la hauteur, largeur, couleur de fond, retournement.

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

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

Dans le panneau Styles des paramètres du bloc sélectionner le style Rectangular Shape.
Pour les icônes de réseaux sociaux, saisissez le libellé dans les paramètres du bloc.
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: icônes sociales flottantes à droite
Float Left: 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.
Pour les icônes de réseaux sociaux, saisissez le libellé dans les paramètres du bloc.
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(niveaux de 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 Circle img 16/9 dans le Panneau Styles des paramètres du bloc.

Style Card

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: 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 Card 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 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 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 Diagram

Le style Diagram dans le Panneau Styles des paramètres du bloc Liste
permet d’établir un diagramme par arborescence.
Commencer par sélectionner le style defaut dans le Panneau Styles des paramètres du bloc Liste.
Ajoutez des éléments de liste pour représenter la structure de votre diagramme.
Indentez les éléments de la liste qui doivent être les éléments de la sous-arborescence
dans le diagramme.
Vous devez impérativement mettre en gras tous les éléments de la liste.
Sélectionnez dans le panneau style des paramètres du bloc le style Diagram,
pour avoir le visuel du diagramme en back office & front End.
Pour toute modifications ultérieures sélectionner dans le panneau style le style défaut,
Une fois terminé les modifications, sélectionner le style Diagram.

• Acceuil
  • La Vie du site Rock 4 Temps
    • La Refonte du site Rock 4 Temps
    • Rétrospective 2020
  • Chaine YouTube Rock 4 Temps
  •  Page Facebook Rock 4 Temps
  • Les Statistiques Du Site
    • Utilisateurs
    • Données Démographiques
    • Les Canaux D’Acquisition
    • Le Référencement Google

Style Accordion

Le style Accordion 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 Accordion 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 Paragraphe

Style de notification & icône en préfixe du titre

Application d’une icône dashicons(site) en préfixe du titre(ci-dessus) sélectionné dans le Panneau ECCP Styles des paramètres du bloc Titre.
Application 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.

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.

Bloc Tableau

Application du style ECCP Stripes 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

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 de la barre d’outils du bloc.

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.

Composiition 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 sélectionné au Panneau styles des paramètres du bloc.
Chaque bloc groupe a le style Tab Content 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.

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

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.
Ajout d’un lien au bloc groupe entier, dans le Panneau ECCP Link des paramètres du bloc.

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:
• Arrondi de la bordure aprés application d’une couleur d’arrière plan pour les titres du tableau des prix
• Arrondi de la bordure pour le bloc colonne
• Réglage de largeur 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: 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.

Il ne peut y avoir qu’un Compte à rebours par publication.
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 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

• Tweetez
• Enregistrez
• Partagez
• Mail
• LinkedIn
• WhatsApp