การสร้างการออกแบบปุ่ม Divi ที่ไม่ซ้ำใครโดยใช้โมดูลข้อความ

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

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

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

แอบมอง

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

นี่คือปุ่มที่มีข้อความสองบรรทัด...

นี่คือปุ่มที่ใช้รายการ...

นี่คือปุ่มที่ใช้มุมสร้างสรรค์...

การสร้างการออกแบบปุ่ม Divi ที่ไม่ซ้ำใครโดยใช้โมดูลข้อความ

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

#1 การสร้างปุ่มที่มีข้อความหลายบรรทัด

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

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

ต่อไปนี้คือตัวอย่างโดยย่อของวิธีตั้งค่าโมดูลข้อความให้เป็นปุ่มที่มีข้อความหลายบรรทัด

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

สำหรับเนื้อหาข้อความ ใช้แท็บ html และป้อนข้อมูลต่อไปนี้:

<h3>Contact Us</h3>
<h4>WE CAN HELP</h4>

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

ไล่ระดับพื้นหลังซ้ายสี: #FEE140
ไล่สีพื้นหลังด้านขวา: #FA709A

จากนั้นไปที่แท็บการออกแบบและใช้ UI แท็บส่วนหัวเพื่อจัดรูปแบบแท็กส่วนหัว h3 และ h4 ดังนี้:

หัวข้อ 3 น้ำหนักแบบอักษร: Ultra Bold
ส่วนหัว 3 รูปแบบตัวอักษร: TT
หัวเรื่อง 3 สีข้อความ: #ffffff
หัวข้อ 4 รูปแบบตัวอักษร: TT
หัวเรื่อง 4 สีข้อความ: #ffffff
หัวเรื่อง 4 ขนาดข้อความ: 16px

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

ความกว้าง: 230px
ช่องว่างภายในแบบกำหนดเอง: บน 1em, ล่าง 0.5em, 2em ซ้าย, 2em ขวา

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

นี่คือผลลัพธ์สุดท้าย

ในฐานะเอฟเฟกต์โฮเวอร์ คุณสามารถเพิ่มเงากล่องที่กวาดผ่านปุ่ม ท้ายที่สุดแล้วจะใช้สีพื้นหลังใหม่เพื่อแทนที่การไล่ระดับสี

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

กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวนอนของกล่องเงา: 0px (ค่าเริ่มต้น), 230px (โฮเวอร์)
ตำแหน่งแนวตั้งเงาของกล่อง: 0px
สีเงา: rgba(0,0,0,0) (ค่าเริ่มต้น), #fee140 (โฮเวอร์)

นี่คือสิ่งที่ดูเหมือนเมื่อโฮเวอร์

#2 การสร้างปุ่มรายการ

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

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

จากนั้นเพิ่ม html ต่อไปนี้ในแท็บข้อความของการตั้งค่าเนื้อหาของคุณ:

<ol><li><h3>Contact Us</h3></li></ol>

สิ่งสำคัญคือต้องห่อข้อความของรายการในรายการในแท็กหัวเรื่อง เพื่อให้เราสามารถจัดรูปแบบสัญลักษณ์แสดงหัวข้อย่อย/หมายเลขของรายการแยกต่างหากจากข้อความ

ตอนนี้ข้ามไปที่แท็บออกแบบและเสร็จสิ้นการออกแบบโมดูลข้อความเป็นปุ่ม:

ภายใต้หมวดการตั้งค่าข้อความ เลือกแท็บรายการสั่งซื้อและอัปเดตต่อไปนี้:

แบบอักษรของรายการสั่งซื้อ: Exo 2
น้ำหนักแบบอักษรของรายการสั่งซื้อ: เบา
สีข้อความของรายการสั่งซื้อ: #000000
ขนาดรายการสั่งซื้อ: 20px
รายการสั่งซื้อระยะห่างตัวอักษร: 5px
ประเภทรายการสั่งซื้อ: decimal-leading-zero
ตำแหน่งสไตล์รายการที่สั่งซื้อ: ภายนอก
เยื้องรายการสั่งซื้อ: 2em

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

