طراحی صفحه درباره ما در وردپرس با قالب استرا

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

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

پیش از طراحی صفحه درباره ما، صفحه نخست را تنظیم کنید

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

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

وارد کردن تمپلیت آماده برای صفحه درباره ما

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

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

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

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

تنظیم عرض صفحه درباره ما و جایگزینی متن‌ها

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

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

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

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

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

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

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

برای متن جعبه‌های اطلاعات هم همین روند را تکرار کنید:

• یک کلاس سفارشی به جعبه بدهید تا تغییرات فقط روی همین بخش اثر بگذارد.
• با ابزار بازرسی عنصر در مرورگر مشخص کنید متن داخل کدام تگ قرار دارد. در این مورد، تگ پاراگراف بود.
• کد CSS را بنویسید و تراز متن را روی جاستیفای بگذارید. جاستیفای متن را از هر دو طرف تراز می‌کند و ظاهر مرتب‌تری می‌دهد.
• کد را در بخش سفارشی‌سازی، قسمت CSS اضافی و در یک خط جدید بچسبانید و روی انتشار بزنید.

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

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

ویرایش جعبه‌ها، آیکون‌ها و لینک‌ها در صفحه درباره ما

جعبه‌های میانی می‌گویند شما چه کسی هستید و چه کاری انجام می‌دهید. عنوان‌هایی مثل هدف ما چیست؟ و خدمات ما را با محتوای خودتان عوض کنید. در این ویدیو، خدماتی مثل طراحی وب‌سایت، کدنویسی پلاگین، دیجیتال مارکتینگ، مدیریت شبکه‌های اجتماعی، راه‌اندازی فروشگاه و پشتیبانی فنی را نوشتیم.

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

هر عنوان را می‌توانید به یک صفحه‌ی مشخص لینک کنید. مثلا با کلیک روی طراحی وب‌سایت، کاربر به صفحه‌ای برسد که درباره‌ی همین خدمت توضیح می‌دهد. ما در این جلسه آن را به صفحه اصلی سایت لینک کردیم.

برای تغییر اندازه و رنگ، ویجت فهرست آیکون را انتخاب کنید و در تب سبک عدد دلخواه را تایپ کنید. تایپ کردن عدد راحت‌تر از کشیدن نوار است. ما اندازه را ابتدا روی ۳۲ و ۳۸ پیکسل امتحان کردیم. در نهایت آیکون توپر، رنگ سبز پررنگ و اندازه‌ی ۲۸ پیکسل را نگه داشتیم.

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

فرایند کاری، سوال‌های رایج و آمار در صفحه درباره ما

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

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

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

تصویر این بخش را هم می‌توانید عوض کنید. بخش را انتخاب کنید، در تنظیمات وارد تب سبک شوید و تغییر تصویر را بزنید. عکسی انتخاب کنید که به کسب‌وکار شما ربط داشته باشد.

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

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

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

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

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