جستجو برای:
سبد خرید 0
  • صفحه اصلی
  • مقالات و آموزش ها
  • فروشگاه
  • درباره ما
  • پرسش و پاسخ
  • دانلود وردپرس
  • ارتباط با ما

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت
  • phone 04133252264
  • email info@wpnegar.ir
perm_identity
سبد خرید 0
  • قوانین و مقررات
  • ثبت تیکت
0
وردپرس نگار (وی‌پی نگار) - WP Negar
  • صفحه اصلی
  • مقالات و آموزش ها
  • فروشگاه
  • درباره ما
  • پرسش و پاسخ
  • دانلود وردپرس
  • ارتباط با ما
perm_identity ورود و ثبت نام

وبلاگ

وردپرس نگار (وی‌پی نگار) - WP Negar > مقالات و آموزش ها > افزونه وردپرس > سفارشی‌ سازی ویرایشگر گوتنبرگ با Atomic Blocks

سفارشی‌ سازی ویرایشگر گوتنبرگ با Atomic Blocks

access_time26 ژانویه 2019
perm_identity ارسال شده توسط سحر امیرعباسیان
folder_open افزونه وردپرس
visibility 655 بازدید

ویرایشگر گوتنبرگ

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

سفارشی‌ سازی ویرایشگر گوتنبرگ

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

ویژگی‌های طلایی افزونه

تعدادی از امکانات و ویژگی‌های این افزونه شامل:

 

ویژگی‌های طلایی افزونه

نصب افزونه Atomic Blocks

افزونه Atomic Blocks

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

آموزش استفاده از افزونه Atomic Blocks

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

افزونه Atomic Blocks

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

نحوه استفاده

Profile Box

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

Profile Box

روی بخش Add name کلیک کنید و نام شخص مورد نظر را وارد کنید. در قسمت Add title نیز عبارتی مثل سِمت این شخص را وارد کنید و در قسمت پایینی هم توضیحاتی در مورد این فرد یادداشت کنید. در سمت راست، با کلیک کردن روی عکس، می‌توانید عکس شخص مورد نظر را نیز آپلود و اضافه کنید. در بالای جعبه نیز می‌توانید متن این جعبه را به دلخواه راست‌چین، چپ‌چین یا وسط‌چین نمایید. زمانی که این المان انتخاب شد، در سمت چپ گوتنبرگ در قسمت Block، گزینه‌هایی برای شخصی‌سازی این المان وجود دارند که به آن‌ها نیز می‌پردازیم.

Profile Box

Font Size: سایز فونت متن جعبه را مشخص کنید.
Avatar Shape: می‌توانید شکل عکس این جعبه را مربعی یا دایره‌ای کنید.
Background Color: رنگ پس زمینه جعبه را تعیین کنید.
Text Color: رنگ متن جعبه را تعیین کنید.
Social Link Color: رنگ شبکه‌های اجتماعی که در زیر این جعبه قرار دارند را تعیین کنید.
Social Links: لینک شبکه‌های اجتماعی شخص مورد نظر را در هر قسمت وارد نمایید.

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

Testimonial

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

Call To Action

 

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

Call To Action

Text Options: سایز فونت عنوان و متن جعبه را مشخص کنید.
Text Color: رنگ متن را تعیین کنید.
Background Options: می‌توانید جهت پس‌زمینه این جعبه یک عکس اختصاص دهید یا اینکه یک رنگ دیگر را بکار ببرید.
Button Options: در این بخش می‌توانید مشخص کنید که لینک دکمه در صفحه جدید باز شود یا نه. همینطور سایز، شکل و رنگ دکمه هم از این قسمت قابل تغییر می باشد.

Button

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

Button

روی دکمه کلیک کنید و متن روی دکمه را بنویسید. در بخش پایینی هم لینک دکمه را وارد کرده و دکمه Apply را بزنید. در سمت راست در قسمت Block، تنظیمات بیشتر این المان را می توانید مشاهده کنید.

butten

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

Drop Cap

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

Drop Cap

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

Notice

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

Notice

در بخش Notice Title، عنوان جعبه را وارد کنید و در قسمت پایینی هم متن مورد نظر خود را بنویسید. در قسمت Block  در سمت راست تنظیمات بیشتر این المان را بررسی می‌کنیم.

Notice

