SiteOrigin Widgets Bundle و ساخت ابزارک های سفارشی در وردپرس

SiteOrigin Widgets Bundle یکی از بهترین افزونه های ابزارک ها و نوار کناری وردپرس است که مجموعه عظیمی از ابزارک های SiteOrigin را به سایت وردپرس شما اضافه می کند و شما می توانید به راحتی آنها را استفاده و سفارشی سازی کنید. تمام ابزارک ها در فریمورک قدرتمند SiteOrigin ساخته شده و فرم های پیشرفته، رنگ بندی های نامحدود و بیش از 1500 آیکون را در اختیار شما قرار می دهند.

ابزارک های SiteOrigin را می توانید در هر یک از نواحی ابزارک های سایت وردپرس یا در هر نوشته یا برگه ای صرف نظر از اینکه آن را با ویرایشگر وردپرس یا یک افزونه صفحه ساز مانند افزونه Page Builder by SiteOrigin ساخته باشید، وارد کرد.

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

در این مقاله افزونه SiteOrigin Widgets Bundle را مورد بررسی قرار داده و نحوه استفاده از آن را توضیح می دهیم.

آموزش SiteOrigin Widgets Bundle افزونه ساخت ابزارک های سفارشی در وردپرس

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

بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه در پیشخوان وردپرس به مسیر افزونه ها » SiteOrigin Widgets بروید. صفحه ای مشابه شکل زیر مشاهده می کنید.

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

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

در بالای صفحه سه تب All و Enabled و Disabled وجود دارند.

در تب All تمام ابزارک های موجود در افزونه SiteOrigin Widgets Bundle نشان داده شده است. در تب Enabled ابزارک های که فعال هستند و در تب Disabled ابزارک هایی که غیرفعال هستند را می توانید مشاهده کنید.

تب های بالای صفحه به شما امکان می دهند تمام ابزارک های ارائه شده توسط افزونه را مشاهده کرده و آنها را فعال یا غیرفعال نمایید.

• برای فعال کردن یک ابزارک، آن را پیدا کرده و روی دکمه Activate کلیک کنید.
• برای غیرفعال کردن یک ابزارک، آن را پیدا کرده و روی دکمه Deactivate کلیک کنید.
• اگر نام ابزارک مورد نظر خود را می دانید، برای جستجوی آن می توانید از فرم جستجو در بالای صفحه سمت راست استفاده کنید.

پس از فعال کردن هر ابزارک در پیشخوان وردپرس به مسیر نمایش » ابزارک ها بروید.

در ابزارک های موجود در این صفحه می توانید ابزارک های فعال شده افزونه SiteOrigin Widgets Bundle را مشاهده کنید.

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

اضافه کردن ابزارک ها در نوشته ها و برگه های وردپرس

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

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

روی آیکون + که مربوط به اضافه کردن بلوک است، کلیک کنید. بلوک SiteOrigin Layout یا SiteOrigin Widget را پیدا کرده و روی آن کلیک کنید.

در پنجره کشویی موجود در این بلوک می توانید تمام ابزارک های فعال افزونه SiteOrigin Widgets Bundle را پیدا کرده و آن را به صفحه خود اضافه نمایید.

افزونه SiteOrigin Widgets Bundle بیش از 20 ابزارک دارد. لیست ابزارک های موجود در این افزونه عبارتند از:

• ابزارک Google maps برای نشان دادن موقعیت مکانی شما روی نقشه گوگل
• ابزارک Button که با نشان دادن یک دکمه کاربران را به کلیک کردن تشویق می کند.
• ابزارک Image که به شما اجازه می دهد تصاویر را در هرجایی که می خواهید وارد کنید.
• ابزارک Call to Action که کاربران می توانند عملیات مورد نظر شما را با استفاده از آن انجام دهند.
• ابزارک Slider که تصاویر و ویدئوهای HTML5 را به صورت اسلاید نشان می دهد.
• ابزارک Price Table که با نمایش جدول قیمت به شما امکان می دهد محصولات بیشتری بفروشید.
• ابزارک Post Carousel که نوشته های شما را به صورت گردونه نشان می دهد.
• ابزارک Features که به شما امکان می دهد مجموعه ای از ویژگی های سایت یا خدمات خود را نمایش دهید.
• ابزارک Video برای نمایش ویدئوهای مورد نظر خود
• ابزارک Headline  برای جلب توجه کاربران
• دکمه های شبکه های اجتماعی که به تمام پروفایل های شبکه های اجتماعی شما لینک ایجاد می کند.
• ابزارک Accordion برای فشرده سازی مطالب خود به صورت آکاردئونی
• ابزارک Contact Form برای نشان دادن فرم تماس با ما در سایت وردپرس
• ابزارک Editor که به شما اجازه ویرایش متون را می دهد.
• ابزارک Hero که طراحی سایت شما را ذخیره می کند.
• ابزارک Icon برای نشان دادن آیکون های مختلف در سایت
• ابزارک Image Grid که به شما امکان می دهد تصاویر را در یک شبکه در هر جایی از سایت خود اضافه کنید.
• ابزارک Layout Slider که به شما امکان می دهد طرح هایی را با استفاده از SiteOrigin Page Builder در اسلایدها ایجاد کنید.
• ابزارک Masonary برای اضافه کردن تصاویر در یک طرح موزائیکی
• ابزارک Tabs که به شما امکان می دهد محتوا را در بخش های تب دار گروه بندی کنید.
• ابزارک Taxonomy برای نمایش طبقه بندی انتخاب شده برای پست فعلی.
• ابزارک Testimonials برای نشان دادن آنچه کاربران/مشتریان شما درباره شما فکر می کنند.

