ایکون
قالب اکسترا
120 وبسایت آماده شرکتی و فروشگاهی
فقط با 1,159,000 تومان
مشاهده و خرید
مجموعه مقالات وردپرس

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

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

2
19 مهر 1400
آخرین بروزرسانی: 17 تیر 1403

آموزش ساخت برگه صفحه اصلی در وردپرس با ویژوال کامپوزر موضوع این مقاله است. ساخت برگه های سفارشی با ویژوال کامپوزر (Visual Composer) از جمله ساخت برگه صفحه اصلی در وردپرس به راحتی امکان پذیر است. قبلا گفتیم که ویژوال کامپوزر چیست و چه امکاناتی دارد. در این مقاله قصد داریم آموزش ساخت صفحه اصلی در وردپرس با ویژوال کامپوزر را ارائه کنیم. صفحه ساز ویژوال کامپوزر به دلیل سادگی و کارایی بالایی که دارد یکی از محبوب ترین صفحه سازهاست. قبل از خواندن ادامۀ مقاله به شما عزیزان یشنهاد می‌کنیم در صورت تمایل به خرید افزونه ویژوال کامپوزر به صفحۀ افزونه ویژوال کامپوزر مراجعه نمایید.

صفحه اصلی سایت چیست؟

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

تنظیم صفحه اصلی در وردپرس

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

تنظیم صفحه اصلی در وردپرس

choosearea

افزونه Visual Composer

Visual Composer Website Builder (wpbakery page builder) یک افزونه صفحه ساز یا ویرایشگر صفحه با قابلیت کشیدن و رها کردن و بیش از ۴۰ المان برای سفارشی سازی صفحات است. شما فوراً نتیجه هر عملی انجام می دهید را مشاهده می کنید و مطمئن می شوید که سایت شما در هر لحظه آماده انتشار است.  در ادامه مطلب ما مرتب سازی صفحه اصلی سایت با ویژوال کامپوزر را انجام خواهیم داد.

محصول پیشنهادی
بنر
افزونه ویژوال کامپوزر 💚 (افزونه Visual Composer اورجینال)
دسته بندی : افزونه صفحه ساز وردپرس
5712
فروش
88%
رضایت

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

ایجاد برگه صفحه نخست 

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

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

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

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

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

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

برای ویرایش صفحه در فرانت اند (front end)، برای شروع به برگه ها بروید و با زدن دکمه ویرایش با WPBakery Page Builder وارد ویرایشگر ویژوال کامپوزر شوید.

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

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

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

  • ساخت برگه صفحه اصلی در وردپرس با ویژوال کامپوزر از طریق فرانت اند

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

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

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

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

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

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

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

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

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

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

  • ساخت برگه صفحه اصلی در وردپرس با ویژوال کامپوزر از طریق بک اند

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

افزودن لینک‌های مختلف به منو

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

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

افزودن لینک‌های مختلف به منو

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

افزودن لینک‌های مختلف به منو

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

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

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

افزودن لینک‌های مختلف به منو

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

افزودن لینک‌های مختلف به منو

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

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

مهسا کاظمی پور | کارشناس سئو
مهسا کاظمی پور | کارشناس سئو
مهسا هستم و 4 ساله در حوزه وردپرس و دو سال در حوزه سئو فعالیت دارم. معتقدم که انسان در شرایط نامساعد نباید خودش رو ببازه و نا امید بشه چون فصل دوباره جوونه زدن هم خواهد رسید...
مقالات مرتبط
بنر
آموزش قالب وودمارت؛ آموزش صفر تا صد طراحی فروشگاه
قالب وودمارت یک راه حل قدرتمند برای طراحی یک فروشگاه اینترنتی است. این قالب با انعطاف پذیری بالا، مجموعه ویژگی‌های غنی و رابط کاربری بصری، به شما این امکان را می‌دهد تا فروشگاه رویایی خود را به راحتی راه اندازی کنید. در این مقاله، آموزش قالب وودمارت را شروع و شما را با جنبه های مختلف این قالب ...
بنر
آموزش گام به گام بسته نصب آسان در لوکال هاست
اگر در لوکال هاست وب سایت خود را راه اندازی کنید می توانید یکباره وب سایت خود را به هاست منتقل کنید. یعنی بدون آنکه نیاز به هاست و دامنه داشته باشید، سایت را بدون استرس و نگرانی راه اندازی می کنید  و پس از مطمئن شدن از همه تغییرات دلخواهتان، آن را به هاست اصلی انتقال می دهید. همچنین در مصرف ...
بنر
آموزش نصب و فعالسازی ioncube در زمپ
ionCube Loader ماژولی است که برای اجرای فایل های رمزگذاری شده روی سرور نصب می شود. نصب و فعالسازی ioncube به سادگی انجام می شود. در صورت فعال نبودن ionCube شما با خطا مواجه می شوید. اما راهکار ساده رفع این خطا نصب ionCube در کمتر از چند دقیقه است که در ادامه به توضیح آن به صورت ویدئویی می پردازیم.
بنر
آموزش نصب آسان قالب وردپرس در Cpanel
شاید شما هم این جمله را شنیده باشید. در کم تر از 10 دقیقه سایت وردپرس خود را نصب کنید. در نگاه اول به نظرتان این جمله فقط یک تبلیغ برای جذب مخاطب به نظر می‌رسد اما کاملا درست است. کافی است از بسته نصب آسان وردپرس استفاده کنید تا سایت شما در کم تر از 10 دقیقه، روی هاست نصب شود. با هم نصب قالب ...
2 دیدگاه
گروه طراحی فیلیتا
گروه طراحی فیلیتا
07 آبان 1400 23:28

اموزش ساخت برگه خوبه اما ایکون نداره

آیا مفید بود ؟
0
ندا صادقیان
ندا صادقیان
09 آبان 1400 10:35

سلام و وقت بخیر
از دیدگاه شما متشکریم، منظورتون از آیکون چیه؟

آیا مفید بود ؟