การสอน Divi: วิธีใช้โมดูลโซเชียลมีเดีย

โดย แบลร์ Jersyer | Divi

โมดูลโซเชียลมีเดียของ Divi ช่วยให้คุณสร้างลิงก์ตามไอคอนที่ชี้ไปยังโปรไฟล์สังคมออนไลน์ของคุณเช่น Facebook, Twitter และ Google+ ไอคอนเหล่านี้รวมอยู่ในธีมในสไตล์ของ Divi โดยใช้ไอคอนที่มีสไตล์ซึ่งทำให้พวกเขานิยมใช้ปลั๊กอินของบุคคลที่สาม คุณสามารถเพิ่มลิงก์ไปยังโซเชียลโปรไฟล์ได้หลายรายการในแต่ละโมดูลและคุณสามารถเพิ่มโมดูลที่ใดก็ได้บนเพจ

วิธีเพิ่มโมดูลโซเชียลมีเดียในหน้าของคุณ

ก่อนที่คุณจะสามารถเพิ่มโมดูลโซเชียลมีเดียในหน้าของคุณ คุณต้องข้ามไปที่ Divi Builder ก่อน เมื่อ ธีม Divi ติดตั้งบนเว็บไซต์ของคุณ คุณจะสังเกตเห็นปุ่ม ใช้ Divi Builder เหนือโปรแกรมแก้ไขโพสต์เมื่อใดก็ตามที่คุณสร้างเพจใหม่ คลิกที่ปุ่มนี้เพื่อเปิดใช้งาน Divi Builder และเข้าถึงโมดูล Divi Builder ทั้งหมด จากนั้นคลิกที่ปุ่ม ใช้ Visual Builder เพื่อเริ่มเครื่องกำเนิดไฟฟ้าในโหมดภาพ คุณยังสามารถคลิกปุ่ม ใช้ Visual Builder เมื่อคุณเรียกดูเว็บไซต์ของคุณในเบื้องหน้าหากคุณเชื่อมต่อกับแผงควบคุม WordPress ของคุณ

divi builder

เมื่อคุณเข้าสู่ Visual Builder คุณสามารถคลิกปุ่มบวกสีเทาเพื่อเพิ่มโมดูลใหม่ลงในเพจของคุณ โมดูลใหม่สามารถเพิ่มได้ภายในแถวเท่านั้น หากคุณกำลังเริ่มหน้าใหม่อย่าลืมเพิ่มแถวในเพจของคุณก่อน

ติดตามเราบนโซเชียลเน็ตเวิร์ค

ค้นหาโมดูลโซเชียลมีเดียในรายการโมดูลและคลิกเพื่อเพิ่มลงในเพจของคุณ รายการม็อดสามารถค้นหาได้ซึ่งหมายความว่าคุณสามารถพิมพ์คำว่า“ ติดตามเราบนโซเชียลมีเดีย” จากนั้นคลิก“ เข้าสู่” เพื่อค้นหาและเพิ่มม็อดโซเชียลมีเดียโดยอัตโนมัติ! เมื่อเพิ่มโมดูลแล้วคุณจะได้รับการต้อนรับจากรายการตัวเลือกโมดูล ตัวเลือกเหล่านี้แบ่งออกเป็นสามกลุ่มหลัก: เนื้อหา , ความคิด et สูง .

ตัวอย่างการใช้งาน: การเพิ่มไอคอนโซเชียลมีเดียที่เกี่ยวข้องไปยังหน้าผู้ติดต่อ

หน้าติดต่อของเว็บไซต์เป็นสถานที่ที่สมบูรณ์แบบในการแสดงโปรไฟล์สังคมออนไลน์ของคุณ สิ่งนี้ทำให้ผู้ใช้มีโอกาสมากขึ้นในการเชื่อมต่อและ ส่งเสริม บล็อกของคุณ หรือธุรกิจของคุณ สำหรับตัวอย่างนี้ ฉันจะแสดงวิธีเพิ่มไอคอนโซเชียลมีเดียให้ตรงกับการออกแบบปัจจุบันของหน้าติดต่อ

เพิ่มปุ่มติดตามในหน้าติดต่อ divi wordpress.jpg

ใช้ตัวสร้างภาพเพิ่มส่วนปกติใหม่ที่มีความกว้างเต็มแถวหนึ่งคอลัมน์ แทรกโมดูลโซเชียลมีเดียในคอลัมน์ของคุณ

ในแท็บเนื้อหาของการตั้งค่าโมดูลคลิกที่ปุ่ม "เพิ่มองค์ประกอบใหม่" เพื่อเพิ่มเครือข่ายโซเชียลใหม่ในโมดูลของคุณ ภายใต้การตั้งค่าเครือข่ายโซเชียลเฉพาะให้อัปเดตสิ่งต่อไปนี้:

ตัวเลือกเนื้อหา

เครือข่ายสังคม:
URL บัญชี Facebook: [ป้อน URL ของบัญชี Facebook ของคุณ]

ตัวเลือกการออกแบบ

