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

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

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

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

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

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

اما قبل از اون در مورد اين كه اگر بخوايد قالب اختصاصي براي سايت وردپرسي‌تون بسازيد، مي‌خوام مسيرش رو بهتون بگم كه اگر علاقه‌مند بوديد كه از صفر قالب رو طراحي كنيد، بدونيد كه بايد چكار كنيد. اول از همه بايد طرح‌تون رو كاغذ بكشيد و دقيقا عين همون طرح رو توي فتوشاپ پياده كنيد. يعني يك طرح با فرمت 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 يك ساختار ساده براي فرم تماس با ما داره كه وقتي اون رو نصب كنيد روي سايت مي‌تونيد شورت‌كد اون رو دريافت كنيد. شورت‌كد هم يك كد متني هست كه بايد اون رو توي يك صفحه قرار بديد.

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

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