วิธีสร้างไบออสโซเชียลบนมือถือที่สวยงามด้วย Divi (ดาวน์โหลดฟรี!)

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

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

ไปกันเถอะ!

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน เรามาดูตัวอย่างสั้นๆ สองตัวอย่างที่เราจะสร้างใหม่ตั้งแต่ต้น

ตัวอย่าง 1

ตัวอย่าง 2

เริ่มสร้างตัวอย่างใหม่ #1

เพิ่มมาตราใหม่

สีพื้นหลัง

มาเริ่มกันที่ตัวอย่างแรกกันเลย! สร้างหน้าใหม่หรือเปิดหน้าที่มีอยู่แล้วเพิ่มส่วนปกติลงไป เปิดการตั้งค่าส่วนและเพิ่มสีพื้นหลังสีขาว

• สีพื้นหลัง: #ffffff

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 50px (เดสก์ท็อปและแท็บเล็ต), 0px (โทรศัพท์)
• ช่องว่างภายในด้านล่าง: 50px (เดสก์ท็อปและแท็บเล็ต), 0px (โทรศัพท์)
• ช่องว่างภายในด้านซ้าย: 36vw (เดสก์ท็อป), 23vw (แท็บเล็ต), 0vw (โทรศัพท์)
• ช่องว่างภายในด้านขวา: 36vw (เดสก์ท็อป), 23vw (แท็บเล็ต), 0vw (โทรศัพท์)

เพิ่มแถว #1

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่ในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

สีพื้นหลัง

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและเพิ่มสีพื้นหลัง

• สีพื้นหลัง: #333333

ขนาด

จากนั้นไปที่การตั้งค่าการปรับขนาดในแท็บการออกแบบและลบช่องว่างที่กำหนดเองทั้งหมดระหว่างคอลัมน์และแถว

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

กล่องเงา

เรายังเพิ่มเงาของกล่องเพื่อสร้างความลึกให้กับหน้าจอที่ใหญ่ขึ้น

• ความแรงของกล่องเงาเบลอ: 80px
• เงาสี: rgba(0,0,0,0.3)

เพิ่มโมดูลรูปภาพ

อัพโหลดภาพ

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! เริ่มต้นด้วย Image Module ที่มีอัตราส่วน 1:1 ตัวอย่างเช่น รูปภาพที่เราใช้มีความกว้างและความสูง '500px'

การจัดตำแหน่ง

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

• การจัดตำแหน่งภาพ: กึ่งกลาง

ขนาด

เรากำลังย่อขนาดของรูปภาพโดยแก้ไขความกว้างในการตั้งค่าขนาดต่อไป

• ความกว้าง: 33%
• การจัดตำแหน่งโมดูล: ศูนย์

ชายแดน

เรากำลังเปลี่ยนรูปภาพให้เป็นวงกลมด้วยการเพิ่ม '50vw' ในแต่ละมุมในการตั้งค่าเส้นขอบ ยิ่งไปกว่านั้น เราจะเพิ่มเส้นขอบสีขาวโดยใช้การตั้งค่าต่อไปนี้:

• ความกว้างของเส้นขอบ: 8px
• สีเส้นขอบ: #ffffff

กล่องเงา

สุดท้ายแต่ไม่ท้ายสุด เพิ่มเงาของกล่องเพื่อสร้างการออกแบบที่มีมิติ

• ตำแหน่งแนวตั้งเงาของกล่อง: 40px
• ความชัดเจนของกล่องเงาเบลอ: 100px
• เงาสี: #000000

เพิ่มโมดูลข้อความ #1

เพิ่มเนื้อหา H3

ไปยังโมดูลถัดไป! เพิ่มโมดูลข้อความด้านล่างโมดูลรูปภาพที่มีเนื้อหา H3 บางส่วน

การตั้งค่าข้อความ H3

ดำเนินการต่อโดยไปที่แท็บการออกแบบและเปลี่ยนการตั้งค่าข้อความ H3

