Divi Builder: وب سایت خود را بدون لمس یک خط کد ایجاد کنید

Divi Builder بسیار شیک است و این تصادفی نیست.

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

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

و این بدان معناست که از طریق سیستم Drag & Drop یا “کشیدن و رها کردن” شما می توانید وب سایت خود را با هزار و یک روش طراحی کنید و به همان اندازه که می خواهید طرح های پیچیده ای بدست آورید.

برای اینکه بتوانید در مورد این نوع ابزار بیشتر بدانید ، امروز من یک راهنمای بسیار کامل برای شما آورده ام که در آن شما خودتان پتانسیل یکی از بهترین افزونه های طرح بندی را که در بازار پیدا خواهید کرد ، خواهید دید. p >

من در مورد چیزی بیشتر و کمتر از Divi Builder ، Visual Drag & Drop سازنده توسعه یافته توسط شرکت تم های زیبا صحبت نمی کنم.

بیایید شروع کنیم!

آنچه در این مقاله می خواهیم ببینیم:

Divi Builder چیست؟

divi-builder

Divi Builder a > افزونه ای است که توسط Elegant Themes طراحی شده است ، شرکتی اختصاص داده شده برای توسعه تم ها و پلاگین های برتر برای وردپرس ، که به دلیل محصول شاخص موضوع Divi ، قالب چند منظوره وردپرس شما.

علاوه بر Divi ، این شرکت تعداد عظیم بیش از 80 موضوع و سایر محصولات را طراحی کرده است که می خواهم آنها را برجسته کنم:

  • بلوم: افزونه ای برای ایجاد فرم های انتخاب (Opt-In) ، برای جذب مشترکان ضروری است.
  • مونارک : افزونه رسانه های اجتماعی که از طریق آن می توانید محتوای خود را به اشتراک بگذارید و آنها را وادار کنید در مشهورترین شبکه های اجتماعی شما را دنبال کنند.

بیا ، با محصولات این شرکت چیزی از دست نخواهید داد و بیش از همه همه چیز در یک بسته وجود دارد 😉

ماموریت Divi Builder مشخص است:

در صورت نیاز به دانستن چیزی درمورد کد ، به روشی آسان و بصری طرح و طرح را تا حد ممکن آسان کنید.

بدون سرگیجه ، عوارض و سردرد ، اما کاملاً برعکس: واقعاً از ایجاد وب سایت خود از ابتدا لذت خواهید برد.

و استفاده از Divi Builder برای همه کاربران در دسترس است.

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

بیایید پلاگین را با جزئیات بیشتری تجزیه و تحلیل کنیم.

مشخصات عمومی Divi Builder

como-diseñar-web-divi-builder-caracteristicas

همانطور که خودتان می بینید ، Divi Builder دارای بسیاری از ویژگی ها و گزینه های مختلف است.

در اینجا خلاصه ای مختصر از مواردی است که من بیشترین موارد را در نظر می گیرم (نگران نباشید ، بعداً جزئیات بیشتری خواهیم داد)

سهولت استفاده

divi-builder-facilidad-uso

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

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

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

بی نهایت طرح

diseños-con-divi-builder

تطبیق پذیری Divi Builder به لطف عناصر اساسی در طراحی مانند بخشها ، ردیف ها و ماژول ها

بسیار زیاد است.

این افزونه دارای 3 نوع بخش ، 20 نوع ردیف و بیش از 40 ماژول است که همراه با گزینه های پیکربندی پیشرفته ، به شما امکان می دهد طرح های کاملاً سفارشی ایجاد کنید.

ماژول

los-modulos-en-divi-builder

ماژول ها بلوک های اساسی ساختاری هستند و هر کدام عملکرد متفاوتی را برای شما فراهم می کنند: تصاویر ، متن ، نقشه ، تبلیغات و موارد دیگر….

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

گزینه های پیکربندی h3>

configuracion-del-plugin-divi-builder

همه موارد در Divi Builder عملاً تحت پیکربندی و سفارشی سازی قرار دارند.

هر بخش ، سطر و ماژول از یک سری تنظیمات عمومی ، پیشرفته و ویژه از طریق CSS تشکیل شده است همه بدون لمس یک خط کد “لعنتی”.

ویرایش حالت ها h3>

modos-de-edición

می خواهید محتوای خود را از کجا ویرایش کنید؟ در بخشی که مربوط به مدیر وردپرس است یا از نظر بصری؟

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

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

شخصی سازی از طریق CSS

personalizar-css-en-divi-builder

اگر دانش CSS دارید ، می توانید وب سایت خود را بدون محدودیت و به صورت مدولار و بدون تأثیر بر سایر قسمتهای وب ، شخصی سازی کنید.

و این است که هر عنصر سازنده Divi Builder دارای یک بخش اختصاص یافته به CSS است.

با استفاده از آن ، نه تنها می توانید کد CSS را مستقیماً در آنها پیاده سازی کنید بلکه می توانید کلاسها و شناسه هایی به آن بدهید تا از طریق تم کودک

به آن سبک دهد.

طراحی پاسخگو

responsive-divi

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

خوشبختانه Divi Builder به لطف تنظیمات و گزینه های پیکربندی ، کار را برای شما بسیار آسان می کند.

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

آسان اما در عین حال بسیار قدرتمند 😉

Divi Library

library

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

چه کاری می خواهید انجام دهید؟ از ابتدا شروع کنید؟