Font Size: سایز فونت نوشته‌های این جعبه را مشخص کنید.
Notice Display: در صورتی که روی Dismissable قرار دهید، کاربر می‌تواند با زدن دکمه ضربدر در کنار این جعبه آن را ببندد و نبیند و در صورتی که روی Always Show قرار دهید، همیشه برای کاربران قابل مشاهده می باشد. گزینه‌های بعدی مربوط به رنگ‌بندی جعبه، عنوان و متن این المان جهت سفارشی‌ سازی ویرایشگر گوتنبرگ می باشند.

Sharing

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

Sharing

در سمت راست در بخش Block، به پیکربندی این المان می‌پردازیم.

Sharing

در بخش بالایی مشخص می‌کنید، اشتراک گذاری در کدام یک از شبکه‌های اجتماعی فعال باشد. در بخش بعدی که Sharing Button Options نام دارد، تنظیمات اصلی المان قرار دارند.

Button Style: می‌توانید مشخص کنید در دکمه‌ها، نام یا لوگوی شبکه‌های اجتماعی یا هر دوی آن‌ها نمایش داده شوند.
Button Shape: شکل دکمه را می‌توانید بر اساس دلخواه خود عوض کنید.
Button Size: سایز نمایش دکمه‌ها را مشخص کنید.
Button Color: رنگ دکمه‌ها را می‌توانید تغییر دهید. اگر Social Colors را انتخاب کنید، رنگ خود شبکه‌های اجتماعی روی دکمه‌ها قرار خواهد گرفت.

Accordion

با بکار بردن این المان می‌توانید یک لیست آکاردئونی جذاب ایجاد نمایید. این هم بخشی از مبحث سفارشی‌ سازی ویرایشگر گوتنبرگ است.

Accordion

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

Accordion

در بخش Font Size، سایز فونت نوشته را مشخص کنید. در قسمت Open by default می‌توانید مشخص کنید که لیست آکاردئونی به صورت پیش فرض باز باشد یا اینکه کاربر خودش با کلیک کردن، آن را باز کند.

Spacer

یک المان مهم که به شما امکان افزودن فضای خالی بین المان‌های مختلف را می‌دهد.

Spacer

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

Container

این المان به ما امکان قسمت‌بندی  مقاله مان را می دهد. مثلا در صورتی که یک بخش از مقاله شما متن و یک بخش دیگر شامل عکس باشد. در این صورتی شما می‌توانید همه عکس‌ها را در یک Container قرار دهید و فاصله آن را از متن کمی بیشتر کنید یا حتی پس زمینه خاصی به آن اختصاص دهید تا محتوای شما زیباتر به نظر برسد و منظم‌تر شود. در قسمت Block در سمت راست تنظیمات مهمی وجود دارد.

Container

در این قسمت می‌توانید Padding (فاصله داخلی) محتوای خود را از بالا، پایین، چپ و راست تنظیم کنید. همچنین Margin (فاصله خارجی) محتوای خود از بالا و پایین را می‌توانید تغییر دهید. در منوی تنظیمات بعدی که Background Options نام دارد، می‌توانید یک عکس یا رنگی خاص را به عنوان پس زمینه برای کل محتوای درون این کانتینر در نظر بگیرید.

Post Grid

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

در بخش بالایی این المان نحوه نمایش پست ها را به صورت پنجره‌ای یا لیستی انتخاب کنید.Post Grid

در سمت راست در قسمت Block، به پیکربندی تنظیمات این المان می‌پردازیم.

12

Order by: نحوه نمایش پست‌ها را مشخص کنید؛ از قدیم به جدید یا برعکس و یا به ترتیب حروف الفبا
Category: دسته‌بندی پست‌هایی که می‌خواهید نمایش داده شوند را مشخص کنید. برای نمایش پست‌های همه‌ی دسته بندی‌ها، مقدار All را انتخاب کنید.
Numbers of items: تعداد پست‌هایی که می خواهید نمایش داده شود.
Columns: تعداد ستون‌ها برای نمایش پست‌ها را تعیین کنید.

Display Featured Image: تصویر شاخص نمایش داده شود یا خیر.
Featured Image Style: نحوه نمایش تصویر شاخص را تعیین کنید.

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

Customize Read More Link: می‌توانید عبارت Continue Reading که شامل لینک مقاله است را با یک عبارت فارسی مثل “بیشتر بخوانید” جایگزین کنید.

 

 

برچسب ها: افزونه Atomic Blocksافزونه وردپرسسفارشی‌ سازی ویرایشگر گوتنبرگسفارشی‌ سازی ویرایشگر گوتنبرگ با افزونهمشکلات ویرایشگر گوتنبرگوردپرسویرایشگر گوتنبرگ
درباره سحر امیرعباسیان

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