• แบบอักษรของหัวเรื่อง 3: เปิด Sans
• หัวข้อ 3 น้ำหนักแบบอักษร: กึ่งหนา
• การจัดแนวข้อความหัวเรื่อง 3: Center
• หัวเรื่อง 3 สีข้อความ: #ffffff
• ส่วนหัว 3 ความสูงของบรรทัด: 0.1em

ระยะห่าง

เรายังเพิ่มระยะขอบด้านบนเพื่อสร้างช่องว่างระหว่างโมดูลรูปภาพและโมดูลข้อความนี้

• ขอบบน: 30px

เพิ่มโมดูลข้อความ #2

เพิ่มเนื้อหา

โมดูลต่อไปที่เราต้องการคือโมดูลข้อความอื่น เพิ่มตำแหน่งงานของคุณลงในกล่องเนื้อหา

การตั้งค่าข้อความ

จากนั้นไปที่แท็บออกแบบและเปลี่ยนการตั้งค่าข้อความ

• แบบอักษรข้อความ: เปิด Sans
• น้ำหนักแบบอักษรของข้อความ: ปกติ
• สีข้อความ: #919191
• การวางแนวข้อความ: ศูนย์

เพิ่มโมดูลข้อความ #3

เพิ่มเนื้อหา

ดำเนินการต่อโดยเพิ่มโมดูลข้อความอื่นพร้อมคำอธิบายสั้นๆ เกี่ยวกับตัวคุณ

การตั้งค่าข้อความ

ไปที่การตั้งค่าข้อความและทำการเปลี่ยนแปลงบางอย่าง

• แบบอักษรข้อความ: เปิด Sans
• สีข้อความ: #b7b7b7
• ความสูงของบรรทัดข้อความ: 1.6em
• การวางแนวข้อความ: ศูนย์

ขนาด

แก้ไขความกว้างของโมดูลด้วย

• ความกว้าง: 68%
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

และเพิ่มระยะขอบบนและล่างเพื่อเพิ่มพื้นที่

• ขอบบน: 30px
• ขอบล่าง: 30px

เพิ่มโมดูลปุ่ม

เพิ่มสำเนา

โมดูลถัดไปและโมดูลสุดท้ายที่เราต้องการในแถวนี้คือโมดูลปุ่ม เพิ่มสำเนาบางส่วน

การจัดตำแหน่ง

จากนั้นไปที่แท็บออกแบบและเปลี่ยนการจัดตำแหน่งปุ่มเพื่อให้ตรงกับโมดูลก่อนหน้า

• การจัดตำแหน่งปุ่ม: กึ่งกลาง

การตั้งค่าปุ่ม

ดำเนินการต่อโดยเปลี่ยนลักษณะที่ปรากฏของปุ่มในการตั้งค่าปุ่ม

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 13px
• สีข้อความของปุ่ม: #ffffff
• สี 1: #ad32ff
• สี 2: #32baff
• ทิศทางการไล่ระดับสี: 96deg
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 30px
• แบบอักษรของปุ่ม: เปิด Sans
• น้ำหนักแบบอักษร: Ultra Bold
• รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่

ระยะห่าง

เพิ่มระยะขอบที่กำหนดเองและช่องว่างภายในต่อไป

• ขอบล่าง: 50px
• ช่องว่างภายในด้านบน: 15px
• ช่องว่างภายใน: 15px
• ช่องว่างภายในด้านซ้าย: 50px
• ช่องว่างภายในด้านขวา: 50px

กล่องเงา

และออกแบบปุ่มให้สมบูรณ์ด้วยการเพิ่มเงาของกล่อง

• ตำแหน่งแนวตั้งของกล่องเงา: 20px
• ความแรงของกล่องเงาเบลอ: 80px
• เงาสี: rgba(0,0,0,0.69)

เพิ่มแถว #2

โครงสร้างคอลัมน์

ต่อแถวหน้า! ใช้โครงสร้างคอลัมน์ต่อไปนี้:

พื้นหลังไล่โทนสี

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและเพิ่มพื้นหลังการไล่ระดับสี:

• สี 1: #1e1e1e
• สี 2: #3f3f3f
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: บนซ้าย
• ตำแหน่งเริ่มต้น: 26%
• วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

