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

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

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

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

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

افزونه SiteOrigin چه کاری انجام می‌ده؟

Page Builder by SiteOrigin یک افزونه رایگانه که با ردیف، ستون و ابزارک، چیدمان محتوای برگه‌ها رو می‌سازه. «ابزارک» هم یک بخش آماده مثل متن، تصویر یا فهرسته که می‌تونید به صفحه اضافه‌اش کنید.

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

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

تفاوت SiteOrigin با ویرایشگر سایت وردپرس

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

وردپرس برای ویرایش این قسمت‌ها ابزاری به نام «ویرایشگر سایت» داره. این ابزار وقتی در دسترستون قرار می‌گیره که یک قالب بلوکی روی سایت فعال باشه. در این حالت، از مسیر «نمایش ← ویرایشگر» واردش می‌شید. اگه این گزینه رو در پیشخوان نمی‌بینید، احتمالاً قالبتون بلوکی نیست یا برای تنظیم سربرگ و پابرگ روش دیگه‌ای داره.

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

ویژگی‌های مهم Page Builder by SiteOrigin

• ساخت چیدمان‌های چندستونه با ردیف و ستون
• جابه‌جایی بخش‌های صفحه با کشیدن و رها کردن
• امکان استفاده در رابط کلاسیک و ویرایشگر بلوکی وردپرس
• دیدن پیش‌نمایش صفحه هنگام طراحی
• امکان تنظیم فاصله، رنگ و تصویر پس‌زمینه ردیف‌ها
• قابلیت استفاده از ابزارک‌های وردپرس و ابزارک‌های سازگار
• امکان ذخیره و استفاده از چیدمان‌های آماده
• باقی‌ماندن محتوای اصلی صفحه بعد از غیرفعال‌کردن افزونه، هرچند ممکنه ظاهر چیدمان عوض بشه

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

نصب و راه‌اندازی افزونه SiteOrigin

برای نصب افزونه، وارد پیشخوان وردپرس بشید و مسیر «افزونه‌ها ← افزودن افزونه تازه» رو باز کنید. عبارت Page Builder by SiteOrigin رو در کادر جست‌وجو بنویسید. وقتی افزونه رو پیدا کردید، روی «هم‌اکنون نصب نمایید» و بعد «فعال نمایید» کلیک کنید. اگه اولین باره که افزونه نصب می‌کنید، آموزش نصب افزونه در وردپرس مراحل رو ساده و کامل براتون توضیح می‌ده.

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

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

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

در رابط Page Builder روی دکمه Add Row کلیک کنید. Row یعنی «ردیف». هر ردیف می‌تونه یک یا چند ستون داشته باشه و محتوای صفحه داخل همین ستون‌ها قرار می‌گیره.

در پنجره‌ای که باز می‌شه، تعداد ستون‌ها و نسبت عرض اون‌ها رو انتخاب کنید. برای نمونه، طرح دو ستونه ۵۰/۵۰ دو ستون هم‌اندازه می‌سازه؛ درحالی‌که طرح ۳۰/۷۰ یک ستون باریک و یک ستون پهن بهتون می‌ده. اگه تازه شروع کردید، نسبت‌های آماده انتخاب ساده‌تر و مطمئن‌تری هستن.

در بخش Row Styles می‌تونید ظاهر ردیف رو تغییر بدید. این قسمت معمولاً تنظیماتی برای رنگ یا تصویر پس‌زمینه، فاصله داخلی و فاصله بیرونی داره. فاصله داخلی یا Padding، فضای بین محتوا و لبه بخشه. فاصله بیرونی یا Margin هم فاصله اون بخش با بخش‌های اطراف رو تعیین می‌کنه.

بعد از انتخاب تنظیمات، روی Insert کلیک کنید تا ردیف وارد صفحه بشه. می‌تونید ردیف‌های بیشتری هم بسازید و با کشیدن و رها کردن، ترتیبشون رو عوض کنید. فقط بهتره صفحه رو به ستون‌های ریز و زیاد تقسیم نکنید؛ چون چنین چیدمانی در موبایل شلوغ می‌شه و خوندنش برای کاربر راحت نیست.

اضافه‌کردن امکانات به صفحه با ابزارک

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

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

اگه ابزارک‌های بیشتری می‌خواید، می‌تونید افزونه رایگان SiteOrigin Widgets Bundle رو هم نصب کنید. این بسته ابزارک‌هایی مثل دکمه، تصویر، اسلایدر و چند امکان دیگه به سایت اضافه می‌کنه. البته نصب هر دو افزونه اجباری نیست؛ فقط اگه واقعاً به ابزارک‌های این بسته نیاز داشتید، نصبش کنید.

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

استفاده از SiteOrigin در ویرایشگر بلوکی

اگه با ویرایشگر بلوکی وردپرس کار می‌کنید، نیازی نیست به ویرایشگر کلاسیک برگردید. داخل برگه روی دکمه «+» کلیک کنید، عبارت SiteOrigin Layout رو جست‌وجو کنید و بلوکش رو به صفحه اضافه کنید. حالا می‌تونید ردیف‌ها و ابزارک‌ها رو داخل همون بلوک کنار هم بچینید.

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

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

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

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

استفاده از طرح‌های آماده

بخش Layouts برای انتخاب چیدمان‌های آماده‌ست. Layout یعنی «طرح‌بندی». وقتی این بخش رو باز می‌کنید، می‌تونید یکی از طرح‌ها رو بردارید و بعد متن، تصویر و تنظیماتش رو متناسب با سایت خودتون تغییر بدید.

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

نکات مهم قبل از انتشار صفحه

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

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

در نهایت، Page Builder by SiteOrigin برای ساخت محتوای برگه‌ها با ردیف، ستون و ابزارک گزینه مناسبیه. ولی اگه هدفتون تغییر سربرگ، پابرگ یا ساختار کلی قالب سایت هست، اول امکانات قالب و ویرایشگر سایت وردپرس رو بررسی کنید.

جمع‌بندی

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

سوالات متداول

تیم تولید محتوا

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