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

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

یک نگاه یواشکی

در اینجا پیش نمایشی از آنچه ما طراحی خواهیم کرد است
https://www.elegantthemes.com/blog/wp-content/uploads/2022/10/Sticky-Map-Module-Final-Result.webm

آنچه برای شروع نیاز دارید

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

حالا شما آماده رفتن هستید!

چگونه یک ماژول Sticky Map را به صفحه Divi خود اضافه کنید

یک صفحه جدید با یک طرح از پیش ساخته شده ایجاد کنید

بیایید با استفاده از یک طرح از پیش ساخته شده از کتابخانه Divi شروع کنیم. برای این طراحی ما از صفحه فرود مدرسه Craft از بسته طرح بندی مدرسه Craft استفاده خواهیم کرد.

یک صفحه جدید به وب سایت خود اضافه کنید و به آن عنوان بدهید، سپس گزینه Use Divi Builder را انتخاب کنید.

برای این مثال از یک طرح‌بندی از پیش ساخته شده از کتابخانه Divi استفاده می‌کنیم، بنابراین View Layouts را انتخاب کنید.

صفحه فرود مدرسه Craft را جستجو و انتخاب کنید.

گزینه Use this layout را برای افزودن طرح به صفحه خود انتخاب کنید.

اکنون ما آماده ساختن طرح خود هستیم.

طرح بندی ماژول Sticky Map را تغییر داد

ثبت CTA

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

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

سپس خط «تماس یا پیوستن آنلاین» را به این بخش جدید منتقل کنید.

تنظیمات صف را باز کنید و به تب Advanced بروید. در قسمت تنظیمات موقعیت، موقعیت را از Absolute به Default تغییر دهید.

به بخش استودیو بیایید.

یک ردیف جدید با دو ستون در زیر بخش عضویت در استودیو اضافه کنید.

سپس این ردیف را به بالای قسمت Studio Membership منتقل کنید.

تنظیمات عنوان

یک ماژول متنی در ستون سمت راست اضافه کنید.

متن را اضافه کنید.

• H2: به استودیو بیا!

سپس، تب Design را باز کرده و تنظیمات Header Text را باز کنید. فونت را به صورت زیر سفارشی کنید:

• قلم عنوان 2: Yusei Magic

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

• عنوان 2 اندازه متن رومیزی: 50 پیکسل
• عنوان 2 اندازه متن تبلت: 30 پیکسل
• اندازه متن عنوان 2 برای موبایل: 24 پیکسل
• ارتفاع خط سرصفحه 2: ​​1.2 em

تنظیمات متن

ماژول متن دیگری را در زیر متن “Come to the studio” اضافه کنید.

متن زیر را وارد کنید

• H3: آدرس
• بند: 1234 Divi St. #1000 سانفرانسیسکو، CA 33945

در تب Design، سبک های متن را تغییر دهید.

• فونت متن: Sans را باز کنید
• اندازه متن رومیزی: 16 پیکسل
• اندازه متن تبلت: 15 پیکسل
• اندازه متن موبایل: 13 پیکسل

سپس سبک های عنوان را تغییر دهید.

• قلم عنوان 3: Open Sans
• عنوان 3 وزن قلم: پررنگ
• سبک قلم عنوان 3: تمام سرمایه (TT)

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

• عنوان 3 اندازه متن رومیزی: 14 پیکسل
• عنوان 3 اندازه متن تبلت: 13 پیکسل
• عنوان 3 اندازه متن موبایل: 12 پیکسل
• عنوان 3 فاصله بین حروف: 3 پیکسل

ماژول متن دیگری را در زیر ماژول آدرس اضافه کنید.

سپس محتوای زیر را به بدنه اضافه کنید:

• بدنه: Lorem ipsum dolor sit amet، consectetur adipiscing elit. Mauris blandit aliquet elit، eget tincidunt nibh pulvinar a. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Praesent sapien massa، convallis a pellentesque nec، egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec rutrum congue leo eget malesuada. Donec rutrum congue leo eget malesuada. Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit.

به تب طراحی بروید و فونت را سفارشی کنید.

سپس اندازه متن و ارتفاع خط را سفارشی کنید.

• اندازه متن رومیزی: 15 پیکسل
• اندازه متن موبایل: 13 پیکسل
• ارتفاع خط متن: 1.9em

تنظیمات دکمه

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

متن دکمه را روی «بیشتر بدانید» تنظیم کنید.

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

• استفاده از سبک های سفارشی برای دکمه: بله
• اندازه متن دکمه: 12 پیکسل
• رنگ متن دکمه: #FFFFFF

پس زمینه دکمه و عرض قاب را سفارشی کنید.

• پس زمینه دکمه: #d5b38e
• عرض قاب دکمه: 0 پیکسل

شعاع قاب دکمه، فاصله حروف و فونت را تغییر دهید.

• شعاع حاشیه دکمه: 0 پیکسل
• فاصله بین حروف دکمه: 3 پیکسل
• فونت دکمه: Sans را باز کنید
• وزن قلم دکمه: پررنگ
• سبک قلم دکمه: همه حروف (TT)

در نهایت یک پد به دکمه اضافه کنید.

• پد بالای صفحه: 15 پیکسل
• پد-پایین: 15 پیکسل
• بالشتک-سمت چپ: 30 پیکسل
• Padding-Right: 30px

بخش عضویت در استودیو

اکنون می خواهیم قسمت عضویت در استودیو را تغییر دهیم. ابتدا طرح سطر را به دو ستون یکسان تغییر دهید.

سپس تصویر بزرگ را به ستون سمت راست، بالای ماژول متنی Studio Membership منتقل کنید.

تنظیمات پیمایش تصویر

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

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

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

در نهایت افکت های اسکرول را باز کنید و افست نهایی را برای حرکت عمودی تنظیم کنید.

متن عضویت در استودیو

تنظیمات ماژول متنی Studio Memberships را باز کنید. پس زمینه را از ماژول حذف کنید.

سپس تنظیمات ردیف را باز کنید و تنظیمات ستون 2 را باز کنید.

در قسمت تنظیمات فاصله در تب Design، بالشتک موجود در زیر را حذف کنید.

پس زمینه برگه

تنظیمات بخش را باز کنید. در تنظیمات پس زمینه، یک تصویر پس زمینه اضافه کنید. craft-school-24.png را از کتابخانه رسانه خود انتخاب کنید.

ماژول Sticky Map را اضافه کنید

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

ابتدا یک ماژول نقشه را به ستون سمت چپ ردیف «بیا از استودیو دیدن کن» اضافه کنید.

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

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

طراحی نقشه

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

سپس تنظیمات حاشیه را باز کنید و حاشیه را به صورت زیر سفارشی کنید:

• عرض فریم: 20 پیکسل
• رنگ قاب: #fcf8f3

تنظیمات Box Shadow را باز کنید و یک سایه به ماژول نقشه اضافه کنید.

تنظیمات چسبنده

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

• موقعیت چسبیدن روی دسکتاپ: به بالا بچسبید
• موقعیت چسباندن تبلت و تلفن همراه: نچسبید
• افست بالای چسبنده: 20 پیکسل
• مرز چسبنده پایین: بخش

حالا به تب Design برگردید و تنظیمات اندازه را باز کنید. می خواهیم ارتفاع نقشه در حالت چسباندن افزایش یابد. از تنظیمات چسبنده برای تنظیم ارتفاع متفاوت استفاده کنید.

• ارتفاع در هنگام چسباندن: 600 پیکسل

در نهایت از تنظیمات ریسپانسیو برای تغییر اندازه نقشه در تبلت و موبایل استفاده کنید.

• ارتفاع تبلت و موبایل: 350 پیکسل

نتیجه نهایی

حالا بیایید ماژول کارت چسبنده خود را در عمل ببینیم.
https://www.elegantthemes.com/blog/wp-content/uploads/2022/10/Sticky-Map-Module-Final-Result.webm

افکار نهایی

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

هی دیوی ملت! از اینکه برای قسمت بعدی طرح هفتگی Divi Design Initiative به ما پیوستید متشکریم. جایی که ما هر هفته یک بسته طرح بندی کاملاً جدید برای Divi هدیه می دهیم.

این بار، تیم طراحی یک بسته طرح بندی ایمیل مارکتینگ زیبا ایجاد کرده است که به شما کمک می کند وب سایت بازاریابی ایمیل بعدی خود را در کمترین زمان راه اندازی کنید!

این بسته چیدمان شامل:

– 7 صفحه آرایی آماده که به صورت استراتژیک برای هر وب سایت بازاریابی ایمیلی طراحی شده اند (از جمله طراحی پاورقی)
– عکس ها و گرافیک های اصلی و رایگان + فایل منبع سفارشی (به زیر مراجعه کنید)
– به‌علاوه، مجموعه‌ای بزرگ از عناصر وب‌سایت از پیش طراحی‌شده که می‌توان آن‌ها را سفارشی کرد و در هر مکانی دوباره استفاده کرد.

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

طراحی صفحه فرود

دمو طرح زنده را ببینید

طراحی صفحه اصلی

دمو طرح زنده را ببینید

طراحی صفحه خدمات

دمو طرح زنده را ببینید

طراحی صفحه خدمات

دمو طرح زنده را ببینید

درباره طراحی صفحه

دمو طرح زنده را ببینید

طراحی صفحه وبلاگ

دمو طرح زنده را ببینید

طراحی صفحه تماس

دمو طرح زنده را ببینید

توابع اساسی

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

تظاهرات زنده

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

1. صفحه فرود بازاریابی ایمیلی (نمایشگر زنده)
2. صفحه اصلی بازاریابی ایمیلی (نمایشگر زنده)
3. صفحه خدمات ایمیل مارکتینگ (نمایشی زنده)
4. صفحه خدمات ایمیل مارکتینگ (نمایشی زنده)
5. صفحه بازاریابی ایمیلی (دمو زنده)
6. صفحه وبلاگ بازاریابی ایمیلی (نمایشگر زنده)
7. صفحه تماس با بازاریابی ایمیلی (نمایشگر زنده)

همین الان به این طرح دسترسی داشته باشید
مستقیماً از Divi Builder شما

از نسخه 3.0.99 Divi، می‌توانید هر یک از طرح‌بندی‌های موجود در این بسته (به همراه تمام بسته‌های طرح‌بندی آماده Divi) را مستقیماً از Divi Builder پیدا و وارد کنید. آنها از قبل منتظر شما هستند.

