ویژگی برجسته محصول Divi: Divi Block

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

Divi Block چیست؟

Divi Block یک ابزار آنلاین کشیدن و رها کردن است که به شما امکان می دهد با نزدیک به 480 بلوک از پیش طراحی شده طرح بندی ایجاد کنید. هنگامی که طرح بندی را ایجاد کردید، می توانید آن را به عنوان یک فایل JSON بارگیری کنید و آن را در هر وب سایت Divi آپلود کنید.

Divi Block شامل:

• هدر بیلدر
• Layout Builder
• خالق پاورقی
• سرفصل های بخش
• طرح های ویژه ماژول
• نسخه های روشن و تاریک
• طرح های رنگی

می‌توانید طرح‌بندی‌های خود را در یک وب‌سایت Divi واقعی پیش‌نمایش کنید.

ابزار آنلاین Divi Block

طرح Divi Block شامل 4 منطقه است. من آنها را با توجه به عملکرد آنها نامگذاری کرده ام:

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

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

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

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

منطقه ویرایش

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

برای این مثال، من سه بلوک اضافه کردم: چرخ فلک کارت، سرصفحه صفحه و CTA. آنها به ترتیبی که من آنها را انتخاب کردم در صفحه قرار گرفتند.

نمونه های هدر بیلدر

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

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

نمونه های چیدمان

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

این مثال برگه‌های درباره ما و خدمات را نشان می‌دهد.

این مثال جدول CTA، پرسش‌های متداول و قیمت‌گذاری را نشان می‌دهد.

در اینجا نمونه هایی از گواهینامه و طرح تیمی آورده شده است.

این یک طرح وبلاگ و آرم های مشتری را نشان می دهد.

این مثال یک گالری، یک برگه اعداد و یک برگه فرآیند را نشان می دهد که مراحل فرآیند را نشان می دهد.

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

این مثال یک فرم تماس را نشان می دهد.

این مثال یک پاورقی را نشان می دهد.

نمونه هایی از ماژول های خاص طراحی کنید

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

اینجا گالری سنگ تراشی است.

این مثال یک نوار تبلیغاتی، یک پس‌زمینه پویا و یک تعویض‌کننده محتوا را نشان می‌دهد.

برای این مثال، من یک دکمه شناور و یک نوار اسکرول را انتخاب کردم.

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

طرح رنگی

با کلیک بر روی مربع رنگی در گوشه پایین سمت راست، انتخابگر رنگ باز می شود. این طرح رنگ را برای عناصر موجود در صفحه کنترل می کند. پیش‌فرض قرمز است، کد هگزا ۲۲۹، ۲۷، ۳۵. می‌توانید با حرکت دادن دایره در ناحیه رنگ، حرکت دایره روی نوار لغزنده رنگ یا افزودن مقادیر RGB مورد نظر، آن را تغییر دهید. وقتی آن را تغییر می‌دهید، تغییر رنگ‌ها را در طرح‌بندی‌های از پیش ساخته شده نمی‌بینید، اما هنگام آپلود فایل‌های JSON، و در صورت تمایل در پیش‌نمایش، آن‌ها را مشاهده خواهید کرد.

در اینجا طرحی است که رنگ اصلی را نشان می دهد. من آن را در ابزار طرح رنگ به آبی تغییر دادم.

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

طراحی طرح با Divi Block

من از Divi Block برای ایجاد هدر، صفحه اصلی و پاورقی استفاده خواهم کرد. سپس آنها را به عنوان الگو در Divi Theme Builder آپلود می کنم.

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

بعد، من یک هدر سراسری از ابتدا در Divi Theme Builder ایجاد می کنم.

سپس طرح را وارد می کنم.

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

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

در اینجا هدر جلویی است. منو چسبناک است بنابراین وقتی کاربر اسکرول می کند در بالای صفحه باقی می ماند.

صفحه نخست

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

در مرحله بعد، من یک قالب صفحه اصلی را از ابتدا در Divi Theme Builder ایجاد می کنم و یک بدنه سفارشی اضافه می کنم.

سپس طرح را وارد می کنم.

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

در اینجا بخشی از CTA است.

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

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

در مرحله بعد، یک فوتر جهانی از ابتدا در Divi Theme Builder ایجاد می کنم.

سپس طرح را وارد می کنم.

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

اینجا پاورقی جلویی است.

از کجا می توان Divi Block را دریافت کرد

Divi Block در وب سایت ناشر موجود است. نسخه رایگان برای استفاده همه در دسترس است. نسخه Pro Divi Block فقط به عنوان بخشی از عضویت Divi.Help Pro آنها در دسترس است. مشترکین به تمام محصولات مرتبط با Divi خود از جمله نسخه Divi Block Pro، افزونه‌های ممتاز، تم‌های کودک و بسته‌های طرح‌بندی دسترسی دارند. عضویت حرفه ای 49 دلار در سال است.

پایان افکار

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

ما می خواهیم از تو بشنویم. آیا Divi Block را امتحان کرده اید؟ نظر خود را در مورد آن در نظرات با ما در میان بگذارید.