ستون بندی صفحه و ویرایش ستون ها در ویرایشگر گوتنبرگ وردپرس

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

همچنین مجموعه ای از بلوک ها با کاربری هایی متفاوت از ویرایشگر کلاسیک وردپرس به این ویرایشگر اضافه شده که کار با آن را راحت تر کرده است. در ویرایشگر گوتنبرگ به غیر از بلوک های اصلی HTML (مانند پاراگراف، عنوان، لیست، تصویر و… ) که از قبل استایل و سبک خود را داشته اند، بلوک های پیچیده دیگری نیز وجود دارند که برای کاربران وردپرس چندان آشنا نیستند. بلوک هایی مانند گفتاورد، کشیدن نقل قول، رویه، دکمه و ستون جزء این دسته هستند.

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

آموزش ستون بندی در ویرایشگر گوتنبرگ وردپرس

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

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

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

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

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

با کلیک بر روی بلوک ستون، در سایدبار سمت چپ صفحه تنظیمات بلوک ستون را مشاهده خواهید کرد.

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

با کلیک بر روی هر ستون تنظیمات مربوط به آن ستون در سایدبار سمت چپ صفحه نمایش داده می شود.

شما می توانید نسبت عرضی هر ستون را در این قسمت مشخص کنید.

روی تب پیشرفته در قسمت تنظیمات ستون کلیک کنید. در این قسمت می توانید یک کلاس CSS اضافه کنید. با ایجاد یک کلاس CSS به عنوان مثال می توانید عرض ستون ها را کنترل کنید.

البته برای این کار نیاز به داشتن اندکی دانش CSS دارید.

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

با کلیک بر روی آیکون + پنجره بلوک ها برای شما باز می شود و می توانید بلوک موردنظر خود را انتخاب کرده و وارد ستون کنید. همین کار را برای ستون های بعدی نیز انجام دهید.

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

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

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

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

آموزش بلوک گفتاورد

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

برای استفاده از بلوک گفتاورد روی آیکون + که مربوط به اضافه کردن بلوک است کلیک کنید. در قسمت متن می توانید بلوک گفتاورد را پیدا کنید.

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

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

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

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

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

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

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

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

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

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

• فهرست
• بند (ستون بندی در وردپرس)
• تیتر
• کشیدن نقل قول

تبدیل بلوک گفتاورد به بند، دو بلوک بند ایجاد می کند. یکی برای نقل قول و دیگری برای استناد.

تبدیل بلوک گفتاورد به لیست، نقل قول و استناد را به آیتم های لیست تبدیل می کند.

تبدیل بلوک گفتاورد به تیتر، نقل قول را به بلوک تیتر تبدیل می کند و استناد زیر آن را به یک بلوک نقل قول جدید زیر بلوک تیتر می برد.

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

آموزش بلوک کشیدن نقل قول

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

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

برای دسترسی به بلوک کشیدن نقل قول کافی است بر روی آیکون + کلیک کنید. حال با جستجو کردن یا در قسمت متن می توانید بلوک کشیدن نقل قول را پیدا کنید.

با کلیک بر روی این بلوک صفحه ای مشابه شکل زیر مشاهده خواهید کرد.

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

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

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

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

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

امیدواریم از این آموزش بهره لازم را برده باشید.