หัวข้อ 3 แบบอักษร: Exo 2
หัวข้อ 3 น้ำหนักแบบอักษร: กึ่งหนา
ส่วนหัว 3 รูปแบบตัวอักษร: TT
หัวเรื่อง 3 สีข้อความ: #0c71c3
หัวเรื่อง 3 ขนาดข้อความ: 26px
ส่วนหัว 3 ความสูงของบรรทัด: 0.3em

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

ความกว้าง (ของโมดูล): 262px
การจัดตำแหน่งโมดูล: ศูนย์
ช่องว่างภายในแบบกำหนดเอง: บน 2em, ล่าง 0px, 2em ซ้าย, 2em ขวา
มุมโค้งมน: 10px2em
ความกว้างของเส้นขอบ: 1px
สีขอบ: #000000
สไตล์เส้นขอบ: แข็ง

และอย่าลืมเพิ่มลิงก์ไปยังโมดูลของคุณไปยัง URL ที่กำหนดที่คุณเลือก

นี่คือการออกแบบขั้นสุดท้าย

อย่าลังเลที่จะสำรวจประเภทสไตล์รายการใหม่ (เช่น Upper Roman) สำหรับการออกแบบปุ่มรายการที่ไม่เหมือนใคร

#3 การสร้างปุ่มที่มีมุมสร้างสรรค์ (เหมือนใบไม้)

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

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

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

<h3>grow</h3>
<h4>with us</h4>

ซึ่งช่วยให้เราสามารถใส่ข้อความปุ่มในสองบรรทัด (ลดความกว้างในแนวตั้ง) และจัดรูปแบบได้อย่างอิสระ

ถัดไปเพิ่มพื้นหลังแบบไล่ระดับสีที่มีสีเหมือนใบไม้มากขึ้น

ไล่ระดับพื้นหลังซ้ายสี: #7cda24
สีไล่ระดับพื้นหลังด้านขวา: #26e051
ทิศทางการไล่ระดับสี: 90deg

ตอนนี้ ข้ามไปที่การตั้งค่าการออกแบบเพื่อจัดข้อความให้อยู่ตรงกลางและจัดรูปแบบแท็กหัวเรื่อง คุณจะต้องเลือกแท็บ h3 เพื่อออกแบบส่วนหัว h3 และเลือกแท็บ h4 เพื่อออกแบบส่วนหัว h4:

การวางแนวข้อความ: center
หัวข้อ 3 แบบอักษร: Oswald
ส่วนหัว 3 น้ำหนักแบบอักษร: เบา
ส่วนหัว 3 รูปแบบตัวอักษร: TT
หัวเรื่อง 3 สีข้อความ: #ffffff
หัวเรื่อง 3 ขนาดข้อความ: 27px
หัวข้อ 4 แบบอักษร: Oswald
หัวข้อ 4 รูปแบบตัวอักษร: TT
หัวเรื่อง 4 สีข้อความ: #ffffff

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

ความกว้าง: 178px
การจัดตำแหน่งโมดูล: ศูนย์
ช่องว่างภายในแบบกำหนดเอง: บน 2em, 2em ล่าง, 1em ซ้าย, 1em right

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

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

มุมบนซ้าย: 100px
มุมล่างขวา: 100px

จากนั้นเพิ่มเงากล่อง...

กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวนอนของกล่องเงา: 25px
ตำแหน่งแนวตั้งเงาของกล่อง: -4px
ความแรงของการกระจายเงาของกล่อง: -12px
เงาสี: rgba(0,0,0,0.25)

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

นี่คือการออกแบบขั้นสุดท้าย

สำหรับเอฟเฟกต์โฮเวอร์ คุณสามารถสลับค่ามุมโค้งมนเพื่อวางการออกแบบปุ่มไปในทิศทางตรงกันข้ามเมื่อวางโฮเวอร์:

และนี่คือสิ่งที่เอฟเฟกต์โฮเวอร์ดูเหมือน

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

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

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

ไชโย!