آموزش طراحی صفحه اول سایت با ویژوال کامپوزر

بهمن 5, 1398| fanoos

۱۹ آذر ۱۳۹۸

۵۸۹ بازدید

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

ساخت صفحه اول سایت با ویژوال کامپوزر

برای طراحی صفحه اول سایت با افزونه wpbakery page builder ابتدا روی گزینه برگه ها که در قسمت navigation وردپرس قراردارد (مشابه با تصویر زیر) کلیک کنید. با این کار می‌توانید تمام صفحاتی را که ایجاد کرده‌اید به صورت یک لیست مشاهده کنید. روی گزینه “افزودن برگه” که در تصویر زیر قابل مشاهده است کلیک کنید.

ساخت برگه صفحه اصلی در وردپرس

یک صفحه جدید ایجاد می‌شود. نام آن را “خانه” یا هر نام دیگری یکه برای صفحه اول دوست دارید، بگذارید.

طراحی صفحه اول با ویژوال کامپوزر

آموزش ساخت صفحه اول سایت با ویرایشگر زنده

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

ساخت صفحه اول سایت با ویژوال کامپوزر

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

آموزش ساخت صفحه اول سایت

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

طراحی صفحه اول با ویژوال کامپوزر

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

برای مثال در تصویر زیر من یک پلیر ویدئو را اضافه کردم.

طراحی صفحه اول با ویژوال کامپوزر

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

آموزش ساخت صفحه اول سایت : بک اند

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

ساخت برگه صفحه اصلی در وردپرس

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

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

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

ساخت برگه صفحه اصلی در وردپرس

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

طراحی صفحه اول با ویژوال کامپوزر

پس از آن یک ردیف برای اتصال از طریق ایمیل ایجاد کردم.

ساخت صفحه اول سایت با ویژوال کامپوزر

در ادامه یک ردیف برای معرفی بیوگرافی خودم و همچنین ارائه توضیحی مختصر درباره پروژه ایجاد کردیم.

آموزش ساخت صفحه اول سایت

در انتها من یک ردیف بعنوان فرم ارتباط ایجاد نمودم.

ساخت صفحه اول سایت با ویژوال کامپوزر

زمانی که صفحه مخصوص خود را ایجاد کردید، آن را ذخیره، بروزرسانی و در وبسایت خود انتشار دهید.

آموزش ساخت صفحه اول سایت: افزودن لینک‌های مختلف به منو

برای افزودن یک لینک به منوی وبسایت خود که مرتبط با ردیف‌های ساخته ‌شده شما است، ابتدا باید ردیف مورد نظر خود را انتخاب کنید و سپس روی آیکن مداد کلیک کنید تا بتوانید ویژگی‌های آن ردیف را تغییر دهید:

آموزش ساخت صفحه اول سایت

با این کار به یک باکس مربوط به تغییرات ردیف؛ دسترسی پیدا خواهید کرد. در اینجا پایین بیایید تا بتوانید گزینه ID name for navigation را پیدا کنید. در این قسمت، یک شناساگر مخصوص برای ردیف تعریف کنید. برای مثال من برای ردیف عکس‌ها، عبارت photos را اضافه نمودم. به یاد داشته باشید که بین نامی که می ‌نویسید فضای خالی قرار ندهید.

تغییرات اعمالی را ذخیره کرده و سپس پیج خود را بروزرسانی کنید.

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

ساخت برگه صفحه اصلی در وردپرس

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

برای افزودن لینک کافی است گزینه “پیوند دلخواه” را انتخاب کنید. یک باکس به شما نمایش داده می‌شود. در قسمت URL ورودی؛ آدرس دامنه وبسایت خود را وارد کنید؛ پس از آن یک اسلش و سپس یک هشتگ قرار دهید؛ و سپس نامی که در قسمت ID name نوشته‌اید را وارد کنید.

طراحی صفحه اول با ویژوال کامپوزر

طراحی صفحه اول با ویژوال کامپوزر

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

ساخت صفحه اول سایت با ویژوال کامپوزر

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

تنظیم و طراحی صفحه اول سایت با ویژوال کامپوزر و هوم پیج در وردپرس

برای این کار کافی است که در فضای وردپرس روی گزینه “تنظیمات” کلیک کنید. سپس روی گزینه خواندن کلیک کنید. با انتخاب برگه یکتا می‌ توانید هوم پیج دلخواه خود را ایجاد کرده و تغییرات لازمه را اعمال نمایید.

طراحی صفحه اول با ویژوال کامپوزر

تغییرات را ذخیره کنید. با این کار یک هوم پیج جدید برای خود ایجاد کرده‌اید.

مشاهده جزئیات و خرید افزونه ویژوال کامپوزر

دسته‌ها: آموزش

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

امتیاز*