آموزش طراحی قالب گردشگری واکنشگرا با HTML، CSS و JavaScript
📺 توجه: آموزش ویدیویی این مطلب در کانال یوتیوب ما موجود است؛ حتماً آن را ببینید تا با نحوه‌ی پیاده‌سازی کدها و نکات مهم آشنا شوید.
در این آموزش قصد داریم با هم یک قالب گردشگری واکنشگرا طراحی کنیم. این قالب با استفاده از زبان‌های HTML، CSS و JavaScript نوشته شده و دارای بخش‌های مختلفی مانند منوی ناوبری، بخش معرفی (Hero)، بخش مقاصد محبوب، بنر و بخش «سفر هزار مایلی» می‌باشد. علاوه بر این، قالب ما بهینه شده برای افزونه «رنگ مث وردپرس» است تا در صورت نیاز بتوانید رنگ‌ها و استایل‌ها را به صورت دلخواه تغییر دهید و از قابلیت‌های سئو بهره ببرید.
در این مقاله به صورت کام به کام و گام به گام به توضیح کدهای قالب خواهیم پرداخت. همچنین به آموزش‌های قبلی که در زمینه طراحی وب و آموزش وردپرس ارائه شده‌اند، اشاره خواهیم کرد تا بتوانید ارتباط بین مطالب را درک کنید.
۱. بررسی ساختار HTML قالب گردشگری
۱.۱. تعریف ساختار اصلی صفحه
در ابتدای کد HTML، ما یک سند استاندارد HTML5 تعریف می‌کنیم. تگ <html> با مشخص کردن زبان (فارسی) و جهت متن (راست به چپ) تنظیم شده است:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="fa" dir="rtl"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>طراحی وبسایت واکنشگرا</title> <!-- استفاده از آیکون‌های Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <!-- لینک به فایل CSS اصلی --> <link rel="stylesheet" href="style.css" /> </head> <body> ... </body> </html> |
در این قسمت علاوه بر تعریف متادیتا، فایل‌های CSS خارجی (از جمله Font Awesome برای آیکون‌ها) و فایل CSS اصلی (style.css) متصل شده‌اند. این کار باعث می‌شود تا استایل‌های مورد نیاز به درستی بارگذاری شوند.
۱.۲. ساختار هدر و منوی ناوبری
بخش هدر شامل تگ <header> و منوی ناوبری <nav> است. در این منو، یک لیست از لینک‌ها (خانه، تورها، رویدادها، درباره ما و تماس) قرار داده شده است. همچنین یک لوگو به همراه یک دکمه منو (برای نمایش در دستگاه‌های موبایل) درج شده است.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<header> <nav class="nav"> <ul class="links"> <li><a href="#">خانه</a></li> <li><a href="#">تورها</a></li> <li><a href="#">رویدادها</a></li> <li><a href="#">درباره ما</a></li> <li><a class="btn" href="#">تماس</a></li> </ul> <a href="#" class="logo"> <span>پاسخ </span>وردپرس</a> <!-- دکمه منو برای نسخه موبایل --> <a href="#" class="fa-solid fa-bars" id="menu-btn"></a> </nav> </header> |
در اینجا:
- از کلاس‌های
nav،linksوlogoبرای استایل‌دهی استفاده شده است. - دکمه منو که دارای آیکون Font Awesome (fa-bars) است، برای نمایش منوی موبایلی کاربرد دارد.
۱.۳. بخش‌های محتوایی اصلی
قالب گردشگری ما شامل چند بخش اصلی است:
-
بخش معرفی (Hero):
در این بخش، یک تصویر پس‌زمینه جذاب به همراه متن‌های دعوت به سفر (سفر خود مقصد است، به جایی برو که بیشترین حس زندگی را در آن احساس می‌کنی) و یک دکمه اکتشاف قرار دارد.
|
1 2 3 4 5 6 7 |
<section class="hero"> <div class="content"> <h2>سفر خود مقصد است</h2> <h1>به جایی برو که بیشترین حس زندگی را در آن احساس می‌کنی.</h1> <a href="#" class="btn">اکتشاف</a> </div> </section> |
۲. بخش مقصدهای محبوب (Trending):
این بخش شامل کارت‌هایی است که هر کدام تصویری از یک مقصد (مثلاً دروازه هند یا برج ایفل) و توضیح کوتاهی درباره آن مقصد ارائه می‌دهند. در کنار آن یک دکمه برای مشاهده «ادامه مطالب» قرار گرفته است.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<section class="trending"> <h2 class="heading">مقصدهای محبوب</h2> <div class="row"> <div class="card"> <img src="images/trend1.jpg" alt="" /> <div class="details"> <h3>دروازه هند</h3> <p> لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ است. این متن صرفاً برای نمایش قالب و چیدمان استفاده می‌شود. </p> <a href="#" class="btn">ادامه مطالب</a> </div> </div> <div class="card"> <img src="images/trend2.jpg" alt="" /> <div class="details"> <h3>برج ایفل</h3> <p> لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ است. این متن صرفاً برای نمایش قالب و چیدمان استفاده می‌شود. </p> <a href="#" class="btn">ادامه مطالب</a> </div> </div> </div> </section> |
۳. بخش بنر (Banner):
این بخش با یک تصویر پس‌زمینه جذاب همراه است و حاوی یک پیام دعوت به شروع سفر می‌باشد.
|
1 2 3 4 5 6 7 8 9 10 11 |
<section class="banner"> <div class="contnet"> <h2>سفر خود را با پاسخ وردپرس آغاز کنید</h2> <p> لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ است. آیا تمام تلاش‌ها به نتیجه رسیده است؟ خطاها و ناهنجاری‌های مختلف ممکن است رخ دهند. </p> <a href="#" class="btn">تورها</a> </div> </section> |
۴. بخش نمای کلی (Overview):
در این بخش، با یک متن الهام‌بخش (سفر هزار مایلی با یک قدم آغاز می‌شود) و مجموعه‌ای از تصاویر، کاربران ترغیب می‌شوند تا با تماس بیشتر، با سایت در ارتباط باشند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<section class="overview"> <div class="text"> <h1>سفر هزار مایلی با یک قدم آغاز می‌شود.</h1> <p> لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ است. آیا می‌توانیم تمامی مشکلات را برطرف کنیم؟ برخی از جزئیات ممکن است به صورت متفاوتی نمایان شوند. </p> <a href="#" class="btn">تماس</a> </div> <div class="row"> <div class="card"> <img src="images/grid1.jpg" alt="" /> </div> <div class="card"> <img src="images/grid2.jpg" alt="" /> </div> <div class="card"> <img src="images/grid3.jpg" alt="" /> </div> <div class="card"> <img src="images/grid4.jpg" alt="" /> </div> </div> </section> |
۵. فوتر (Footer):
در انتهای صفحه، اطلاعات تماس، آدرس و کپی‌رایت سایت درج شده است.
|
1 2 3 4 5 6 7 |
<footer class="footer"> <div> replywp, بنگلور, هند | تلفن: 0313594215 | ایمیل: replywp.gmail.com </div> <p> کپی رایت © 2025 , replywp tours</p> </footer> <script src="app.js"></script> |
با این ساختار HTML، ما یک قالب پایه‌ای ایجاد کرده‌ایم که بخش‌های مختلف آن به راحتی قابل استایل‌دهی و بهینه‌سازی برای سئو هستند.
۲. استایل‌دهی قالب با CSS
در فایل style.css، ابتدا یک فونت اختصاصی به نام «iran-s» تعریف کرده‌ایم تا تمام متن‌های سایت از آن استفاده کنند. سپس با استفاده از استایل‌های پایه و تنظیمات مربوط به نمایش واکنشگرا (ریسپانسیو) به طراحی قالب پرداخته‌ایم.
۲.۱. تعریف فونت و تنظیمات پایه
ابتدا از طریق دستور @font-face فونت مورد نظر را بارگذاری کرده و تنظیمات کلی مانند حذف مارجین و پدینگ پیش‌فرض و استفاده از box-sizing را انجام داده‌ایم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@font-face { font-family: "iran-s"; src: url("fonts/IRANSansWeb.ttf") format("truetype"), url("fonts/IRANSansWeb.woff") format("woff"); } * { margin: ; padding: ; box-sizing: border-box; text-decoration: none; list-style: none; font-family: "iran-s"; } |
۲.۲. استایل‌دهی به منوی ناوبری
در این بخش، منوی ناوبری (با کلاس .nav) به صورت ثابت (fixed) در بالای صفحه قرار گرفته و با استفاده از Flexbox عناصر داخل آن به صورت افقی چیده شده‌اند. رنگ‌ها، اندازه فونت و حالت هاور (hover) برای لینک‌ها نیز تعریف شده است:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.nav { position: fixed; top: ; right: ; width: 100%; height: 80px; background-color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 8%; z-index: 1000; } .nav .logo { font-size: 25px; font-weight: 700; color: #000; } .nav .logo span { color: #ff0088; } .nav .links { display: flex; align-items: center; gap: 50px; } .nav .links li a { font-size: 18px; font-weight: 500; color: #000; transition: 0.5s; } .nav .links li:hover a { color: #ff0088; } |
همچنین دکمه‌های تماس با استفاده از کلاس .btn با طراحی مدرن (با پس‌زمینه‌ی #ff0088 و حاشیه گرد) به نمایش درآمده‌اند:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.btn { width: 120px; height: 45px; background-color: #ff0088; border-radius: 30px; color: #fff !important; display: flex; align-items: center; justify-content: center; font-weight: 600; transition: 0.5s; } .btn:hover { box-shadow: 10px #ff0088; } |
۲.۳. استایل‌دهی به بخش‌های محتوا
برای بخش‌های مختلف صفحه از جمله بخش معرفی (Hero)، مقصدهای محبوب (Trending)، بنر (Banner) و نمای کلی (Overview) از تصاویر پس‌زمینه، افکت‌های شفافیت (opacity) و انیمیشن‌های ساده استفاده شده است. برای مثال:
-
بخش Hero:
در این بخش یک تصویر پس‌زمینه (hero-bg.jpg) به کار رفته و با استفاده از افکت ::before یک لایه نیمه‌شفاف برای افزایش کنتراست و خوانایی متن ایجاد شده است.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
.hero { height: 100vh; background: url("images/hero-bg.jpg") no-repeat; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: #fff; } .hero::before, .banner::before { position: absolute; content: ""; width: 100%; height: 100%; background: rgba(, , , 0.7); top: ; left: ; } .hero .content { z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 15px; } .hero .content h2 { position: relative; font-size: 30px; margin-bottom: 20px; } .hero .content h2::before, section .heading::before { content: ""; position: absolute; width: 100px; height: 5px; background: #ff0088; left: 50%; transform: translateX(-50%); bottom: -10px; border-radius: 5px; } .hero .content h1 { font-size: 50px; } .hero .content .btn { width: 200px; } |
بخش Trending:
کارت‌های مقصدهای محبوب دارای یک انیمیشن ساده هستند که در حالت هاور، ارتفاع بخش توضیحات (details) افزایش می‌یابد تا اطلاعات بیشتری نمایش داده شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
.trending .card { position: relative; width: calc(100% / 2 - 100px); height: 350px; overflow: hidden; cursor: pointer; border-radius: 5px; box-shadow: 5px 10px rgba(, , , 0.2); } .trending .card img { width: 100%; height: 100%; object-fit: cover; } .trending .card .details { position: absolute; bottom: ; width: 100%; height: 50px; background: rgba(, , , 0.5); color: #fff; display: flex; flex-direction: column; text-align: center; align-items: center; gap: 10px; padding: 10px 20px; transition: 0.5s; } .trending .card:hover .details { height: 180px; } |
-
بخش Banner و Overview:
تصاویر پس‌زمینه، انیمیشن‌های ساده و افکت‌های تغییر اندازه و چرخش در بخش Overview باعث جذابیت بصری بیشتر شده‌اند.
۲.۴. طراحی واکنشگرا (ریسپانسیو)
با استفاده از مدیا کوئری‌های CSS، قالب ما به گونه‌ای طراحی شده است که در اندازه‌های مختلف صفحه نمایش (دسکتاپ، تبلت و موبایل) به خوبی نمایش داده شود. برای مثال:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
@media (max-width: 830px) { .nav .links { position: absolute; width: 100%; height: 100vh; right: -100%; top: 80px; background-color: #fff; display: flex; flex-direction: column; align-items: center; padding-top: 100px; gap: 30px; transition: 0.5s; } #menu-btn { display: block; transition: 0.5s; } .nav.active .links { right: ; } .nav.active #menu-btn { transform: rotate(180deg); } } |
-
بخش Banner و Overview:
تصاویر پس‌زمینه، انیمیشن‌های ساده و افکت‌های تغییر اندازه و چرخش در بخش Overview باعث جذابیت بصری بیشتر شده‌اند.
۲.۴. طراحی واکنشگرا (ریسپانسیو)
با استفاده از مدیا کوئری‌های CSS، قالب ما به گونه‌ای طراحی شده است که در اندازه‌های مختلف صفحه نمایش (دسکتاپ، تبلت و موبایل) به خوبی نمایش داده شود. برای مثال:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
@media (max-width: 830px) { .nav .links { position: absolute; width: 100%; height: 100vh; right: -100%; top: 80px; background-color: #fff; display: flex; flex-direction: column; align-items: center; padding-top: 100px; gap: 30px; transition: 0.5s; } #menu-btn { display: block; transition: 0.5s; } .nav.active .links { right: ; } .nav.active #menu-btn { transform: rotate(180deg); } } |
این کد باعث می‌شود که در صفحه‌های کوچک‌تر، منوی اصلی به صورت تمام صفحه و عمودی نمایش داده شود و دکمه منو نیز قابل تغییر (تغییر آیکون از «fa-bars» به «fa-xmark») باشد.
۳. افزودن عملکرد پویا با JavaScript
در فایل app.js (یا همان script.js) عملکرد باز و بسته شدن منوی موبایلی با استفاده از JavaScript پیاده‌سازی شده است. کد زیر توضیح می‌دهد که چگونه با کلیک روی دکمه منو، کلاس active به نوار ناوبری اضافه یا حذف می‌شود و آیکون منو تغییر می‌کند:
|
1 2 3 4 5 6 7 8 9 10 11 |
let menuBtn = document.querySelector("#menu-btn"); menuBtn.addEventListener("click", () => { document.querySelector(".nav").classList.toggle("active"); if (menuBtn.classList.contains("fa-bars")) { menuBtn.classList.replace("fa-bars", "fa-xmark"); } else { menuBtn.classList.replace("fa-xmark", "fa-bars"); } }); |
۴. جمع‌بندی و نکات پایانی
در این مقاله جامع، به صورت گام به گام نحوه طراحی یک قالب گردشگری واکنشگرا با استفاده از HTML، CSS و JavaScript را بررسی کردیم. از ایجاد ساختار پایه در HTML تا استایل‌دهی پیشرفته و اضافه کردن عملکرد داینامیک با JavaScript، همه موارد با جزئیات توضیح داده شده‌اند. همچنین نکاتی برای بهینه‌سازی محتوا و استفاده از افزونه‌های وردپرس مانند «رنگ مث وردپرس» برای سفارشی‌سازی رنگ‌ها و بهبود سئو مطرح شد.
با دنبال کردن این آموزش می‌توانید:
- یک قالب گردشگری حرفه‌ای طراحی کنید.
- از تکنیک‌های مدرن CSS (مانند Flexbox و مدیا کوئری) استفاده کنید.
- عملکرد منوی موبایلی را با JavaScript بهبود بخشید.
- قالب خود را برای دستگاه‌های مختلف بهینه کنید.
- از افزونه‌های سئو و رنگ‌بندی وردپرس بهره ببرید تا تجربه کاربری و رتبه سایت خود را افزایش دهید.
اگر با آموزش‌های قبلی ما در زمینه طراحی وب و آموزش وردپرس آشنا هستید، این مطلب به عنوان تکمیل‌کننده مباحث مطرح شده عمل می‌کند. حتماً آموزش ویدیویی را که در کانال یوتیوب موجود است مشاهده کنید تا همراه با کد زدن و نکات عملی، از این آموزش نهایت استفاده را ببرید.
در نهایت، اگر سوالی دارید یا نیاز به راهنمایی بیشتر دارید، در بخش نظرات با ما در تماس باشید. موفق باشید و به یاد داشته باشید؛ هر قدم کوچک شما، شما را به سوی موفقیت و ارتقای مهارت‌های برنامه‌نویسی نزدیک‌تر می‌کند!
هیچ دیدگاهی برای این محصول نوشته نشده است.