// DOCUMENTATION OFFICIELLE
QUICK
SWING
Guide Utilisateur Complet
TABLE DES MATIÈRES
- 01Présentation du thème03
- 02Installation & configuration04
- 03Système de couleurs & typographie05
- 03bStyles du site — 10 variations visuelles06
- 04Block Styles — les styles visuels07
- 05Classes utilitaires09
- 06Animations & effets de scroll10
- 07Templates disponibles11
- 08CPT Projets12
- 09–11Patterns, Options & Shortcodes13
Présentation
du thème
Quick Swing est un thème WordPress Full Site Editing au design cyberpunk — néon cyan sur noir absolu. Conçu pour être utilisé directement dans Gutenberg, sans aucun outil de développement.
Néon Cyberpunk
Fond noir absolu, accents cyan, glassmorphisme, grain SVG et lueurs néon pour une identité visuelle forte et mémorable.
FSE WordPress
Full Site Editing natif — templates, template parts et patterns tous éditables depuis l’interface WordPress sans toucher au code.
Anime.js v4
Animations orchestrées avec stagger narratif. Chaque entrée en scène est fluide et intentionnelle. Respecte prefers-reduced-motion.
Philosophie de design
Quick Swing est opinioné. Chaque décision visuelle est tranchante et intentionnelle. Le vide est une arme — l’asymétrie est assumée. Si une page ressemble à un thème WordPress ordinaire, quelque chose s’est passé.
Installation &
configuration
Mise en place du thème en quelques étapes. Aucune ligne de code, aucun terminal requis.
-
1
Téléverser le thème
Aller dans Apparence → Thèmes → Ajouter → Téléverser un thème. Sélectionner le fichier
quick-swing.zipet cliquer sur Installer. -
2
Activer le thème
Cliquer sur Activer après l’installation. Le site bascule immédiatement sur le design Quick Swing.
-
3
Personnaliser l’éditeur de site
Aller dans Apparence → Éditeur de site pour modifier les templates, le header, le footer et les parties de template. Toute modification est non-destructive et réversible.
-
4
Configurer les options
Aller dans Apparence → Options Quick Swing pour personnaliser le burger, la couleur accent, l’image de fond, les animations et bien plus.
-
5
Activer les permaliens (CPT Projets)
Si le type de contenu Projets est utilisé, aller dans Réglages → Permaliens et cliquer sur Enregistrer pour activer les URL propres.
Ce que le thème désactive automatiquement
| FONCTIONNALITÉ | RAISON |
|---|---|
Emojis WordPress | Scripts et styles superflus supprimés pour alléger les pages |
Commentaires | Désactivés par défaut — à réactiver via Réglages si nécessaire |
Générateur WordPress | La version WordPress n’est pas exposée dans le code source (sécurité) |
Si un plugin de cache full-page est actif (WP Rocket, LiteSpeed Cache…), vider le cache après toute modification dans l’Éditeur de site. Penser aussi à vider le cache au 1er janvier si le shortcode [current_year] est utilisé dans le footer.
Système de couleurs
& typographie
Palette de couleurs
Typographie
Le néon cyan sur fond noir absolu atteint un ratio de 15.9:1 (WCAG AAA). Si vous créez votre propre palette, vérifiez toujours le ratio de contraste — certaines teintes néon à forte saturation peuvent passer sous le seuil AA (4.5:1) sans qu’on le remarque visuellement. Outil recommandé : whocanuse.com.
- Cyan #00ffcc — 15.9:1 · AAA ✓
- Blanc #ffffff — 21:1 · AAA ✓
- Rose #ff2d78 — 5.2:1 · AA ✓
- Gris #888 — 3.5:1 · À éviter pour du texte
Styles du site
Quick Swing propose 10 variations visuelles globales. Un style redéfinit instantanément toutes les couleurs du site — fond, accent néon, texte — sans toucher à aucun contenu.
Aller dans Apparence → Éditeur → Styles (icône pinceau en haut à droite). Survoler un style pour le prévisualiser en direct, cliquer pour l’appliquer. Le changement est immédiat et réversible.
Quick Swing — Cyan #00ffcc sur #0a0a0a
Le style d’origine. Fond noir absolu, néon cyan électrique. La signature visuelle la plus tranchante du thème.
Dark Neon — Cyan #00f3ff sur #050505
Fond encore plus sombre (obsidienne), cyan légèrement décalé vers le bleu électrique. Contraste maximal, idéal pour les contenus photo.
Light Mode — Vert menthe #007755 sur #f8f8f5
Version claire du thème. Fond blanc cassé, accent vert menthe. Conserve tous les effets glass et les transitions.
Retro Future — Rose cyber #ff0055 sur #1a0028
Fond violet nuit profond, accent rose cyber, texte jaune rétro. L’ambiance la plus radicale — synthwave & vaporwave.
Ember — Orange feu #ff6b00 sur #0d0800
Fond noir chaud, accent orange feu. Pour les artistes, photographes et portfolios créatifs à l’identité chaleureuse et organique.
Arctic — Bleu glacier #0066cc sur #f0f4f8
Fond blanc-gris glacé, accent bleu vif. Minimaliste et professionnel — idéal pour les tech, startups et SaaS.
Synthwave — Fuchsia #ff00aa sur #0d0015
Fond noir violacé profond, accent fuchsia laser. Musique, gaming, pop culture — l’esthétique vapourwave ultime.
Forest — Vert électrique #00ff66 sur #030d06
Fond noir végétal, accent vert électrique. Éco, bio, nature, environnement — une palette organique mais technologique.
Editorial Print — Bordeaux #6b1f2a sur #f3ede2
Fond papier beige chaud, accent bordeaux, polices sérif élégantes (Playfair Display pour les titres, Cormorant Garamond pour le corps). L’unique style qui change aussi la typographie globale — idéal pour les blogs, magazines et portfolios éditoriaux.
Obsidian Gold — Or pur #ffcc00 sur #080600
Fond noir doré, accent or vif. Luxe, prestige, mode haute gamme — l’élégance la plus affirmée du thème.
Les styles modifient les variables CSS globales. Les contenus avec des couleurs appliquées manuellement (inline ou via le sélecteur de couleur Gutenberg) ne seront pas affectés. Pour une cohérence maximale, utiliser les couleurs du thème plutôt que des valeurs hex fixes.
Block Styles —
les styles visuels
Les Block Styles s’appliquent depuis le panneau droit de l’éditeur, section Styles. Ils transforment visuellement le bloc sans toucher au contenu.
Sélectionner un bloc → Panneau droit → onglet Styles → cliquer sur le style voulu. Un aperçu s’affiche au survol. Un clic applique le style immédiatement.
Boutons
| STYLE | NOM ÉDITEUR | EFFET VISUEL |
|---|---|---|
neon-swing | Néon Quick Swing | Bordure cyan, fond transparent, lueur néon au survol, uppercase 800 |
Titres
| STYLE | NOM ÉDITEUR | EFFET VISUEL |
|---|---|---|
glitch-title | Titre Glitch | Décalage chromatique cyan/rose, déclenché au hover et aléatoirement. Idéal sur H1/H2 en Space Grotesk. |
Groupes Le plus polyvalent
| STYLE | NOM ÉDITEUR | EFFET VISUEL |
|---|---|---|
glass | Glass | Fond translucide dépoli (glassmorphisme), bordure subtile, soulèvement au hover |
neon-border | Bordure Néon | Bordure cyan lumineuse avec halo intérieur et extérieur |
section-dark | Section Sombre | Fond légèrement plus clair que le fond principal |
card-hover | Card Hover | Bordure dégradée néon qui se révèle au survol via masque CSS. Idéal pour les cards de services ou produits. |
hud-frame | Cadre HUD | Coins néon en L qui s’agrandissent au survol — effet interface militaire / science-fiction |
wave-bottom | Vague Bas | Transition en forme de vague en bas de section vers la suivante |
diagonal-bottom | Diagonale Bas | Coupe diagonale descendante — enchaîne avec la section suivante |
diagonal-top | Diagonale Haut | Coupe diagonale montante — s’enchaîne avec la section précédente |
Images, Colonnes, Citations, Séparateurs & Couvertures
| BLOC | STYLE | EFFET VISUEL |
|---|---|---|
| Image | Cadre Néon | Bordure cyan + halo lumineux autour de l’image |
| Image | Zoom Survol | Zoom subtil au passage de la souris |
| Image | Lightbox ↗ | Clic sur l’image → ouverture dans un overlay plein écran. Navigation clavier ← → entre toutes les images Lightbox de la page. Touche Échap pour fermer. |
| Colonnes | Split Néon | Séparateur vertical néon entre chaque colonne |
| Citation | Citation Turfu | Barre latérale cyan, italique gris clair, auteur en couleur néon |
| Séparateur | Laser | Ligne dégradée cyan avec halo lumineux |
| Couverture | Glass Cover | Contenu intérieur sur fond glassmorphisme |
| Image | Révélation ↑ | L’image se dévoile de bas en haut au scroll via clip-path animé. Aussi disponible sur les blocs Couverture. |
| Couverture | Révélation ↑ | Même effet révélation que pour les Images — le bloc s’ouvre en rideau au scroll. |
Listes
| STYLE | NOM ÉDITEUR | EFFET VISUEL |
|---|---|---|
neon-list | Liste Néon | Puce losange néon au lieu des bullets par défaut — élément décoratif signature Quick Swing |
La lightbox charge automatiquement la meilleure résolution disponible : d’abord le lien « Fichier média » si configuré dans Gutenberg, sinon la plus grande entrée du srcset, sinon l’original. Pour garantir la qualité maximale, configurer le bloc Image avec Lier à → Fichier média.
Classes
utilitaires
S’appliquent dans le champ « Classe(s) CSS additionnelle(s) » de n’importe quel bloc (panneau droit → Avancé). Plusieurs classes se combinent en les séparant par un espace.
Pour une card qui « pop » : glass rounded-md hover-lift fade-up — glassmorphisme, coins arrondis, soulèvement au hover et apparition au scroll.
Effets visuels
| CLASSE | EFFET |
|---|---|
text-gradient | Texte avec dégradé cyan → bleu |
glass | Fond dépoli translucide (équivalent block style Glass) |
neon-glow | Texte cyan avec halo lumineux |
border-neon | Bordure cyan fine avec lueur intérieure |
imghovereffect | Image qui se soulève, zoome et gagne en contraste au survol — à poser sur le bloc conteneur |
text-gradient-animated | Texte avec dégradé cyan→bleu→rose animé en boucle infinie (désactivé si prefers-reduced-motion) |
Interactions hover
| CLASSE | EFFET |
|---|---|
hover-lift | Soulèvement de 8px au survol |
hover-zoom | Zoom de l’image au survol |
hover-ghost | Opacité à 70% au survol |
Arrondis
| CLASSE | RAYON |
|---|---|
rounded-sm | 8px |
rounded-md | 15px |
rounded-lg | 30px |
rounded-full | Cercle parfait |
Parallax multicouche
| CLASSE | EFFET |
|---|---|
qs-parallax-bg | Plan arrière — défilement lent (fond). Idéal sur les sections hero. |
qs-parallax-mid | Plan intermédiaire — défilement moyen (éléments décoratifs). Désactivé sur mobile et si prefers-reduced-motion. |
Mise en page
| CLASSE | EFFET |
|---|---|
flex-center | Centre le contenu (flex) |
grid-2 | Grille 2 colonnes |
text-truncate | Tronque à 2 lignes avec … |
hide-mobile | Masqué sous 782px |
hide-desktop | Masqué au-dessus de 782px |
mask-circle | Découpe en cercle |
Espacements
| CLASSE | VALEUR |
|---|---|
mt-1 → mt-10 | Marge haute 0.25rem → 5rem |
mb-2 → mb-10 | Marge basse 0.5rem → 5rem |
p-2 | Padding 1rem |
p-5 | Padding 2.5rem |
Animations &
effets de scroll
Toutes les animations se déclenchent automatiquement au scroll. Elles respectent le paramètre système « Réduire les animations » — les utilisateurs sensibles au mouvement voient les états finaux directement.
fade-up
L’élément glisse de bas en haut en apparaissant au scroll. La classe la plus polyvalente — fonctionne sur n’importe quel bloc.
zoom-in
L’élément apparaît en zoom depuis 80% de sa taille avec un léger rebond spring. Idéal pour les images et les cards isolées.
Colonnes
Les blocs Colonnes entrent en scène en cascade automatiquement — chaque colonne avec 160ms de décalage, de gauche à droite.
Titres H1/H2
Effet « line reveal » automatique — chaque ligne de titre glisse de bas en haut comme une impression laser. Aucune configuration.
Stagger sur un groupe de cards
Pour animer les enfants d’un conteneur en cascade, ajouter l’attribut data-qs-stagger sur le bloc parent via le champ HTML avancé de l’éditeur.
<!-- Délai par défaut : 80ms entre chaque enfant -->
<div class="wp-block-group" data-qs-stagger>
<!-- Délai personnalisé : 120ms -->
<div class="wp-block-group" data-qs-stagger="120">Transitions de pages
Quick Swing utilise Barba.js pour des transitions cinématiques entre chaque page. 4 transitions sont disponibles, sélectionnables dans Options Quick Swing → Animations :
| TRANSITION | DESCRIPTION |
|---|---|
neon-blade ★ | Panneau noir qui balaye l’écran de gauche à droite avec un trait néon lumineux sur son bord. La transition par défaut. |
fade | Fondu enchaîné classique — le plus discret, idéal pour les sites light mode ou éditoriaux. |
slide-up | Panneau qui monte par le bas et repart vers le haut — transition verticale cinématique. |
dissolve | Zoom+fondu entrant/sortant — effet de dissolution organique entre les pages. |
Table des matières automatique
Sur les écrans ≥ 1400px, une table des matières flottante apparaît automatiquement sur le côté droit des pages longues. Elle liste les titres H2/H3 de la page et surligne la section active au scroll. Aucune configuration requise.
Skeleton loading
Toutes les images (blocs Image, Cover, Image mise en avant) se chargent avec un placeholder animé shimmer cyan pendant le téléchargement. Automatique — aucune configuration requise.
Démos en direct
QUICK SWING
Templates
disponibles
Les templates définissent la structure globale de chaque page. Ils se sélectionnent depuis le panneau droit de l’éditeur de page, rubrique Template.
Par défaut
Page standard complète avec header (logo + navigation) et footer. Template de référence pour la majorité des pages.
Pleine largeur
Contenu sans contrainte de largeur maximale — le bloc s’étend jusqu’aux bords de la fenêtre. Idéal pour les portfolios et galeries.
Landing page
Page de destination optimisée pour la conversion — layout libre, sections hero pleine largeur. Idéal avec les patterns Quick Swing.
Avec colonne latérale
Contenu principal à gauche et sidebar à droite. Compatible articles et pages de contenu long.
Sans en-tête et pied de page
Page blanche totale — aucun header ni footer. Parfait pour les pages de connexion personnalisées, splash screens et pages de maintenance.
Page 404 personnalisée
Page d’erreur cyberpunk avec titre « 404 » en glitch chromatique animé, sous-titre « Signal perdu dans le temps » et bouton de retour néon. Automatique sur toutes les URL introuvables.
Archive Projets
Grille automatique de toutes les fiches Projets. S’affiche sur l’URL /projets/. Utiliser le CPT Projets — voir section 08.
Fiche Projet
Template de détail d’un projet : image hero pleine largeur, contenu sur 65%, colonne meta sticky avec client, URL et technologies sur 35%.
Parties de template éditables
Accessibles via Éditeur de site → Parties de template.
| PARTIE | CONTENU |
|---|---|
| En-tête | Header complet — modifie logo et navigation simultanément |
| En-tête — Logo | Logo seul — remplacer l’image ou modifier la taille |
| En-tête — Navigation | Menu seul — ajouter/retirer des liens |
| Pied de page | Footer complet avec séparateur néon |
| Pied de page — Crédits | Ligne de copyright — utilise [current_year] et [qs_footer_text] |
| Meta article | Auteur, date de publication, catégories |
CPT
Projets
Quick Swing inclut un type de contenu personnalisé Projets pour présenter vos réalisations avec une taxonomie Technologies, des champs meta dédiés et des templates FSE clés en main.
Le CPT est activé automatiquement à l’installation du thème. Si les URL /projets/ retournent une erreur 404, aller dans Réglages → Permaliens et cliquer sur Enregistrer les modifications pour vider les règles de réécriture.
Créer une fiche projet
-
1
Aller dans Projets → Ajouter
Le menu Projets apparaît dans la barre latérale WordPress, entre Articles et Pages.
-
2
Remplir les champs meta
En bas de l’éditeur, la metabox Informations Projet permet de saisir le client, l’URL du projet en ligne et d’associer des technologies.
-
3
Ajouter une image mise en avant
L’image à la une est affichée en hero pleine largeur (ratio 21/9) en haut de la fiche projet.
-
4
Assigner des technologies
Dans le panneau droit, assigner une ou plusieurs Technologies (taxonomie) — elles s’affichent en pills néon sur la fiche et dans la grille archive.
Champs meta disponibles
| CHAMP | SHORTCODE | USAGE |
|---|---|---|
| Client | [qs_projet_client] | Nom du client ou de l’entreprise commanditaire |
| URL Projet | [qs_projet_url] | Lien cliquable vers le projet en ligne (s’affiche dans la metacard) |
| Technologies | Taxonomie | Tags libres — React, WordPress, Figma, etc. Affichés en pills néon. |
Templates associés
archive-projet.html
Grille 3 colonnes avec card-hover automatique. Chaque card affiche l’image, le titre, l’extrait et les pills de technologies. Requête automatique sur tous les projets publiés.
single-projet.html
Layout 65/35 : contenu éditorial à gauche, colonne meta sticky à droite avec client, lien et technologies. Image hero en pleine largeur avec style « Cadre Néon ».
Un pattern « Carte Projet » est disponible dans l’éditeur (bouton + → Patterns → Quick Swing). Il permet d’insérer manuellement une card projet stylisée dans n’importe quelle page, avec image, titre, description, technologies et bouton néon.
Patterns, Options
& Shortcodes
09 — Patterns prêts à l’emploi
Blocs pré-assemblés réutilisables. S’insèrent via le bouton + de l’éditeur → onglet Patterns → catégorie Quick Swing.
Hero Glitch
Section hero pleine largeur avec titre glitch, sous-titre accent et fond néon dégradé. Point de départ idéal pour une landing.
CTA Néon
Appel à l’action centré avec titre, description et bouton néon. Séparateurs laser intégrés.
Grille de services
3 colonnes glass avec icône JetBrains Mono, titre et description. Stagger automatique au scroll.
Bannière de stats
Chiffres clés en grand format avec dégradé et néon. Idéal pour les preuves sociales.
Témoignages
Citations clients au style Citation Turfu avec auteur et rôle en néon cyan.
Hero Asymétrique
Titre Display gauche + image clippée en diagonale droite. Layout asymétrique signature du thème.
Carte Projet
Card projet avec image, titre, description, technologies et bouton néon. À insérer dans n’importe quelle page pour mettre une réalisation en avant.
10 — Options d’administration
Accessible via Apparence → Options Quick Swing. Les réglages sont exportables et importables en JSON.
| SECTION | OPTION | COMPORTEMENT |
|---|---|---|
| Navigation | Burger Mobile | Menu hamburger affiché sous 768px (activé par défaut) |
| Burger Tablette | Menu burger entre 768–991px (désactivé par défaut) | |
| Burger Desktop | Force le hamburger sur tous les écrans ≥ 992px | |
| Boutons magnétiques | Les boutons et liens de navigation sont attirés vers le curseur au survol (effet magnétique) | |
| Affichage | Barre de progression | Barre néon de lecture en haut de page |
| Bouton Retour en haut | BTT flottant avec anneau SVG de progression | |
| Texture grain | Overlay grain SVG en fond de page | |
| Curseur personnalisé | Remplace le curseur OS par un curseur néon animé avec dot, anneau et traînée de lumière | |
| Animations | Animations d’entrée | Active/désactive les animations fade-up, stagger et transitions Barba |
| Identité | Couleur accent néon | Remplace le cyan par Pink, Blue ou Purple avec preview live |
| Image de fond | Sélecteur médiathèque WordPress — définit le background du site | |
| Position de l’image | Grille 3×3 de positions (haut gauche → bas droite) | |
| Défilement image | Défilant (normal) ou Fixe (effet parallax) | |
| Police des titres | Choisir parmi 10 polices : Space Grotesk (défaut), Orbitron, Chakra Petch, Exo 2, Rajdhani, Bebas Neue, Russo One, Oxanium, Syne, Outfit, Barlow Condensed | |
| Identité | Texte copyright footer | Utilisé par le shortcode [qs_footer_text] dans le footer |
| Export / Import | JSON | Télécharger tous les réglages en JSON ou restaurer depuis un fichier |
Le bouton Exporter génère un fichier quick-swing-options.json contenant tous les réglages actuels. Le bouton Importer restaure ces réglages depuis un fichier — utile pour dupliquer une configuration entre plusieurs installations.
11 — Shortcodes disponibles
| SHORTCODE | RÉSULTAT | USAGE TYPE |
|---|---|---|
[current_year] | Année en cours — ex : 2026 | Footer copyright : © [current_year] Mon Entreprise |
[qs_footer_text] | Texte configuré dans Options Quick Swing | Ligne copyright du footer — modifiable sans toucher au template |
[qs_projet_client] | Nom du client du projet courant | Dans le template single-projet, dans la metacard latérale |
[qs_projet_url] | Lien vers le projet en ligne | Dans le template single-projet, affiché comme lien cliquable |
Alignements des blocs
Quick Swing supporte trois niveaux d’alignement. Le groupe parent doit utiliser le layout Contraint — jamais « Pleine largeur » sur un groupe parent.
| ALIGNEMENT | LARGEUR MAX | USAGE |
|---|---|---|
Normal | 800px | Corps de texte, articles |
Grande largeur | 1200px | Sections visuelles, grilles |
Pleine largeur | 100vw | Sections hero, covers, dividers |