اگر بتوانید طراحی کامل هر صفحه و عنصر وب سایت خود را ذخیره کنید؟ آیا می دانید از چه زمانی می توانید صرفه جویی کنید و روند طراحی شما چقدر موثر است؟ p >

خوب ، همه اینها و موارد دیگر به لطف کتابخانه Divi امکان پذیر است.

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

تم های زیبا به طور مداوم مقدار زیادی طرح های قابل بارگیری تا پروژه های شما هرگز از ابتدا شروع نکنند.

نقش Divi

divi-rol

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

Divi Builder شامل نقش Divi است ، یک پنل پیکربندی برای اعطای مجوزها بر اساس نوع کاربری که با شما همکاری خواهد کرد ( مدیر ، ویرایشگر ، نویسنده و مشارکت کننده ).

Divi Leads

divi-leads

آیا دوست دارید سیستمی برای ارزیابی پتانسیل تبدیل عناصر خاص وب سایت خود داشته باشید؟

با تشکر از ابزار جدید خود Divi Leads این امر کاملاً عملی است.

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

نحوه طراحی وب سایت خود با Divi Builder

como-hacer-una-web-con-divi-builder

ما در اینجا توضیح می دهیم تا شکات احتمالی شما در مورد طراحی وب سایت شما را با Divi Builder روشن کنیم.

کلید-عناصر-در-طراحی با Divi Builder

همانطور که قبلاً به طور مختصر دیدیم ، طرح با Divi Builder به استفاده از 3 عنصر اساسی بهم پیوسته متکی است: بخشها ، ردیف ها و ماژول ها

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

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

این بخشی از طراحی صفحه ای است که با Divi Builder ساخته شده است:

backend-divi

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

frontend-divi

بخشها h4>

بخش ها عناصر اصلی در طراحی با Divi Builder هستند زیرا طرح از آنجا شروع می شود.

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

سه بخش وجود دارد: استاندارد ، تمام عرض و ویژه.

بخشهای استاندارد h4>

seccion-estandar

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

این بخشی است که به طور پیش فرض هر زمان که Divi Builder را برای شروع طراحی وب سایت خود فعال می کنید ، نمایش داده می شود.

یک بخش استاندارد به شما امکان می دهد تعداد نامحدودی ردیف با حداکثر 4 ستون در هر ردیف که بعداً ماژول ها در آن وارد می شود ، وارد کنید.

طرح یا ترتیب و تعداد این ستون ها کاملاً برگشت پذیر است و هر زمان که لازم بدانید قابل تغییر است.

بخشهای تمام عرض

anchura-completa

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

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

بخشهای ویژه h4>

seccion-especial

آنها کاملاً متفاوت از دو طرح قبلی ارائه می دهند.

برای این منظور حداکثر 9 نوع طرح از بخشهای خاص را در اختیار خواهید داشت.

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

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

ردیف h3>

filas-divi

همانطور که قبلاً به شما نشان دادم ، ردیف ها عناصر طراحی با Divi Builder است که مسئول شامل ماژول ها و تغییر ترتیب آنها از طریق ستون ها است.

آنها در دو بخش استاندارد و خاص وجود دارند.

از طریق ردیف ها می توانید ماژول ها را در حداکثر 4 ستون با عرض نصب کنید که قبلاً توسط شما انتخاب شده اند.

تعداد ردیف ها در هر بخش نامحدود است و متناسب با نیاز شما داده می شود.

ماژول ها

diseñar-modulos

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

در حال حاضر 46 ماژول وجود دارد ، 35 مورد مربوط به بخشهای استاندارد و 9 مورد مربوط به بخشهای تمام عرض است.

تنظیمات در Divi Builder

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

برای این منظور باید تنظیمات هر کدام را به روش خاص خود از طریق “تنظیمات” انجام دهیم اقداماتی را که طراحی را تسهیل می کنند strong > (تنظیمات خارجی) و تغییر شکل ظاهری هر عنصر به دلخواه ما (تنظیمات داخلی).

برای سهولت کار شما ، این تنظیمات را به دو گروه طبقه بندی کرده ام:

  • تنظیمات خارجی.
  • تنظیمات داخلی

تنظیمات خارجی h4>

ajustes-externos-divi

اینها تغییراتی است که می توانید در عناصر خود ایجاد کنید تا تسهیل مدیریت آنها یا مدیریت آنها.

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

همانطور که مشاهده خواهید کرد ، گزینه های زیادی وجود دارد: تغییر نام ، آزمایش چند متغیره یا آزمایش تقسیم ، ذخیره در کتابخانه ، واگرد ، و غیره …

تنظیمات داخلی h4>

ajustes-internos-divi

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

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

  • محتوا: همانطور که از نام آن مشخص است نسبت به محتوای آن است. اگر مثلاً از ماژول تصویری در آن استفاده کنیم ، می توانید تصویر مورد نظر ، آدرس اینترنتی را که به آن نشان می دهد و غیره انتخاب کنید …
  • طراحی: به شما امکان می دهد همه موارد مربوط به طراحی و شکل ظاهری آن را کنترل کنید. بازگشت به ماژول تصویر: می توانید تصویر را تراز کنید ، یک حاشیه برای آن اعمال کنید ، اندازه آن را کم یا زیاد کنید ، و غیره.
  • پیشرفته: برای اعمال CSS در هر عنصر در قسمتهای مختلف آن و / یا از طریق شیوه نامه یک موضوع کودک.

The Visual-Builder of Divi Builder

divi-builder-constructor-visual

آغوش!

“>

منبع:
https://www.haciaelautoempleo.com/divi-builder-elegant-themes/

.

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