برای دسترسی به طرح‌بندی جدید، کافی است هنگام ویرایش صفحه، Visual Builder را فعال کنید و در نوار تنظیمات صفحه به دنبال نماد «بارگیری از کتابخانه» بگردید (به نظر می‌رسد یک علامت مثبت است). روی این نماد کلیک کنید تا پنجره بازشو Load from Library باز شود. در تب Premade Layouts، با پیمایش در لیست بسته های طرح بندی، می توانید به راحتی طرح بندی جدید را پیدا کنید. هنگامی که بسته طرح بازاریابی ایمیلی را پیدا کردید، روی آن کلیک کنید. تمام طرح‌بندی‌های جداگانه موجود در بسته را خواهید دید. طرح مورد نظر برای استفاده را انتخاب کنید و سپس روی دکمه “استفاده از این طرح” کلیک کنید.

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

در کانال یوتیوب ما مشترک شوید

احراز هویت لازم است

قبل از اینکه بتوانید طرح‌بندی‌های Premade را از کتابخانه Divi دانلود کنید، باید اشتراک Elegant Themes خود را احراز هویت کنید. شما می توانید این کار را با رفتن به Divi > گزینه های تم > به روز رسانی ها. در آنجا می توانید نام کاربری و کلید API خود را وارد کرده و تغییرات را ذخیره کنید.

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

از تصاویر طرح بندی به صورت رایگان و بدون محدودیت مجوز استفاده کنید

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

دارایی های تصویر با وضوح کامل را دانلود کنید

بسته طرح بندی جدید هر هفته!

امیدواریم این بسته چیدمان را دوست داشته باشید. ما مشتاقانه منتظر شنیدن نظرات شما در بخش نظرات زیر هستیم. فراموش نکنید که بسته طرح بندی هفته آینده را نیز بررسی کنید!

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

تم Milly Child را نصب کنید

ابتدا، ما بررسی خواهیم کرد که نصب Milly چقدر آسان است. نصب تم کودک Milly آسان بود. ابتدا برو به ظاهر > تم ها و انتخاب کنید یک مورد جدید اضافه کنید.

1. ظاهر
2. تم ها
3. یک مورد جدید اضافه کنید

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

1. یک موضوع را آپلود کنید
2. یک فایل را انتخاب کنید
3. الآن نصب کن

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

1. شما فعال کنید

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

1. عزیز
2. واردات نسخه ی نمایشی
3. انتخاب خود را انجام دهید
4. وارد کردن محتوای آزمایشی

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

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

صفحات و طرح‌بندی‌های با موضوع Milly Child

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

صفحات

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

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

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

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

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

کتابخانه دیوی

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

این مثال یک نوار لغزنده ارجاع را نشان می دهد. توصیه ها مانند نقشه ها ساخته می شوند.

در اینجا یک نوار لغزنده دیگر است. این نشان‌واره‌های مشتری را نشان می‌دهد.

این طرح یک پوشش بازشو است. این یک CTA با یک تصویر و یک دکمه است.

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

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

این یک نمونه پروژه را نشان می دهد. شامل نوار لغزنده

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

این بخش شامل یک ویدیوی تعبیه شده است و مراحل را فهرست می کند. همچنین دارای دکمه ای برای اشتراک گذاری ویدیو است.

در اینجا یک پوشش دیگر است. این شامل یک ویدیو و یک دکمه است.

این طرح یک نوار کناری است. شامل تصویر دایره و دکمه برای کسب اطلاعات بیشتر.

سازنده تم

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

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

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

اینجا صفحه 404 است. شامل انیمیشن شناور نماد است.

قیف فروش تم کودک Milly

Milly شامل سه کیت بازاریابی است: وبینار، چالش، و فهرست سازی. اینها شامل صفحاتی برای ایجاد کمپین های بازاریابی است.

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

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

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

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

نمادهای تم Milly Child

بیش از 20 طرح‌بندی در کتابخانه Divi نمادهای سفارشی هستند. این چند آیکون سفارشی را نشان می دهد. بیشتر نمادها یک دایره سبز در مرکز دارند.

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

آنها با ماژول های کد ایجاد می شوند. این مثال یک فلش تیره را نشان می دهد. می توانید آنها را از کتابخانه Divi به عنوان ماژول بارگذاری کنید.

صفحات و طرح‌بندی‌های WooCommerce با موضوع Milly Child

در ادامه، بیایید نگاهی به ویژگی های WooCommerce بیندازیم. Milly شامل چندین صفحه محصول و نوار لغزنده از پیش طراحی شده برای نمایش محصولات شما است. همچنین شامل یک سبد خرید سفارشی، صفحه حساب، و صفحه پرداخت است. بیایید به چند مورد از آنها نگاه کنیم.

صفحه فروشگاه

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

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

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

این مثال اسلایدر فروش را نشان می دهد. نوار تبلیغاتی اکنون با صفحه حرکت می کند.

سبد خرید

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

گزینه های تم Milly

در نهایت، گزینه های تم را بررسی خواهیم کرد. Milly یک برگه به ​​گزینه های تم Divi اضافه می کند. در اینجا می توانید چندین گزینه را انتخاب و تنظیم کنید.

رنگ ها

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

پوشش ها

Milly می تواند از هر تب به عنوان یک پنجره بازشو استفاده کند. آنها با کلیک فعال می شوند. به سادگی کلاس CSS را به بخش و عنصری که می خواهید بازدیدکنندگان شما روی آن کلیک کنند اضافه کنید. این به این معنی است که می توانید با Divi Builder یک پاپ آپ با هر طرح یا طرح سفارشی که می خواهید ایجاد کنید. بخش Overlays شامل تنظیمات رنگ پس‌زمینه، محو کردن پس‌زمینه، بستن با کلیک، بستن با کلید خروج، بستن نماد، بستن رنگ نماد و پنهان کردن پوشش‌ها در سازنده است.

پیش بارگیری کنید

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

تنظیمات

تب گزینه ها به شما امکان می دهد افکت اختلاف منظر را فعال کنید و چرخ فلک ها و لغزنده ها را فعال کنید.

کلاس های CSS Milly

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

تم Milly Child را از کجا بخریم

تم Milly Child در بازار Divi موجود است. به طور معمول 97 دلار هزینه دارد و شامل استفاده نامحدود از وب سایت، 30 روز ضمانت بازگشت وجه، و یک سال پشتیبانی و به روز رسانی است.

پایان افکار در مورد میلی چایلد

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

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

بهار مبارک دیوی فام! 🌺

(آیا می توان گفت “بهار مبارک؟”) 😅

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

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

آمار فعلی و به‌روزرسانی‌های انجمن را در زیر بررسی کنید.

شبکه دوستیابی Divi Nation در اعداد

• مجموع اعضا: 11,155
• مجموع گروه ها: 36
• مجموع رویدادهای سازماندهی شده: 1,814
• تعداد کل پاسخ ها: 13,070
• اعضای جدید (90 روز گذشته): 614
• گروه های جدید (60 روز گذشته): 1

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

برای تبدیل شدن به یک سازمان دهنده DIVI MEETUP امروز درخواست دهید

بیایید به جدیدترین میزبان و گروه ملاقات خوش آمد بگوییم!

لطفاً به جدیدترین گروه ما و میزبان جدید یک گروه نه چندان جدید خوش آمدید! 😅
ما به‌تازگی Divi New Delhi را راه‌اندازی کرده‌ایم و میزبان جدید Divi را برای Divi New York City قرار داده‌ایم، و ما هیجان‌زده هستیم که آنها را به شما معرفی کنیم!

دیوی دهلی نو، هند

مایانک کومار از دیوی دهلی نو

با میزبان مایانک کومار آشنا شوید:

سلام [I’m] مایانک. من [have been] از ابتدای سفر من به وردپرس با Divi مرتبط است. من هم در حال حاضر شرکت می کنم [in] میزبانی [of] دوستیابی وردپرس [in] دهلی NCR. من هم تاییدیه را از وردپرس دریافت می کنم [to be] میزبان مشترک [the] انجمن WP NCR نیز. در حال حاضر در زمینه طراحی وب سایت و سئو فعالیت دارم.

من همیشه دوست دارم جامعه را رهبری کنم. هم وردپرس و هم Divi کار من را بسیار آسان می کنند، بنابراین در عوض من برای کار هیجان زده هستم. و فکر می کردم که با مردم ارتباط برقرار می کنم و در سازماندهی رویدادها بهتر هستم. من همیشه در تمام جشنواره ها و رویدادهای دانشکده ام شرکت می کنم.

ما خوشحالیم که شما مسئولیت رشد جامعه دیوی دهلی نو را بر عهده می گیرید! 💯

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

دیوی نیویورک سیتی، نیویورک، ایالات متحده آمریکا

سیما کلهی از Divi NYC

با مجری سیما کلحی آشنا شوید:

من یک فریلنسر هستم که چند سال پیش کار با وردپرس را شروع کردم. در سه سال گذشته من وب سایت هایی را برای عکاسان و هنرمندان با استفاده از موضوع Divi ایجاد کرده ام.

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

سیما به میکی می‌پیوندد و دیوی نیویورک بازخواهد گشت! 🙌🏼

به Divi NYC بروید

به روز رسانی از گروه های موجود

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

برخی از به‌روزرسانی‌های انجمن ما را مستقیماً از سازمان‌دهندگان زیر بررسی کنید. ⬇️

دیوی شیکاگو، ایلینوی، ایالات متحده آمریکا

دیوی شیکاگو آوریل 2023

از میزبانان، جوآن مارگاو و اسکات وینتروت:

شرکت کنندگان: 9

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

به نظر می رسد دیوی شیکاگو جایگاه خود را پیدا کرده است! 🙌🏼

به دیوی شیکاگو بروید

دیوی قاهره، مصر

دیوی مصر آوریل 2023

از مجری برنامه، محمد صبحی:

شرکت کنندگان: 1

خوشحالیم که دوباره برگشتیم… من با افراد جدیدی شروع کردم که می خواهند یاد بگیرند و بدانند [the] تم Divi. ما در مورد نحوه نصب وردپرس در آن صحبت کردیم [the] محیط محلی نحوه نصب [the] تم Divi و نحوه آماده سازی تنظیمات یا تنظیمات برای Divi. این اولین بار است که آن را در Divi Cloud ذخیره می کنم. بعدی [meetup] ادامه دارد… من یک جلسه جدید در 19 می در مورد نحوه ادغام کتابخانه های JS با Divi ایجاد کردم. دفعه بعد تمام صفحه JS را امتحان خواهیم کرد [in] کتابخانه دیگر و غیره

ما بسیار خوشحالیم که میزبان جلسه آوریل خود بودید. 🙏🏼

به دیوی مصر بروید

لاگوس وحشی، نیجریه

دیوی لاگوس آوریل 2023

دیوی لاگوس آوریل 2023

دیوی لاگوس آوریل 2023

از میزبان، Ayodeji و Olusegun:

شرکت کنندگان: 6

