💡 Note importante : Cet article détaille les fonctionnalités exclusives du nouveau Mode Moderne. Si vous utilisez toujours l'ancien moteur d'affichage, consultez le guide sur le Thème - Configuration du Mode Classique.

Le Mode Moderne révolutionne la personnalisation de votre site internet Pep's Up. Il vous donne accès à des fonctionnalités avancées : thèmes prédéfinis prêts à l'emploi, choix des polices de caractères, personnalisation des boutons et des cartes, ainsi qu'une gestion complète de votre pied de page.

⚙ Activer et tester le mode moderne sans risque

Dans l'encart Moteur de thème situé en haut de votre écran, vous pouvez basculer sur l'option Moderne :

• Cliquez sur le bouton "Prévisualiser le mode moderne" : cela ouvre votre site dans un nouvel onglet avec le nouveau design. Vous êtes le seul à le voir ! Vos visiteurs continuent de voir l'ancienne version.
• Si vous souhaitez revenir en arrière, cliquez simplement sur "Revenir au mode classique".
• Le changement ne sera définitif pour vos visiteurs que lorsque vous cliquerez sur le bouton Enregistrer en bas de page.

L'interface de configuration moderne s'organise en 4 onglets thématiques :

1. Onglet : Identité

Cet onglet rassemble les bases graphiques de votre image de marque :

• Logo, Bannière et Favicon : Fonctionnent de la même manière que le mode classique (téléchargement de vos fichiers ou utilisation du Générateur de bannière).
• Titre du site : Ajustez le titre sur la bannière, modifiez l'affichage spécifique pour les smartphones (mode mobile) et définissez son alignement (Droite, Centré, Gauche).
• Image de fond globale : Importez un visuel d'arrière-plan (format recommandé : 2000x1300 px) pour habiller l'ensemble de votre site.

2. Onglet : Apparence (Nouveau & Exclusif)

C'est ici que le Mode Moderne déploie toute sa puissance avec 3 nouvelles sections de personnalisation :

• Thèmes prédéfinis : Gagnez du temps en choisissant parmi nos configurations graphiques créées par des designers (Sport Classique, Sport Dynamique, Nature Zen, Culture Élégance, Asso Solidaire, Minimaliste Sombre, Festif...). Cliquer sur un thème pré-remplit instantanément les couleurs, polices et styles de composants !
• Couleurs du thème : Ajustez manuellement votre couleur principale et secondaire. Le menu déroulant "Personnalisation avancée des couleurs" reste disponible pour affiner les détails.
• Polices : Choisissez la typographie de votre site ! Vous pouvez sélectionner une police spécifique pour vos Titres (ex: Raleway, Montserrat, Oswald...) et une autre pour le Corps de texte (ex: Open Sans, Inter, Roboto...). Un aperçu s'affiche en temps réel.
• Styles de composants : Personnalisez la forme de vos éléments d'interaction :
  • Style des boutons : Arrondi, Carré ou Pilule.
  • Style des cartes (blocs d'information) : Avec Ombre, avec Bordure ou Plat.
  • Style de la barre de navigation : Plein, Transparent ou Souligné.

3. Onglet : Structure du site

En plus du choix du modèle global (pleine largeur / largeur fixe) et de la disposition des zones de contenu, le Mode Moderne intègre un tout nouvel outil :

• Gestionnaire de Pied de page (Footer) : Vous pouvez désormais construire et organiser le bas de votre site internet de façon entièrement modulaire.
• Ajout et réorganisation de zones : Créez des Zones texte (pour ajouter des descriptions, les mentions légales ou un bouton "Créer mon compte") et des Zones réseaux sociaux. Un système de glisser-déposer (ou l'utilisation des flèches) vous permet de réordonner ces blocs en un instant. Vous pouvez choisir d'afficher ou masquer chaque zone à l'aide d'une case à cocher dédiée.

4. Onglet : Avancé (À partir du pack Pro)

• Fichier CSS personnalisé : Pour les utilisateurs experts, l'injection de code CSS reste totalement compatible avec le Mode Moderne. Vous pouvez déposer votre fichier .css

  ou utiliser le bouton orange "Générateur de css" pour appliquer vos propres règles graphiques personnalisées.