ภาพพื้นหลัง

บันทึกรูปภาพต่อไปนี้ลงในคอมพิวเตอร์ของคุณและใช้เป็นภาพพื้นหลังสำหรับแถว:

พร้อมกับการตั้งค่าพื้นหลังต่อไปนี้:

• ขนาดภาพพื้นหลัง: ขนาดจริง
• ตำแหน่งภาพพื้นหลัง: Center
• เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ
• การผสมผสานภาพพื้นหลัง: ฮาร์ดไลท์

ขนาด

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

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

เพิ่มช่องว่างภายในที่กำหนดเองต่อไป

• ช่องว่างภายในด้านบน: 84px
• ช่องว่างภายในด้านล่าง: 84px
• Padding ซ้าย: 4vw (เดสก์ท็อป), 7vw (แท็บเล็ต), 14vw (โทรศัพท์)
• Padding ขวา: 4vw (เดสก์ท็อป), 7vw (แท็บเล็ต), 14vw (โทรศัพท์)

กล่องเงา

พร้อมกับกล่องเงา

• ความแรงของกล่องเงาเบลอ: 80px
• เงาสี: rgba(0,0,0,0.3)

แสดง

เพื่อให้แน่ใจว่าไอคอนการติดตามทางสังคมทั้งหมดปรากฏติดกัน เราจะเพิ่มโค้ด CSS หนึ่งบรรทัดลงในองค์ประกอบหลักของแถว

display: flex;

เพิ่มโมดูลการติดตามโซเชียลมีเดียในคอลัมน์ 1

การจัดตำแหน่ง

โมดูลแรกที่เราต้องการในคอลัมน์ 1 คือ Social Media Follow Module เมื่อคุณเพิ่มโมดูลแล้ว ให้เปลี่ยนการจัดตำแหน่งรายการในแท็บออกแบบ

• การจัดตำแหน่งรายการ: ศูนย์

เพิ่มเครือข่ายโซเชียลใหม่

ดำเนินการต่อโดยเพิ่มเครือข่ายโซเชียลใหม่ สำหรับตัวอย่างนี้ เราใช้ Dribbble

ลิงค์

เพิ่มลิงก์ไปยังโปรไฟล์ Dribbble ของคุณ

พื้นหลังไล่โทนสี

จากนั้น เปลี่ยนพื้นหลังการไล่ระดับสีโดยใช้การตั้งค่าต่อไปนี้:

• สี 1: #ea0061
• สี 2: #ea4c8d
• ทิศทางการไล่ระดับสี: 136deg

ระยะห่าง

และเพิ่มขนาดของโมดูลด้วยการเพิ่มช่องว่างภายในแบบกำหนดเอง

• ช่องว่างภายในด้านบน: 20px
• ช่องว่างภายในด้านล่าง: 20px
• ช่องว่างภายในด้านซ้าย: 20px
• ช่องว่างภายในด้านขวา: 20px

ชายแดน

เรากำลังเปลี่ยนโมดูลให้เป็นวงกลมด้วยการเพิ่ม '20vw' ในแต่ละมุมในการตั้งค่าเส้นขอบ

กล่องเงา

สุดท้ายแต่ไม่ท้ายสุด เพิ่มเงาของกล่อง

• ตำแหน่งแนวตั้งของกล่องเงา: 20px
• ความแรงของกล่องเงาเบลอ: 80px
• เงาสี: #000000

เพิ่มโมดูลข้อความ #1 ลงในคอลัมน์ 1

เพิ่มเนื้อหา

เพิ่มโมดูลข้อความในคอลัมน์แรกถัดไป

การตั้งค่าข้อความ

เปลี่ยนการตั้งค่าข้อความ

• แบบอักษรข้อความ: เปิด Sans
• น้ำหนักแบบอักษรของข้อความ: Ultra Bold
• สีข้อความ: #ffffff
• การวางแนวข้อความ: ศูนย์

เพิ่มโมดูลข้อความ #2 ไปยังคอลัมน์ 1

เพิ่มเนื้อหา

เพิ่มอีกหนึ่งอันด้านล่างอันก่อนหน้า