ไอคอนสี: # d94b6a (คละสี)

เพิ่ม color.jpg ที่ตรงกัน

จากนั้นทำซ้ำเครือข่ายโซเชียลนี้เพื่อเพิ่มเครือข่ายอีกสี่เครือข่าย (Twitter, Google+, LinkedIn และ Instagram) เนื่องจากคุณทำซ้ำเครือข่ายสีของไอคอนที่กำหนดเองจึงถูกโอนไป ดังนั้นคุณต้องอัปเดต URL เครือข่ายและบัญชีแต่ละบัญชี

เครือข่ายสังคมที่ซ้ำกัน divi.jpg

ตอนนี้คุณมีไอคอนโซเชียลมีเดียที่ตรงกับการออกแบบของหน้าผู้ติดต่อ

social network display.png

ตัวเลือกเนื้อหาสื่อสังคมออนไลน์

ในแท็บเนื้อหาคุณจะพบองค์ประกอบเนื้อหาทั้งหมดของโมดูลเช่นข้อความรูปภาพและไอคอน ทั้งหมดที่ควบคุม สิ่งที่ ปรากฏในโมดูลของคุณจะพบได้ในแท็บนี้เสมอ

เนื้อหาสำหรับ divi ติดตามเราบน social networks module.png

เพิ่มวัตถุใหม่

นี่คือที่ที่คุณเพิ่มเครือข่ายใหม่ในโมดูลของคุณ เมื่อคลิกที่ "เพิ่มองค์ประกอบใหม่" คุณจะเปิดหน้าต่างใหม่ทั้งหมดของตัวเลือกเฉพาะสำหรับเครือข่ายใหม่ของคุณ (ภายใต้แท็บ "เนื้อหา" "การออกแบบ" และ "ขั้นสูง") ดูด้านล่างสำหรับการตั้งค่าเครือข่ายโซเชียลมีเดียแต่ละรายการ

หลังจากเพิ่มเครือข่ายแรกของคุณคุณจะเห็นแถบสีเทาปรากฏขึ้นพร้อมกับชื่อเครือข่ายของคุณที่แสดงเป็นป้ายกำกับ แถบสีเทายังมีปุ่มสามปุ่มที่ให้คุณแก้ไขทำซ้ำหรือลบเครือข่าย

แบบฟอร์มลิงก์

ที่นี่คุณสามารถเลือกรูปร่างของไอคอนเครือข่ายโซเชียลของคุณได้ทั้งในรูปสี่เหลี่ยมมุมมนหรือวงกลม

URL จะเปิดขึ้น

เลือกเปิด URL เครือข่ายของคุณในแท็บใหม่หรือในหน้าต่างเดียวกัน

ปุ่ม Follow

ที่นี่คุณสามารถเลือกได้ว่าจะรวมปุ่มถัดไปข้างไอคอนหรือไม่

ป้ายกำกับผู้ดูแลระบบ

สิ่งนี้จะเปลี่ยนป้ายชื่อโมดูลในตัวสร้างเพื่อให้ระบุตัวตนได้ง่าย เมื่อคุณใช้มุมมอง WireFrame ใน Visual Builder ป้ายเหล่านี้จะปรากฏในบล็อกโมดูลของอินเทอร์เฟซ Divi Builder

ตัวเลือกการออกแบบสื่อสังคมออนไลน์

ในแท็บออกแบบคุณจะพบตัวเลือกสไตล์โมดูลทั้งหมดเช่นแบบอักษรสีขนาดและระยะห่าง นี่คือแท็บที่คุณจะใช้เพื่อเปลี่ยนรูปลักษณ์ของโมดูลของคุณ โมดูล Divi แต่ละโมดูลมีรายการการตั้งค่าการออกแบบที่ยาวซึ่งคุณสามารถใช้เพื่อเปลี่ยนรูปลักษณ์ได้

เปลี่ยนลักษณะ divi.png

สำหรับโมดูลนี้ตัวเลือกการออกแบบประกอบด้วยองค์ประกอบเดียว - สีข้อความ

สีข้อความ

ที่นี่คุณสามารถเลือกได้ว่าจะให้ข้อความของคุณสว่างหรือมืด หากคุณทำงานบนพื้นหลังสีเข้มข้อความของคุณควรเป็นสีอ่อน หากพื้นหลังของคุณเป็นสีอ่อนข้อความของคุณควรมืด

ตัวเลือกโซเชียลมีเดียขั้นสูง

ในแท็บขั้นสูงคุณจะพบตัวเลือกที่นักออกแบบเว็บที่มีประสบการณ์มากกว่าอาจพบว่ามีประโยชน์เช่นแอตทริบิวต์ CSS และ HTML ที่กำหนดเอง ที่นี่คุณสามารถใช้ CSS ที่กำหนดเองกับองค์ประกอบต่างๆของโมดูลได้ คุณยังสามารถใช้คลาส CSS และ ID ที่กำหนดเองกับโมดูลซึ่งสามารถใช้เพื่อปรับแต่งโมดูลในไฟล์ style.css ของธีมลูกของคุณ

