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

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

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

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

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

از مثال مورد استفاده کنید: افزودن یک ماژول جستجوی سفارشی به یک صفحه وبلاگ با عرض کامل

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

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

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

تنظیمات ماژول جستجو را به شرح زیر به روز کنید:

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

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

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

رنگ زمینه زمینه ورودی: # f8f8f8
محل نگهدارنده رنگ: # 888888
اندازه قلم ورودی: 16 پیکسل
رنگ متن ورودی: # 888888
ارتفاع خط ورود: 1 هم
بالشتک سفارشی: پایین 20px ، 20px

تنظیمات را ذخیره کنید

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

این همه!

جستجو گزینه های محتوا

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

متن محل نگهدارنده

متنی را که می خواهید به عنوان مکان نگهدارنده برای قسمت جستجو استفاده کنید تایپ کنید.

پنهان کردن دکمه

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

حذف صفحات

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

موارد را حذف کنید

فعال کردن این گزینه ، پیامها را از نتایج جستجو خارج می کند.

دسته بندی ها را حذف نکنید

دسته هایی را که می خواهید از نتایج جستجو حذف شوند انتخاب کنید.

برچسب مدیریت

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

گزینه های طراحی جستجو

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

رنگ پس زمینه فیلد ورودی

در اینجا میتوانید رنگ پسزمینه نوار جستجو را تغییر دهید.

رنگ پاورپوینت

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

رنگ متن

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

جهت گیری متن

این نحوه تنظیم متن شما در ماژول را کنترل می کند.

پلیس ورود

با انتخاب قلم مورد نظر خود از فهرست گشودنی ، می توانید قلم متن ورودی خود را تغییر دهید. Divi دارای ده ها فونت عالی است که توسط Google Fonts طراحی شده اند. به طور پیش فرض ، Divi از قلم Open Sans برای تمام متنهای صفحه شما استفاده می کند. همچنین می توانید سبک متن خود را با استفاده از گزینه های پررنگ ، مورب ، حروف بزرگ و زیر خط تنظیم کنید.

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

در اینجا می توانید اندازه متن ورودی خود را تنظیم کنید. می توانید نوار لغزنده محدوده را بکشید تا اندازه متن خود را کم یا زیاد کنید یا مستقیماً مقدار اندازه متن مورد نظر را در قسمت ورودی سمت راست نوار لغزنده وارد کنید. قسمتهای ورودی از واحدهای اندازه گیری مختلفی پشتیبانی می کنند ، به این معنی که شما می توانید بسته به مقدار اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

رنگ متن ورودی

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

فاصله نامه

فاصله حروف بر فاصله بین هر حرف تأثیر می گذارد. اگر می خواهید فضای بین هر حرف را در متن ورودی خود افزایش دهید ، از نوار لغزنده محدوده برای تنظیم فضا استفاده کنید یا اندازه فاصله دلخواه را در قسمت ورودی در سمت راست نوار لغزنده وارد کنید. قسمتهای ورودی از واحدهای مختلف اندازه گیری پشتیبانی می کنند ، به این معنی که شما می توانید بسته به مقدار اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

ارتفاع خط

ارتفاع خط بر فضای بین هر خط از متن ورودی شما تأثیر می گذارد. اگر می خواهید فضای بین هر خط را افزایش دهید ، از نوار لغزنده محدوده برای تنظیم فضا استفاده کنید یا اندازه فاصله دلخواه را در قسمت وارد کنید. ورود به راست مکان نما. فیلدهای ورودی از واحدهای مختلف اندازه گیری پشتیبانی می کنند ، به این معنی که می توانید بسته به مقدار اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

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

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

فونت دکمه

با انتخاب قلم مورد نظر از منوی کشویی می توانید قلم متن دکمه خود را تغییر دهید. Divi دارای ده ها فونت عالی است که توسط Google Fonts طراحی شده اند. به طور پیش فرض ، Divi از قلم Open Sans برای تمام متنهای صفحه شما استفاده می کند. همچنین می توانید سبک متن خود را با استفاده از گزینه های پررنگ ، مورب ، حروف بزرگ و زیر خط تنظیم کنید.

اندازه فونت دکمه

