วิธีใช้ตัวเลือกรูปแบบข้อความและรายการของ Divi สำหรับการออกแบบเนื้อหาสลับและหีบเพลงที่ไม่ซ้ำกัน

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

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

มาเริ่มกันเลย.

แอบมอง

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

ดาวน์โหลด List Style Designs สำหรับ Toggles และ Accordions Layout ฟรี

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip แล้วลากไฟล์ json ไปที่ Divi Builder

ไปที่บทช่วยสอนกันไหม

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องมีสิ่งต่อไปนี้:

1. ธีม Divi ติดตั้งและใช้งานอยู่
2. หน้าใหม่ที่สร้างขึ้นเพื่อสร้างตั้งแต่เริ่มต้นที่ส่วนหน้า (ตัวสร้างภาพ)
3. รูปภาพที่จะใช้สำหรับเนื้อหาจำลอง

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

ส่วนที่ 1: การใช้ลักษณะรายการในโมดูลสลับ

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

ขั้นแรกให้สร้างส่วนปกติที่มีแถวสามคอลัมน์ จากนั้นอัปเดตการตั้งค่าแถวดังนี้:

ความกว้างของรางน้ำ: 2
ความกว้าง: 100%
ความกว้างสูงสุด: 90vw

เพิ่มโมดูลสลับ

ถัดไป เพิ่มโมดูลสลับไปที่คอลัมน์ 1 นี่จะเป็นโมดูลสลับโมดูลแรกจากสามโมดูลที่จะถูกเพิ่มในแต่ละคอลัมน์จากสามคอลัมน์

เพิ่มเนื้อหา HTML สลับ

เนื้อหา HTML เป็นกุญแจสำคัญในการออกแบบนี้ เพื่อให้เราสามารถใช้ประโยชน์จากรูปแบบรายการต่างๆ ภายในการตั้งค่าการสลับ Divi เราจำเป็นต้องเพิ่มรายการ HTML ลงในช่องเนื้อหาของเรา

ไปข้างหน้าและวาง HTML ต่อไปนี้ลงใน
กล่องเนื้อหาร่างกาย

<ol start="1">
    <li>
        <ul style="margin-top: -1.5em;">
            <li>Lorem ipsum dolor sit amet</li>
        </ul>
    </li>
</ol>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</p>

ตอนนี้โค้ด HTML นี้สร้างรายการที่เรียงลำดับโดยใช้แท็ก ol รายการที่สั่งซื้อมีเพียงหนึ่งรายการ (li) ซึ่งเป็นรายการที่ไม่เรียงลำดับที่ซ้อนกัน (ul) ที่มีหนึ่งรายการ (li) ที่มีเนื้อหาจำลองบางส่วน ภายใต้รายการสั่งซื้อเป็นย่อหน้าพื้นฐานของข้อความ

ด้วยการตั้งค่านี้ เราสามารถกำหนดเป้าหมายแท็กแต่ละแท็ก (ol, ul, p) สำหรับสไตล์ที่แตกต่างกันโดยใช้สไตล์ข้อความในตัวของ Divi ซึ่งรวมถึงสไตล์รายการ

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

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

การจัดรูปแบบเนื้อหา

ตอนนี้ เราสามารถเริ่มเพิ่มสีและรูปแบบฟอนต์โดยใช้การตั้งค่าในตัวและลักษณะรายการ อัปเดตการตั้งค่าการออกแบบการสลับดังนี้:

สีไอคอน: #ff3d97
ขนาดตัวอักษรของไอคอน: 26px
เปิดสลับสีพื้นหลัง: #ffffff
ปิดสลับสีพื้นหลัง: #ffffff
เปิดชื่อสีข้อความ: #333333
ชื่อข้อความสี: #333333

แบบอักษรของชื่อเรื่อง: Oswald
ขนาดข้อความชื่อเรื่อง: 18px
ความสูงของบรรทัดชื่อเรื่อง: 3em

แบบอักษรของรายการที่ไม่เรียงลำดับ: Oswald
น้ำหนักแบบอักษรของรายการที่ไม่เรียงลำดับ: เบา
ไม่เรียงลำดับรายการสีข้อความ: #333333
ขนาดข้อความรายการที่ไม่เรียงลำดับ: 36px
Unordered List Style Type: ไม่มี

แบบอักษรของรายการสั่งซื้อ: Kameron
น้ำหนักแบบอักษรของรายการสั่งซื้อ: Bold
สีข้อความของรายการสั่งซื้อ: rgba(255,61,151,0.34)
ขนาดข้อความรายการสั่งซื้อ: 100px
รายการที่สั่งซื้อ ความสูงของบรรทัด: 1.1em

ทำซ้ำโมดูลสลับแรกเพื่อสร้าง Toggles อื่น ๆ

ในการสร้างการสลับสำหรับคอลัมน์ 2 และ 3 เราจะทำซ้ำโมดูลการสลับที่เราเพิ่งออกแบบเสร็จ จากนั้นเราสามารถลากมันลงในแต่ละคอลัมน์เพื่อให้แต่ละคอลัมน์มีโมดูลสลับเหมือนกัน