การตั้งค่าขั้นสูง divi.png

รหัส CSS

ป้อน CSS ID ทางเลือกเพื่อใช้สำหรับโมดูลนี้ คุณสามารถใช้ ID เพื่อสร้างสไตล์ CSS ที่กำหนดเองหรือเพื่อเชื่อมโยงไปยังส่วนเฉพาะของเพจของคุณ

ชั้น CSS

ป้อนคลาส CSS ที่เป็นทางเลือกเพื่อใช้สำหรับโมดูลนี้ คุณสามารถใช้คลาส CSS เพื่อสร้างสไตล์ CSS ที่กำหนดเองได้ คุณสามารถเพิ่มหลายชั้นเรียนโดยคั่นด้วยช่องว่าง คลาสเหล่านี้สามารถใช้ในธีมลูก Divi ของคุณหรือในสไตล์ชีต CSS แบบกำหนดเองที่คุณเพิ่มลงในเพจหรือในเว็บไซต์ของคุณโดยใช้ ตัวเลือกชุดรูปแบบ Divi หรือพารามิเตอร์ของหน้าตัวสร้าง Divi

CSS ที่กำหนดเอง

CSS ที่กำหนดเองยังสามารถนำไปใช้กับโมดูลและภายในของโมดูลได้ ในส่วน CSS ที่กำหนดเองคุณจะพบช่องข้อความที่คุณสามารถเพิ่มสไตล์ชีต CSS ที่กำหนดเองให้กับแต่ละองค์ประกอบได้โดยตรง รายการ CSS ในการตั้งค่าเหล่านี้รวมอยู่ในแท็กสไตล์แล้ว ดังนั้นเพียงป้อนกฎ CSS โดยคั่นด้วยอัฒภาค

ความชัดเจน

ตัวเลือกนี้ช่วยให้คุณควบคุมอุปกรณ์ที่โมดูลของคุณปรากฏ คุณสามารถเลือกที่จะปิดใช้งานโมดูลของคุณบนแท็บเล็ตสมาร์ทโฟนหรือเดสก์ท็อปทีละเครื่อง สิ่งนี้มีประโยชน์หากคุณต้องการใช้ม็อดต่างๆบนอุปกรณ์ต่าง ๆ หรือหากคุณต้องการลดความซับซ้อนของการออกแบบอุปกรณ์เคลื่อนที่โดยการลบองค์ประกอบบางอย่างออกจากหน้า

ตัวเลือกเนื้อหาโซเชียลมีเดียแต่ละรายการ

เนื้อหา optin divi.png

เครือข่ายสังคมออนไลน์

ที่นี่คุณสามารถเลือกเครือข่ายโซเชียลที่คุณต้องการแสดง

URL บัญชี

นี่คือที่ที่คุณป้อน URL สำหรับลิงก์เครือข่ายสังคมนี้ หากคุณเลือก Facebook เป็นเครือข่ายของคุณนี่คือที่ที่คุณจะใส่ URL ของเพจ Facebook

ตัวเลือกการออกแบบโซเชียลมีเดียแต่ละรายการ

individual style.png.png

สีไอคอน

Divi เสนอสีมาตรฐานสำหรับแต่ละเครือข่ายสังคมที่กำหนดโดยค่าเริ่มต้น ที่นี่คุณสามารถเปลี่ยนสีไอคอนนี้เป็นสิ่งที่คุณต้องการได้อย่างง่ายดาย

ตัวเลือกโซเชียลมีเดียขั้นสูง

โมดูลตัวเลือกล่วงหน้าตามเรา divi.png

CSS ที่กำหนดเอง

CSS ที่กำหนดเองยังสามารถนำไปใช้กับโมดูลและภายในของโมดูลได้ ในส่วน CSS ที่กำหนดเองคุณจะพบช่องข้อความที่คุณสามารถเพิ่มสไตล์ชีต CSS ที่กำหนดเองให้กับแต่ละองค์ประกอบได้โดยตรง รายการ CSS ในการตั้งค่าเหล่านี้รวมอยู่ในแท็กสไตล์แล้ว ดังนั้นเพียงป้อนกฎ CSS โดยคั่นด้วยอัฒภาค

[vc_row center_row = "ใช่"] [vc_column width = "1/2″] [vcex_button target =" blank "layout =" expand "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] [/ width_column] [» vc_column] [ » 1/2″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" Layout = "ขยาย" align = "กลาง" font_family = "Raleway" font_weight = "700″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] ดาวน์โหลดเทมเพลต DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

บทแนะนำ Divi อื่น ๆ

โปสเตอร์ le commentaire

ที่อยู่อีเมลของคุณจะไม่ถูกเผยแพร่ ช่องที่ต้องการถูกทำเครื่องหมาย *

เว็บไซต์นี้ใช้ Akismet เพื่อลดสิ่งที่ไม่พึงประสงค์ เรียนรู้เพิ่มเติมเกี่ยวกับวิธีการใช้ข้อมูลความคิดเห็นของคุณ.