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

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.

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.

Demo rock 4 temps 07

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

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 un icône pour un espace sélectionné.

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…
Custom drop shadows

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 rock 4 temps 07

Demo 07 Rock A 4 Temps

Demo rock 4 temps 07

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

Qu’est-ce que le Rock A 4 Temps

Render icone chaussure
Ce Rock est dit à 4 temps parce que son pas de base comporte quatre appuis qui correspondent a 4 temps musicaux.

Quel est le niveau pour apprendre à danser?

Le rock à 4 temps est une danse simpleaccessible, aucun prérequis n’est nécessaire pour apprendre a danser seulement avoir le sens du rythme.

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.

Qu’est-ce que le Rock A 4 Temps?


Ce Rock est dit à 4 temps parce que son pas de base comporte quatre appuis qui correspondent a 4 temps musicaux.

Quel est le niveau nécessaire pour apprendre à danser?

Le rock à 4 temps est une danse simpleaccessible, aucun pré-requis n’est nécessaire pour apprendre à danser seulement avoir le sens du rythme.

Sur quelles musiques se danse le Rock à 4 Temps?

Le rock à quatre temps se danse tant sur du rock ‘n roll traditionnel, jazz, blues, que sur de la musique actuelle,ce qui en fait un rock moderne.

Puis-je venir seul(e) aux cours de Rock?

Bien évidemment on peut venir seul car le principe de base est la convivialité !
Les couples ou les gens seuls forment des lignes de danse, et on fait tourner régulièrement cavaliers ou cavalières dans les lignes de danse.
Si des couples précisent en début d’année qu’ils ne souhaitent pas tourner parmi les autres élèves, aussi nous respectons ce choix et constituons deux groupes.
Cela ne pose aucun problème et ainsi tout le monde profite au mieux des cours de Rock.

Comment progresser?

Ne vous comparez pas aux autres, car chacun développe son propre style. 
Restez assidus aux cours.
•  Dans la mesure du possible, révisez en dehors des cours.
Participez a des soirées dansantes, la pratique & encore la pratique finisse toujours par donner des résultats probants.

Quelle tenue dois-je adopter pour les cours de danse?

Aucune tenue vestimentaire particulière n’est requise, par contre portez des chaussures souples, légères et qui glissent.
Les baskets qui ont des semelles hyper-adhérentes sont à proscrire.
Pour les filles des chaussures avec lanières afin de bien maintenir le talon, éviter les grosses bottes qui ne sont pas trés élégantes.

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.

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 .

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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.
Structure pour slider

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:
Hauteur minimale bannière
• La hauteur de la bannière sur mobile:
Hauteur bannier 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.

Demo rock 4 temps 07

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.

Structure pour slider

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:

Structure slide testimonial

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.

Bouton format dahicons

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.

Rouergue Création : création site web wordpress

« 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 ! »

Testimonial slider 02

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

Testimonial slider 03

« 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 .
Bouton format dahicons
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.

Render icone chaussure

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.

Ce bloc groupe comporte des marges internes & externes fluides de 36px sur PC et 22px sur Mobile

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: i
cônes sociales flottantes à gauche

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:
couleurs du texte & arrière plan, 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.

Démo Rock à 4 Temps

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.

Démo Rock à 4 Temps

Bloc Liste

Style Des Puces

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

Dans le Panneau ECCP Styles des paramètres du bloc, réglages :
Couleur des puces
Taille des puces
Largeur du bloc
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
Visuel Bloc Liste En Back Office

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 liste style accordion back office

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.

Demo rock 4 temps 07

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.

HORAIRESLUNDIMERCREDIVENDREDI
19H30 – 20H30Cours Inter
Rock 4 Temps
19H – 20HCours Débutant
Rock 4 Temps
20H – 21HCours Perfectionnement
ROCK 4 Temps
20H30 – 21H30Chorégraphie

Composition Attention

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

Attention

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.

Composition Alerte

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

À Éviter

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.

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.
variations de blocs dans l’inséreuse de blocs
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.

Render icone chaussure

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

Formule Eco

35€ TTC/Mois


  • Sauvegardes mensuelles du site
  • Mises à jours mensuelles
  • 1h de support mensuel
  • Restauration en cas de problème
  • Intervention sous 48h
  • Optimisation de la vitesse du site

Formule Confort

70€ TTC/mois


  • Sauvegardes hedomadaires
  • Mises à jours bi-mensuelles
  • 1h30 de support mensuel
  • Restauration en cas de problème
  • Intervention sous 24h
  • Optimisation de la vitesse du site

Formule Premium

120€ TTC/mois


  • Sauvegardes quotidienne du site
  • Mises à jours quotidiennes
  • 2h de support mensuel
  • Restauration en cas de problème
  • Intervention prioritaire
  • Optimisation de la vitesse du site

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

  • Jours

  • Heures

  • Minutes

  • Secondes

Compte à rebours circulaire

Jours
Heures
Minutes
Secondes

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:
Structure variation flip box

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é.
Bouton format dahicons

Formation En Ligne

Avec notre formation en ligne, au travers de vidéos, vous allez apprendre à danser les passes du
Rock A 4 Temps .

Vous trouverez des heures de cours adaptés à vos besoins et vos attentes et accessibles quand vous voulez et où vous voulez.

Programme

  • Streaming illimité
  • Accès instantané aux nouvelles vidéos
  • Paiements mensuels récurrents
  • Annulation à tout moment par E-mail

Voir toutes les fonctionnalités de l’extension