در اینجا می توانید اندازه متن دکمه خود را تنظیم کنید. می توانید نوار لغزنده محدوده را بکشید تا اندازه متن خود را کم یا زیاد کنید یا مستقیماً مقدار اندازه متن مورد نظر را در قسمت ورودی سمت راست نوار لغزنده وارد کنید. قسمتهای ورودی از واحدهای اندازه گیری مختلفی پشتیبانی می کنند ، به این معنی که شما می توانید بسته به مقدار اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

رنگ متن دکمه

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

فاصله حروف دکمه

فاصله حروف بر فاصله بین هر حرف تأثیر می گذارد. اگر می خواهید فضای بین هر حرف را در متن دکمه خود افزایش دهید ، از نوار لغزنده محدوده برای تنظیم فضا استفاده کنید یا اندازه فاصله دلخواه را در قسمت ورودی در سمت راست نوار لغزنده وارد کنید. قسمتهای ورودی از واحدهای اندازه گیری مختلفی پشتیبانی می کنند ، به این معنی که شما می توانید بسته به مقدار اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

ارتفاع خط از دکمه

ارتفاع خط بر فضای بین هر خط از متن دکمه شما تأثیر می گذارد اگر می خواهید فضای بین هر خط را افزایش دهید ، از نوار لغزنده محدوده برای تنظیم فضا استفاده کنید یا اندازه فاصله دلخواه را در قسمت ورودی وارد کنید واقع در سمت راست مکان نما. قسمتهای ورودی از واحدهای اندازه گیری مختلفی پشتیبانی می کنند ، به این معنی که شما می توانید بسته به مقدار اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

حداکثر عرض

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

حاشیه سفارشی

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

بالشتک سفارشی

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

گزینه های پیشرفته ماژول تحقیق

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

شناسه CSS

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

کلاس CSS

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

CSS سفارشی

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

دید

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

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expanded "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "مسطح" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] دانلود تم DIVI [/ vcex_button] [/vcex_button] [um»_cum] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffrightnfaff" DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

سایر آموزشهای دوگانه

• سایت های رستوران 5 که از موضوع دووی استفاده می کنند
• چگونه برای اضافه کردن متن در محصول Divi WooCommerce
• چگونه می توان رنگ منو را بین صفحات Divi تغییر داد
• نحوه شخصی سازی شبکه های یک وبلاگ با Divi
• نحوه استفاده از ویرایشگر نقش دووی در وردپرس
• نحوه ایجاد یک نوار لغزنده تمام صفحه Divi
• چگونگی تغییر رنگ منوها بین صفحات Divi
• ویژگی هایی که احتمالاً در مورد Divi نمی دانید
• نحوه استفاده از Divi Builder در وردپرس
• نحوه استفاده از ماژول پیمایش ویدئو Divi
• نحوه استفاده از ماژول Flip Builder Divi
• نحوه اضافه کردن ماژول توصیفی در Divi Builder
• نحوه استفاده از ماژول متن دووی
• نحوه ایجاد کشویی در دیوی
• نحوه ویرایش نقش کاربر Divi
• نحوه استفاده از ماوی رسانه اجتماعی Divi
• نحوه استفاده از ماژول فروشگاه با موضوع WordPress Divi
• نحوه استفاده از ماوی نوار کناری Divi
• نحوه استفاده از ماژول جدول قیمت دووی
• چگونه از عنوان ماژول نشریات دووی استفاده کنیم
• نحوه اضافه کردن ماژول ویدیویی از دیوی
• نحوه استفاده از ماژول ناوبری مقاله
• چگونه از ماوی جستجوی Divi استفاده کنیم
• چگونه از ماژول کیف پول Divi استفاده کنیم
• نحوه استفاده از ماژول شخص در Divi Builder
• نحوه استفاده از ماژول کیف پول با فیلتر Divi
• نحوه استفاده از ماژول کشویی عرض کامل
• نحوه استفاده از ماژول Image Divid Builder
• نحوه استفاده از ماژول ناوبری تمام عرض Divi Builder
• نحوه استفاده از ماژول گالری تصاویر
• نحوه استفاده از ماوی کارت Width Divi Builder
• نحوه استفاده از ماژول Portfolio Full Width Divi
• نحوه استفاده از ماژول هدر تمام عیار Divi
• چگونه از ماوی شمارنده Divi استفاده کنیم
• نحوه استفاده از نوار لغزنده مقالات در Divi Builder
• نحوه استفاده از ماژول Divi ایمیل Optin