گردهمایی دیوی لاگوس آوریل 2023 با عنوان «شبکه‌سازی و اشتراک‌گذاری بهترین تجربیات طراحان دیوی» برگزار شد. همه به هم متصل شدند و با چهره های جدیدی که توسط دیگران معرفی شده بودند آشنا شدند. مجری همکار آقای اولوتالر تجربه کوتاهی را که از استفاده از Divi داشت و آنچه که دیوی را متمایز می کند به اشتراک گذاشت. در مورد فضای ذخیره سازی Divi Cloud صحبت می کرد و همچنین زمان صرف شده برای جستجوی موضوع مناسب برای استفاده را کاهش داد. او در مورد توانایی اضافه کردن تیم ها به حساب Elegant Themes خود صحبت می کند تا به شما در مدیریت کمک کند.
با تشکر از حامی ما SkillAcade Connect برای ارائه مکانی به ما برای کمک به Divi Lagos میزبان ملاقات خود.

از دیدن حضوری شما بسیار هیجان زده ایم!!! 😍

به دیوی لاگوس، نیجریه بروید

دیوی فینیکس، آریزونا، ایالات متحده آمریکا

ققنوس وحشی برگشتن نوامبر 2022

از دستیار میزبان، راکل (من) 😇:

شرکت کنندگان: 5

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

سخنرانان مهمان برای جامعه بسیار خوشحال کننده هستند!

به دیوی فینیکس بروید

دیوی ساکرامنتو، کالیفرنیا، ایالات متحده آمریکا

دیوی ساکرامنتو آوریل 2023

دیوی ساکرامنتو آوریل 2023

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

شرکت کنندگان: 19

در ماه آوریل، ما حول موضوعات خلاقیت و تخم مرغ عید پاک در طراحی چرخیدیم. نکته برجسته Divi Deep Dive ما با سخنران مهمان اسکات مک آلیستر بود که در مورد اصول CSS Flexbox و CSS Grid ارائه کرد. برای جلسه Divi Mix ما، اعضا بهترین شیوه‌ها برای استفاده از “تخم مرغ عید پاک” در یک سایت، مانند انیمیشن‌ها و پنجره‌های بازشو را مورد بحث قرار دادند. قطعاً یادگیری زیادی وجود داشت، با اطلاعات عالی ارائه شده و طیف وسیعی از سؤالات بسیاری از اعضای ما!

اوه خدای من، این شگفت انگیز است! من عاشق همبستگی عید پاک هستم! 🐣

به دیوی ساکرامنتو بروید

دیوی تورنتو، انتاریو، کانادا

دیوی تورنتو آوریل 2023

از مجری، سوزی هرناندز:

شرکت کنندگان: 8

در ماه آوریل، ما در مورد #1 منبع Divi … وبلاگ Elegant Themes بحث کردیم. سخنران مهمان ما، کریستینا گویرا، نویسنده وبلاگ The Elegant Themes است و انواع محتوایی را که می توان در این وبلاگ یافت، مانند آموزش، بسته های طرح بندی رایگان، مقالات “بهترین” و موارد دیگر توضیح داد. او همچنین در بازار The Elegant Themes توقف کرد. ما همچنین تعدادی از گروه‌های فیس‌بوک را به اشتراک گذاشته‌ایم که کاربران Divi می‌توانند برای پشتیبانی بیشتر از Divi مراجعه کنند. متشکرم کریستینا!

هی کریستینا! من آن را دوست دارم، Divi Toronto! ♥️

به دیوی تورنتو بروید

آیا می خواهید جلسه خود را در شبکه Divi میزبانی کنید؟

عالی! ما همیشه به دنبال افرادی در سراسر جهان هستیم که به Divi و ایجاد جامعه علاقه دارند و می خواهند این اشتیاق را به جامعه محلی گسترش دهند. ما از هزینه‌های ماهانه Meetup مراقبت می‌کنیم و به همه میزبانانمان منابع زیادی برای کمک به برنامه‌ریزی و تبلیغ رویدادهایشان، از جمله کمک به یافتن محل برگزاری و ایده‌های موضوعی طوفان فکری، ارائه می‌کنیم.

راه اندازی یک گروه جدید Divi Meetup آسان است. به سادگی با پر کردن این فرم یا ایمیل درخواست دهید [email protected] پس از پر شدن فرم، با هم کار می کنیم تا گروه شما را راه اندازی کنیم و آن را به شبکه meetup خود متصل کنیم. آسان!

مطمئن نیستید که در حال حاضر یک گروه ملاقات Divi در منطقه شما وجود دارد؟ فقط به صفحه شبکه جلسات ما بروید تا نقشه مکان های فعلی ما را ببینید.

شبکه جهانی دوستیابی Divi

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

بیا شروع کنیم.

هوش مصنوعی مولد چیست؟

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

انتشار پایدار چیست؟

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

استفاده از انتشار ثابت برای تولید یک تصویر

در کانال یوتیوب ما مشترک شوید

اساساً دو روش وجود دارد که می توانید از Stable Diffusion برای ایجاد تصاویر هوش مصنوعی استفاده کنید، یا از طریق API در دستگاه محلی خود یا از طریق یک برنامه نرم افزار آنلاین مانند DreamStudio، WriteSonic یا موارد دیگر.

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

• سیستم عامل ویندوز، مک او اس یا لینوکس
• کارت گرافیک با at کمترین 4 گیگابایت VRAM
• فضای نصب 12 گیگابایت یا بیشتر، ترجیحاً از طریق درایو حالت جامد (SSD)

با این حال، اکثر کاربران SD را در یک راه‌اندازی نرم‌افزار آنلاین اجرا می‌کنند تا از مشکل تنظیم همه چیز به صورت محلی جلوگیری کنند. برای این آموزش، از نرم افزار پرچمدار SD، DreamStudio.ai استفاده خواهیم کرد. این نرم افزار دارای یک رابط کاربری ساده و شهودی با تنظیمات مختلف و ابزارهای ویرایشی است تا بیشترین بهره را از Stable Diffusion ببرید.

درک دستورات برای تولید تصاویر با هوش مصنوعی

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

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

نکاتی برای ایجاد اعلان های موثر

برای ایجاد اعلان‌های مؤثر در انتشار پایدار، مهم است که در مورد آنچه می‌خواهید مشخص باشید. اطمینان حاصل کنید که دستورالعمل‌های واضحی برای هر جزء از دستور (قاب، موضوع و سبک) ارائه کرده‌اید و مهم‌تر از همه، توصیفی باشد.

از کلمات کلیدی استفاده کنید

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

• موضوع: چه چیزی را می خواهید در یک تصویر ببینید (به عنوان مثال: کوه، گربه، ماشین و غیره)
• متوسط: مواد مورد استفاده مانند نقاشی دیجیتال، تصویرسازی، عکاسی و غیره.
• سبک: این به سبک هنری مورد نظر مانند امپرسیونیست، رئالیسم، هایپررئالیستی و غیره اشاره دارد.
• هنرمند: یک هنرمند مشهور خاص مانند رامبراند، پیکاسو و غیره را نام ببرید.
• وضوح: استنباط می کند که تصویر چقدر واضح و دقیق است. از کلماتی مانند بسیار دقیق، فوق العاده واقعی و غیره استفاده کنید.
• توضیحات بیشتر: برای بهبود تصویر، توصیفگرهای اضافی (اصلاح کننده) اضافه کنید
• رنگ: رنگ‌هایی را اضافه کنید تا SD را هدایت کنید تا تصاویری با رنگ یا تن خاص ایجاد کنید، مانند آبی روشن، قرمز تیره و غیره.
• نورپردازی: با استفاده از کلمات کلیدی مانند نورپردازی سینمایی، تاریکی و موارد دیگر، جلوه های نور را اضافه کنید.

پیام های منفی را اضافه کنید

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

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

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

نتیجه:

استایل را فراموش نکنید

هنگام آشنایی با DreamStudio (یا هر هوش مصنوعی دیگری که از انتشار پایدار استفاده می کند) حتماً از انتخابگر سبک استفاده کنید. این به SD کمک می کند تا سبک مورد نظر شما را شناسایی کند و سبک انتخابی مناسب را اعمال کند. در حال حاضر 16 سبک از پیش تعیین شده وجود دارد که ظاهر متفاوتی به شما می دهد. پیشنهاد می کنیم با سبک های از پیش تعیین شده برای ایجاد انواع مختلف هنر آشنا شوید.

16 سبک از پیش تعیین شده DreamStudio:

• بهتر کردن
• انیمه
• به صورت عکاسی
• هنر دیجیتال
• کتاب کمیک
• هنر فانتزی
• فیلم آنالوگ
• نئون پانک
• ایزومتریک
• دامن پایین
• اوریگامی
• هنر خط
• کاردستی خاک رس
• سینمایی
• مدل سه بعدی
• هنر پیکسلی

استفاده از DreamStudio برای تولید تصاویر

اکنون که شما را با انتشار پایدار و نکاتی برای ایجاد تصاویر زیبای هوش مصنوعی آشنا کردیم، بیایید روی DreamStudio تمرکز کنیم. هنگام ثبت نام، 25 اعتبار دریافت خواهید کرد که معمولا برای ایجاد 125 تصویر کافی است. اگر به موارد بیشتری نیاز دارید، می توانید 1000 اعتبار برای تقریبا 5000 تصویر با قیمت 10 دلار خریداری کنید.

پیمایش در رابط DreamStudio

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

1. ایجاد برگه: جایی که شما تصاویر هوش مصنوعی را تولید خواهید کرد.
2. تب ویرایش: برای تغییر تصاویر شما
3. سبک: یکی از 16 سبک تصویر را انتخاب کنید.
4. سریع: جایی که تصویری را که می خواهید ایجاد کنید، توضیح می دهید.
5. اخطار منفی: ویژگی های تصویری که می خواهید از آنها اجتناب کنید.
6. آپلود تصویر: بر اساس تصویر آپلود شده هوش مصنوعی ایجاد کنید.
7. نسبت تصویر: 10 اندازه از پیش تعیین شده شامل 7:4 (896×512)، 3:2 (768×512)، 4:3 (683×512)، 5:4 (640×512)، 1:1 (512×512)، 4:5 (512×640)، 3:4 (512×683)، 2:3 (512×768) و 4:7 (512×896).
8. تعداد تصاویر: بین 1-4 تصویر برای نمایش انتخاب کنید. هرچه تصاویر بیشتری ایجاد کنید، اعتبار بیشتری مورد نیاز است.
9. قدرت سریع: کنترل می کند که SD چقدر به درخواست شما وزن می دهد. به طور پیش فرض، Stable Diffusion از مقدار 15 استفاده می کند که می تواند از 1-30 تنظیم شود.
10. مراحل تولید: به طور پیش فرض، این پارامتر روی 50 تنظیم شده است. شما می توانید بین 1-100 انتخاب کنید، با مقادیر بالاتر معمولاً نتایج با کیفیت بالاتری را به همراه دارد.
11. دانه: دانه تصادفی را به عنوان پایه تصویر مدیریت می کند. مقادیر از 1 تا تقریباً 4.3 میلیون متغیر است. استفاده از دانه مشابه با تنظیمات مشابه نتایج مشابهی را ارائه می دهد.
12. مدل: سه مدل وجود دارد که هر کدام نتایج متفاوتی ارائه می‌دهند: Stable Diffusion v2.1، Stable Diffusion v2.1-768m، و SDXL Beta (پیش‌فرض).
13. رویا: تصویر را بر اساس درخواست شما ایجاد می کند. DreamStudio توصیه می کند که تصویر شما به چه تعداد اعتبار نیاز دارد و به شما امکان می دهد تنظیمات خود را برای تولید تصویر کمتر یا گران تر تنظیم کنید.
14. خروجی: اینجاست که تصاویر تولید شده شما ظاهر می شوند.

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

