Divi: بهترین تم وردپرس تمام وقت!

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

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

نحوه اضافه کردن ماژول کد به صفحه خود

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

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

همچنین می توانید بر روی دکمه کلیک کنید از Visual Builder استفاده کنید اگر در وب سایت بالادست خود مرور می کنید اگر به داشبورد وردپرس خود وارد شده اید ، هستید.

دکمه divi builder ماژول وبلاگ divi را کلیک کنید

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

ماژول کد divi را وارد کنید

 

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

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

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

به راحتی وب سایت خود را با Elementor بسازید

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

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

کد سازنده Divi

در کادر متن محتوا ، قطعه کد را اضافه کنید.

قطعه animate.css را اضافه کنید

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

در تنظیمات ماژول دکمه ، در تب Advanced ، دو کلاس "متحرک" و "گزاف گویی" را در کادر متن کلاس CSS وارد کنید.

آیا می خواهید محصولات خود را در اینترنت بفروشید؟

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

یک کلاس متحرک css اضافه کنید

اکنون صفحه هنگامی که صفحه بارگذاری می شود، دکمه را پر می کند.

انیمیشن دکمه divi builder

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

گزینه های محتوا کد

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

پارامترهای کد سازنده Diviمحتویات

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

برچسب مدیریت

با این کار برچسب ماژول در ژنراتور برای شناسایی آسان تغییر می کند. هنگام استفاده از نمای WireFrame در Visual Builder ، این برچسب ها در بلوک ماژول رابط Divi Builder ظاهر می شوند.

گزینه های طراحی کد

در برگه Design ، تمام گزینه های یک ظاهر طراحی شده ماژول ، مانند قلم ها ، رنگ ها ، اندازه و فاصله را پیدا خواهید کرد. این برگه به ​​شما امکان می دهد ظاهر ماژول خود را اصلاح کنید. هر ماژول Divi دارای یک لیست طولانی از تنظیمات طراحی است که می توانید برای تنظیم دقیق هر مورد از آنها استفاده کنید.

سازنده divi code کد ماژول طراحی گزینهحداکثر عرض

هر مقداری که در اینجا وارد شود عرض هر محتوای ارائه شده در ماژول کد را به مقدار تنظیم شده محدود می کند. به عنوان مثال ، وارد کردن 50٪ در قسمت ورودی ، محتویات ماژول کد را به 50٪ ستونی که شامل آن است ، کاهش می دهد.

کد گزینه های پیشرفته کد

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

بخش پیش ساخته کد ماژول divi سازنده

شناسه CSS

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

کلاس CSS

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

CSS سفارشی

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

دید

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

این برای این آموزش است.

2 سهام
سهم2
صدای جیر جیر
ثبات