การตั้งค่าข้อความ

เปลี่ยนการตั้งค่าข้อความของโมดูลนี้ด้วย

• แบบอักษรข้อความ: เปิด Sans
• สีข้อความ: #898989
• ขนาดตัวอักษร: 11px
• การวางแนวข้อความ: ศูนย์

โคลนโมดูลในคอลัมน์ 1 สองครั้ง & วางซ้ำในคอลัมน์ที่เหลือ

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

เปลี่ยนโซเชียลเน็ตเวิร์ก

แน่นอน คุณจะต้องเปลี่ยนโซเชียลเน็ตเวิร์ก

เปลี่ยนลิงค์โซเชียลเน็ตเวิร์ก

พร้อมทั้งลิงค์ต่างๆ

เปลี่ยนพื้นหลังไล่ระดับสีโซเชียลเน็ตเวิร์ก

และพื้นหลังไล่ระดับเครือข่าย

• สี 1: #0043ff
• สี 2: #00aced

• สี 1: #ea2c59
• สี 2: #fed270

เริ่มสร้างตัวอย่างใหม่ #2

เพิ่มมาตราใหม่

สีพื้นหลัง

สู่ตัวอย่างต่อไป! เพิ่มส่วนใหม่ด้วยสีพื้นหลังสีขาว

• สีพื้นหลัง: #ffffff

ระยะห่าง

เพิ่มช่องว่างภายในที่กำหนดเองต่อไป

• ช่องว่างภายในด้านบน: 50px (เดสก์ท็อปและแท็บเล็ต), 0px (โทรศัพท์)
• ช่องว่างภายในด้านล่าง: 50px (เดสก์ท็อปและแท็บเล็ต), 0px (โทรศัพท์)
• Padding ซ้าย: 36vw (เดสก์ท็อป), 23vw (แท็บเล็ต), 4vw (โทรศัพท์)
• ช่องว่างภายในด้านขวา: 36vw (เดสก์ท็อป), 23vw (แท็บเล็ต), 4vw (โทรศัพท์)

เพิ่มแถว #1

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้ไปที่แท็บออกแบบของการตั้งค่าแถวและเปลี่ยนการตั้งค่าการปรับขนาด

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

เพิ่มโมดูลรูปภาพ

อัพโหลดภาพ

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! โมดูลแรกที่เราต้องการคือ Image Module ที่มีอัตราส่วน 1:1

การจัดตำแหน่ง

เปลี่ยนการจัดตำแหน่งภาพ

• การจัดตำแหน่งภาพ: กึ่งกลาง

ขนาด

แก้ไขความกว้างด้วย

• ความกว้าง: 33%
• การจัดตำแหน่งโมดูล: ศูนย์

ชายแดน

และเพิ่ม '20px' ในแต่ละมุมในการตั้งค่าเส้นขอบ

กล่องเงา

ออกแบบภาพให้สมบูรณ์ด้วยการเพิ่มเงาของกล่องที่ละเอียดอ่อน

• ความแรงของกล่องเงาเบลอ: 51px
• เงาสี: rgba(0,0,0,0.37)

เพิ่มโมดูลข้อความ #1

เพิ่มเนื้อหา H3

โมดูลต่อไปที่เราต้องการคือโมดูลข้อความ เพิ่มเนื้อหา H3 ที่เลือก

การตั้งค่าข้อความ H3

เปลี่ยนการตั้งค่าข้อความ H3 ในแท็บการออกแบบ

• แบบอักษรของหัวเรื่อง 3: เปิด Sans
• หัวข้อ 3 น้ำหนักแบบอักษร: Ultra Bold
• หัวข้อ 3 รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่
• การจัดแนวข้อความหัวเรื่อง 3: Center
• หัวเรื่อง 3 สีข้อความ: #000000
• หัวเรื่อง 3 ระยะห่างตัวอักษร: -1px
• ส่วนหัว 3 ความสูงของบรรทัด: 0.9em

ระยะห่าง

เพิ่มระยะขอบบนบางส่วนต่อไป

• ขอบบน: 30px