تنظیم دقیق تصاویر تولید شده

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

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

با گذشت زمان، انتظار داریم DreamStudio این ابزارهای ویرایش را گسترش دهد تا ایجاد ترکیب های عالی، جلوه های خیره کننده و موارد دیگر را آسان تر کند.

ذخیره تصاویر تولید شده

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

همچنین، می‌توانید روی تصویر کلیک کنید تا یک پیش‌نمایش بزرگ‌تر ظاهر شود، سپس روی دکمه دانلود از پیش‌نمایش تصویر کلیک کنید.

در نهایت پس از کلیک بر روی دکمه دانلود، می توانید تصویر خود را در اندازه اصلی دانلود کنید و یا با پرداخت هزینه ای ناچیز (اعتبار) آن را بزرگ کنید.

افکار نهایی در مورد انتشار پایدار

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

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

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

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

مرور

جداکننده گرادیان دسکتاپ مثال اول

جداکننده گرادیان تلفن مثال اول

تقسیم گرادیان دسکتاپ مثال دوم

جداکننده گرادیان تلفن مثال دوم

تقسیم کننده گرادیان دسکتاپ مثال سه

جداکننده گرادیان تلفن مثال سه

نحوه ایجاد تقسیم‌کننده‌های گرادیان با ماژول Divider

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

مخفی کردن جداکننده

فرآیند ساده است. ابتدا یک ماژول جداکننده را به چیدمان خود اضافه کنید و سپس جداکننده را در تب محتوا پنهان کنید.

پس زمینه تقسیم کننده

سپس نوع پس‌زمینه‌ای را که می‌خواهید در تنظیمات پس‌زمینه در تب Content نمایش داده شود، انتخاب کنید. برای این پست، ما بر روی تنظیمات گرادیان پس‌زمینه تمرکز خواهیم کرد.

اندازه و فاصله را اضافه کنید

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

یک شعاع به حاشیه اضافه کنید

برای شکل دادن بیشتر به شکل، گزینه‌های حاشیه، مانند شعاع حاشیه را اضافه کنید. می توانید گوشه ها را با هم یا به صورت جداگانه تنظیم کنید تا اشکال جالبی ایجاد کنید. همچنین می توانید برای ایجاد یک طرح منحصر به فرد، Border Width، Styles و غیره را اضافه کنید.

نمونه هایی از جداکننده گرادیان

حال، بیایید با استفاده از مفاهیمی که قبلاً بحث کردیم، سه تقسیم کننده گرادیان ایجاد کنیم.

مثال یک برای جداکننده گرادیان

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

برای مثال اول، ما از ماژول Divider که از قبل در برگه کاراکتر وجود دارد استفاده می کنیم. این یکی ساده است اما از نظر بصری چیزهای زیادی اضافه می کند.

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

دید

در تنظیمات دید ماژول تقسیم، No to را انتخاب کنید نمایش جداکننده.

شیب

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

اولین گرادیان Stop را روی 0px و رنگ آن را روی #dcc087 قرار دهید.

• توقف گرادیان اول: 0px، #dcc087

گرادیان Stop دوم را روی ۱۶ پیکسل و رنگ آن را #e6b060 قرار دهید.

• توقف گرادیان دوم: 16 پیکسل، #e6b060

سومین گرادیان Stop را روی 22 پیکسل و رنگ آن را روی #f19d33 قرار دهید.

• توقف گرادیان سوم: 22 پیکسل، #f19d33

استاپ گرادیان چهارم تقریباً بر روی استاپ گرادیان سوم قرار دارد. آن را روی 31 پیکسل قرار دهید و رنگ آن را روی #f49826 قرار دهید.

• توقف گرادیان چهارم: 31 پیکسل، #f49826

آخرین گرادیان Stop را روی 48 پیکسل و رنگ آن را روی #3b261e تنظیم کنید.

• توقف گرادیان پنجم: 48 پیکسل، #3b261e

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

سایز بندی

سپس برو به طرح بخش. زیر سایز بندینگرش های عرض تا 100٪. نگرش ارتفاع تا 40 پیکسل برای هر سه اندازه دستگاه. ماژول را ببندید و تنظیمات خود را ذخیره کنید.

نمونه دوم جداکننده گرادیان

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

ما از این به عنوان نقطه شروع برای طراحی استفاده می کنیم و یک تقسیم کننده گرادیان جدید ایجاد می کنیم. ما یک ماژول اسپلیتر جدید را به تب Chapter 1 اضافه می کنیم تا گرافیک را اضافه کنیم.

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

فاصله در ستون سمت راست

ابتدا باز کنید تنظیمات ستون که حاوی توضیحات فصل اول است. این است ستون سمت راست به ترتیب. رفتن به تنظیمات طراحی و به پایین اسکرول کنید فاصله. تغییر دادن پد بالا از 100 پیکسل تا 50 پیکسل

یک ماژول اسپلیتر اضافه کنید

سپس یک مورد جدید اضافه کنید ماژول جداسازی در زیر ماژول دکمه توضیحات فصل.

دید

تنظیمات دید ماژول تقسیم را باز کنید و No to را انتخاب کنید نمایش جداکننده.

شیب

سپس به پایین اسکرول کنید زمینه و انتخاب کنید تب Background Gradient.. این یکی دو استاپ گرادیان دارد. تغییر دادن جهت شیب تا 145 درجه

• توقف گرادیان اول: 0px، #26ff5c
• توقف گرادیان دوم: 100px، #2981b6
• جهت گرادیان: 145 درجه

سایز بندی

سپس انتخاب کنید برگه طراحی. زیر سایز بندیتغییر دادن عرض برای دسکتاپ تا 45٪. تبلت ها را به 24vw و گوشی ها را به 40vw تغییر دهید. تغییر دادن تراز ماژول به مرکز. کیت ارتفاع تا 200 پیکسل برای همه دستگاه ها.

• عرض: 45% رومیزی، تبلت 24vw، گوشی 40vw
• تراز ماژول: مرکز
• ارتفاع: 200 پیکسل

مرز

سپس به پایین اسکرول کنید مرز. یک شکل قوسی ایجاد می کنیم که تصاویر موجود در طرح را تقلید می کند. تغییر دادن گوشه های گرد به 400 پیکسل برای بالا چپ و راست و 0 پیکسل برای پایین چپ و راست. ماژول را ببندید و تنظیمات خود را ذخیره کنید.

• گوشه های گرد بالا سمت چپ، بالا سمت راست: 400 پیکسل
• گوشه های گرد پایین سمت چپ، پایین سمت راست: 0 پیکسل

جداکننده گرادیان مثال سه

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

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

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

یک خط جدید

ابتدا a را اضافه کنید یک خط جدید بالای عنوان اینجاست که ما ماژول اسپلیتر را اضافه می کنیم.

یک ماژول اسپلیتر اضافه کنید

سپس a را اضافه کنید ماژول جداسازی به سفارش

دید

در تنظیمات دید، No to را انتخاب کنید نمایش جداکننده.

شیب

به پایین بروید زمینه و انتخاب کنید تب Background Gradient.. برای این مورد، از چهار ترمز گرادیان استفاده خواهیم کرد. نگرش جهت تا 90 درجه

• توقف گرادیان اول: 0px، #f52791
• توقف شیب دوم: 38 پیکسل، #3742fb
• توقف گرادیان سوم: 70 پیکسل، f7d043
• توقف گرادیان چهارم: 100 پیکسل، #fe386f
• جهت: 90 درجه

سایز بندی

سپس برو به برگه طراحی. زیر سایز بندینگرش های ارتفاع حداکثر 60 پیکسل برای رایانه های رومیزی، 50 پیکسل برای رایانه های لوحی و 40 پیکسل برای تلفن ها.

• ارتفاع: دسکتاپ 60 پیکسل، تبلت 50 پیکسل، تلفن 40 پیکسل

مرز

سپس به پایین اسکرول کنید مرز. نگرش گوشه های گرد به 0 پیکسل بالا سمت چپ، 30 پیکسل بالا سمت راست، 30 پیکسل پایین سمت چپ و 0 پیکسل بالا سمت راست. این یک سبک ایجاد می کند که با برگه انتخاب ایمیل مطابقت دارد. ماژول را ببندید و تنظیمات خود را ذخیره کنید.

• بالا سمت چپ: 0px
• بالا سمت راست: 40 پیکسل
• پایین سمت چپ: 40 پیکسل
• پایین سمت راست: 0px

نتایج

جداکننده گرادیان دسکتاپ مثال اول

جداکننده گرادیان تلفن مثال اول

تقسیم گرادیان دسکتاپ مثال دوم

جداکننده گرادیان تلفن مثال دوم

تقسیم کننده گرادیان دسکتاپ مثال سه

جداکننده گرادیان تلفن مثال سه

پایان افکار

این نگاه ما به نحوه ایجاد تقسیم‌کننده‌های گرادیان با ماژول Divi’s Divider است. گزینه گرادیان در ماژول Divider برای ایجاد تقسیم‌کننده‌های گرادیان منحصربه‌فرد عالی عمل می‌کند. استفاده از گزینه‌های اندازه، فاصله و کران گوشه ابزارهایی را برای ایجاد تقسیم‌کننده‌های گرادیان در اندازه‌ها و اشکال مختلف در اختیار ما قرار می‌دهد. تنها با چند ترفند ساده، می‌توانیم تقسیم‌کننده‌های گرادیان منحصربه‌فردی ایجاد کنیم که مطمئناً از بقیه متمایز می‌شوند.

ما می خواهیم از تو بشنویم. ایجاد تقسیم‌کننده‌های گرادیان با ماژول Divi’s Divider؟ تجربیات خود را در نظرات با ما در میان بگذارید.

