Code Module یک بوم خالی است که به شما امکان می دهد کدی مانند کد کوتاه پلاگین یا کد ثابت HTML را به صفحه خود اضافه کنید. اگر می خواهید از یک افزونه شخص ثالث ، به عنوان مثال از یک پلاگین کشویی شخص ثالث استفاده کنید ، می توانید کد کوتاه پلاگین را در یک ماژول کد استاندارد یا عرض پهن قرار دهید تا عنصر را بدون محدودیت نشان دهد.
نحوه اضافه کردن ماژول کد به صفحه خود
قبل از اینکه بتوانید یک ماژول کد به صفحه خود اضافه کنید، ابتدا باید به Divi Builder دسترسی داشته باشید. از وقتی که تم دیوی بر روی شما نصب شده است وب سایت، متوجه یک دکمه خواهید شد از Divi ساز استفاده کنید بالای ناشر هر بار که صفحه جدیدی ایجاد می کنید.
با کلیک بر روی این دکمه ، شما Divi Builder را فعال می کنید که به شما امکان دسترسی به تمام ماژول های Divi Builder را می دهد. سپس بر روی دکمه کلیک کنید از Visual Builder استفاده کنید برای شروع ژنراتور در حالت بصری.
همچنین می توانید بر روی دکمه کلیک کنید از Visual Builder استفاده کنید وقتی شما خود را مرور می کنید وب سایت اگر به داشبورد وردپرس خود وارد شده باشید، upstream.
پس از ورود به Visual Builder ، می توانید با کلیک بر روی دکمه خاکستری بعلاوه یک ماژول جدید به صفحه خود اضافه کنید. ماژول های جدید فقط می توانند در داخل ردیف ها اضافه شوند. اگر صفحه جدیدی را شروع می کنید ، به یاد داشته باشید که ابتدا یک ردیف به صفحه خود اضافه کنید.
ماژول کد را در لیست ماژول ها پیدا کرده و بر روی آن کلیک کنید تا به صفحه شما اضافه شود. لیست ماژول ها قابل جستجو است ، به این معنی که شما همچنین می توانید کلمه "کد" را تایپ کنید و سپس enter را بزنید تا به طور خودکار ماژول کد را پیدا کنید و اضافه کنید پس از افزودن ماژول ، با لیست گزینه های ماژول از شما استقبال می شود. این گزینه ها به سه گروه اصلی تقسیم می شوند: محتویات , تصور et پیشرفته .
با افزودن یک صفحه سبک کسل کننده ، از حروف بزرگ برای تحریک مطالب در یک صفحه جداگانه استفاده کنید
در این مثال ، یک اسکریپت پیوندی برای وارد کردن Animate.css اضافه می کنم تا جلوه های انیمیشن را به عناصر موجود در صفحه اضافه کنید. از آنجا که فایل Animate.css حاوی کدهای زیادی است ، منطقی است که فقط آن را در صفحه مورد نیاز خود بارگذاری کنم.
فقط یک بخش معمولی و یک خط کامل (ستون 1) اضافه کنید و ماژول کد را اضافه کنید.
در جعبه متن از محتویات، قطعه کد را اضافه کنید.
تنها کاری که باید انجام دهید این است که چند کلاس CSS اضافه کنید تا عناصر صفحه کلاس CSS خود را در صفحه خود متحرک کنید. در این مثال ، وقتی صفحه بارگیری می شود ، می خواهم دکمه را پس بزنم.
در تنظیمات ماژول دکمه ، در تب Advanced ، دو کلاس "متحرک" و "گزاف گویی" را در کادر متن کلاس CSS وارد کنید.
اکنون صفحه هنگامی که صفحه بارگذاری می شود، دکمه را پر می کند.
نکته: بعضی اوقات افزودن کد با خط شکسته ها باعث می شود که کد کار نکند. بهتر است کد خود را در یک ویرایشگر متن ایجاد کرده و در ماژول کد جایگذاری کنید.
گزینه های محتوا کد
در برگه از محتویات، تمام عناصر محتوای ماژول مانند متن، تصاویر و آیکون ها را پیدا خواهید کرد. هر چیزی که کنترل می کند چی به نظر می رسد که در ماژول شما همیشه در این برگه باشد.
محتویات
در اینجا می توانید هر کد HTML، CSS یا جاوا اسکریپتی را که می خواهید در صفحه در مکان فعلی نمایش دهید قرار دهید. فقط ویرایشگران و مدیران مجاز به ارسال HTML بدون فیلتر هستند، به این معنی که در صورت استفاده توسط نویسنده یا مشارکت کننده، کد ممکن است از دوره حذف شود. همچنین می توانید کدهای کوتاه را در ماژول قرار دهید. این کدهای دوره (کدهای کوتاه) در داخل ستون والد بدون هیچ پوشش اضافی ماژول Divi نمایش داده می شوند.
برچسب مدیریت
با این کار برچسب ماژول در ژنراتور برای شناسایی آسان تغییر می کند. هنگام استفاده از نمای WireFrame در Visual Builder ، این برچسب ها در بلوک ماژول رابط Divi Builder ظاهر می شوند.
گزینه های طراحی کد
در برگه Design ، تمام گزینه های یک ظاهر طراحی شده ماژول ، مانند قلم ها ، رنگ ها ، اندازه و فاصله را پیدا خواهید کرد. این برگه به شما امکان می دهد ظاهر ماژول خود را اصلاح کنید. هر ماژول Divi دارای یک لیست طولانی از تنظیمات طراحی است که می توانید برای تنظیم دقیق هر مورد از آنها استفاده کنید.
حداکثر عرض
هر مقداری که در اینجا وارد شود عرض هر محتوای ارائه شده در ماژول کد را به مقدار تنظیم شده محدود می کند. به عنوان مثال ، وارد کردن 50٪ در قسمت ورودی ، محتویات ماژول کد را به 50٪ ستونی که شامل آن است ، کاهش می دهد.
کد گزینه های پیشرفته کد
در زبانه Advanced ، گزینه هایی را پیدا می کنید که ممکن است طراحان وب با تجربه تر ، مانند ویژگی های سفارشی CSS و HTML ، مفید باشند. در اینجا می توانید CSS سفارشی را به عناصر مختلف ماژول اعمال کنید. همچنین می توانید کلاسها و شناسه های CSS سفارشی را به ماژول اعمال کنید ، که می تواند برای سفارشی کردن ماژول در پرونده style.css موضوع کودک شما استفاده شود.
شناسه CSS
شناسه CSS با استفاده آسان را برای این ماژول وارد کنید. از شناسه می توان برای ایجاد یک سبک CSS سفارشی یا پیوند دادن به بخشهای خاصی از صفحه خود استفاده کرد.
کلاس CSS
کلاس های CSS اختیاری را برای استفاده برای این ماژول وارد کنید. یک کلاس CSS می تواند برای ایجاد یک استایل سفارشی CSS استفاده شود. می توانید چندین کلاس را که با یک فاصله از هم جدا شده اند اضافه کنید. این کلاس ها را می توان در شما استفاده کرد تم دیوی فرزند یا در CSS سفارشی که به صفحه یا صفحه خود اضافه می کنید وب سایت با استفاده از گزینه های تم Divi یا تنظیمات صفحه Divi Builder.
CSS سفارشی
CSS سفارشی همچنین می تواند بر روی ماژول و هر یک از عناصر داخلی ماژول اعمال شود. در بخش Custom CSS ، یک قسمت متنی پیدا می کنید که می توانید CSS را مستقیماً به هر عنصر اضافه کنید. ورودی های CSS در این تنظیمات از قبل با برچسب های سبک جاسازی شده است. بنابراین شما فقط باید قوانین CSS را که با نقطه ویرگول جدا شده اند وارد کنید.
دید
این گزینه به شما امکان می دهد دستگاه هایی را که ماژول روی آنها نشان داده می شود کنترل کنید. می توانید به صورت جداگانه ماژول خود را در رایانه لوحی ، تلفنهای هوشمند یا دسک تاپ غیرفعال کنید. اگر می خواهید از حالت های مختلف در دستگاه های مختلف استفاده کنید یا اگر می خواهید با حذف عناصر خاصی از صفحه ، طراحی تلفن همراه را ساده کنید ، این کار مفید است.
این برای این آموزش است.
