چگونه در ماژول فرم تماس Divi برچسب ها را به بالای فیلدها اضافه کنیم

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

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

به چه چیزی دست خواهیم یافت؟

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

به این:

بریم سر کار!

چگونه در ماژول فرم تماس Divi برچسب ها را به بالای فیلدها اضافه کنیم

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

دو روش وجود دارد که می‌توانیم CSS سفارشی را به وب‌سایت Divi خود معرفی کنیم: از طریق سفارشی‌کننده تم، که بر روی تمام فرم‌های تماس در وب‌سایت شما تأثیر می‌گذارد، یا در صفحه‌ای در تنظیمات صفحه، که بر فرم‌های تماس فردی تأثیر می‌گذارد. ابتدا روش صفحه را امتحان می کنیم و سپس به شما نشان می دهم که چگونه CSS را به صورت سراسری اضافه کنید.

به صفحه خود بروید

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

نوار ابزار Divi را در پایین صفحه باز کنید و روی نماد چرخ دنده کلیک کنید تا تنظیمات صفحه نمایش داده شود. سپس برو به پیشرفته > CSS سفارشی و کد CSS را کپی و پیست کنید.

این کد CSS است که باید آن را کپی کرده و در کادر CSS سفارشی قرار دهید:

/* Displays titles above the fields */
.et_pb_contact_form_label {
    display: block;
}

/* Hides placeholder text */
.et_pb_contact_form_container .input::placeholder {
    color: transparent;
}

/* Hides duplicate titles on checkboxes and radios */
.et_pb_contact_field_options_title {
    display: none;
}

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

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

ایناهاش کد نهایی به روز شده:

/* Displays titles above the fields */
.et_pb_contact_form_label {
    display: block;
    font-family: 'Playfair Display';
    color: #E7E2BC;
    font-size: 15pt;
    font-style: italic;
    margin-bottom: 15px;
}

/* Hides placeholder text */
.et_pb_contact_form_container .input::placeholder {
    color: transparent;
}

/* Hides duplicate titles on checkboxes and radios */
.et_pb_contact_field_options_title {
    display: none;
}


/* Remove title above dropdown */
.et_pb_contact_field[data-type=select] .et_pb_contact_form_label {
    display: none;
}

و اینجا نتیجه نهایی است!

انجام این کار در سطح جهانی

افزودن کد به صورت جهانی بر تمام فرم های تماس در وب سایت شما تأثیر می گذارد. اگر می خواهید تغییرات فقط در یک فرم تماس خاص اعمال شود، باید یک شناسه CSS را در قسمت پیشرفته به ماژول اضافه کنید. هنگامی که این کار را انجام دادید، یک “#” + شناسه CSS خود را در مقابل هر کلاس CSS مورد نظر خود در کد خود قرار دهید.

سه مکان وجود دارد که می توانید کد CSS را اضافه کنید تا در سطح جهانی اعمال شود. به شیوه نامه style.css تم فرزندتان:

یا بلوک CSS سفارشی Divi > گزینه های تم:

یا به سفارشی ساز تم:

و بس!

منابع بیشتر

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