Divi Footers Pack یک افزونه شخص ثالث برای Divi با بیش از 80 طرح پاورقی سفارشی است. پاورقی قسمتی است که اغلب در هر وب سایت وردپرس نادیده گرفته می شود. بسته طرح بندی مانند این می تواند فرآیند طراحی فوتر را آسان تر کند. در این پست نگاهی به Divi Footers Pack می اندازیم تا به شما کمک کنیم تصمیم بگیرید که آیا محصول Divi مناسب برای نیازهای شما است یا خیر.

طرح‌بندی‌های Divi Footers Pack فایل‌های JSON هستند که می‌توانند در کتابخانه Divi شما آپلود شوند. ابتدا فایل را دانلود و از حالت فشرده خارج کنید. 82 فایل JSON را در پوشه زیپ نشده خود خواهید دید.

1. دانلود
2. از حالت فشرده خارج کنید

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

1. وحشی
2. کتابخانه دیوی
3. واردات و صادرات
4. واردات
5. یک فایل را انتخاب کنید
6. طرح بندی های Divi Builder را وارد کنید

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

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

Footer Design 1 اولین طرح پاورقی در مجموعه Divi Footers است. منوی پاورقی را در سمت چپ با اعلامیه حق چاپ در زیر آن نشان می دهد. در سمت راست نمادهای رسانه های اجتماعی هستند. همه چیز قرمز است.

در اینجا به نظر می رسد از جلو.

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

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

بسیاری از طرح‌بندی‌های پاورقی شامل ماژول‌های کد برای اضافه کردن یک ظاهر طراحی سفارشی هستند. این Footer Design 12 است. همچنین شامل یک پس‌زمینه گرادیان است و یک فرم ایمیل بزرگ اضافه می‌کند.

طراحی پاورقی 14 چهار ستون با لینک، منو و وبلاگ را نشان می دهد. این یکی همچنین شامل یک ماژول کد یک ظاهر طراحی شده است. در اینجا ماژول منبع باز wireframe است.

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

طراحی پاورقی 16 چندین ردیف را در ستون های مختلف اضافه می کند. این یکی نیز شامل کد سفارشی است. اینجا وایرفریم است.

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

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

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

Footer Design 25 طرح دیگری با تصویر پس زمینه است. این امر فضای زیادی را در زیر پیوندها اضافه می کند تا فضایی برای نمایش تصویر پس زمینه فراهم کند.

Footer Design 26 از یک تب مخصوص برای ایجاد یک طرح چند ستونی استفاده می کند. اینجا وایرفریم است.

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

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

Footer Design 34 از پس زمینه قهوه ای با متن سفید استفاده می کند. طرح شامل سه ستون از اطلاعات تماس قابل کلیک است. پس‌زمینه نمادهای اجتماعی به اندازه‌ای برجسته است که توجه را به خود جلب کند.

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

Footer Design 38 محتوا را در مرکز یک دایره بزرگ با پس زمینه ای حتی تیره تر در پشت آن نشان می دهد. محتوای مرکزی دارای تفکیک کافی است تا چیزی در طرح بندی گم نشود. رنگ فونت و نماد در پس زمینه خاکستری تیره عالی عمل می کند.

Footer Design 41 همچنین از بخش Specialty برای ایجاد یک طرح چند ستونی استفاده می کند. این نمای wireframe است.

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

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

Footer Design 46 شامل یک طرح دو ستونی برای بدنه فوتر است. این شامل یک ستون بزرگتر با فرم تماس است که با طراحی فوتر ترکیب می شود. دکمه، عناوین و نمادها به رنگ سبز هستند و در پس زمینه بژ به خوبی خودنمایی می کنند و توجه را از هر چیز دیگری منحرف می کنند.

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

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

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

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

Footer Design 67 طرح جالبی دارد. Wireframe چندین ستون را نشان می دهد، اما برخی عمدا استفاده نمی شوند.

در قسمت جلویی، این یک فاصله زیبا برای عناصر پاورقی ایجاد می کند. دارای پس‌زمینه بنفش (از لحاظ فنی دریایی/ سرخابی) با متن سفید است. متن بسیار بزرگ برای شماره تلفن قابل کلیک به عنوان یک CTA چشم نواز است.

Footer Design 69 یکی از بزرگترین فوترهای مجموعه Divi Footers است. شامل دو بخش بزرگ است. هر دو دارای پس‌زمینه آبی و متن طلایی هستند. بخش بالایی یک تصویر با عرض کامل را نشان می دهد. این بخش CTA را ایجاد می کند. بخش دوم شامل عناصر پاورقی استاندارد با اطلاعات تماس، پیوندها و فرم ایمیل است. متن سفید و طلایی با پس زمینه آبی کاملاً کار می کند.

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

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

Footer Design 81 دارای یک پس‌زمینه آبی بزرگ با اطلاعات تماس سبک در مرکز با گوشه‌های گرد است. اطلاعات تماس دارای یک طرح دو رنگ با تصویری است که روی رنگ ها همپوشانی دارد. قسمت بالایی شماره تلفن را به صورت متن بزرگ در پس زمینه آبی نشان می دهد. قسمت پایینی شامل یک پس‌زمینه سفید با پیوند ایمیل و پیوندهای رسانه‌های اجتماعی در زیر تصویر و یک فرم تماس در طرف دیگر است. من قاب مربعی برای نمادهای اجتماعی را دوست دارم.

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

بسته Divi Footers با قیمت 19 دلار در بازار Divi موجود است. این شامل استفاده نامحدود از وب سایت، یک سال پشتیبانی و به روز رسانی، و 30 روز ضمانت بازگشت وجه است.

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

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

ما در میانه یک پروژه عظیم، Divi 5 هستیم، و من دوست دارم هر ماه جامعه را در مورد پیشرفت خود به روز کنم. ماه گذشته، ما به پنج مرحله برنامه Divi 5 بتا پرداختیم تا بهتر درک کنیم که چگونه به سودمندترین روش برای کاربران Divi به چنین پروژه بزرگی نزدیک می شویم. ما در فاز 1، Dev Alpha هستیم، و به راه‌اندازی Dev Beta نزدیک می‌شویم، در این مرحله API جدید Divi 5 محکم می‌شود. ما از توسعه دهندگان بیشتری دعوت خواهیم کرد تا به این برنامه بپیوندند، زیرا برای اولین نسخه عمومی در اواخر امسال تلاش می کنیم.

در به‌روزرسانی این ماه، در مورد به‌روزرسانی‌هایی که برای Divi 5 ایجاد کرده‌ایم صحبت خواهیم کرد. همچنین به شما نشان می‌دهم که Divi 5 چقدر سریع است، و سپس نگاهی اجمالی به ویژگی Divi AI آینده ما می‌دهم! بیایید حفاری کنیم.

کاری که در این ماه انجام دادیم

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

بیشتر کار ما بر روی تقویت Divi 5 API متمرکز شده است که هدف نسخه‌های Dev Beta است. روند کلی در اینجا این است که ما در حال ایجاد پایه ای هستیم تا ایجاد ماژول ها و ویژگی های Divi عالی را برای تیم خود و جامعه توسعه آسان تر کنیم. ما باید این قسمت را به درستی انجام دهیم تا بقیه چیزها همانطور که می خواهیم در جای خود قرار بگیرند.

ما روی یکپارچه سازی و ساده سازی REST API جدید Divi 5 کار کرده ایم. چندین ویژگی جدید و پیاده سازی آنها را تکمیل کرده ایم که هدف آن کاهش قابل توجه زمان لازم برای ایجاد یک ماژول Divi است. باز هم، ما در سطح پایه کار اضافی انجام می دهیم تا بقیه پروژه Divi 5 سریعتر پیش برود و ماژول ها و ویژگی هایی که بعد از Divi 5 اضافه می کنیم سریعتر توسعه یابد.

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

اگر به جزئیات دقیق‌تر علاقه دارید، در اینجا آخرین ورودی‌های تغییرات ثبت شده است:

Divi 5.0.0-dev-alpha.4

• رندر فیلدهای پس زمینه را در حالت تنظیمات ماژول Shortcode برطرف کنید
• رفع دید فیلدهای راه اندازی ماژول کد کوتاه با شرایط الگوی بیان منظم.
• اضافه شدن رندر رابط گزینه های جداکننده بخش.
• گزینه‌های شناور ثابت در ویژوال constructor و frontend برای گزینه‌های ماژول که چندین انتخابگر دارند به درستی کار نمی‌کنند.
• بسته @divi/scripts دوباره کار کرد و تست‌های اضافه شد
• منتشر شده انواع بسته npm در آماده سازی برای انتشار عمومی

Divi 5.0.0-dev-alpha.5

• به ماژول Shortcode اجازه دهید زمانی که درخواست قبلی به طور خودکار خاتمه می یابد درخواست دیگری ارسال کند.
• هنگامی که ماژول کد کوتاه فعلی چسبنده است، دکمه گزینه های چسبنده را رندر کنید.
• هنگامی که ماژول کد کوتاه فعلی داخل یک ماژول چسبنده است، دکمه گزینه های چسبنده را رندر کنید.
• مقدار پیش فرض استفاده نشده Record> در ماژول Shortcode تایپ کنید.
• رفع نادرست عناصر ماژول Woo Shortcode که در یک صفحه محصول نشان داده می شوند. ماژول‌های کد کوتاه تحت تأثیر قرار می‌گیرند: اطلاع‌رسانی محصول Woo، تصاویر محصول Woo، افزودن Woo Cart، در دسترس بودن محصول Woo، قیمت محصول Woo، محصولات مرتبط Woo، Woo Product Upsells، و Woo Products.
• نام ماژول Unsupported را به ماژول Shortcode به همراه ماژول Slug، مسیر REST API، برچسب، موارد تست و کتاب داستان تغییر دهید.
• فیلدهای ویدیوی پس زمینه در گزینه های پس زمینه ماژول اضافه شده است.
• رندر ویدیوی پس‌زمینه در Visual Builder بدون تماس REST API.
• اضافه شدن رندر گزینه های ماژول ویدیوی پس زمینه در Frontend.
• ScriptData را برای مقداردهی اولیه ویدیوی پس‌زمینه در Frontend اضافه کرد.
• پشتیبانی از گزینه های ماژول ویدئو پس زمینه Sticky State اضافه شده است.
• قابلیت مشاهده فیلدهای جداکننده را در گزینه‌های ماژول به‌روزرسانی کرد تا در صورت انتخاب سبک جداکننده، گزینه‌های اضافی پنهان شود.
• قابلیت مشاهده تنظیمات تکرار جداکننده افقی در گزینه های ماژول برای پنهان شدن برای گزینه های سبک جداکننده که به صراحت تکرار را رد می کنند، به روز شده است.
• نمایان بودن تنظیم ترتیب جداکننده را در گزینه‌های ماژول به‌روزرسانی کرد تا در تنظیمات بخش تمام عرض پنهان شود (که فقط مقدار پیش‌فرض “زیر” مجاز است).
• رندر فیلد سبک جداکننده را در گزینه‌های ماژول به‌روزرسانی می‌کند تا هرگونه چرخش افقی و/یا عمودی اعمال شده در حال حاضر روی جداکننده را منعکس کند.
• فیلد ارتفاع جداکننده را در گزینه های ماژول به روز کرد تا امکان ذخیره مقادیر درصد (“٪”) علاوه بر واحد پیکسل پیش فرض (“px”) فراهم شود.
• تنظیم تکرار جداکننده افقی را در گزینه های ماژول به روز کرد تا فقط مقادیر عدد مثبت (“1x” یا بالاتر) را بپذیرد.
• پایگاهی با گزینه‌های اصطلاحات اضافه شده، از جمله عبارت‌های اولیه برای نویسنده، وارد شده و نقش کاربر، و بقیه شرایط به تدریج در نسخه‌های بعدی اضافه می‌شوند.
• اضافه شده عنصر ElementComponents معادل ، اما برای عناصر HTML ارائه شده.
• تابع عنصرClassnames() معادل آن اضافه شد ، اما برای توابعی که نام کلاس ها را خروجی می کنند.
• رفع اشکال در سطح عنوان فونت.
• اخطارهای PHP ثابت در ماژول نمونه کارها راه اندازی شده است.
• پاسخ تماس صحیح مجوز REST به همه مسیرهای REST ثبت شده اضافه شده است.
• یک کلاس RoleEditor جدید برای تعریف نقش‌های Divi معرفی شده است، از جمله تست‌هایی برای عملکرد که از D4 به D5 دوباره کار شده است.
• ویژگی‌های .sendRequest() مانند اضافه کردن خودکار ET و WP nonce و پشتیبانی از پاسخ جریانی، به fetch() اضافه شده‌اند.
• Fetch() برای پشتیبانی و مقیاس پذیری بهتر کاملاً بازطراحی شده است و امکان معرفی شرایط و توابع جدید و پیچیده را فراهم می کند، به عنوان مثال. گزینه های .sendRequest()
• همه REST API فراخوانی‌های fetch()، logedFetch() و .sendRequest() یکپارچه شده‌اند و اکنون فقط ()logedFetch استفاده می‌شود.
• مکانیزم تبدیل ماژول دوباره کار شده

Divi 5.0.0-dev-alpha.6

• ثبت، منطق، طرحواره ها و تست های REST API بهبود یافته و ساده شده است. بسته divi/ajax به بسته divi/rest تغییر نام داد.
• اضافه شدن اجزای InlineTextEditorContainer و InlineTextEditor برای ویرایشگر متن درون خطی.
• کنترل کننده های onBlur، onClick، onDoubleClick، onKeyDown، onKeyUp، onMouseDown و onMouseUp برای ویرایشگر متن داخلی اضافه شده است.
• مکانیسم ذخیره برای به روز رسانی مقدار مشخصه از قسمت ویرایشگر متن درون خطی اضافه شد.
• کنترل‌کننده‌های رویداد اضافه شد تا حالت ویرایش را برای ویرایشگر متن داخلی فعال و غیرفعال کند.
• نام کلاس ها بر اساس فعال/غیرفعال کردن و سایر حالت ها مانند __empty، __edit، __html اضافه شده است.
• یک ظاهر طراحی CSS/inline برای ویرایشگر متن داخلی اضافه شده است.
• WindowEventEmitterInstance را برای افزودن شنونده رویداد mousedown تغییر داد.
• راهنما PHP برای محتوای واکنش گرا معرفی شده است.
• کمک کننده JS برای محتوای واکنش گرا معرفی شده است.
• قابلیت اضافه شده برای محتوای قابل تنظیم در اسکریپت های FE.
• اجرای محتوای تطبیقی ​​را به عناصر نام، موقعیت، تصویر و محتوای ماژول اعضای تیم اضافه کرد
• اجرای محتوای تطبیقی ​​را به عناصر درصد استفاده، درصد و عنوان ماژول نوار شمارنده اضافه کرد.
• اجرای محتوای پاسخگو در عنصر Button Text ماژول Button اضافه شده است.
• اضافه شدن اجرای محتوای پاسخگو در عناصر عنوان و محتوای ماژول Toggle.
• اجرای محتوای پاسخگو به عنصر Text Inner ماژول Text اضافه شد.
• اجرای محتوای پاسخگو در عنصر عنوان ماژول Countdown Timer اضافه شده است.
• اجرای محتوای تطبیقی ​​را به عناصر عنوان، تصویر، نام هنرمند و نام آلبوم ماژول صوتی اضافه کرد.
• اجرای محتوای پاسخگو در عنصر محتوای ماژول کد اضافه شده است.
• اضافه شدن اجرای محتوای پاسخگو در عناصر عنوان، محتوا و دکمه ماژول CTA.
• اضافه شدن اجرای محتوای پاسخگو در ماژول Image.
• اضافه شدن اجرای محتوای پاسخگو در عنصر عنوان ماژول Circle Counter.
• اضافه شدن اجرای محتوای پاسخگو در عنصر Title ماژول Number Counter.
• اضافه شدن اجرای محتوای پاسخگو در عناصر عنوان و محتوای ماژول Tabs.
• اضافه شدن اجرای محتوای پاسخگو در عناصر عنوان و محتوای ماژول ورود.
• اضافه شدن اجرای محتوای واکنشگرا در گزینه Show Divider ماژول Divider.
• اجرای محتوای پاسخگو به عنوان، زیرنویس، محتوا، تصویر لوگو، تصویر هدر، متن دکمه یک و متن دکمه دو عنصر ماژول هدر تمام عرض اضافه شده است.
• اضافه شدن اجرای محتوای پاسخگو در ماژول Fullwidth Image.
• اجرای محتوای پاسخگو را به عناصر عنوان و محتوای ماژول Portfolio اضافه کرد.
• کد مربوط به ماژول Shortcode را به بسته Shortcode Module منتقل کنید.
• یک رندر سبک عنوان فونت را به مؤلفه ElementStyle اضافه کنید.

سرعت Divi 5

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

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

رارا

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

دستیابی به این سطح از سرعت در Divi 4 امکان پذیر نبود و این یکی از دلایل اهمیت این معماری جدید Divi 5 است.

به زودی: Divi AI

این برای به روز رسانی Divi 5 این ماه تمام شد. با این حال، من یک تیزر دیگر برای شما دارم. در حالی که تقریباً تمام تیم ما بر روی Divi 5 متمرکز شده‌اند، ما هنوز گروه کوچکی از افراد را داریم که روی ویژگی‌های Divi 4 کار می‌کنند که بر توسعه Divi 5 تأثیری نمی‌گذارد، و ما در حال حاضر روی چیزی بسیار هیجان‌انگیز کار می‌کنیم.

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

رارا

ویدیوی امروز یوتیوب را برای نگاهی گذرا به هوش مصنوعی Divi ببینید.

با ما همراه باشید برای مطالب بیشتر

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

هی دیوی ملت! از اینکه برای قسمت بعدی طرح هفتگی Divi Design Initiative به ما ملحق شدید متشکریم، جایی که ما هر هفته موارد جدید را به شما هدیه می دهیم. اخیراً یک بسته چیدمان رستوران غذاهای دریایی کاملاً جدید را به اشتراک گذاشتیم. برای کمک به شما در راه اندازی و راه اندازی وب سایت خود در اسرع وقت، ما یک سرصفحه و پاورقی رایگان جهانی را به اشتراک می گذاریم که کاملاً با این بسته طرح بندی رستوران غذاهای دریایی نیز مطابقت دارد! امیدوارم ازش خوشتان بیاید.

طراحی سربرگ

نمای دسکتاپ

نمای تبلت و موبایل

طراحی پاورقی

نمای دسکتاپ

نمای تبلت و موبایل

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

برای دریافت قالب رایگان Global Header and Footer، ابتدا باید آن را از طریق دکمه زیر دانلود کنید. برای دسترسی به دانلود، باید با استفاده از فرم زیر در لیست ایمیل Divi Daily ما مشترک شوید. به‌عنوان یک مشترک جدید، هر دوشنبه بیشتر Divi خوبی و بسته Divi Layout رایگان دریافت خواهید کرد! اگر قبلاً در لیست هستید، فقط آدرس ایمیل خود را در زیر وارد کنید و روی دانلود کلیک کنید. شما “دوباره مشترک” نخواهید شد یا ایمیل های اضافی دریافت نمی کنید.

نحوه آپلود قالب رستوران غذاهای دریایی

به Divi Theme Builder بروید

برای آپلود قالب، به Divi Theme Builder در باطن وب سایت وردپرس خود بروید.

یک الگوی جهانی پیش فرض وب سایت بارگذاری کنید

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

به تب import بروید، فایل JSON را که توانستید در این پست دانلود کنید آپلود کنید و روی “Import Divi Theme Builder Templates” کلیک کنید.

تغییرات را در Divi Theme Builder ذخیره کنید

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

نحوه تغییر قالب

سربرگ قالب رستوران غذاهای دریایی را باز کنید

برای اصلاح عناصر قالب سرصفحه جهانی، با باز کردن الگو شروع کنید.

لوگوی خود را آپلود کنید

لوگوی پیش فرض را به لوگوی خود تغییر دهید.

لوگوی خود را برای تبلت و موبایل به روز کنید

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

منوی سفارشی را انتخاب کنید

منوی خود را برای ماژول منوی دسکتاپ انتخاب کنید.

منوی مورد نظر را برای تبلت و دستگاه تلفن همراه انتخاب کنید

منوی خود را برای این ماژول منو نیز با تغییر به نمای تبلت انتخاب کنید، سپس منوی خود را انتخاب کنید.

URL های پیوند را به CTA اضافه کنید و متن را به روز کنید

این هدر دارای یک فراخوان متنی برای اقدام در بالا سمت چپ است. همچنین یک دکمه در بالا سمت راست وجود دارد. تنظیمات هر ماژول را باز کنید و در صورت لزوم به روز رسانی کنید. متن خود را برای دعوت به اقدام اضافه کنید.

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

قالب پاورقی را باز کنید

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

پیوند دادن یک حساب ایمیل مارکتینگ

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

به روز رسانی اطلاعات حق چاپ

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

شبکه های رسانه های اجتماعی را اضافه کنید

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

محتوای فوتر ثابت را در قالب رستوران غذاهای دریایی به روز کنید

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

رایگان های جدید هر هفته!

