قرار دادن باکس رنگی

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

باکس های رنگی در وردپرس با افزونه Colorbox And Panels

افزونه Colorbox And Panels

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

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

اولین کار باید افزونه را از لینک موجود در پایان مطالب دانلود کنید و بعد از نصب و فعال سازی افزونه، از مسیر Add New Colorbox< Colorbox Panels وارد محیط تنظیمات افزونه برای ایجاد باکس های رنگی در وردپرس می شویم. در اولین کادر می توانید عنوان منحصر به فردی برای این مجموعه از باکس ها که می خواهید ایجاد کنید، وارد نمایید که در آینده می تواند برای مدیریت و دسترسی بهتر به مجموعه باکس های ایجاد شده، استفاده شود. در این قسمت تنظیمات دیگری هم وجود دارد که در ادامه آن ها را بررسی می کنیم.

 Add Colorbox

افزودن باکس رنگی

Box Title: با استفاده از این گزینه می توانید عنوان باکس های رنگی در وردپرس را تعیین کنید.
Box Descriptions: با استفاده از این گزینه می توانید محل قرار گیری متنی که داخل باکس نمایش داده می شود را مشخص کنید. امکان بکار بردن Editor برای نگارش متن در این قسمت وجود دارد.
Box Icon: این گزینه برای مشخص کردن آیکونی که در کنار عنوان باکس های رنگی در وردپرس قرار می گیرد، بکار برده می شود.
Display Above Icon: این گزینه برای نمایش / عدم نمایش آیکون بالا می باشد.

با بکار بردن گزینه ی Add New Colorbox می توانید باکس های جدید ایجاد کنید و هم چنین با بکار بردن Delete All می توانید کل باکس های ایجاد شده در این قسمت را حذف کنید.

Colorbox Settings

تنظیمات باکس رنگی

Display Box Section Title: این گزینه برای نمایش / عدم نمایش عنوان مجموعه ی باکس ها می باشد.( همان عنوانی که در کادر ابتدایی وارد کردیم)
Display Options For Title and icon: انتخاب نحوه ی نمایش عنوان و آیکون هر باکس از بین گزینه های زیر:

  • Show Box Title + Icon(both): نمایش عنوان باکس و آیکون
  • Show only Box Title: فقط نمایش عنوان باکس های رنگی در وردپرس
  • Show Only Icon: فقط نمایش آیکون باکس
  • Hide Both: عدم نمایش عنوان و آیکون

Title and icon Position Alignment: انتخاب نحوه ی تراز و قرار گیری آیکون و عنوان باکس های رنگی در وردپرس در سمت چپ، وسط و یا راست.
Enable Box Radius: با انتخاب Yes، باکس دارای گوشه های مدور خواهد بود.
Display Box Border: نمایش / عدم نمایش مرزبندی باکس

تنظیمات

Enable Box Shadow: در این گزینه با انتخاب Yes، باکس سایه دار خواهد شد.
Enable Box Same Height: این گزینه برای تعیین یکسان بودن / نبودن ارتفاع باکس ها صرف نظر از طول نوشته ی موجود در باکس های رنگی در وردپرس می باشد.
Enable Box Masonry/Isotope Effect: با انتخاب Yes، افکت چیدمان و قرار گیری باکس ها در موقعیت بهینه، بر حسب فضای عمودی در  دسترس، فعال خواهد شد.

توضیح اضافه …

Masonry و Isotope دو Layout library هستند. یعنی مجموعه ای از کدها که برای چیدمان المان ها مورد استفاده قرار می گیرند.

Box Styles: انتخاب استایل و حالت باکس از بین گزینه های موجود
Box Design Layout: انتخاب نحوه ی چیدمان باکس ها به صورت یک، دو، سه، چهار یا پنج ستونه
Box Title Background Colour: تعیین رنگ پس زمینه ی عنوان باکس

تنظیمات

Box Title/Icon Font Colour: این گزینه برای تعیین رنگ فونت عنوان/ آیکون باکس های رنگی در وردپرس می باشد.
Box Description Background Colour: این گزینه برای تعیین رنگ پس زمینه ی قسمت متن نمایش داده شده در باکس می باشد.
Box Description Font Colour: این گزینه برای انتخاب رنگ فونت متن نمایش داده شده در باکس می باشد.
Description Position Alignment: این گزینه برای انتخاب نحوه ی تراز و قرار گیری متن نمایش داده شده در باکس در سمت چپ، وسط یا راست می باشد.

سایر تنظیمات

Title/Icon Font Size: این گزینه برای تعیین اندازه ی فونت عنوان آیکون باکس می باشد.
Description Font Size: این گزینه برای تعیین اندازه ی فونت متن نمایش داده شده در باکس می باشد.
Font Style/Family: این گزینه برای انتخاب نوع فونت از بین گزینه های موجود می باشد.
بقیه تنظیمات مربوط به نسخه ی حرفه ای و پریمیوم افزونه می باشد.

Colorbox Shortcode

باکس رنگی

در کادر ابتدایی شورت کد مربوط به این مجموعه از باکس ها را می بینید که می توانید آن را در برگه /نوشته های خود بکار ببرید.
Custom Css: در صورت آشنایی داشتن با Css ، می توانید کد های مورد نظر خود را برای سفارشی سازی بیش تر در این کادر وارد نمایید. نیازی به بکار بردن تگ های <style> و <stylee/> نمی باشد.
در پایان بر روی انتشار کلیک می کنیم.
از بخش All Colorbox امکان مشاهده، مدیریت و ویرایش کلیه ی مجموعه باکس های ایجاد شده وجود دارد.

قرار دادن باکس رنگی در برگه / نوشته

برای این کادر وارد محیط ایجاد برگه/نوشته می شویم و از قسمت بالای ویرایشگر متن، بر روی Colorbox panels Shortcode کلیک می کنیم.

قرار دادن باکس رنگی

کادری به صورت پاپ آپ نمایش داده می شود که می توانیم از بین مجموعه باکس های رنگی در وردپرس موجود گزینه ی مدنظرمان را انتخاب کنیم و در انتها بر روی Insert Colorbox Shortcode کلیک می کنیم تا شورت کد مربوط در ویرایشگر نوشته شود.

نتیجه

نمایش باکس های رنگی به کمک ابزارک

برای این کار از مسیر نمایش> ابزارک ها وارد محیط مربوط به ابزارک ها می شویم. ابزارک با عنوان  “متن” را در سایدبار یا فوتر مدنظر قرار می دهیم و شورت کد مربوط به مجموعه باکس های مدنظرمان را در آن جای گذاری می کنیم.

نمایش باکس های رنگی

بعد تغییرات را ذخیره می کنیم.

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

امیدوارم این مطلب برایتان مفید بوده باشد.

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

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