Comment j’ai transformé le template Oxpitan (ThemeGavias) en un design épuré grâce à une approche quasi « no‑code »

Contexte

Le thème Oxpitan, disponible sur ThemeGavias, propose une base solide sous WordPress, mais il présente plusieurs défauts graphiques : arrières-plans trop étroits et masques du slider qui ne s’adaptent pas aux écrans modernes. Plutôt que de repartir de zéro ou d’écrire du code personnalisé, j’ai choisi une méthode entièrement visuelle, en m’appuyant sur Illustrator et le plugin Slider Revolution. Le résultat ? Un rendu net, responsive et parfaitement aligné sur la gauche, le tout sans quasiment toucher une ligne de code.

Étape 1 : Supprimer les bandes noires du header et des sections

Dans le thème original, le header et la section en dessous du slider étaient limités à 1000 px de largeur, créant des bandes noires décalées sur les écrans larges.

Solution :

Cette règle CSS, modifiée dans fichier template.css du gestionnaire de fichiers, élimine les marges inutiles et garantit que le contenu s’étend sur toute la largeur de l’écran, quel que soit le dispositif.

Étape 2 : Refaire le slider avec un masque vectoriel

Le slider d’accueil était le point focal du site, mais son masque diagonal était mal découpé, surtout sur les résolutions 1920 px. J’ai donc recréé le masque à l’aide d’Illustrator et l’ai importé dans Slider Revolution.

2.1 Capture d’écran maximale

1. Ouvrez la page d’accueil du site actuel sur un écran 1920 px.
2. Zoomez jusqu’à ce que le slider remplisse l’écran.
3. Prenez une capture d’écran (Cmd + Shift + 4 sur macOS, Win + PrtScn sur Windows).

2.2 Tracer le masque dans Illustrator

1. Lancez Adobe Illustrator et créez un nouveau document à la même résolution (1920 × 1080 px).
2. Importez la capture d’écran (Fichier > Importer).
3. Utilisez l’outil Rectangle pour dessiner un rectangle transparent qui couvre toute la hauteur du slider.
4. Avec l’outil Plume, tracez le masque diagonal : commencez à droite, descendez en diagonale jusqu’au bord gauche, puis fermez le tracé.
5. Sélectionnez le rectangle et le masque, puis Ctrl + G (ou Cmd + G) pour les grouper.

2.3 Exporter en SVG

1. Fichier > Exporter > Exporter sous…
2. Choisissez le format SVG et assurez‑vous que les options “Conserver les proportions” et “Inclure le texte comme contours” sont activées.
3. Enregistrez le fichier sous un nom explicite, par ex. slider-mask.svg.

‍

2.4 Intégrer le SVG dans Slider Revolution

1. Dans le tableau de bord WordPress, ouvrez Slider Revolution > Sliders > Éditer le slider d’accueil.
2. Ajoutez un nouveau calque (Add Layer > Shape / Image).
3. Cliquez sur Import SVG, choisissez le fichier slider-mask.svg et validez.

2.5 Configurer la taille et la position

Dans l’onglet Size & Position du calque :

• Mode : Cover et Scene – le SVG s’ajuste automatiquement à la taille du conteneur du slider.
• Alignement : Center pour centrer le masque.
• Responsive : activez les options “Auto‑Resize” afin que le masque conserve ses proportions sur mobiles et tablettes.

Résultat final

• Header et sections : pleine largeur.
• Slider : masque diagonal parfaitement aligné, même sur écrans 4K.
• Performance : le SVG est léger (< 10 KB), ce qui n’alourdit pas le temps de chargement.
• Maintenance : aucune ligne de code supplémentaire n’est requise ; toutes les modifications sont gérées depuis le gestionnaire de fichier du serveur et le plugin Slider Revolution.

‍

Pourquoi cette approche « no‑code » fonctionne si bien

1. Rapidité – Les ajustements se font en quelques minutes, sans passer par un développeur.
2. Flexibilité – Le SVG peut être modifié directement dans Illustrator si le design évolue.
3. Sécurité – Aucun script externe n’est ajouté, ce qui préserve la confidentialité du site.
4. Scalabilité – Le même processus peut être reproduit sur d’autres pages ou projets WordPress qui utilisent Slider Revolution.

Conclusion

En combinant quelques réglages CSS simples et un masque SVG créé dans Illustrator, il est possible de corriger les défauts graphiques d’un thème premium sans toucher au code source. Cette méthode permet de livrer rapidement un site élégant et entièrement responsive, tout en restant fidèle à la philosophie « no‑code » qui gagne du terrain dans le développement web moderne.

‍

‍

‍

‍

‍

‍

‍