Comment créer un site vitrine WordPress professionnel

Créer un site vitrine WordPress professionnel

Un site vitrine est la carte de visite numérique de votre entreprise. Il présente vos services, votre expertise et vos coordonnées pour générer des contacts qualifiés. Au Sénégal, un site vitrine bien fait peut transformer votre présence en ligne : 70% des clients potentiels recherchent une entreprise sur Google avant de la contacter. Voici comment créer un site vitrine professionnel avec WordPress, sans budget excessif.

1. Structure idéale d’un site vitrine

Un site vitrine efficace contient entre 5 et 8 pages. Plus de pages sans contenu réel donnent une impression de vide. Voici la structure recommandée :

2. Choix du thème et configuration

Thèmes recommandés pour un site vitrine

Installation rapide avec Astra Starter Templates

1. Installez le thème Astra depuis Apparence → Thèmes → Ajouter
2. Installez le plugin Starter Templates (même éditeur)
3. Allez dans Apparence → Starter Templates
4. Choisissez un template de type « Business », « Agency » ou « Corporate »
5. Importez — le template installe les pages, les images de démo et la configuration
6. Remplacez le contenu de démo par le vôtre

3. Page d’accueil : la vitrine

Section Hero

<section class="hero-vitrine">
  <div class="hero-vitrine__inner">
    <h1>Votre partenaire digital à Dakar</h1>
    <p>Nous créons des sites web performants et des stratégies 
    digitales qui génèrent des résultats concrets pour les 
    entreprises sénégalaises.</p>
    <div class="hero-vitrine__buttons">
      <a href="/contact" class="btn-primary">Demander un devis gratuit</a>
      <a href="/realisations" class="btn-secondary">Voir nos réalisations</a>
    </div>
    <div class="hero-vitrine__trust">
      <span>✓ +50 projets livrés</span>
      <span>✓ Basés à Dakar</span>
      <span>✓ Support WhatsApp</span>
    </div>
  </div>
</section>

