طراحی صفحه اصلی سایت با قالب استرا

در جلسه ۳۹ از دوره آموزش طراحی سایت با وردپرس، با هم طراحی صفحه اصلی سایت را روی قالب استرا شروع می‌کنیم. دموی جلسه‌ی قبل را به سایت می‌آوریم، سربرگ و بخش‌ها را فارسی می‌کنیم و متن‌ها را وسط‌ چین می‌کنیم. آخر کار هم فوتر سایت شبیه دمو می‌شود.

ورود دمو و ساخت صفحه اصلی سایت

قالب استرا موقع ورود دمو، همه‌ی صفحات را وارد نمی‌کند. هر صفحه‌ای را که لازم دارید، باید جداگانه ایمپورت کنید. ما در این جلسه فقط صفحه‌ی خانه را ایمپورت می‌کنیم.

در ویرایش برگه، دیزاین لایبرری را باز کنید و به سربرگ کیت بروید. دموی قبلی را پیدا کنید، صفحه‌ی خانه را انتخاب کنید و روی insert template کلیک کنید. یادتان باشد ایمپورت فقط ساختار صفحه را می‌آورد. ریزه‌کاری‌ها، مثل سربرگ و محتوای فارسی، با خودتان است.

تنظیم سربرگ و عرض کامل صفحه اصلی

• در سفارشی‌سازی، قسمت سربرگ، گزینه‌ی سربرگ شفاف را فعال کنید و انتشار را بزنید.
• در تنظیمات برگه، چیدمان کانتینر را روی تمام پهنا بگذارید تا محتوا تمام عرض صفحه را بگیرد.
• پهنای لوگو را کوچک‌تر کنید. در ویدیو ابتدا ۸۰ و بعد ۱۰۰ پیکسل را امتحان می‌کنیم.
• اگر لوگو دیده نشد، عنوان صفحه‌ی نخست را از بخش برگه‌ها خاموش کنید.
• متن دکمه‌ی سربرگ را فارسی کنید، مثلا مشاوره رایگان. هنوز صفحه‌ای برای این دکمه نداریم، پس فعلا لینکی به آن نمی‌دهیم.

فونت فارسی صفحه اصلی بعد از ورود دمو

ورود دمو تنظیمات قبلی قالب را پاک می‌کند. برای همین فونت ساحل، که در جلسات قبل برای سایت تنظیم کردید، دوباره به حالت اول برگشته است. خوشبختانه لازم نیست فونت‌ها را دوباره آپلود کنید.

کافی است همان کد CSS قبلی را در بخش سی‌اس‌اس اضافی سفارشی‌سازی بگذارید و انتشار را بزنید. چون فونت فارسی را در جلسات قبل به وردپرس اضافه کرده‌ایم، این مشکل به راحتی حل می‌شود.

آموزش افزودن فونت فارسی به وردپرس، اگر قبلا ندیده‌اید قبل از ادامه این جلسه آن را بررسی کنید.

فارسی‌سازی بخش‌های صفحه اصلی

برای اینکه بدانید کدام بخش را ویرایش می‌کنید، از گزینه‌ی نمای کلی سند کمک بگیرید. این گزینه فهرست بخش‌های صفحه را نشان می‌دهد و با کلیک روی هر بخش، محتوای آن را باز می‌کند. چون زبان سایت فارسی است، جهت چیدمان بخش اول را معکوس می‌کنیم تا محتوا سمت درست قرار بگیرد.

حالا با هم این بخش‌ها را به ترتیب پر می‌کنیم:

• خوش‌آمدگویی همراه با دکمه‌ی درباره ما
• مهم‌ترین خدمات
• نمونه‌کارها
• مشتریان
• نظر مشتریان
• تیم پشتیبانی
• کادر دعوت به اقدام همراه با شماره‌ی تماس

دکمه‌ی مشاهده بیشتر در نمونه‌کارها لینک ندارد، چون هنوز صفحه‌ی نمونه‌کارها را نساخته‌ایم. در بخش مشتریان هم حاشیه‌ی بیرونی بالا را روی ۴۰ پیکسل می‌گذاریم تا عنوان کمی از دکمه‌ی بالایی فاصله بگیرد.

متن‌ها و عکس‌هایی که همراه دمو آمده‌اند فقط نمونه‌اند. در سایت واقعی، اطلاعات و تصاویر کسب‌وکار خودتان را جایگزین آن‌ها کنید.

وسط‌ چین کردن متن‌های صفحه اصلی با CSS

گاهی تنظیمات خود قالب، متن را وسط‌چین نمی‌کند. اول فاصله‌های داخلی بخش را در تب سبک ریست کنید. اگر هنوز متن وسط نیامد، نوبت یک کلاس CSS است.

کلاس را فقط یک بار در سی‌اس‌اس اضافی تعریف می‌کنید. این کلاس عنوان H2 و پاراگراف را وسط‌ چین می‌کند. بعد کافی است نام آن را در تب پیشرفته هر بخش بنویسید. لازم نیست کد را دوباره تکرار کنید.

در بخش تیم پشتیبانی، عنوان‌ها H4 هستند. پس تگ H4 را هم به همان کد سی‌اس‌اس قبلی اضافه می‌کنیم.

ساخت فوتر زیر صفحه اصلی

فوتر در همه‌ی صفحات سایت تکرار می‌شود، نه فقط در صفحه اصلی. در سفارشی‌سازی وارد بخش فوتر شوید و ویجت‌ها را یکی‌یکی پر کنید.

• ویجت اول: لوگو و یک متن کوتاه درباره‌ی مجموعه.
• فهرست‌ها: در پیشخوان، بخش نمایش، دو فهرست با نام فوتر ۱ و فوتر ۲ بسازید. هنوز صفحه‌هایشان را نداریم، پس پیوندها را دلخواه بسازید و به جای آدرس، کاراکتر # بگذارید.
• ویجت دوم و سوم: عنوان‌های دسترسی سریع و لینک‌های مرتبط را بگذارید و هر کدام را به یکی از این فهرست‌ها وصل کنید.
• ویجت چهارم: آدرس دفتر، ایمیل سازمانی و شماره‌ی تماس.

متن پایین فوتر را وسط‌چین کنید و تراز آیکون‌های شبکه‌های اجتماعی را راست بگذارید تا با متن کنارشان از یک سمت شروع کنند.

این ویدیو از ویدیوهای قبلی دوره طولانی‌تر است. بهتر است آن را کامل ببینید و همه‌ی مراحل را همراه ما تمرین کنید. اگر جایی به مشکل خوردید، در بخش کامنت‌ها بپرسید تا راهنمایی‌تان کنیم.