امیدواریم از بسته چیدمان رستوران غذاهای دریایی و هدر و پاورقی رایگان همراه با آن لذت برده باشید. ما مشتاقانه منتظر شنیدن نظرات شما در بخش نظرات زیر هستیم. حتماً هفته آینده برای رایگان بیشتر بررسی کنید!

هی دیوی ملت! از اینکه برای قسمت بعدی طرح هفتگی Divi Design Initiative به ما پیوستید متشکریم. جایی که ما هر هفته یک بسته طرح بندی کاملاً جدید برای Divi هدیه می دهیم.

این بار تیم طراحی یک بسته چیدمان کالاهای خانگی زیبا ایجاد کرده است که به شما کمک می کند وب سایت بعدی کالاهای خانگی خود را در کمترین زمان راه اندازی کنید!

این بسته چیدمان شامل:

– 6 صفحه آرایی آماده که به صورت استراتژیک برای هر وب سایت کالاهای خانگی طراحی شده اند (از جمله طراحی پاورقی)
– عکس ها و گرافیک های اصلی و رایگان + فایل منبع سفارشی (به زیر مراجعه کنید)
– به‌علاوه، مجموعه‌ای بزرگ از عناصر وب‌سایت از پیش طراحی‌شده که می‌توان آن‌ها را سفارشی کرد و در هر مکانی دوباره استفاده کرد.

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

طراحی صفحه فرود

دمو طرح زنده را ببینید

طراحی صفحه اصلی

دمو طرح زنده را ببینید

طراحی صفحه فروشگاه

دمو طرح زنده را ببینید

درباره طراحی صفحه

دمو طرح زنده را ببینید

طراحی صفحه وبلاگ

دمو طرح زنده را ببینید

طراحی صفحه تماس

دمو طرح زنده را ببینید

توابع اساسی

آیا می خواهید فروشگاه یا بوتیک خانگی خود را با سبکی جدید به روز کنید؟ بسته چیدمان جدید Home Goods برای Divi یک مکان عالی برای شروع است. شما می توانید محصولات خود را به زیبایی با متن های بزرگ و تصاویر جالب، بخش های ویژه محصول، تماس موثر با تایمر شمارش معکوس و غیره به نمایش بگذارید.

تظاهرات زنده

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

1. صفحه فرود کالاهای خانگی (نمونه نمایشی زنده)
2. صفحه اصلی کالاهای خانگی (نمایشگر زنده)
3. صفحه فروشگاه کالاهای خانگی (نمایشگر زنده)
4. صفحه کالاهای خانگی (نمایشگر زنده)
5. صفحه وبلاگ کالاهای خانگی (نمایشگر زنده)
6. صفحه تماس با کالاهای خانگی (دمو زنده)

همین الان به این طرح دسترسی داشته باشید
مستقیماً از Divi Builder شما

از نسخه 3.0.99 Divi، می‌توانید هر یک از طرح‌بندی‌های موجود در این بسته (به همراه تمام بسته‌های طرح‌بندی آماده Divi) را مستقیماً از Divi Builder پیدا و وارد کنید. آنها از قبل منتظر شما هستند.

برای دسترسی به طرح‌بندی جدید، کافی است هنگام ویرایش یک صفحه، Visual Builder را فعال کنید و نماد «بارگیری از کتابخانه» را در نوار تنظیمات صفحه جستجو کنید (به نظر می‌رسد یک علامت مثبت است). روی این نماد کلیک کنید تا پنجره بازشو Load from Library باز شود. در تب Premade Layouts، با پیمایش در لیست بسته های طرح بندی، می توانید به راحتی طرح بندی جدید را پیدا کنید. هنگامی که بسته چیدمان کالاهای خانگی را پیدا کردید، روی آن کلیک کنید. تمام طرح‌بندی‌های جداگانه موجود در بسته را خواهید دید. طرح مورد نظر برای استفاده را انتخاب کنید و سپس روی دکمه “استفاده از این طرح” کلیک کنید.

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

در کانال یوتیوب ما مشترک شوید

احراز هویت لازم است

قبل از اینکه بتوانید طرح‌بندی‌های Premade را از کتابخانه Divi دانلود کنید، باید اشتراک Elegant Themes خود را احراز هویت کنید. شما می توانید این کار را با رفتن به Divi > گزینه های تم > به روز رسانی ها. در آنجا می توانید نام کاربری و کلید API خود را وارد کرده و تغییرات را ذخیره کنید.

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

از تصاویر طرح بندی به صورت رایگان و بدون محدودیت مجوز استفاده کنید

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

دارایی های تصویر با وضوح کامل را دانلود کنید

بسته طرح بندی جدید هر هفته!

امیدواریم این بسته چیدمان را دوست داشته باشید. ما مشتاقانه منتظر شنیدن نظرات شما در بخش نظرات زیر هستیم. فراموش نکنید که بسته طرح بندی هفته آینده را نیز بررسی کنید!

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 را امتحان کرده اید؟ نظر خود را در مورد آن در نظرات با ما در میان بگذارید.

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

این ابزارهای جدید در حال حاضر شروع به تغییر روند طراحی وب کرده اند و از هوش مصنوعی برای برداشتن بار از دوش شما استفاده می کنند. از کمک طراحی مبتنی بر هوش مصنوعی گرفته تا تولید کد، بهترین سازندگان وب سایت هوش مصنوعی ایجاد یک سایت حرفه ای و بهینه شده برای موبایل را در کمترین زمان آسان تر از همیشه می کنند. آنها فراتر از استفاده از ChatGPT یا جایگزین ها و نویسندگان هوش مصنوعی برای ایجاد محتوا هستند – آنها ابزارهای طراحی و عملکردی برای ایجاد سایت های کامل هستند.

این مقاله شما را با بهترین سازندگان وب سایت هوش مصنوعی که صنعت را طوفانی کرده اند آشنا می کند. از Wix ADI گرفته تا CodeWP.ai و GetResponse AI Website Builder، برای کشف بهترین ابزارها برای طراحی سریع وب آماده شوید.

بهترین وب سایت سازان هوش مصنوعی در سال 2023

در کانال یوتیوب ما مشترک شوید

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

اولین در لیست ما سازنده ADI Wix است.

1. Wix ADI

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

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

توابع اساسی:

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

بهترین برای:

Wix ADI یک راه بسیار محبوب برای ایجاد وب سایت برای صاحبان مشاغل کوچک و فریلنسرها است. Wix یک راه منحصر به فرد برای ایجاد وب سایت هایی ارائه می دهد که برای بسیاری از افراد جذاب است. ADI با ایجاد طرح‌های منحصربه‌فرد بر اساس نیازهای شما، فرآیند را ساده‌تر می‌کند.

آیا می خواهید Wix و WordPress را با هم مقایسه کنید؟ ببینید چگونه آنها جمع می شوند: Wix در مقابل WordPress

قیمت گذاری: یک سایت Wix با قیمت 16 دلار در ماه بسازید

Wix ADI را دریافت کنید

2. 10 وب

10Web AI WordPress Builder یک پلتفرم هوش مصنوعی خلاقانه است که برای آژانس ها و فریلنسرهایی که می خواهند وب سایت های وردپرسی با کیفیت بالا را به راحتی بسازند طراحی شده است. قابلیت‌های مبتنی بر هوش مصنوعی به کاربران این امکان را می‌دهد تا وب‌سایت‌های خیره‌کننده‌ای ایجاد کنند که نیازهای آن‌ها را برآورده کند و در عین حال در زمان صرفه‌جویی کند. این برنامه انواع برنامه های پولی را ارائه می دهد که هر کدام دارای طیف وسیعی از ویژگی ها هستند، مانند ادغام نویسنده AI، ویرایشگر کشیدن و رها کردن، و گواهی های SSL. کاربران می توانند صفحات وب و صفحات فرود خیره کننده را در زمان واقعی ایجاد کنند.

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

توابع اساسی:

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

بهترین برای:

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

قیمت گذاری: 20 دلار در ماه شامل هوش مصنوعی، میزبانی و ابزارهای امنیتی

10Web AI WordPress Builder را دریافت کنید

3. AiDA را برجسته کنید

Bookmark یک سازنده وب سایت مبتنی بر هوش مصنوعی است که برای کمک به کاربران در ایجاد وب سایت های حرفه ای بدون زحمت طراحی شده است. این پلتفرم از هوش مصنوعی (با آنچه آنها دستیار طراحی هوش مصنوعی یا AiDA می نامند) برای ساده کردن فرآیند طراحی و ایجاد وب سایت های سفارشی متناسب با نیازهای کاربر استفاده می کند. این دستیار هوش مصنوعی به کاربران کمک می کند تا در کمترین زمان وب سایت های جذاب و کاربردی ایجاد کنند.

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

توابع اساسی:

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

بهترین برای:

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

قیمت گذاری: از 14.99 دلار در ماه شروع می شود

یک نشانک بگیرید

4. GetResponse AI Builder

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

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

بررسی GetResponse ما را بررسی کنید تا ببینید با بازاریابی ایمیلی چه توانایی هایی دارد

توابع اساسی:

• طراحی وب سایت مبتنی بر هوش مصنوعی برای ایجاد موارد جدید از ابتدا
• ادغام با ابزارهای بازاریابی ایمیلی و اتوماسیون پلت فرم
• از چت زنده، اعلان های وب و ابزارهای وبینار آن استفاده کنید

بهترین برای:

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

قیمت گذاری: سازنده وب سایت در طرح رایگان با برنامه های پولی که فقط از 19 دلار در ماه شروع می شود موجود است

GetResponse را دریافت کنید

5. CodeWP.ai

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

CodeWP.ai همچنین دارای بسیاری از قطعه های از پیش کدگذاری شده و تایید شده برای کپی و جایگذاری است. قطعه کد از پیش ساخته شده توسط هوش مصنوعی موارد استفاده رایج از PHP را برای WooCommerce، نصب استاندارد وردپرس و برخی راه حل ها برای سازندگان Breakdance و Oxygen را پوشش می دهد.

توابع اساسی:

• تولید کد مبتنی بر هوش مصنوعی که به طور خاص برای PHP و WordPress ساخته شده است
• با استفاده از هوش مصنوعی آموزش دیده با کد WP مشکلات سریع را حل کنید
• تولید اسنیپت پیشرفته برای Regex، ACF، برخی سازندگان صفحه و WooCommerece

بهترین برای:

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

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

CodeWP.ai را دریافت کنید

سوالات متداول سازنده هوش مصنوعی

بهترین سازنده وب سایت هوش مصنوعی چیست؟

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

طولانی ترین و پرکاربردترین سازنده وب سایت هوش مصنوعی Wix با سیستم طراحی ADI آن است. قابل اعتماد و یکی از بهترین ها در حال حاضر است. برای طرفداران وردپرس، سازنده هوش مصنوعی 10Web نیز یک انتخاب عالی است و در ساخت سایت های جدید در زمان زیادی صرفه جویی می کند.