<style>
.hero-vitrine {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color: #fff;
  padding: 100px 20px 80px;
  text-align: center;
}
.hero-vitrine__inner {
  max-width: 800px;
  margin: 0 auto;
}
.hero-vitrine h1 {
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 800;
  margin: 0 0 20px;
  line-height: 1.15;
}
.hero-vitrine p {
  font-size: 18px;
  color: #b0b0c0;
  line-height: 1.6;
  margin: 0 0 30px;
}
.hero-vitrine__buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-primary {
  background: #e94560;
  color: #fff;
  padding: 15px 35px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  transition: background 0.3s;
}
.btn-primary:hover { background: #c73550; }
.btn-secondary {
  background: transparent;
  color: #fff;
  padding: 15px 35px;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.3);
  text-decoration: none;
  font-weight: 600;
  transition: border-color 0.3s;
}
.btn-secondary:hover { border-color: #fff; }
.hero-vitrine__trust {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-top: 30px;
  font-size: 14px;
  color: #888;
}
@media (max-width: 600px) {
  .hero-vitrine { padding: 60px 15px 50px; }
  .hero-vitrine__trust { flex-direction: column; gap: 8px; }
}
</style>

Section Services

<section class="services-grid">
  <h2 style="text-align:center;">Nos services</h2>
  <div class="services-grid__items">
    
    <div class="service-card">
      <div class="service-card__icon">🌐</div>
      <h3>Création de sites web</h3>
      <p>Sites vitrine, e-commerce et applications web 
      sur-mesure. Design responsive optimisé mobile.</p>
      <span class="service-card__price">À partir de 250 000 FCFA</span>
    </div>
    
    <div class="service-card">
      <div class="service-card__icon">📈</div>
      <h3>Référencement SEO</h3>
      <p>Positionnez votre site en première page de Google 
      sur les recherches locales au Sénégal.</p>
      <span class="service-card__price">À partir de 75 000 FCFA/mois</span>
    </div>
    
    <div class="service-card">
      <div class="service-card__icon">📱</div>
      <h3>Community Management</h3>
      <p>Gestion de vos réseaux sociaux : Facebook, Instagram, 
      LinkedIn. Création de contenu et publicité.</p>
      <span class="service-card__price">À partir de 100 000 FCFA/mois</span>
    </div>
    
  </div>
</section>

<style>
.services-grid { padding: 60px 20px; max-width: 1100px; margin: 0 auto; }
.services-grid__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 30px;
}
.service-card {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  text-align: center;
  transition: transform 0.3s;
}
.service-card:hover { transform: translateY(-5px); }
.service-card__icon { font-size: 40px; margin-bottom: 15px; }
.service-card h3 { font-size: 20px; margin: 0 0 10px; color: #1a1a2e; }
.service-card p { font-size: 15px; color: #666; line-height: 1.6; }
.service-card__price {
  display: inline-block;
  margin-top: 15px;
  color: #e94560;
  font-weight: 700;
  font-size: 14px;
}
</style>

4. Page Contact optimisée

<section class="contact-page">
  <div class="contact-page__grid">
    
    <!-- Informations de contact -->
    <div class="contact-info">
      <h2>Contactez-nous</h2>
      <p>Disponibles du lundi au vendredi, 8h-18h.</p>
      
      <div class="contact-item">
        <strong>Adresse</strong>
        <p>Sacré-Cœur 3, Villa 123<br>Dakar, Sénégal</p>
      </div>
      
      <div class="contact-item">
        <strong>Téléphone</strong>
        <p><a href="tel:+221770000000">+221 77 000 00 00</a></p>
      </div>
      
      <div class="contact-item">
        <strong>Email</strong>
        <p><a href="mailto:contact@votresite.com">contact@votresite.com</a></p>
      </div>
      
      <a href="https://wa.me/221770000000?text=Bonjour, je souhaite un devis" 
        class="btn-whatsapp" style="display:inline-flex; align-items:center; gap:10px;
        background:#25D366; color:#fff; padding:14px 28px; border-radius:8px;
        text-decoration:none; font-weight:600; margin-top:20px;">
        Écrire sur WhatsApp
      </a>
    </div>
    
    <!-- Formulaire -->
    <div class="contact-form-wrapper">
      <!-- Shortcode Contact Form 7 -->
      [contact-form-7 id="XXX" title="Contact"]
    </div>
    
  </div>
  
  <!-- Google Maps -->
  <iframe src="https://www.google.com/maps/embed?pb=!1m18..." 
    width="100%" height="300" style="border:0; border-radius:12px; margin-top:30px;" 
    loading="lazy" allowfullscreen></iframe>
</section>

<style>
.contact-page { max-width: 1100px; margin: 0 auto; padding: 60px 20px; }
.contact-page__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
}
.contact-info h2 { margin-top: 0; }
.contact-item { margin-bottom: 20px; }
.contact-item strong { display: block; font-size: 14px; color: #999; text-transform: uppercase; letter-spacing: 1px; }
.contact-item p { margin: 5px 0 0; }
.contact-item a { color: #e94560; text-decoration: none; }
@media (max-width: 768px) {
  .contact-page__grid { grid-template-columns: 1fr; }
}
</style>

5. SEO local pour votre site vitrine

Google Business Profile

Créez ou revendiquez votre fiche Google Business Profile (gratuit) :

1. Allez sur business.google.com
2. Ajoutez votre entreprise avec votre adresse à Dakar
3. Vérifiez par téléphone ou courrier
4. Complétez : photos, horaires, services, description
5. Demandez des avis à vos clients satisfaits

Schema LocalBusiness

// Ajouter le Schema LocalBusiness dans functions.php
add_action('wp_head', function() {
    if (!is_front_page()) return;
    
    $schema = [
        '@context' => 'https://schema.org',
        '@type' => 'LocalBusiness',
        'name' => 'Votre Entreprise',
        'description' => 'Description de votre activité à Dakar',
        'url' => home_url(),
        'telephone' => '+221770000000',
        'email' => 'contact@votresite.com',
        'address' => [
            '@type' => 'PostalAddress',
            'streetAddress' => 'Sacré-Cœur 3, Villa 123',
            'addressLocality' => 'Dakar',
            'addressCountry' => 'SN',
        ],
        'geo' => [
            '@type' => 'GeoCoordinates',
            'latitude' => '14.6937',
            'longitude' => '-17.4441',
        ],
        'openingHoursSpecification' => [
            '@type' => 'OpeningHoursSpecification',
            'dayOfWeek' => ['Monday','Tuesday','Wednesday','Thursday','Friday'],
            'opens' => '08:00',
            'closes' => '18:00',
        ],
        'priceRange' => '$$',
        'image' => get_site_icon_url(),
    ];
    
    echo '<script type="application/ld+json">' . 
      json_encode($schema, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) . 
      '</script>';
});

6. Performance : un site vitrine doit charger en 3 secondes

• Hébergement : évitez les hébergements gratuits ou à 500 FCFA/mois. Un bon hébergement (O2Switch, OVH, Hostinger) coûte 3 000-5 000 FCFA/mois et fait une différence énorme
• Cache : installez WP Super Cache ou LiteSpeed Cache
• Images : compressez avec ShortPixel, servez en WebP
• Polices : utilisez maximum 2 familles de polices, hébergées localement si possible
• Plugins : maximum 15-20 plugins actifs. Chaque plugin ajoute du poids
• CDN : Cloudflare gratuit pour un cache mondial et une protection DDoS

Score cible PageSpeed Insights

7. Checklist site vitrine

• ☐ Thème professionnel installé et configuré (Astra recommandé)
• ☐ Logo et favicon en place
• ☐ Page d’accueil avec hero, services, témoignages et CTA
• ☐ Page Services avec descriptions et prix indicatifs
• ☐ Page À propos avec photo d’équipe et histoire
• ☐ Page Contact avec formulaire, carte, WhatsApp
• ☐ Menu de navigation clair (max 6-7 éléments)
• ☐ Responsive : testé sur iPhone, Samsung et tablette
• ☐ SSL activé (cadenas HTTPS)
• ☐ Google Business Profile créé et vérifié
• ☐ Schema LocalBusiness ajouté
• ☐ Rank Math SEO installé et configuré
• ☐ Google Analytics installé
• ☐ Bouton WhatsApp flottant
• ☐ Mentions légales et politique de confidentialité
• ☐ Vitesse testée sur PageSpeed (score mobile > 80)

Un site vitrine WordPress professionnel coûte entre 250 000 et 500 000 FCFA si vous le confiez à un freelance au Sénégal, ou entre 50 000 et 100 000 FCFA si vous le faites vous-même (hébergement + domaine + thème premium). L’investissement est rentabilisé dès que le site génère quelques contacts qualifiés par mois.