تنها مرجع قانونی عرضه قالب و افزونه در ایران ...
در این نوشتار می خواهیم به آموزش ساخت صفحه نخست سایت بپردازیم. با ابزارهای مختلفی در وردپرس می توان این کار را انجام داد. امروز طراحی صفحه اول با ویژوال کامپوزر را انتخاب کرده ایم و از ویراستارهای بک اند و فرانت اند ویژوال کامپوزر استفاده کرده ایم. با کمک این پست می توانید اطلاعاتی پیرامون افزودن لینک به وبسایت یا نحوه قراردهی Homepage را فرا بگیرید. بیایید ساخت برگه صفحه اصلی در وردپرس را شروع کنیم.
صفحه اصلی مهمترین برگه سایت شماست که با وارد کردن آدرس دامنه نمایش داده می شود. برای طراحی این صفحه دقت داشته باشید تا تمامی المان ها و چیدمان صفحه به گونه ای باشد که کاربر به سریعترین وساده ترین روش به خدمات و محصولات مورد نیاز خود دسترسی پیدا کند. افزونه ویژوال کامپوزر با ارائه المان های آماده و تنها با درگ و دراپ ساخت صفحه اصلی را برای کاربران وردپرس ساده کرده است. علاوه براین برای ساخت صفحه اصلی می توانید برگه های آماده این افزونه را درون ریزی کنید.
اگر تازه یادگیری وردپرس را شروع کرده اید می توانید آموزش “وردپرس چیست” را مطالعه کنید.
برای طراحی صفحه اصلی سایت با افزونه wpbakery page builder ابتدا روی گزینه برگه ها که در قسمت navigation وردپرس قراردارد (مشابه با تصویر زیر) کلیک کنید. با این کار می‌توانید تمام صفحاتی را که ایجاد کرده‌اید به صورت یک لیست مشاهده کنید. روی گزینه “افزودن برگه” که در تصویر زیر قابل مشاهده است کلیک کنید.
یک صفحه جدید ایجاد می‌شود. نام آن را “خانه” یا هر نام دیگری یکه برای صفحه اول دوست دارید، بگذارید.
حالا می‌توانید با استفاده از ویژوال کامپوزر و به روش‌هایی مختلف؛ صفحه خود را ایجاد کنید. می‌توانید این صفحه را در بک‌اند یا بک‌فرانت وبسایت خود ایجاد کنید. ابتدا بیایید گزینه فرانت اند را مورد بررسی قرار دهیم. روی گزینه آبی رنگ با عنوان “ویرایشگر زنده” کلیک کنید. با این کار به قسمت فرانت‌اند (آغازین) صفحه هدایت خواهید شد.
در اینجا می توانید به ایجاد صفحه خود بپردازید. گزینه “افزودن المان” را انتخاب کنید. یکسری گزینه ها برای شما به نمایش داده می شود.
در این قسمت گزینه های مختلف زیادی برای انتخاب کردن وجود دارد. برای مثال ما اضافه کردن یک ردیف را انتخاب می کنیم. روی گزینه ردیف کلیک کنید، صفحه زیر به شما نمایش داده می شود.
روی + بالایی کلیک کنید تا بتوانید یک عنصر جدید را به این ردیف اضافه کنید. از لیستی که مشاهده می کنید می توانید عناصر دلخواه خود را برای اضافه کردن، انتخاب کنید. هنگامی که عناصر دلخواه خود را به یک ردیف اضافه نمودید، می توانید برای ردیف های بعدی نیز این کار را انجام دهید و این کار را تا آنجا که بخواهید می توانید ادامه دهید.
برای مثال در تصویر زیر من یک پلیر ویدئو را اضافه کردم.
در این بخش آموزش ساخت صفحه اول سایت هر ردیفی که شما ایجاد می کنید، یک بخش مجزا از آن صفحه (پیج) محسوب می شوند. شما می توانید رنگ پس زمینه صفحه؛ متن نوشته؛ ستون ها و غیره را تغییر دهید. اگر می خواهید بین عناصر خود فاصله ایجاد کنید می توانید از گزینه empty space (فضای خالی) برای این منظور استفاده کنید.
برای ساخت صفحه اصلی سایت با ویژوال کامپوزر می توانید این صفحه را از طریق روش بک اند افزونه نیز مورد ویرایش قرار دهید. روی گزینه “ویرایشگر پیشرفته” که در قسمت بالای صفحه قابل مشاهده است، کلیک کنید. با این کار شما به قسمت ویرایشگر پیشرفته هدایت خواهید شد.
نحوه کارکرد ویژوال کامپوزر در بک اند مشابه با نحوه کارکرد فرانت‌اند است. شما با کلیک روی گزینه + می توانید ردیف ها، ستون ها و یا عناصر مختلف دیگری را بوجود بیاورید. با عمل کشیدن و رهاکردن می توانید چینش عناصر را مورد اصلاح و تغییر قرار دهید.
اگر می خواهید ظاهر مشابهی بسازید می توانید عناصر را کپی کنید. من در ابتدا یک ردیف با هدلاین بزرگ و همچنین یک گزینه تحت عنوان خرید آلبوم را ایجاد کردم (در اسکرین شات بالا می توانید مشاهده کنید). پس زمینه نیز تصویری از خودم است.
سپس و در ادامه مشاهده می کنید که تعدادی از تصاویر مربوط به کاور آلبوم خود و همچنین یک پلیر را جاگذاری کرده‌ایم.
اینجا همچنین از یک گرافیک معمولی برای پس زمینه این ردیف استفاده کردیم. سپس یک ردیف جدید اضافه کردیم؛ تا بتوانیم یک نمایشگر تصویر را درون آن قرار دهیم.
پس از آن یک ردیف برای اتصال از طریق ایمیل ایجاد کردم.
در ادامه یک ردیف برای معرفی بیوگرافی خودم و همچنین ارائه توضیحی مختصر درباره پروژه ایجاد کردیم.
در انتها من یک ردیف بعنوان فرم ارتباط ایجاد نمودم.
زمانی که صفحه مخصوص خود را ایجاد کردید، آن را ذخیره، بروزرسانی و در وبسایت خود انتشار دهید.
برای افزودن یک لینک به منوی وبسایت خود که مرتبط با ردیف‌های ساخته شده شما است، ابتدا باید ردیف مورد نظر خود را انتخاب کنید و سپس روی آیکن مداد کلیک کنید تا بتوانید ویژگی‌های آن ردیف را تغییر دهید:
با این کار به یک باکس مربوط به تغییرات ردیف؛ دسترسی پیدا خواهید کرد. در اینجا پایین بیایید تا بتوانید گزینه ID name for navigation را پیدا کنید. در این قسمت، یک شناساگر مخصوص برای ردیف تعریف کنید. برای مثال من برای ردیف عکس‌ها، عبارت photos را اضافه نمودم. به یاد داشته باشید که بین نامی که می نویسید فضای خالی قرار ندهید.
تغییرات اعمالی را ذخیره کرده و سپس پیج خود را بروزرسانی کنید.
سپس گزینه نمایش را در قسمت نوار کناری وردپرس پیدا کنید و وارد آن شوید. یک باکس به شما نمایش داده می‌شود. روی گزینه فهرست ها کلیک کنید.
با این کار شما به قسمتی می روید که می‌توانید منوهای مخصوص وبسایت خود را ایجاد کنید. برای اضافه کردن یک آیتم به منوی خود، می‌توانید از چهار گزینه سمت چپ خود استفاده کنید.
برای افزودن لینک کافی است گزینه “پیوند دلخواه” را انتخاب کنید. یک باکس به شما نمایش داده می‌شود. در قسمت URL ورودی؛ آدرس دامنه وبسایت خود را وارد کنید؛ پس از آن یک اسلش و سپس یک هشتگ قرار دهید؛ و سپس نامی که در قسمت ID name نوشته‌اید را وارد کنید.
با این روش، هنگامی که فردی در وبسایت شما روی این گزینه کلیک کند، بجای بازشدن یک صفحه جدید، می تواند مستقیما به تصاویر دسترسی داشته باشد. شما می توانید در قسمت متن پیوند یک علامت مخصوص برای لینک خود ایجاد کنید. همچنین برای انجام این کار می‌توانید از گزینه منو سفارشی استفاده کنید.
برای ذخیره تغییراتی که ایجاد کرده‌اید روی گزینه ذخیره فهرست کلیک کنید. با این کار این فهرست ذخیره می شود و در قسمت بالا قابل مشاهده است.
برای این کار کافی است که در فضای وردپرس روی گزینه “تنظیمات” کلیک کنید. سپس روی گزینه خواندن کلیک کنید. با انتخاب برگه یکتا می توانید هوم پیج دلخواه خود را ایجاد کرده و تغییرات لازمه را اعمال نمایید.
تغییرات را ذخیره کنید. با این کار یک هوم پیج جدید برای خود ایجاد کرده‌اید. شما می توانید آموزش تغییر برگه نخست در وردپرس و سایر بخش های آموزش وردپرس را مشاهده کنید.
برای ارسال دیدگاه شما باید وارد شوید!
سلام.
لطفا بفرمایید در ویژال کامپوزر چگونه برای ردیفها، عنوان قرار دهم و این عنوانها را دسته بندی کنم ؟
متشکرم.
سلام وقت بخیر
ممنون میشم واضح تر توضیح بدین.
توی ویژوال کامپوزر امکان نمایش دسته محصولات وجود داره و کافیه ویژگی عنوان این المان رو تنظیم کنید.
اگر نیازمند راهنمایی بیشتر هستین، خوشحال میشیم کمکتون کنیم.