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

ELEMENTOR ساده ترین وبلاگ ساز جهان است!

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

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

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

Avant de pouvoir ajouter un module de code à votre page, vous devez d’abord accéder au Divi Builder. Une fois le تم دیوی بر روی شما نصب شده است وب سایت، متوجه یک دکمه خواهید شد از Divi ساز استفاده کنید بالای ناشر هر بار که صفحه جدیدی ایجاد می کنید.

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

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

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

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

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

 

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

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

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

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

کد سازنده Divi

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

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

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

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

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

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

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

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

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

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

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

Vous pouvez y placer n’importe quel code HTML, CSS ou JavaScript que vous souhaitez afficher sur la page à l'emplacement actuel. Seuls les éditeurs et les administrateurs sont autorisés à انتشار du HTML non filtré, ce qui signifie que du code peut être supprimé du module s’il est utilisé par un auteur ou un collaborateur. Vous pouvez également placer des codes courts dans le module. Ces codes cours (shortcodes) seront affiché à l’intérieur de la colonne parente sans aucun wrapper de module Divi supplémentaire.

برچسب مدیریت

با این کار برچسب ماژول در ژنراتور برای شناسایی آسان تغییر می کند. هنگام استفاده از نمای 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 استفاده شود. می توانید چندین کلاس را که با یک فاصله از هم جدا شده اند اضافه کنید. این کلاس ها را می توان در شما استفاده کرد تم دیوی کودک یا در CSS سفارشی که با استفاده از گزینه‌های تم Divi یا تنظیمات صفحه سازنده Divi به صفحه یا وب‌سایت خود اضافه می‌کنید.

CSS سفارشی

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

دید

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

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

%d وبنوشتنویس این را دوست صفحه: