تبلیغات
طراحی و بهینه سازیمشاهده
سرور مجازی
هاست

توسعه ویرایشگر گوتنبرگ در وردپرس با افزونه Kadence Blocks

افزونه ها , افزونه وردپرس

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

 

توسعه ویرایشگر گوتنبرگ

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

با کمک این افزونه می‌خواهیم مدیریت بهتری روی ستون‌ها و ردیف‌ها داشته باشیم و موارد زیر را پوشش دهیم:

 

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

افزونه Kadence Blocks

توسعه ویرایشگر گوتنبرگ در وردپرس با افزونه Kadence Blocks

این افزونه مخصوص توسعه ویرایشگر گوتنبرگ است، پس باید حتما ویرایشگر گوتنبرگ را نصب کرده باشید. تا به امروز بیش از ۱۰٫۰۰۰ نصب فعال داشته و جزء افزونه‌های محبوب است.

 

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

همانند هر افزونه دیگر، اول از همه این افزونه را از انتهای این مقاله دانلود کرده و نصب نمایید. پس از فعال کردن آن گزینه ” Kadence Block” اضافه شده است.

توسعه ویرایشگر گوتنبرگ در وردپرس با افزونه Kadence Blocks

حال با کلیک روی این بخش به تنظیمات جزئی درباره این افزونه منتقل می‌شویم.

 

Kadence Blocks

توسعه ویرایشگر گوتنبرگ در وردپرس با افزونه Kadence Blocks

همان‌طور که در تصویر بالا می‌بینید، بلوک‌هایی که به ویرایشگر اضافه می‌شود را مشخص کرده است. امکانات جالبی نظیر:

  • Row Layout (امکاناتی که می‌توان به ردیف‌ها در جهت توسعه ویرایشگر گوتنبرگ اضافه کرد)
  • Icon (افزودن برخی آیکون‌هایی که ممکن است برایتان لازم باشد)
  • Advanced Button (استفاده از دکمه‌های پیشرفته مانند دکمه‌های Call to action)
  • Spacer/Divider (ایجاد فضای خالی)
  • Advanced Heading (استفاده از سرتیترهای سفارشی و پیشرفته)
  • Tabs (ایجاد تب‌ها یا بخش‌های متعدد)
  • Info Box (جعبه‌های اطلاع‌رسانی)
  • Accordion (ایجاد ویژگی آکاردئونی برای نوشته‌ها)

چیزی شما را به فکر فرو نبرد؟ امکاناتی که در بالا گفته شد، ویرایشگر گوتنبرگ را کم کم شبیه به یک صفحه‌ساز کامل مانند visual composer می‌کند. جالب است نه؟ این یعنی یک توسعه کامل!

 

Editor Max Widths

توسعه ویرایشگر گوتنبرگ در وردپرس با افزونه Kadence Blocks

  • Large Template: بیشترین عرض قالب را می‌توان تعیین کرد. (منظور از قالب همان فریمی است که ویرایشگر ایجاد می‌کند)
  • Small Template: کمترین عرض قالب را می‌توان تعیین کرد.
  • Page Default: سایزی که برای برگه‌ها بصورت پیش‌فرض مشخص می‌شود.
  • Post default: سایزی که برای نوشته‌ها بصورت پیش‌فرض مشخص می‌شود.
  • Enable Editor Width: چنانچه می‌خواهید، امکان تغییر عرض ویرایشگر را داشته باشید از این بخش می‌توان آن را فعال کرد.
  • Enable Less Margin CSS: اگر می‌خواهید تغییراتی در استایل ویرایشگر دهید می‌توانید این بخش را فعال کنید.

در نهایت بر روی دکمه “Save Changes” کلیک می‌کنیم تا تنظیمات ما ذخیره شوند. حال وقت چیست؟ نوبت آن شده که به بخش نوشته‌ها برویم و امکانات اضافه شده به ویرایشگر گوتنبرگ را مشاهده کنیم.

 

Kadence Block در گوتنبرگ

به ویرایشگر گوتنبرگ رفته و بر روی دکمه + کلیک کنید تا بلاک‌ها را ببینیم:

توسعه ویرایشگر گوتنبرگ در وردپرس با افزونه Kadence Blocks

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

 

