คุณต้องการปรับแต่งลิงก์ อ่านเพิ่มเติม ของโมดูลบล็อกของ Divi ? จากนั้นทำตามบทช่วยสอนของเรา
ลิงก์ "อ่านเพิ่มเติม" ของบล็อกสามารถเป็นส่วนสำคัญในการปรับปรุง ประสบการณ์ของผู้ใช้. ดังนั้นจึงเป็นเรื่องสำคัญที่เราต้องรู้วิธีปรับแต่งอย่างถูกต้อง
ในบทช่วยสอนนี้ เราจะแสดงวิธีปรับแต่งลิงก์ "อ่านเพิ่มเติม" ในโมดูลบล็อก ในบทความนี้ เราจะแสดงวิธีการ:
- ปรับแต่งลิงก์ "อ่านเพิ่มเติม" โดยใช้ตัวเลือกในตัวของ Divi
- จัดลิงก์ "อ่านเพิ่มเติม" (ซ้าย กลาง ขวา)
- เปลี่ยนลิงก์ "อ่านเพิ่มเติม" เป็นปุ่มเต็มหน้าจอ
- สร้างปุ่มอ่านเพิ่มเติมที่กำหนดเองพร้อมเอฟเฟกต์โฮเวอร์
- แทนที่ข้อความ "อ่านเพิ่มเติม" ด้วยอย่างอื่น (เช่น "อ่านบทความ")
การสำรวจ
ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้
โหลดโมดูลบล็อกบนหน้าโดยใช้ตัวสร้างธีมของ Divi
ในการเริ่มต้นกำหนดลิงก์ อ่านเพิ่มเติม คุณจะต้องเข้าถึงโมดูลบล็อก
คุณสามารถ โหลดเค้าโครงที่กำหนดไว้ล่วงหน้า ด้วยโมดูล Blog ที่คุณเลือก หรือเพียงแค่เพิ่มโมดูล Blog ใหม่ลงในเพจ
เพื่อเริ่มต้นกระบวนการ เราจะใช้หน้าบล็อกจากเค้าโครงที่กำหนดไว้ล่วงหน้า ปัญญาประดิษฐ์.
เพิ่มหน้าใหม่จากแดชบอร์ด WordPress
จากนั้น ตั้งชื่อเพจของคุณ จากนั้นคลิกที่ " ใช้ Divi ผู้ก่อสร้าง".
จากนั้นคลิกที่ " เลือกเลย์เอาต์«
ค้นหาและเลือก " ไขมันเทียม สติปัญญา หน้าบล็อก«
สุดท้าย เลือกเค้าโครงบล็อกและคลิกที่ “ เลือกเลย์เอาต์«
ปรับแต่งและจัดแนวข้อความลิงก์ อ่านเพิ่มเติม
โมดูลบล็อกแต่ละโมดูลมีตัวเลือกในการแสดงหรือซ่อนลิงก์ "อ่านเพิ่มเติม" สำหรับแต่ละบทความในรูปแบบ หากต้องการแสดงลิงก์ "อ่านเพิ่มเติม" ให้เปิดการตั้งค่าบล็อกและสลับ " แสดงปุ่ม อ่านเพิ่มเติม เป็น "ใช่" ในรายการบล็อกที่คุณต้องการแสดง
ภายใต้แท็บ ลักษณะ คุณสามารถปรับแต่งข้อความ อ่านเพิ่มเติม โดยใช้ตัวเลือกที่มีอยู่แล้วภายในตัวใดตัวหนึ่ง สำหรับตัวอย่างนี้ มาอัปเดตสิ่งต่อไปนี้:
- แบบอักษร อ่านเพิ่มเติม: Barlow
- อ่านเพิ่มเติม แสงสลัว: กึ่งหนา
- อ่านเพิ่มเติม รูปแบบการคัดลอก: ตัวพิมพ์ใหญ่ (TT), ขีดเส้นใต้ (U)
- สีข้อความ อ่านเพิ่มเติม: #db0eb7
- อ่านเพิ่มเติม ขีดเส้นใต้ข้อความ สี: #3c5bff
- ระยะห่างระหว่างตัวอักษร อ่านเพิ่มเติม: 1px
นี่คือผลลัพธ์
ขณะนี้ ลิงก์ "อ่านเพิ่มเติม" จะอยู่ทางด้านซ้ายโดยค่าเริ่มต้น เว้นแต่คุณจะเปลี่ยนการจัดตำแหน่ง หากต้องการจัดลิงก์ให้อยู่ตรงกลางหรือทางขวาของโพสต์ ให้เพิ่มข้อมูลโค้ด CSS ดังนี้
ภายใต้แท็บขั้นสูงการตั้งค่าบล็อก เพิ่ม CSS ต่อไปนี้ใน CSS ปุ่มอ่านเพิ่มเติม:
display: block;
text-align: right;
"display:block" จะเปลี่ยนลิงก์ไปยังองค์ประกอบบล็อกที่ครอบคลุมความกว้างเต็มของคอนเทนเนอร์ (ในกรณีนี้คือเนื้อความของ เนื้อหา ของการตีพิมพ์) เมื่อกำหนดเป็นองค์ประกอบบล็อกแล้ว เราสามารถจัดข้อความให้ถูกต้องโดยใช้ "text-align:right"
อ่าน: วิธีสร้าง Sticky Global Header ใน Divi
นี่คือผลลัพธ์
ในการทำให้ลิงก์อยู่ตรงกลาง ให้แทนที่ "right" ด้วย "center" สำหรับค่าของคุณสมบัติ "text-align" ดังนี้:
นี่คือผลลัพธ์
ปรับแต่งลิงก์ "อ่านเพิ่มเติม" ให้ดูเหมือนปุ่ม
สำหรับตัวอย่างนี้ เราจะสร้างรูปแบบปุ่มแบบเต็มความกว้างอย่างง่ายสำหรับลิงก์ "อ่านเพิ่มเติม" ก่อนเพิ่ม CSS ที่กำหนดเอง ให้เปิดการตั้งค่าบล็อกและอัปเดตข้อความลิงก์ "อ่านเพิ่มเติม" ดังนี้
- อ่านเพิ่มเติม รูปแบบการคัดลอก: ตัวพิมพ์ใหญ่ (TT)
- สีข้อความ อ่านเพิ่มเติม: #ffffff
ในตัวอย่างก่อนหน้านี้ เราใช้ “display:block” และ “text-align:center” เพื่อทำให้ลิงก์ขยายความกว้างทั้งหมดของคอนเทนเนอร์และจัดกึ่งกลางข้อความ
ดูเพิ่มเติมที่: วิธีสร้างเมนูเลื่อนและกดใน Divi
เพื่อให้ดูเหมือนปุ่ม สิ่งที่เราต้องทำคือเพิ่มสีพื้นหลังและระยะห่างพร้อมกับข้อมูลโค้ด CSS เพิ่มเติม ในการดำเนินการนี้ ไปที่แท็บขั้นสูงและอัปเดต CSS ของปุ่ม "อ่านเพิ่มเติม" ดังนี้:
display: block;
text-align: center;
background-color:#01012C;
padding: 0.3em 1em;
margin-top: 10px;
ผล
นี่คือผลลัพธ์ !
การสร้างสไตล์ปุ่มขั้นสูงด้วย CSS
หากคุณต้องการใช้สไตล์ปุ่มไปอีกระดับ เราสามารถเพิ่มพื้นหลังและเอฟเฟกต์โฮเวอร์ได้
เมื่อต้องการทำสิ่งนี้ ให้แทนที่ CSS สำหรับ "ปุ่มอ่านเพิ่มเติม" ด้วยสิ่งต่อไปนี้:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-image: linear-gradient(90deg,#01012C 50%,rgba(0,0,0,0) 50%);
background-color: #3c5bff;
transition: all 300ms;
หากต้องการเปลี่ยนพื้นหลังเมื่อวางเมาส์เหนือ คุณสามารถวาง CSS ต่อไปนี้ใน "ปุ่มเรียนรู้เพิ่มเติม" เมื่อวางเคอร์เซอร์ของเมาส์:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-color: #01012C;
ผล
นี่คือผลลัพธ์ !
เปลี่ยนข้อความ "อ่านเพิ่มเติม" เป็นอย่างอื่น
ในการเปลี่ยนข้อความ "อ่านเพิ่มเติม" เป็นอย่างอื่น เช่น "อ่านบทความ" เราจำเป็นต้องใช้ jQuery เล็กน้อย แต่ไม่ต้องกังวล นี่เป็นเพียงไม่กี่บรรทัด
ก่อนเพิ่มโค้ด jQuery ให้เพิ่มคลาส CSS ที่กำหนดเองลงในโมดูล Blog ดังนี้:
- คลาส CSS: et-custom-read-more-text
หมายเหตุ: ตรวจสอบให้แน่ใจว่าชื่อคลาสถูกต้องเพื่อให้ jQuery ทำงานได้
หากต้องการเพิ่ม jQuery ที่แก้ไขข้อความ "อ่านเพิ่มเติม" ให้เพิ่มโมดูลโค้ดใต้โมดูลบล็อก
จากนั้นวางโค้ด jQuery ต่อไปนี้ ตรวจสอบให้แน่ใจว่าได้แรปโค้ดด้วยแท็กสคริปต์ที่จำเป็น:
(function ($) {
$(document).on("ready ajaxComplete", function () {
$(".et-custom-read-more-text .et_pb_post a.more-link").html("Lire l'article");
});
})(jQuery);รหัสนี้โดยทั่วไปจะบอกเบราว์เซอร์ให้เปลี่ยนข้อความของลิงก์ "อ่านเพิ่มเติม" เป็น "อ่านบทความ" เมื่อหน้าเว็บโหลดขึ้น
ผล
นี่คือผลลัพธ์ !
ผลสุดท้าย
นี่คือรูปลักษณ์อื่นที่การปรับแต่งลิงก์ อ่านเพิ่มเติม (หรือปุ่ม) ที่เราทำ
ดาวน์โหลด DIVI ทันที!!!
สรุป
ดังนั้น ! เพียงเท่านี้สำหรับบทความนี้ โมดูลบล็อกของ Divi ช่วยให้คุณปรับแต่งลิงก์ "อ่านเพิ่มเติม" ได้อย่างสร้างสรรค์ และถ้าคุณต้องการทดลองกับข้อมูลโค้ด CSS บางส่วน คุณสามารถสร้างการปรับเปลี่ยนขั้นสูงได้ด้วยตัวเอง
เราหวังว่าบทช่วยสอนนี้จะช่วยให้คุณนำลิงก์ "อ่านเพิ่มเติม" เหล่านั้นไปสู่ระดับถัดไป หากคุณมีข้อกังวลหรือข้อเสนอแนะ หาเราใน ส่วนความเห็น เพื่อหารือเกี่ยวกับมัน
อย่างไรก็ตามคุณสามารถปรึกษาได้ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