نوشته های بیشتر از سحر امیرعباسیان
مطالب زیر را حتما بخوانید
  • افزونه Comment Link Remove
    افزونه و کد حذف فیلد آدرس از بخش نظرات وردپرس

    2.04k بازدید

  • افزونه Popup Builder
    ایجاد پاپ آپ در وردپرس – افزونه Popup Builder

    1.84k بازدید

  • تایم لاین
    نمایش رویدادها در وردپرس به صورت تایم‌ لاین با افزونه Timeline Express

    1.14k بازدید

  • افزونه Profile Builder
    ایجاد پروفایل کاربری در وردپرس با افزونه Profile Builder

    1.28k بازدید

  • تصویر پروفایل
    افزودن عکس پروفایل در وردپرس با افزونه User Profile Picture

    1.07k بازدید

جدید تر ویرایش گروهی محصولات ووکامرس با Smart Manager For Woocommerce
قدیمی تر هشدار قدیمی بودن نسخه PHP هاست در وردپرس ۵٫۱

دیدگاهتان را بنویسید لغو پاسخ

جستجو برای:
محصولات
  • قالب استارتاپی و دیجیتال مارکتینگ هوپر | Hoper ۷۰,۰۰۰ تومان ۴۰,۰۰۰ تومان
  • ویژوال کامپوزر افزونه ویژوال کامپوزر - WP Bakery Visual Composer فارسی نسخه 5.6 ۴۰,۰۰۰ تومان ۳۲,۰۰۰ تومان
  • افزونه مقایسه محصولات ووکامرس افزونه مقایسه پیشرفته محصولات ووکامرس - افزونه قیاس ۳۵,۰۰۰ تومان ۲۵,۰۰۰ تومان
  • افزونه نظرات حرفه ای وردپرس افزونه نظرات حرفه ای وردپرس Commentator ۱۹,۰۰۰ تومان ۱۰,۰۰۰ تومان

تخفیف 50 درصدی وی پی نگار

سیستم پرسش و پاسخ
سیستم پرسش و پاسخ وی‌پی نگار
  • محبوب
  • جدید
  • دیدگاه ها
قبلی بعدی
کانال تلگرام وی‌پی نگار
کانال تلگرام وی‌پی نگار
برجسته ترین ها
  • اضافه کردن فیلد دلخواه جدید به فرم خرید افزونه edd 3 votes, average: 5,00 out of 53 votes, average: 5,00 out of 53 votes, average: 5,00 out of 53 votes, average: 5,00 out of 53 votes, average: 5,00 out of 5 (5,00 out of 5)
  • آموزش تعریف و اضافه کردن فهرست به پوسته وردپرس 2 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 5 (5,00 out of 5)
  • انتقال ابزارک بین سایت های وردپرسی 2 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 5 (5,00 out of 5)
  • حل مشکل درخواست اطلاعات ftp در وردپرس 2 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 5 (5,00 out of 5)
  • نحوه ی تغییر سریع نام نقش های کاربری در وردپرس با بکار بردن کد 2 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 5 (5,00 out of 5)
  • کد قرار دادن عکس در پس زمینه قالب وردپرس 2 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 5 (5,00 out of 5)
  • نمایش موقعیت در نقشه گوگل در سایت با استفاده از کد 2 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 5 (5,00 out of 5)
  • نحوه ی قرار دادن QR code در سایت وردپرسی 2 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 5 (5,00 out of 5)
  • آموزش ذخیره خودکار تصاویر هنگام انتشار مطلب با Cache images 2 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 5 (5,00 out of 5)
  • آموزش مدیریت دسته بندی محصولات در ووکامرس 2 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 5 (5,00 out of 5)
سیستم پرسش و پاسخ


سیستم پرسش و پاسخ وی‌پی نگار

کانال تلگرام وی‌پی نگار


کانال تلگرام وی‌پی نگار

درباره ما

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

logo-samandehi

منابع رسمی وردپرس
  • سایت رسمی وردپرس جهانی
  • مخزن افزونه ها وردپرس
  • مخزن قالب های وردپرس
  • مخزن کد های وردپرس
پل های ارتباطی
  • location_on
    تبریز - فلکه دانشگاه - ساختمان تبریز - طبقه ۶ - واحد ۲۰
  • phone_android
    04133252264
  • perm_phone_msg
    04133253162
  • email
    info@wpnegar.ir
تمامی حقوق برای سایت وی پی نگار محفوظ می باشد.
keyboard_arrow_up