افزودن ردیف

بر روی گزینه “Row layout” کلیک می‌کنیم تا چند ستون را انتخاب کنیم.

توسعه ویرایشگر گوتنبرگ در وردپرس با افزونه Kadence Blocks

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

توسعه ویرایشگر گوتنبرگ در وردپرس با افزونه Kadence Blocks

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

توسعه ویرایشگر گوتنبرگ در وردپرس با افزونه Kadence Blocks

حال موارد مورد نظر را به آن اضافه می‌کنیم و نتیجه را مشاهده می‌کنیم:

توسعه ویرایشگر گوتنبرگ در وردپرس با افزونه Kadence Blocks

حال به بخش توضیحات خود دکمه‌ای اضافه می‌کنیم که بتوانیم به مطلب مربوطه لینک دهیم. برای این‌ منظور باید از Advance button استفاده کنیم:

توسعه ویرایشگر گوتنبرگ در وردپرس با افزونه Kadence Blocks

حال دکمه نیز به مطلب ما اضافه شد:

توسعه ویرایشگر گوتنبرگ در وردپرس با افزونه Kadence Blocks

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

 

امکان جالب در افزونه

حالا می‌خواهم شما را با یک امکان خیلی جالب در این افزونه آشنا کنم. زمانی که روی آیکون + کلیک می‌کنید و می‌خواهید ردیفی را اضافه کنید، دکمه‌ای با عنوان ” Prebuilt Library” را می‌بینید. به نظر شما چه کاری انجام می‌دهد؟ با هم روی آن کلیک می‌کنیم تا ببینیم چه خبر است…

توسعه ویرایشگر گوتنبرگ در وردپرس با افزونه Kadence Blocks

چقدر هیجان‌انگیز! قالب‌های آماده‌ای را می‌بینیم که با انتخاب هر کدام می‌توانیم صفحه جذابی ایجاد کنیم! تنها کافیست اطلاعات آن را تغییر دهیم. موافقید یکی را انتخاب کنیم؟

۱- ساخت سربرگ

توسعه ویرایشگر گوتنبرگ در وردپرس با افزونه Kadence Blocks

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

۲- افزودن باکس اطلاعاتی

توسعه ویرایشگر گوتنبرگ در وردپرس با افزونه Kadence Blocks

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

۳- معرفی همکاران

توسعه ویرایشگر گوتنبرگ در وردپرس با افزونه Kadence Blocks

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

 

نتیجه نمونه تستی

حال نظر شما را به صفحه تستی که ساختم جلب می‌کنم:

توسعه ویرایشگر گوتنبرگ در وردپرس با افزونه Kadence Blocks

کلام آخر

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

دانلود نسخه : 1.3.8

حراج محدود 59 افزونه فارسی فقط 59 هزارتومان ( قیمت تک فروش 590 هزارتومان )


مارکیو | طراحی حرفه سایت،سئو و بهینه سازی سایت


نحوه استفاده

کافیست افزونه را در مسیر wp-content/plugins آپلود کنید و سپس از بخش مدیریت افزونه ها آن را فعال نمایید.

مطلب مفیدی بود ؟
نویسنده : mohammad 0 افزونه ها , افزونه وردپرس

لینک کوتاه مطلب : https://www.20script.ir/?p=42888

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
632افزودن امکانات جدید به گوتنبرگ با Advanced Gutenberg تاریخ : 1398/01/3
460۲ ویژگی جالب در نسخه جدید افزونه گوتنبرگ تاریخ : 1398/01/14
1,372آیا می‌دانید گوتنبرگ وردپرس چیست و چه کارایی دارد؟ تاریخ : 1397/10/9
800بررسی عملکرد افزونه Yoast SEO در وردپرس ۵ تاریخ : 1397/11/6
1,124آیا گوتنبرگ می‌تواند جایگزین خوبی برای صفحه‌ساز وردپرس باشد؟ تاریخ : 1397/10/4
872بهترین روش سفارشی‌ سازی ویرایشگر گوتنبرگ با افزونه Atomic Blocks تاریخ : 1397/12/5
568افزایش امکانات ویرایشگر گوتنبرگ وردپرس با افزونه Pro Icons تاریخ : 1398/01/14
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب