ماژول Social Media Divi به شما امکان می دهد پیوندهایی را براساس نمادهایی ایجاد کنید که به پروفایل های آنلاین آنلاین شما نشان می دهند ، مانند Facebook ، Twitter و Google+. این آیکون ها با استفاده از آیکون های شیک به سبک خود Divi ادغام شده اند ، و این باعث می شود که آنها به استفاده از افزونه های شخص ثالث ارجح باشند. در هر ماژول می توانید به چندین نمایه اجتماعی پیوند اضافه کنید و می توانید در هر کجای صفحه ماژول را اضافه کنید.

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

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

سازنده دو

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

ما را در شبکه های اجتماعی دنبال کنید

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

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

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

اضافه کردن دکمه های ردیابی در یک صفحه تماس divi wordpress.jpg

با استفاده از سازنده بصری ، یک بخش منظم جدید با عرض یک ردیف کامل یک ستون اضافه کنید. ماژول رسانه های اجتماعی را در ستون خود قرار دهید.

در زبانه محتوا در تنظیمات ماژول ، بر روی دکمه "افزودن یک عنصر جدید" کلیک کنید تا یک شبکه اجتماعی جدید به ماژول خود اضافه کنید. در تنظیمات شبکه اجتماعی خاص ، موارد زیر را به روز کنید:

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

شبکه اجتماعی:
URL حساب Facebook: [آدرس URL حساب Facebook خود را وارد کنید]

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

رنگ نماد: # d94b6a (رنگ متنوع)

یک رنگ matching.jpg اضافه کنید

سپس این شبکه اجتماعی را کپی کنید تا چهار شبکه دیگر (Twitter ، Google+ ، LinkedIn و Instagram) اضافه کنید. از زمانی که شبکه را کپی کرده اید ، رنگ نماد سفارشی منتقل شده است. بنابراین شما فقط باید هر آدرس شبکه و حساب شبکه را به روز کنید.

کپی کردن شبکه های اجتماعی divi.jpg

اکنون شمایل رسانه های اجتماعی دارید که با طراحی صفحه تماس مطابقت دارند.

نمایش شبکه اجتماعی.png

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

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

محتوا برای divi ما را در module.png شبکه های اجتماعی دنبال کنید

یک جسم جدید اضافه کنید

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

پس از افزودن اولین شبکه ، یک نوار خاکستری مشاهده خواهید کرد که عنوان شبکه شما به عنوان برچسب نشان داده شده است. نوار خاکستری همچنین دارای سه دکمه است که به شما امکان ویرایش ، تکثیر یا حذف شبکه را می دهد.

فرم پیوند

در اینجا می توانید شکل آیکون های شبکه های اجتماعی خود را به صورت مستطیل گرد یا دایره انتخاب کنید.

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

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

دکمه را دنبال کنید

در اینجا می توانید دکمه بعدی را در کنار نماد قرار دهید یا نه.

برچسب مدیریت

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

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

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

ظاهر divi.png را تغییر دهید

برای این ماژول ، گزینه های طراحی از یک عنصر تشکیل شده است - Text Color.

رنگ متن

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

گزینه های پیشرفته رسانه های اجتماعی

در برگه پیشرفته ، گزینه هایی را پیدا می کنید که ممکن است طراحان وب با تجربه تر ، مانند ویژگی های سفارشی 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 را که با نقطه ویرگول جدا شده اند وارد کنید.

دید

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

گزینه های محتوای شخصی رسانه های اجتماعی

محتوای optin divi.png

شبکه اجتماعی

در اینجا می توانید شبکه اجتماعی مورد نظر خود را انتخاب کنید.

آدرس حساب

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

گزینه های طراحی فردی رسانه های اجتماعی

سبک شخصی option.png

رنگ نماد

Divi برای هر شبکه اجتماعی که به طور پیش فرض تعریف شده است ، رنگ های استانداردی را ارائه می دهد. در اینجا می توانید به راحتی این رنگ آیکون را به هر آنچه می خواهید تغییر دهید.

گزینه های پیشرفته رسانه های اجتماعی

ماژول پیشوند گزینه ما را دنبال divi.png

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]

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