วิธีการนำเสนอบริการที่สวยงามบนอุปกรณ์พกพาด้วย Divi (ดาวน์โหลดฟรี!)

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

ไปกันเถอะ!

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน เรามาดูตัวอย่างสั้นๆ เกี่ยวกับอุปกรณ์เคลื่อนที่สองตัวอย่างที่เราจะสร้างใหม่

ตัวอย่าง #1

ตัวอย่าง #2

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

สมัครสมาชิกช่อง Youtube ของเรา

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

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

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

• สี 1: #ff0f83
• สี 2: rgba (255,255,255,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ซ้าย
• ตำแหน่งเริ่มต้น: 20%
• ตำแหน่งสุดท้าย: 20%

เพิ่มแถว #1

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

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

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

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

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

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

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

• แบบอักษรของข้อความ: Poppins
• น้ำหนักแบบอักษรของข้อความ: หนัก
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 20vw
• ความสูงของบรรทัดข้อความ: 1em

• ความชัดเจนของเงาข้อความ: 0.95em
• ข้อความเงาสี: rgba(0,0,0,0.13)
• การวางแนวข้อความ: ศูนย์

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

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

เพิ่มโมดูลข้อความอื่นด้านล่างโมดูลก่อนหน้า ป้อนเนื้อหา H2 ที่คุณเลือก

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

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

• หัวข้อที่ 2 แบบอักษร: Poppins
• ส่วนหัว 2 น้ำหนักแบบอักษร: ตัวหนา
• การจัดแนวข้อความหัวเรื่อง 2: Center
• หัวเรื่อง 2 สีข้อความ: #000000
• หัวเรื่อง 2 ขนาดข้อความ: 10vw (โทรศัพท์และแท็บเล็ต), 10vw (เดสก์ท็อป)

ระยะห่าง

สร้างการทับซ้อนกันระหว่างโมดูลข้อความทั้งสองโดยใช้ระยะขอบบนที่เป็นค่าลบ

• ระยะขอบบน: -12vw (โทรศัพท์), -10vw (แท็บเล็ต), -8vw (เดสก์ท็อป)

เพิ่มแถว #2

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

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

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

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

• สี 1: #3239ff
• สี 2: rgba (255,255,255,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ขวา
• ตำแหน่งเริ่มต้น: 30%
• ตำแหน่งสุดท้าย: 30%

ขนาด

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

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

ระยะห่าง

เพิ่มค่าการเว้นวรรคด้วย ค่าเหล่านี้จะช่วยให้แน่ใจว่าทุกอย่างดูดีในทุกขนาดหน้าจอ

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

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

เรายังวางสองคอลัมน์ไว้ติดกันโดยเพิ่มโค้ด CSS หนึ่งบรรทัดในแท็บขั้นสูง

display: flex;

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

เพิ่มเนื้อหา H3 และลิงก์

ตอนนี้เราสามารถเริ่มเพิ่มโมดูลได้แล้ว! เพิ่มโมดูลข้อความในคอลัมน์แรกด้วยสำเนา H3 และลิงก์

สีพื้นหลัง

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

• สีพื้นหลัง: rgba(255,255,255,0.95)

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

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

• การวางแนวข้อความ: ศูนย์

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

แก้ไขการตั้งค่าข้อความลิงก์ด้วย

• แบบอักษรของลิงก์: Poppins
• น้ำหนักแบบอักษร Linke: ตัวหนา
• ลักษณะแบบอักษรของลิงก์: ขีดเส้นใต้
• ลิงค์ขีดเส้นใต้สี: #000000
• ลิงค์สีข้อความ: #000000
• ขนาดข้อความลิงก์: 3vw (โทรศัพท์), 2vw (แท็บเล็ต), 1vw (เดสก์ท็อป)

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

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

• หัวข้อ 3 แบบอักษร: Poppins
• หัวข้อที่ 3 น้ำหนักแบบอักษร: Ultra Light
• หัวเรื่อง 3 สีข้อความ: #000000
• หัวเรื่อง 3 ขนาดข้อความ: 4vw (โทรศัพท์), 3vw (แท็บเล็ต), 2vw (เดสก์ท็อป)
• หัวเรื่อง 3 ความสูงของบรรทัดข้อความ: 1.9 ม. สำหรับรูปร่างวงกลม หรือ 3 ม. สำหรับรูปวงรี

ระยะห่าง

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

• ระยะขอบซ้าย: 5vw
• ระยะขอบขวา: -5vw
• ด้านบน: 17vw (โทรศัพท์), 20vw (แท็บเล็ต), 15vw (เดสก์ท็อป)
• ช่วงล่าง: 17vw (โทรศัพท์), 20vw (แท็บเล็ต), 15vw (เดสก์ท็อป)

ชายแดน

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

กล่องเงา

และเพื่อสร้างความลึก เราจะเพิ่มเงากล่องที่ละเอียดอ่อน

• ความชัดเจนของกล่องเงาเบลอ: 100px
• เงาสี: rgba(0,0,0,0.12)

โมดูลข้อความโคลน 4 ครั้ง

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

แก้ไขรายการซ้ำ #1

ระยะห่าง

ดำเนินการต่อโดยแก้ไขการตั้งค่าการเว้นวรรคของรายการแรก

• ขอบบน: 20vw
• ระยะขอบซ้าย: -5vw
• ระยะขอบขวา: 5vw

แก้ไขรายการซ้ำ #2

สีพื้นหลัง

เปิดสำเนาที่สองถัดไปและเปลี่ยนสีพื้นหลัง

• สีพื้นหลัง: rgba(255,248,209,0.92)

ระยะห่าง

แก้ไขการตั้งค่าระยะห่างด้วย

• ขอบบน: -5vw

แก้ไขซ้ำ #3

สีพื้นหลัง

จากนั้นเปิดสำเนาที่สามและเปลี่ยนสีพื้นหลัง

• สีพื้นหลัง: rgba(219,255,223,0.95)

ระยะห่าง

แก้ไขการตั้งค่าระยะห่างถัดไป

• ขอบบน: -5vw
• ระยะขอบซ้าย: -5vw
• ระยะขอบขวา: 5vw

แก้ไขซ้ำ #4

ระยะห่าง

เปิดรายการที่ซ้ำกันล่าสุดด้วย และเพิ่มระยะขอบบนที่เป็นค่าลบเพื่อสิ้นสุดการออกแบบ

• ขอบบน: -5vw

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

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

สู่ตัวอย่างที่สอง! เพิ่มส่วนใหม่ในหน้าของคุณ

เพิ่มแถว #1

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

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

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

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

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

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

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

• หัวข้อที่ 2 แบบอักษร: Poppins
• การจัดแนวข้อความหัวเรื่อง 2: Center
• หัวเรื่อง 2 สีข้อความ: #333333
• หัวเรื่อง 2 ขนาดข้อความ: 7vw (โทรศัพท์และแท็บเล็ต), 4vw (เดสก์ท็อป)

เพิ่มโมดูลตัวแบ่ง

ทัศนวิสัย

เพิ่มโมดูลตัวแบ่งด้านล่างโมดูลข้อความ ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานตัวเลือก 'แสดงตัวแบ่ง'

สี

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

• สี: #333333

ขนาด

เล่นกับการตั้งค่าการปรับขนาดด้วย

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

เพิ่มแถว #2

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

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

สีพื้นหลัง

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

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

ขนาด

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

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

ระยะห่าง

เพิ่มค่าระยะขอบและช่องว่างภายในที่กำหนดเองข้างๆ เพื่อปรับการออกแบบให้เหมาะสมสำหรับหน้าจอทุกขนาด

• อัตรากำไรขั้นต้น: 2vw
• ระยะขอบล่าง: 2vw
• ด้านบน: 10vw (โทรศัพท์ & แท็บเล็ต), 5vw (เดสก์ท็อป)
• ช่องว่างภายใน: 10vw (โทรศัพท์และแท็บเล็ต), 5vw (เดสก์ท็อป)
• Padding ซ้าย: 2vw (โทรศัพท์ & แท็บเล็ต), 20vw (เดสก์ท็อป)
• ช่องว่างภายในด้านขวา: 2vw (โทรศัพท์และแท็บเล็ต), 20vw (เดสก์ท็อป)

กล่องเงา

เรากำลังใช้เงาของกล่องที่ละเอียดอ่อนเช่นกัน

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

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

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

display: flex;

เพิ่มโมดูล Blurb ลงในคอลัมน์ 1

เลือกไอคอน

ตอนนี้เราสามารถเริ่มเพิ่มโมดูลได้แล้ว! โมดูลเดียวที่เราต้องการในคอลัมน์ 1 คือ Blurb Module เลือกไอคอนที่คุณต้องการ

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

จากนั้นเพิ่มพื้นหลังแบบไล่ระดับ

• สี 1: #7b28ef
• สี 2: #29b6e5
• ทิศทางการไล่ระดับสี: 142deg

การตั้งค่าไอคอน

แก้ไขการตั้งค่าไอคอนถัดไป

• สีไอคอน: #ffffff
• ตำแหน่งไอคอน: Top
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 5vw (โทรศัพท์และแท็บเล็ต), 4vw (เดสก์ท็อป)

ขนาด

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

• ความกว้าง: 48% (โทรศัพท์ & แท็บเล็ต), 78% (เดสก์ท็อป)

ระยะห่าง

นอกจากนี้ เรายังเพิ่มค่าระยะขอบและช่องว่างภายในแบบกำหนดเองเพื่อปรับการออกแบบให้เหมาะสมในทุกขนาดหน้าจอ

• ขอบบน: 2vw (โทรศัพท์)
• ด้านบน: 8.5vw (โทรศัพท์), 9vw (แท็บเล็ต), 6vw (เดสก์ท็อป)
• ช่องว่างภายในด้านล่าง: 3vw (โทรศัพท์), 5vw (แท็บเล็ต), 4vw (เดสก์ท็อป)

ชายแดน

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

กล่องเงา

เรากำลังเพิ่มเงากล่องด้วย

• ตำแหน่งแนวตั้งเงาของกล่อง: 10px
• ความแรงของการกระจายเงาของกล่อง: 5px
• เงาสี: rgba(2,185,252,0.35)

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

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

ต่อคอลัมน์ที่สอง! โมดูลแรกที่เราต้องการคือโมดูลข้อความชื่อ เพิ่มเนื้อหา H3 บางส่วน

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

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

• หัวข้อ 3 แบบอักษร: Poppins
• หัวเรื่อง 3 ขนาดข้อความ: 4vw (โทรศัพท์), 3vw (แท็บเล็ต), 2vw (เดสก์ท็อป)

ระยะห่าง

เพิ่มค่าการเว้นวรรคที่กำหนดเองต่อไป

• อัตรากำไรขั้นต้น: 0vw (โทรศัพท์), 3vw (แท็บเล็ตและเดสก์ท็อป)
• ระยะขอบซ้าย: -20vw (โทรศัพท์และแท็บเล็ต), 0vw (เดสก์ท็อป)
• ระยะขอบขวา: 0vw
• ช่องว่างภายใน: 2vw (โทรศัพท์และแท็บเล็ต), 1vw (เดสก์ท็อป)
• Padding ด้านซ้าย: 5vw (โทรศัพท์และแท็บเล็ต), 2vw (เดสก์ท็อป)

ชายแดน

พร้อมกับขอบด้านซ้าย

• ความกว้างของเส้นขอบด้านซ้าย: 5px
• สีขอบซ้าย: #f4f4f4
• รูปแบบเส้นขอบด้านซ้าย: Double

เพิ่มโมดูลตัวแบ่งในคอลัมน์ 2

แสดงตัวแบ่ง

โมดูลที่สองที่เราต้องการคือโมดูลตัวแบ่ง ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานตัวเลือก 'แสดงตัวแบ่ง'

• แสดงตัวแบ่ง: ใช่

สี

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

• สี: #f4f4f4

สไตล์

เปลี่ยนสไตล์ตัวแบ่งในการตั้งค่าสไตล์ถัดไป

• รูปแบบตัวแบ่ง: Double

ขนาด

ดำเนินการต่อโดยแก้ไขตัวเลือกต่างๆ ในการตั้งค่าการปรับขนาด

• น้ำหนักตัวแบ่ง: 5px
• ส่วนสูง: 0px

ระยะห่าง

และเล่นกับค่าการเว้นวรรคด้วย

• ระยะขอบซ้าย: -20vw (โทรศัพท์และแท็บเล็ต), 0vw (เดสก์ท็อป)

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

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

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

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

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

• ขนาดตัวอักษร: 2vw (โทรศัพท์), 1.7vw (แท็บเล็ต), 0.8vw (เดสก์ท็อป)
• การวางแนวข้อความ: ซ้าย

ระยะห่าง

เล่นกับค่าระยะห่างเช่นกัน

• มาร์จิ้นสูงสุด: 0vw
• ระยะขอบซ้าย: -20vw (โทรศัพท์และแท็บเล็ต), 0vw (เดสก์ท็อป)
• ระยะขอบขวา: 0vw
• ด้านบน: 3vw (โทรศัพท์ & แท็บเล็ต), 2vw (เดสก์ท็อป)
• Padding ด้านซ้าย: 5vw (โทรศัพท์และแท็บเล็ต), 2vw (เดสก์ท็อป)

ชายแดน

และเพิ่มเส้นขอบด้านซ้าย

• ความกว้างของเส้นขอบด้านซ้าย: 5px
• สีขอบซ้าย: #f4f4f4
• รูปแบบเส้นขอบด้านซ้าย: Double

เพิ่มโมดูลปุ่มไปที่คอลัมน์ 2

เพิ่มสำเนา

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

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

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 2.5vw (โทรศัพท์), 2vw (แท็บเล็ต), 1vw (เดสก์ท็อป)
• สีข้อความของปุ่ม: #4f77e8
• ความกว้างของขอบปุ่ม: 1px
• สีเส้นขอบของปุ่ม: #4f77e8

• รัศมีเส้นขอบของปุ่ม: 1px
• แบบอักษรของปุ่ม: Poppins

ระยะห่าง

แก้ไขค่าระยะห่างด้วย

• ขอบบน: 4vw (โทรศัพท์ & แท็บเล็ต), 2vw (เดสก์ท็อป)
• ระยะขอบซ้าย: -20vw (โทรศัพท์และแท็บเล็ต), 0vw (เดสก์ท็อป)

โคลนแถวสองครั้ง

ตอนนี้เราแก้ไขแถวและโมดูลทั้งหมดเสร็จแล้ว เราสามารถโคลนได้สองครั้ง

เปลี่ยนไอคอน

ตรวจสอบให้แน่ใจว่าคุณเปลี่ยนไอคอนสำหรับโมดูล Blurb ทั้งสอง

เปลี่ยนพื้นหลังไล่ระดับสี

แก้ไขพื้นหลังการไล่ระดับสีเช่นกัน

• สี 1: #ff2885
• สี 2: #d6ac24

• สี 1: #70ff1e
• สี 2: #2699ff

เปลี่ยนสีเงาของกล่อง

จับคู่สีเงาของกล่องกับพื้นหลังไล่ระดับสีใหม่

• เงาสี: rgba(255,208,2,0.37)

• เงาสี: rgba(42,255,0,0.37)

เปลี่ยนขอบปุ่มและสีข้อความ

และทำการออกแบบให้สมบูรณ์โดยการเปลี่ยนขอบปุ่มและสีข้อความ

• สีข้อความของปุ่ม: #e96c54
• สีเส้นขอบของปุ่ม: #e96c54

• สีข้อความของปุ่ม: #4dcb93
• สีเส้นขอบของปุ่ม: #4dcb93

ดาวน์โหลดส่วนบริการมือถือฟรี

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

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

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

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

ดาวน์โหลด

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

ดูตัวอย่าง

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

ตัวอย่าง #1

ตัวอย่าง #2

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

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