در ادامه آموزش نحوه وارد کردن ابزارک دکمه در ناحیه ابزارک ها و تنظیمات آن با استفاده از افزونه SiteOrigin Widgets Bundle را به عنوان نمونه توضیح می دهیم.

تنظیمات ابزارک دکمه

ابزارک دکمه را می توانید با رفتن به مسیر نمایش » ابزارک ها در پیشخوان وردپرس به تمامی نواحی ابزارک های موجود در قالب سایت خود اضافه کنید.

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

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

اگر از ویرایشگر گوتنبرگ وردپرس استفاده می کنید، نوشته مورد نظر خود را باز کرده و پس از وارد کردن بلوک SiteOrigin Widget در پنجره کشویی موجود در این بلوک ابزارک Button را پیدا کنید و آن را به نوشته اضافه نمایید.

پس از آن می توانید در باکس تنظیمات ابزارک دکمه افزونه SiteOrigin Widgets Bundle ، ظاهر دکمه را ویرایش و سفارشی سازی کنید.

• Button text: در این قسمت می توانید متنی که در دکمه نمایش داده می شود را وارد کنید.
• Destination URL: لینک دکمه را در این قسمت وارد کنید. برای انتخاب نوشته یا برگه مورد نظر خود از دکمه Select Content استفاده کنید.
• Open in a new window: اگر این گزینه را فعال کنید، لینک دکمه در یک پنجره جدید باز می شود.

در مرحله بعد ، سه بخش را مشاهده خواهید کرد که هر کدام شامل لیستی از تنظیمات است که عبارتند از:

• آیکون (Icon)
• طراحی و چیدمان (Design and layout)
• سایر خصوصیات و سئو (Other attributes and SEO)

در قسمت Icon می توانید آیکون، رنگ آیکون، تصویر آیکون و موقعیت قرارگیری آن را انتخاب کنید.

در قسمت Image Icon می توانید آیکون را با تصویر مورد نظر خود جایگزین کنید. از دکمه Choose Media  برای انتخاب تصویر از کتابخانه رسانه وردپرس خود استفاده کنید یا بر روی دکمه Image Search کلیک کنید تا تصاویر بدون حق امتیاز در Pixabay را جستجو کنید.

در قسمت design and Layout از صفحه تنظیمات افزونه SiteOrigin Widgets Bundle می توانید عرض، ترازبندی، قالب و رنگ دکمه، رنگ متن، فونت، اندازه فونت، میزان گرد شدن و پدینگ را سفارشی سازی کنید.

اگر قسمت عرض (width) را خالی بگذارید، دکمه متناسب با محتوا تغییر اندازه می دهد.

در قسمت Button theme می توانید یکی از قالب های Atom ، Flat  یا Wire را برای دکمه خود انتخاب کنید. Atom دارای یک اثر گرد است که Flat آن را از بین می برد. Wire رنگ پس زمینه را از بین می برد و فقط از یک مرز استفاده می کند.

اگر گزینه Use hover effects را فعال کنید، برای قالب های Atom و Flat ، افکت های hover باعث می شود تا پس زمینه کمی روشن شود. برای قالب Wire ، پس زمینه روی hover اضافه می شود.

Padding  فاصله بین متن و لبه دکمه است. تنظیمات پیش فرض روی Medium است اما می توانید یکی از گزینه های کم ، متوسط ​​، زیاد یا خیلی زیاد را انتخاب کنید.

قسمت Other attributes and SEO شامل فیلدهای اختیاری است که برخی کاربران آن را مفید می دانند.

• Button ID: ویژگی ID به شما امکان می دهد تا این دکمه را در JavaScript هدف قرار دهید.
• Button Classes: کلاس های CSS اضافی به لینک دکمه اضافه می کند.
• Title attribute: یک ویژگی عنوان به لینک دکمه اضافه می کند.
• Onclick: هنگام کلیک روی دکمه ، فرمان JavaScript وارد شده در این قسمت را اجرا می کند و برای ردیابی مناسب است.
• Rel attribute: ویژگی Rel را به لینک دکمه اضافه می کند.

در پایان با کلیک بر روی دکمه Save تنظیمات را در ناحیه ابزارک ها ذخیره کنید یا نوشته را انتشار دهید.

حال می توانید به فرانت اند سایت خود مراجعه کرده و دکمه ساخته شده با افزونه SiteOrigin Widgets Bundle را ببینید.

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

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