برای کسانی که روش‌های دستی ایجاد وب‌سایت‌های وردپرس سفارشی را دوست دارند، اما می‌خواهند مقداری کد AI را برای سرعت بخشیدن به پروژه‌ها تزریق کنند، CodeWP.ai محل شروع شماست.

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

تصویر ویژه توسط Ico Maker / shutterstock.com

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

بهترین تم های وردپرس نمونه کارها چیست؟

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

بهترین قالب های وردپرس نمونه کارها

اگرچه فهرست خود را در زیر ارائه کرده‌ایم، نمونه‌های زیر ترتیب خاصی ندارند. توصیه ما این است که هر موضوع را به نوبه خود بررسی کنید – در میان آنها ممکن است بهترین موضوع را برای خود بیابید.

1. پل

Bridge یک وردپرس چند منظوره است که به خوبی با Gutenberg، Elementor و WP Bakery کار می کند. این تم یکی از پرفروش‌ترین قالب‌های وردپرس در تم فارست است. Bridge که با در نظر گرفتن طراح ساخته شده است به شما امکان می دهد یک وب سایت نمونه کارها وردپرس منحصر به فرد ایجاد کنید. از عناصر تعاملی گرفته تا بیش از 600 نسخه نمایشی که می توانید وارد کنید، طراحی نمونه کارها با Bridge انتخاب واضحی برای کسانی است که می خواهند وب سایتی برجسته داشته باشند.

توابع اساسی:

• هفت صفحه نمونه کارها، فهرست بندی و طرح بندی تک نمونه کارها
• بیش از 200 عنصر قابل تنظیم
• قابلیت جستجوی یکپارچه
• انیمیشن ها و انتقال های آژاکس
• سازگار با ووکامرس

قیمت گذاری: 138 دلار در سال

بریج بگیر

2. وحشی

Divi – تم محبوب و همه کاره ما – همه چیزهایی را دارد که برای نمایش کارتان در بهترین نور ممکن نیاز دارید. کشیدن و رها کردن Divi Builder ساده و شهودی است و به شما این امکان را می‌دهد که طرح‌بندی نمونه کارها سفارشی زیبایی را بدون کد ایجاد کنید.

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

حتی می توانید از ماژول Portfolio Carousel برای نمایش موارد در یک نوار لغزنده چرخ فلک استفاده کنید. اگر می‌خواهید نمونه کارها Divi خود را به سطح بعدی ببرید، می‌توانید از ماژول‌های ممتاز مانند Portfolio Grid، Packery Image Gallery و Elastic Gallery برای اضافه کردن افکت‌های شناور چشمگیر و طرح‌بندی شبکه‌ای صاف استفاده کنید.

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

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

توابع اساسی:

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

قیمت گذاری: برنامه های پولی از 89 دلار شروع می شود

Divi را دریافت کنید

3. هستیا

اگر به دنبال ایجاد وب سایت نمونه کارها با بودجه هستید، Hestia را در نظر بگیرید. این تم با محبوب ترین صفحه سازها از جمله Divi، Beaver Builder، Thrive Themes و موارد دیگر کار می کند. با طراحی زیبای متریال، می توانید سایت خود را به طور کامل با سفارشی ساز وردپرس سفارشی کنید. Hestia ویژگی های WooCommerce را بهبود بخشیده است، بنابراین اگر می خواهید محصولات را در سایت خود بفروشید، ممکن است نیاز به ارتقا داشته باشید. ارتقاء به نسخه حرفه ای Hestia ایده خوبی است زیرا با چهار سایت شروع کننده متمرکز بر نمونه کارها ارائه می شود که می تواند به شما کمک کند وب سایت خود را سریعتر بسازید.

توابع اساسی:

• صفحه اصلی کاملا قابل تنظیم
• نوار لغزنده و هدر ویدیو
• طرح‌بندی‌ها و گزینه‌های وبلاگ پیشرفته
• سئو دوستانه با کد منبع بهینه شده
• گزینه های هدر و پاورقی پیشرفته

قیمت گذاری: برنامه های رایگان و پولی از 99 دلار در سال شروع می شود

هستیا رو بگیر

4. شمع

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

توابع اساسی:

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

قیمت گذاری: برنامه های پولی از 225 دلار در سال شروع می شود

شمع را بردارید

5. لنز

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

توابع اساسی:

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

قیمت: برنامه های پولی از 75 دلار در سال شروع می شود

لنز را بردارید

6. سیدنی

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

توابع اساسی:

• گوتنبرگ و ترجمه آماده است
• پنجره ماژولار
• 5+ هدر و طرح بندی هدر موبایل
• 5+ طرح بندی وبلاگ
• سیستم قلاب سفارشی

قیمت گذاری: برنامه های رایگان و پولی از 69 دلار در سال شروع می شود

سیدنی را بگیر

7. آسترا

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

توابع اساسی:

• بیش از 240 قالب استارت
• هدر ساز پیشرفته
• چند طرح بندی وبلاگ
• چیدمان ها و قلاب های سفارشی
• گزینه های رنگ و تایپوگرافی بهبود یافته است
• پشتیبانی داخلی AMP

قیمت گذاری: تم های رایگان و پولی از 59 دلار در سال شروع می شود

آسترا بگیرید

8. پتاسیم

Kalium یک تم نمونه کارها تمیز و ساده است که گزینه های زیادی از جمله بیش از 30 نوع آیتم نمونه کارها و چندین گزینه لیست شبکه را ارائه می دهد. بسیاری از داخلی های دیگر مانند نقشه های گوگل و جدول قیمت وجود دارد.

توابع اساسی:

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

قیمت گذاری: 138 دلار در سال

پتاسیم مصرف کنید

9. رمزگشایی کنید

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

توابع اساسی:

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

قیمت: 118 دلار در سال

Uncode را دریافت کنید

10. اوشینه

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

توابع اساسی:

• صفحه ساز را بکشید و رها کنید.
• پلاگین Master Slider گنجانده شده است.
• از بین بیش از 500 فونت گوگل انتخاب کنید.
• ووکامرس آماده است.

قیمت: 138 دلار در سال

اوشین رو بگیر

بهترین قالب های وردپرس نمونه کارها چیست؟

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

چه بخواهید عکاسی زیبای خود را به نمایش بگذارید یا مهارت های برنامه نویسی خلاقانه خود را به رخ بکشید، یکی از این تم ها با نیازهای شما مطابقت دارد. کدام موضوع را برای پروژه نمونه کار بعدی خود امتحان خواهید کرد و چرا؟ در بخش نظرات زیر به ما اطلاع دهید!

تصویر کوچک مقاله توسط vasabii / shutterstock.com

هی دیوی ملت! از اینکه برای قسمت بعدی طرح هفتگی Divi Design Initiative به ما پیوستید متشکریم. جایی که ما هر هفته یک بسته طرح بندی کاملاً جدید برای Divi هدیه می دهیم.

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

این بسته چیدمان شامل:

– 7 صفحه آرایی آماده به صورت استراتژیک برای هر وب سایت شرکت حمل و نقل (از جمله طراحی پاورقی) طراحی شده است.
– عکس ها و گرافیک های اصلی و رایگان + فایل منبع سفارشی (به زیر مراجعه کنید)
– به‌علاوه، مجموعه‌ای بزرگ از عناصر وب‌سایت از پیش طراحی‌شده که می‌توان آن‌ها را سفارشی کرد و در هر مکانی دوباره استفاده کرد.

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

طراحی صفحه فرود

دمو طرح زنده را ببینید

طراحی صفحه اصلی

دمو طرح زنده را ببینید

طراحی صفحه خدمات

دمو طرح زنده را ببینید

طراحی صفحه خدمات

دمو طرح زنده را ببینید

درباره طراحی صفحه

دمو طرح زنده را ببینید

طراحی صفحه وبلاگ

دمو طرح زنده را ببینید

طراحی صفحه تماس

دمو طرح زنده را ببینید

توابع اساسی

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

تظاهرات زنده

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

1. صفحه فرود شرکت حمل و نقل (نمایشی زنده)
2. صفحه اصلی شرکت حمل و نقل (نمایشی زنده)
3. صفحه خدمات شرکت حمل و نقل (نمایشی زنده)
4. صفحه خدمات شرکت حمل و نقل (نمایشی زنده)
5. صفحه اطلاعات شرکت حمل و نقل (نمایشی زنده)
6. صفحه وبلاگ شرکت حمل و نقل (نمایشی زنده)
7. صفحه تماس شرکت حمل و نقل (نمایشی زنده)

همین الان به این طرح دسترسی داشته باشید
مستقیماً از Divi Builder شما

از نسخه 3.0.99 Divi، می‌توانید هر یک از طرح‌بندی‌های موجود در این بسته (به همراه تمام بسته‌های طرح‌بندی آماده Divi) را مستقیماً از Divi Builder پیدا و وارد کنید. آنها از قبل منتظر شما هستند.

برای دسترسی به طرح‌بندی جدید، کافی است هنگام ویرایش یک صفحه، Visual Builder را فعال کنید و نماد «بارگیری از کتابخانه» را در نوار تنظیمات صفحه جستجو کنید (به نظر می‌رسد یک علامت مثبت است). روی این نماد کلیک کنید تا پنجره بازشو Load from Library باز شود. در تب Premade Layouts، با پیمایش در لیست بسته های طرح بندی، می توانید به راحتی طرح بندی جدید را پیدا کنید. هنگامی که بسته طرح شرکت حمل و نقل را پیدا کردید، روی آن کلیک کنید. تمام طرح‌بندی‌های جداگانه موجود در بسته را خواهید دید. طرح مورد نظر برای استفاده را انتخاب کنید و سپس روی دکمه “استفاده از این طرح” کلیک کنید.

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

در کانال یوتیوب ما مشترک شوید

احراز هویت لازم است

قبل از اینکه بتوانید طرح‌بندی‌های Premade را از کتابخانه Divi دانلود کنید، باید اشتراک Elegant Themes خود را احراز هویت کنید. شما می توانید این کار را با رفتن به Divi > گزینه های تم > به روز رسانی ها. در آنجا می توانید نام کاربری و کلید API خود را وارد کرده و تغییرات را ذخیره کنید.

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

از تصاویر طرح بندی به صورت رایگان و بدون محدودیت مجوز استفاده کنید

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

دارایی های تصویر با وضوح کامل را دانلود کنید

بسته طرح بندی جدید هر هفته!

امیدواریم این بسته چیدمان را دوست داشته باشید. ما مشتاقانه منتظر شنیدن نظرات شما در بخش نظرات زیر هستیم. فراموش نکنید که بسته طرح بندی هفته آینده را نیز بررسی کنید!