อัปเดตหมายเลขเริ่มต้นของรายการสั่งซื้อ

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

คุณจะต้องอัปเดตการสลับในคอลัมน์ 3 ด้วยหมายเลขเริ่มต้นของรายการที่สั่งซื้อเป็น “3”

การออกแบบขั้นสุดท้าย

ตอนนี้เรามาดูการออกแบบขั้นสุดท้ายกัน

ส่วนที่ 2: การใช้ลักษณะรายการในโมดูลหีบเพลง

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

จากนั้นทำซ้ำหนึ่งในสองหีบเพลงเริ่มต้นภายใต้แท็บเนื้อหารวมเป็นสามหีบเพลง จากนั้นอัปเดตเนื้อหาสำหรับหีบเพลงแต่ละอันด้วยเนื้อหา html สลับที่เหมือนกันทุกประการภายในการสลับทั้งสามที่เราสร้างไว้ก่อนหน้านี้

ขยายรูปแบบการสลับไปยังหีบเพลง

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

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

จากนั้นตรวจสอบผลลัพธ์สุดท้ายสำหรับการออกแบบหีบเพลง

ส่วนที่ 3: การใช้ลักษณะรายการเพื่อสร้างเนื้อหาหลายคอลัมน์ในโมดูลสลับ

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

ขั้นแรก สร้างส่วนใหม่ด้วยแถวหนึ่งคอลัมน์ จากนั้นคัดลอกและวางหนึ่งในโมดูลสลับที่เราสร้างไว้ก่อนหน้านี้ลงในแถว

จากนั้นอัปเดตเนื้อหาเนื้อหาของโมดูลสลับด้วย HTML ใหม่ดังนี้:

<ol style="column-count: 2">
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
</ol>

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

และสังเกตว่าเรามีความสามารถในการใช้การตั้งค่าการออกแบบในตัวของ Divi สำหรับสไตล์ของชื่อ ลิงก์ และรายการได้อย่างไร

การจัดรูปแบบข้อความลิงก์

เนื่องจากสไตล์ของชื่อเรื่องและรายการมีอยู่แล้วจากการออกแบบก่อนหน้านี้ สิ่งที่เราต้องทำคือเพิ่มการออกแบบสำหรับข้อความลิงก์

เปิดการตั้งค่าสลับและอัปเดตสิ่งต่อไปนี้:

น้ำหนักแบบอักษรของลิงก์: กึ่งหนา
ลักษณะแบบอักษรของลิงก์: ขีดเส้นใต้
ลิงค์สีข้อความ: #ff3d97
ขนาดข้อความลิงก์: 15px

และเนื่องจากเราไม่ได้ทับซ้อนข้อความใดๆ กับการออกแบบนี้ ให้กำหนดสีที่สว่างกว่าให้กับหมายเลขลักษณะรายการตามลำดับดังนี้:

สีข้อความของรายการสั่งซื้อ: #ff3d97

เพิ่มพื้นหลังให้กับปุ่มสลับ

เพื่อให้การออกแบบเสร็จสิ้น เราสามารถเพิ่มพื้นหลังแบบกำหนดเองให้กับปุ่มสลับของเราได้ ในการดำเนินการนี้ ให้อัปเดตการตั้งค่าการสลับต่อไปนี้:

ภาพพื้นหลัง: [อัปโหลดภาพที่คุณเลือก]
พื้นหลังไล่ระดับสีซ้าย: rgba(255,255,255,0.92)
พื้นหลังไล่ระดับสีขวา: rgba(255,255,255,0.8)
ทิศทางการไล่ระดับสี: 90deg
ตำแหน่งเริ่มต้น: 50%
ตำแหน่งสุดท้าย: 0%
วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

การเพิ่ม Responsive Elements ให้กับสองคอลัมน์ toggle

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

ขั้นแรก อัปเดตการตั้งค่าแถวดังนี้:

ความกว้าง: 100%
ความกว้างสูงสุด: 89vw (เดสก์ท็อป), 90vw (แท็บเล็ตและโทรศัพท์)

เปิดการตั้งค่าสลับและอัปเดตสิ่งต่อไปนี้:

ขนาดตัวอักษรของไอคอน: 5vw

ขนาดข้อความชื่อเรื่อง: 4vw

ขนาดข้อความในรายการที่ไม่เรียงลำดับ: 26px (เดสก์ท็อป), 18px (แท็บเล็ต), 14px (โทรศัพท์)
เยื้องรายการที่ไม่เรียงลำดับ: 1px

ขนาดรายการสั่งซื้อ: 8vw

การออกแบบขั้นสุดท้ายของเนื้อหาการสลับหลายคอลัมน์

นี่คือการออกแบบบนแท็บเล็ตและหน้าจอโทรศัพท์

และนี่คือการออกแบบเดียวกันกับพื้นหลังสีเข้มและสีข้อความสีขาว

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

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

ขอให้สนุกกับการสำรวจการออกแบบใหม่ๆ

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!