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

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

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

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

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

SiteOrigin یک تیم قدرتمند است که افزونه و قالب برای وردپرس ایجاد می کند. یکی از محبوب ترین افزونه های این تیم، افزونه SiteOrigin Widgets Bundle است که با استفاده از آن می توانید ابزارک های سایت وردپرس خود را تقویت کرده و استفاده بسیار مؤثرتری از سایدبار و دیگر نواحی ابزارک ها کنید.

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

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

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

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

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

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

همانطور که مشاهده می کنید، در ویرایشگر کلاسیک وردپرس تب Page Builder در کنار تب های متن و دیداری به صورت زیر قابل مشاهده است.

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

اگر به ویرایشگر گوتنبرگ وردپرس سوئیچ کنید، مشاهده می کنید که یک دکمه جدید به ویرایشگر وردپرس مشابه شکل زیر اضافه شده است.

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

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

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

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

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

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

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

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

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

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

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

با کلیک روی دکمه با آیکون آچار می توانید سطرها را ویرایش، تکرار و پاک کنید. همچنین می توانید رنگ سطرها را تغییر دهید.

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

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

سطر و ستون مورد نظر خود را انتخاب کرده و بر روی دکمه Add Widget کلیک کنید.

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

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

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

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

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

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

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

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

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

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

آموزش تست واکنش گرایی در افزونه SiteOrigin

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

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

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

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

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

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

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

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

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

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

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

امیدواریم این آموزش مورد توجه شما قرار گرفته باشد.

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