Tutoriel - Modèle Double Aqua (2 Colonnes)

✦ Guide du Modèle Double (2 Colonnes) ✦

Retrouvez ci-dessous le code complet de votre thème double. Cliquez sur le bouton "Copier le code" pour le récupérer instantanément !

📁 Modele Double
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Modèle Double - Blog à Deux Colonnes</title> <style> body { background-color: #0f172a; color: #e2e8f0; font-family: 'Segoe UI', Arial, sans-serif; margin: 0; padding: 20px; } .blog-principal { width: 1300px; margin: 0 auto; text-align: center; } .blog-zone-banniere { width: 1300px; height: 250px; margin-bottom: 25px; border: 4px solid #00f2fe; border-radius: 8px; background: #1e293b; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .blog-img-banniere { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .blog-titre-banniere { position: relative; z-index: 2; color: #ffffff; font-size: 40px; font-weight: bold; letter-spacing: 2px; text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8); background: rgba(15, 23, 42, 0.5); padding: 10px 30px; border-radius: 6px; } .blog-nav-haut { margin-bottom: 25px; text-align: center; } .blog-nav-haut a { display: inline-block; padding: 8px 20px; background: #00f2fe; color: #0f172a; font-family: Arial, sans-serif; font-size: 15px; font-weight: bold; text-decoration: none; border-radius: 4px; margin: 0 8px; box-shadow: 0 4px 10px rgba(0, 242, 254, 0.2); } .blog-architecture-corps { display: flex; gap: 25px; text-align: left; width: 1300px; margin-bottom: 30px; } /* STYLE DU BLOC CENTRAL A DEUX COLONNES D'ARTICLES */ .blog-page-centrale-double { width: 950px; display: flex; gap: 20px; } .blog-colonne-article { width: 465px; background: #1e293b; border: 3px solid #38bdf8; border-radius: 12px; padding: 30px; box-sizing: border-box; text-align: center; } .blog-titre-article { font-family: 'Segoe UI', Arial, sans-serif; color: #00f2fe; font-size: 26px; margin-top: 0; margin-bottom: 20px; padding: 5px; background: rgba(15, 23, 42, 0.2); border: 4px double #00f2fe; border-radius: 3px; display: inline-block; text-align: center; } .blog-texte-article { font-family: 'Segoe UI', Arial, sans-serif; color: #cbd5e1; font-size: 16px; line-height: 1.8; margin: 0; text-align: center; } /* STYLE DE LA SIDEBAR A DROITE */ .blog-colonne-droite { width: 325px; background: #1e293b; border: 3px solid #38bdf8; border-radius: 12px; padding: 25px 20px; box-sizing: border-box; } .blog-titre-categorie { color: #00f2fe; font-size: 18px; font-weight: bold; text-align: center; margin-top: 0; margin-bottom: 20px; padding: 10px; background: rgba(15, 23, 42, 0.3); border: 4px double #00f2fe; border-radius: 3px; letter-spacing: 1px; } .blog-liste-liens { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; } .blog-lien-cadre { display: block; background: rgba(15, 23, 42, 0.4); border: 1px solid #38bdf8; border-radius: 6px; padding: 10px 14px; color: #ffffff; font-size: 15px; font-weight: 500; text-decoration: none; text-align: center; transition: all 0.2s; } .blog-lien-cadre:hover { border-color: #00f2fe; background: rgba(0, 242, 254, 0.05); color: #00f2fe; } .blog-banniere-bas { width: 1300px; height: 120px; margin: 0 auto; border: 8px solid #00f2fe; border-radius: 10px; background: #1e293b; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .blog-texte-bas { color: #ffffff; font-size: 22px; font-weight: bold; text-align: center; } </style> </head> <body> <div class="blog-principal"> <div class="blog-zone-banniere"> <img src="https://aht.li" alt="Bannière du Blog" class="blog-img-banniere"> <div class="blog-titre-banniere">MON BLOG CRÉATIF</div> </div> <div class="blog-nav-haut"> <a href="Accueil.html">✦ Accueil</a> </div> <div class="blog-architecture-corps"> <div class="blog-page-centrale-double"> <div class="blog-colonne-article"> <h2 class="blog-titre-article">✦ Article de Gauche ✦</h2> <p class="blog-texte-article">Effacez ce texte pour rédiger votre premier sujet sur la colonne de gauche de Creative PAGE.</p> </div> <div class="blog-colonne-article"> <h2 class="blog-titre-article">✦ Article de Droite ✦</h2> <p class="blog-texte-article">Effacez ce texte pour rédiger votre deuxième sujet sur la colonne de droite de Creative PAGE.</p> </div> </div> <div class="blog-colonne-droite"> <h3 class="blog-titre-categorie">Mes Articles</h3> <div class="blog-liste-liens"> <a href="#" class="blog-lien-cadre">✦ Article Récent #1</a> </div> <h3 class="blog-titre-categorie">Aide & Liens</h3> <div class="blog-liste-liens"> <a href="#" class="blog-lien-cadre">✦ Me Contacter</a> </div> </div> </div> <div class="blog-banniere-bas"> <span class="blog-texte-bas">Merci de votre visite ✦</span> </div> </div> </body> </html>

1. Remplacer la couleur de fond par une image URL

Par défaut, le code utilise une couleur unie : background-color: #0f172a; au tout début de la balise <style>. Pour installer un magnifique décor à la place, remplacez cette ligne par :

background-image: url('VOTRE_LIEN_IMAGE'); background-attachment: fixed; background-size: cover;

2. Image "Locale" vs Image "Hébergée"

3. Comment gérer le Modèle Double (2 Colonnes) ?

La zone centrale de ce modèle est divisée en deux colonnes d'articles côte à côte (gauche et droite). Pour votre premier essai, effacez simplement les textes d'exemples dans chaque case pour y mettre vos propres histoires.

Si vous souhaitez rajouter une nouvelle ligne de deux articles juste en dessous, il vous suffit de dupliquer la boîte globale qui contient les deux colonnes (le bloc <div class="blog-page-centrale-double">...</div>).

4. Organiser ses articles : Une seule page ou plusieurs ?

Tu as deux façons de ranger tes écrits selon tes envies :