ماژول Divi Person بهترین راه برای ایجاد یک بلوک مشخصات شخصی است. این یک افزودنی عالی برای استفاده در صفحات About Me یا آنهایی است که اعضای تیم را در آنها نشان می دهد ، جایی که می خواهید از افراد جداگانه استفاده کنید. این ماژول متن ، تصویر و پیوندهای رسانه های اجتماعی را در یک ماژول منسجم ترکیب کرده است.

نحوه پیکربندی ماژول Divi Person

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

سازنده دو

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

ماژول شخصی divi.png

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

مثال Use Case: افزودن بخش "تیم ما" به صفحه درباره ما

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

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

صفحه درباره us.jpg

با استفاده از Visual Builder ، یک بخش استاندارد جدید را با یک ردیف سه ستونی وارد کنید (1/3 1/3 1/3). سپس ماژول Person را به اولین ستون اضافه کنید.

ماژول شخصی wordpress divi.png

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

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

نام: [نام شخص را وارد کنید]
موقعیت: [موقعیت فرد را وارد کنید]
آدرس های پروفایل شبکه های اجتماعی را وارد کنید
توضیحات: [بیوگرافی کوتاهی را وارد کنید]
تصویر: [گرفتن یک تصویر 600 در 600]

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

نماد رنگی: # fcbf00
Hover Icon Color: # e0a831
فونت هدر: Roboto ، bold ، اهرم در
اندازه قلم هدر: 30 پیکسل
سرصفحه متن: # 505050
فاصله سربرگ نامه: 1 پیکسل
سر ردیف ارتفاع: 1.5em
اندازه قلم بدنه: 18 پیکسل
اندازه خط بدن: 1.4em
بالشتک سفارشی: 15px به بالا ، راست 15px ، 15px به پایین ، 15px سمت چپ

گزینه های پیشرفته (CSS سفارشی)

عنصر اصلی:
-webkit-جعبه سایه: 0 1px 5px RGBA (0، 0، 0، 0.2)؛
-moz-جعبه سایه: 0 1px 5px RGBA (0، 0، 0، 0,2)؛
جعبه سایه: 0 1px 5px rgba (0، 0، 0، 0,2)؛

تغییر شخص پروفایل divi.png

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

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

این همه!

نتیجه ماژول person divi.jpg

گزینه های محتوا شخصی

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

گزینه محتوا divi.png

نام

این نام شخصی است که شما معرفی می کنید. نام در بالای ماژول با متن بزرگتر نمایش داده می شود.

موقعیت

موقعیت زیر متن در متن کوچکتر نمایش داده می شود. این اغلب برای اشاره به موقعیت شغلی شخص در یک تیم سازمانی استفاده می شود. به عنوان مثال ، نیک روچ ، "طراح گرافیک".

نشانی اینترنتی فیس بوک

URL را در صفحه فیس بوک خود وارد کنید یا آن را خالی بگذارید تا نماد فیس بوک غیرفعال شود.

URL نمایه توییتر

URL را در صفحه Twitter خود وارد کنید یا آن را خالی بگذارید تا نماد Twitter خاموش شود.

URL نمایه Google+

URL را در صفحه Google+ خود وارد کرده یا خاموش بگذارید تا نماد Google+ خاموش شود.

URL نمایه LinkedIn

URL را در صفحه LinkedIn وارد کنید یا آن را خالی بگذارید تا نماد LinkedIn خاموش شود.

توضیحات:

محتویات اصلی متن ماژول خود را در اینجا وارد کنید.

لینک تصویر

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

رنگ پسزمینه

یک رنگ زمینه پس زمینه برای ماژول خود مشخص کنید یا خالی بگذارید تا از رنگ پیش فرض استفاده کنید.

تصویر پس زمینه

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

برچسب مدیریت

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

گزینه های طراحی برای ماژول شخصی

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

پارامتر ماژول طراحی فرد divi.png

رنگ نماد

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

رنگ نماد روی شناور است

همچنین می توانید رنگ شناور را برای نمادهای شبکه های اجتماعی تغییر دهید. در این تنظیمات با استفاده از انتخابگر رنگ ، رنگ مورد نظر را انتخاب کنید.

رنگ متن

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

قلم سربرگ

با انتخاب قلم مورد نظر از منوی کشویی می توانید قلم متن سرآیند خود را تغییر دهید. 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" را وارد کنید تا نوع واحد آن تغییر کند.

از مرز استفاده کن

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

رنگ مرز

این گزینه بر رنگ حاشیه شما تأثیر می گذارد. یک رنگ سفارشی از انتخابگر رنگ انتخاب کنید تا آن را در حاشیه خود اعمال کنید.

عرض مرز

به طور پیش فرض ، مرزها 1 پیکسل عرض دارند. با کشیدن نوار لغزنده محدوده یا وارد کردن مقدار سفارشی در قسمت ورودی در سمت راست نوار لغزنده ، می توانید این مقدار را افزایش دهید. واحد اندازه گیری سفارشی پشتیبانی می شود ، به این معنی که می توانید واحد پیش فرض را از "px" به مورد دیگری مانند em ، vh ، vw و غیره تغییر دهید.

سبک مرزی

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

حاشیه سفارشی

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

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

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

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

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

قالب طراحی گزینه divi.png

شناسه CSS

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

کلاس CSS

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

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=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]دانلود تم DIVI [/vcex_button][/vc_colum][/vc_colum] /1″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=2&url=23065&tid40632=tutorials” target=”blank” layout=”expanded” align=”family” =_font ”Raleway” font_weight=”1″ style=”flat” custom_background=”#c700e” custom_hover_background=”#4226d8f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-NAD”]DOW قالب DIVI[/vcex_button][/vc_column][/vc_row]

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