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

آموزش افزونه SiteOrigin

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

اگر تا به حال سعی کرده باشید که یک صفحه پیچیده تر از یک نوشته معمولی متن محور در وردپرس ایجاد کنید، مثلاً محتوای خود را در چند ستون واکنش گرا قرار دهید یا از ابزارک ها به طور مستقیم در صفحات خود استفاده کنید و یا قالب های خود را ایجاد کنید، حتماً متوجه شده اید که ویرایشگر بصری پیش فرض وردپرس جوابگوی شما نیست. برای ایجاد چنین صفحاتی به یکی از بهترین افزونه های صفحه ساز وردپرس مانند Page Builder by SiteOrigin نیاز خواهید داشت.

SiteOrigin Page Builder یک ابزار کشیدن و رها کردن قدرتمند است که به شما امکان ایجاد صفحات پیچیده با استفاده از ابزارک های درون ساخته خود وردپرس و نیز تعدادی از ابزارک های اضافی SiteOrigin را می دهد. شما می توانید ابزارک های خود را در سطرها و ستون های مختلف تنظیم کرده و اندازه و نسبت آنها را کنترل کنید. برخی از ابزارک های موجود عبارتند از:

  • دکمه ها
  • ویرایشگر متن
  • لیستی از ویژگی ها با آیکون های Font Awesome
  • نقشه گوگل
  • تصاویر
  • اسلایدر تصویر و ویدئو
  • محتوای پست

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

آموزش افزونه SiteOrigin و نحوه ساخت یک صفحه در وردپرس

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

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

آموزش افزونه SiteOrigin

که با کلیک بر روی آن رابط کاربری افزونه Page Builder by SiteOrigin به صورت زیر باز می شود.

آموزش افزونه SiteOrigin

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

آموزش افزونه SiteOrigin

که با کلیک بر روی آن رابط کاربری افزونه به صورت زیر باز می شود.

آموزش افزونه SiteOrigin

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

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

ایجاد شبکه های طرح بندی با سطر ها و ستون ها

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

با کلیک بر روی دکمه “Add Row” می توانید ساختار سطر ها و ستون ها را تعریف کنید.

آموزش افزونه SiteOrigin

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

آموزش افزونه SiteOrigin

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

آموزش افزونه SiteOrigin

همچنین شما می توانید ظاهر سطر و تک تک ستون ها را نیز سفارشی سازی کنید. تغییر صفحه نمایش پس زمینه، از جمله تعویض رنگ ها یا تصاویر، از طریق پنل Row Styles انجام می شود. شما همچنین می توانید margin و padding های دلخواه خود را اضافه کرده و هر CSS سفارشی را برای کنترل بیشتر بر روی طراحی خود اضافه کنید.

آموزش افزونه SiteOrigin

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

طرح بندی صفحه با استفاده از ابزارک ها

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

بر روی دکمه Add Widget کلیک کنید.

آموزش افزونه SiteOrigin

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

آموزش افزونه SiteOrigin

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

آموزش افزونه SiteOrigin

اگر بخواهید ابزارک را در سطر یا ستونی که قبلاً ایجاد کرده اید وارد کنید، کافی است سطر یا ستون موردنظر خود را انتخاب کرده سپس روی دکمه Add Widget کلیک کنید.

اگر یکی از ابزارک های SiteOrigin را انتخاب کرده باشید باید افزونه SiteOrigin Widgets Bundle که رایگان نیز هست را نصب نمایید.

آموزش افزونه SiteOrigin

حالت ویرایشگر زنده افزونه Page Builder by SiteOrigin

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

برای انجام این کار در ویرایشگر کلاسیک وردپرس بر روی دکمه Live Editor کلیک کنید.

آموزش افزونه SiteOrigin

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

آموزش افزونه SiteOrigin

مد ویرایشگر زنده، پیش نمایش دقیقی از صفحه ساخته شده ارائه داده و به شما امکان مشاهده صفحه ای که بازدیدکنندگان سایت می بینند را می دهد. با این حال به خاطر عدم ویرایش مستقیم درون خطی، با افزونه های پرمیوم وردپرس مانند افزونه Beaver Builder ، افزونه Visual Composer یا Thrive Themes Content Builder که دارای ویرایشگر های فرانت اند پیشرفته هستند قابل مقایسه نیست.

عدم وجود ویرایش مستقیم درون خطی در ویرایشگر فرانت اند افزونه SiteOrigin مشکل مهمی نیست و دیگر ویژگی هایی که در فوق ذکر شد تجربه کاربری بصری بهتری را ایجاد می کند.

طرح بندی های واکنش گرا

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

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

آموزش افزونه SiteOrigin

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

طرح بندی های Page Builder by SiteOrigin

در این قسمت از آموزش افزونه SiteOrigin به چگونگی استفاده از طرح بندی های از پیش ساخته و آماده این افزونه می پردازیم.

اگر شما تمایل به ایجاد یک صفحه سفارشی از ابتدا را نداشته باشید می توانید از طرح بندی های آماده این افزونه استفاده نمایید. کافی است بر روی دکمه Layouts کلیک کنید.

آموزش افزونه SiteOrigin

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

آموزش افزونه SiteOrigin

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

آیا غیرفعال کردن افزونه SiteOrigin باعث از بین رفتن صفحات ساخته شده می شود؟

خوشبختانه با غیرفعال کردن افزونه SiteOrigin محتوای شما همچنان برای بازدیدکنندگان قابل دسترس است (البته بدون فرمتی که توسط افزونه اعمال شده بود) و توسط ویرایشگر پیش فرض وردپرس قابل ویرایش می باشد.

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

امیدواریم آموزش افزونه SiteOrigin در سایت مدیر وردپرس به شما کمک کرده باشد که یک صفحه زیبا و واکنش گرا با این افزونه بسازید.

دانلود افزونه

دانلود افزونه
صفحه افزونه

درباره ی مینا قدسی

مطلب پیشنهادی

New User Approve

New User Approve افزونه تأیید کاربران قبل از ثبت نام در وردپرس

اگر ثبت نام در وب سایت وردپرسی شما آزاد باشد، هر کاربری که فرم ثبت …

دیدگاهتان را بنویسید

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