راهنمای طراحی سایت؛ از تعریف تا روش‌های آن

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

این مقاله را در پادکست فوربو بشنوید!

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

مقدمه طراحی سایت

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

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

توی فصل دوم پادکست فوربو ما یک مسیر خیلی سریع رو انتخاب کردیم و قصد داریم که سریع‌تر به خود موضوع کسب و کار اینترنتی بپردازیم تا اینکه بخوایم یک سری چیزها رو از اول بسازیم. در این قسمت، مثل سی‌ام‌اس نمی‌خوایم یک چیز رو از اول طراحی کنیم. توی قسمت ۱۴ در خصوص سیستم مدیریت محتوا به‌جای رفتن سراغ سی‌ام‌اس اختصاصی از وردپرس استفاده کردیم. حالا در این قسمت هم به‌جای قالب‌های اختصاصی می‌خوایم از قالب‌های آماده استفاده کنیم با یک تفاوت مهم.

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

پیشنهاد مقاله: معرفی مهم‌ترین پلاگین‌های وردپرس

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

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

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

منظور از طراحی سایت بدون کد نویسی چیست؟

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

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

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

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

اولین قدم طراحی سایت بدون کدنویسی

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

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

برای طراحی سایت بدون کد نویسی نیاز به چه ابزاری داریم؟

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

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

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

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

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

دومین امکانی که قالب‌های حرفه‌ای دارند، پشتیبانی از صفحه‌ساز (Page Builder) است. همان‌طور که گفته شد در بخش پنل مدیریت قالب، شما تنها می‌توانید بخش‌های اصلی قالب را ویرایش کنید و در اصل چیزی که بین هدر (بخش بالایی سایت) و فوتر (بخش انتهایی هر سایت) نمایش داده می‌شود را نمی‌توانید تغییر دهید.

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

طراحی سایت بدون کد نویسی با ویژوال کامپوزر

ویژوال کامپوزر (Visual Composer) نام یک افزونه یا همان پلاگین (Plugin) وردپرسی است. شما به‌کمک این افزونه غیر رایگان، می‌توانید صفحه‌های سایت خود را به‌صورت کامل شخصی‌سازی کنید. یعنی ستون‌ها و ردیف‌های مختلفی را برای خود ایجاد کنید و در آن‌ها المان‌های مختلفی را وارد کنید تا در سایت نمایش داده شوند.

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

ساز و کار کلی این پلاگین، به‌شیوه کشیدن و رها کردن (Drag & Drop) است. تنها کافی است المان‌های مختلف خود را در این صفحه‌ساز برای صفحه موردنظر جابه‌جا کنید تا در سایت تغییرات اعمال شود. به این صورت می‌توانید با یک قالب آماده حرفه‌ای، صفحه‌های شخصی‌سازی شده‌ای را طراحی و در سایت منتشر کنید.

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

شروع طراحی سایت با ویژوال کامپوزر

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

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

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

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

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

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

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

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

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

بررسی ساختار طراحی سایت زومیت

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

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

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

شما می‌تونید ردیف رو با نسبت‌های دلخواه تقسیم به چند بخش کنید. مثلا ساده‌ترینش تقسیم به دو هست. یعنی باید از بالا سما چپ ردیف گزینه ۱.۲+۱.۲ رو انتخاب کنید تا نصف بشه. بعد می‌تونید روی همون ردیف قسمت‌های مختلفی رو ایجاد کنید.

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

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

ردیف بعدی سایت زومیت یک قسمتی هست به‌نام پیشهاد سردبیر. برای اینکه عنوان قرار بدید توی صفحه، باید بعد از اضافه کردن ردیف روی آیتم Heading سفارشی بزنید و یک عنوان قرار بدید. بعد از اون اومده یک سری مطالب که پیشنهاد سردبیر هستن رو نمایش داده. این قسمت می‌تونه برای شما هر چیزی باشه حالا. مثلا مطالب پیشنهادی. باز هم از طریق یک المان مربوط به نمایش مطالب این قسمت روی ردیف اضافه شده.

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

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

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

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

ستون‌های کناری سایت زومیت هم که مثلا توشون مطاللب پربازدید و یک سری دسته‌بندی‌های قرار گرفته از طریق همین سایدبار‌ها قابل پیاده سازی روی سایت هستن.­

ساخت ردیف‌های عریض با پس‌زمینه متفاوت

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

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

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

طراحی صفحه تماس‌ با ما و درباره ما

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

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

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

جمع‌بندی

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

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

حامی این مقاله سایت فوربو شوید

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

۲ هزار تومان | ۵ هزار تومان | مبلغ دلخواه

یا ما را در رسانه‌های زیر دنبال کنید

اینستاگرام | توییتر | تلگرام