เพิ่มโมดูลข้อความ #2

เพิ่มเนื้อหา

เพิ่มโมดูลข้อความอื่น

การตั้งค่าข้อความ

แก้ไขการตั้งค่าข้อความ

• แบบอักษรข้อความ: เปิด Sans
• สีข้อความ: #919191
• การวางแนวข้อความ: ศูนย์

เพิ่มแถว #2

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

สีพื้นหลัง

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและเปลี่ยนสีพื้นหลังของแถว

• สีพื้นหลัง: #ffffff

คอลัมน์ 2 สีพื้นหลัง

เพิ่มสีพื้นหลังให้กับคอลัมน์ที่สองด้วย

• คอลัมน์ 2 สีพื้นหลัง: #efefef

การจัดตำแหน่ง

ตรวจสอบให้แน่ใจว่าคุณกำลังใช้การจัดตำแหน่งแถวด้านซ้าย

• การจัดแนวแถว: ซ้าย

ขนาด

ไปที่การตั้งค่าการปรับขนาดถัดไปและทำการเปลี่ยนแปลงบางอย่าง

• ใช้ความกว้างที่กำหนดเอง: ใช่
• หน่วย: %
• ความกว้างที่กำหนดเอง: 67%
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่

ระยะห่าง

เรายังเพิ่มช่องว่างภายในแบบกำหนดเองให้กับแถวและคอลัมน์ด้วย

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px
• คอลัมน์ 1 ช่องว่างภายในด้านบน: 20px
• ช่องว่างภายในคอลัมน์ 1 ด้านล่าง: 20px
• คอลัมน์ 2 ช่องว่างภายในด้านบน: 20px
• คอลัมน์ที่ 2 ช่องว่างภายใน: 20px

ชายแดน

เพิ่ม '14px' ที่มุมซ้ายบน ขวาบน และล่างซ้าย

กล่องเงา

และทำให้การออกแบบแถวสมบูรณ์ด้วยการเพิ่มเงาของกล่องที่ละเอียดอ่อน

• ความแรงของกล่องเงาเบลอ: 80px
• เงาสี: rgba(0,0,0,0.17)

เพิ่มโมดูลการติดตามโซเชียลมีเดียในคอลัมน์ 1

การจัดตำแหน่ง

ในคอลัมน์แรก เราจะต้องมีโมดูล Social Media Follow เปลี่ยนการจัดตำแหน่งรายการ

• การจัดตำแหน่งรายการ: ศูนย์

เพิ่มเครือข่ายโซเชียลใหม่

จากนั้นเพิ่มเครือข่ายโซเชียลใหม่ เรากำลังใช้ Dribbble

ลิงค์

เพิ่มลิงค์ไปยังพอร์ต Dribble ของคุณ

พื้นหลังไล่โทนสี

และเปลี่ยนพื้นหลังไล่ระดับของโซเชียลเน็ตเวิร์ก

• สี 1: #ea0061
• สี 2: #ea4c8d
• ทิศทางการไล่ระดับสี: 136deg

ระยะห่าง

เพิ่มค่าช่องว่างภายในที่กำหนดเองต่อไป

• ช่องว่างภายในด้านบน: 20px
• ช่องว่างภายในด้านล่าง: 20px
• ช่องว่างภายในด้านซ้าย: 20px
• ช่องว่างภายในด้านขวา: 20px

ชายแดน

และเพิ่ม '10px' ในแต่ละมุมของโซเชียลเน็ตเวิร์ก

กล่องเงา

ออกแบบโมดูลให้สมบูรณ์โดยเพิ่มเงาของกล่องที่ละเอียดอ่อน

• ความแรงของกล่องเงาเบลอ: 80px
• เงาสี: rgba(0,0,0,0.3)

เพิ่มโมดูลข้อความ #1 ลงในคอลัมน์ 2

เพิ่มเนื้อหา

เพิ่มโมดูลข้อความในคอลัมน์ที่สอง

การตั้งค่าข้อความ

เปลี่ยนการตั้งค่าข้อความตามลำดับ:

• แบบอักษรข้อความ: เปิด Sans
• น้ำหนักแบบอักษรของข้อความ: Ultra Bold
• สีข้อความ: #000000
• การวางแนวข้อความ: ศูนย์

ระยะห่าง

สร้างพื้นที่โดยเพิ่มระยะขอบบนถัดไป

• ขอบบน: 10px

เพิ่มโมดูลข้อความ #2 ลงในคอลัมน์ 2

เพิ่มเนื้อหา

โมดูลที่สองที่เราต้องการในคอลัมน์ 2 คือโมดูลข้อความอื่น

การตั้งค่าข้อความ

เปลี่ยนการตั้งค่าข้อความ

• แบบอักษรข้อความ: เปิด Sans
• สีข้อความ: #898989
• ขนาดตัวอักษร: 11px
• การวางแนวข้อความ: ศูนย์

โคลนแถว #2

เมื่อคุณแก้ไขแถวเสร็จแล้ว คุณสามารถดำเนินการต่อและโคลนได้ครั้งเดียว

สลับโมดูล

สลับโมดูลต่อไป

เพิ่มคอลัมน์ 1 สีพื้นหลัง

จากนั้น เพิ่มสีพื้นหลังของคอลัมน์ 1 ลงในแถวที่ซ้ำกัน

• คอลัมน์ 1 สีพื้นหลัง: #dbdbdb

ลบสีพื้นหลังของคอลัมน์ 2

ลบสีพื้นหลังของคอลัมน์ 2 ถัดไป

เปลี่ยนการจัดแนวแถว

เปลี่ยนการจัดตำแหน่งแถวด้วย

• การจัดแนวแถว: ขวา

เปลี่ยนขนาดแถว

พร้อมกับความกว้างที่กำหนดเองในการตั้งค่าการปรับขนาด

• ความกว้างที่กำหนดเอง: 66.99%

เปลี่ยนขอบแถว

เรายังทำให้แน่ใจว่า '14px' ถูกกำหนดไว้ที่มุมบนขวาและมุมขวาล่างเท่านั้น

เปลี่ยนเครือข่ายติดตามโซเชียล

ดำเนินการต่อโดยเปลี่ยนเครือข่ายโซเชียล

เปลี่ยนพื้นหลังไล่ระดับเครือข่ายตามโซเชียล

พร้อมกับพื้นหลังไล่ระดับ

• สี 1: #0043ff
• สี 2: #00aced

โคลนทั้งสองแถวตามโซเชียล

เมื่อคุณมีแถวติดตามทางสังคมทั้งสองแถวเสร็จแล้ว คุณสามารถโคลนแต่ละแถวได้

เปลี่ยนขอบของซ้ำ #1

เปลี่ยนมุมโค้งมนของรายการที่ซ้ำกันครั้งแรก

เปลี่ยนเครือข่ายติดตามโซเชียลของซ้ำ #1

พร้อมกับโซเชียลเน็ตเวิร์ก

เปลี่ยนพื้นหลังไล่ระดับของซ้ำ #1

และพื้นหลังไล่ระดับ

• สี 1: #ea2c59
• สี 2: #fed270

เปลี่ยนเส้นขอบของรายการซ้ำ #2

ดำเนินการต่อโดยเปลี่ยนมุมมนของสำเนาที่สองเช่นกัน

เปลี่ยนเครือข่ายติดตามโซเชียลของซ้ำ #2

พร้อมกับโซเชียลเน็ตเวิร์ก

เปลี่ยนพื้นหลังไล่ระดับของซ้ำ #2

และอีกครั้ง พื้นหลังไล่ระดับที่กำหนดให้กับโซเชียลเน็ตเวิร์ก

• สี 1: #00306b
• สี 2: #007bb6

ดาวน์โหลด The Mobile Social Follow Bios ฟรี

ในการวางมือบนส่วนการติดตามโซเชียลบนมือถือฟรี ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ของตัวอย่างทั้งสองที่เราสร้างขึ้นใหม่กันในขั้นสุดท้าย

ตัวอย่าง 1

ตัวอย่าง 2

ความคิดสุดท้าย

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