วิธีสร้างการออกแบบที่ไม่ซ้ำโดยใช้องค์ประกอบหลอกก่อนและหลังใน Divi
เผยแพร่แล้ว: 2019-04-14ในฐานะนักออกแบบเว็บไซต์ เรามักจะมองหาวิธีใหม่ๆ ในการเพิ่มเอกลักษณ์ให้กับเว็บไซต์ที่เราสร้างขึ้น Divi มอบโอกาสไม่รู้จบในการสร้างเลย์เอาต์ที่ไม่เหมือนใคร แต่ยังมีส่วนเพิ่มเติมเล็กๆ น้อยๆ ที่เราสามารถรวมไว้เพื่อนำการออกแบบมารวมกัน นี่คือจุดที่องค์ประกอบหลอก CSS มีประโยชน์จริงๆ
องค์ประกอบหลอก CSS คืออะไร
พูดง่ายๆ ก็คือ สามารถใช้ CSS pseudo-element เพื่อจัดรูปแบบเฉพาะบางส่วนขององค์ประกอบ องค์ประกอบเทียมมีห้าประเภทที่ทำสิ่งต่าง ๆ สำหรับจุดประสงค์ของโพสต์นี้เราจะดูที่ ::before และ ::after
องค์ประกอบหลอกทั้งสองนี้ใช้เพื่อแทรกบางสิ่งก่อนหรือหลังเนื้อหาขององค์ประกอบ สิ่งนี้มีประโยชน์อย่างยิ่ง เนื่องจากเราสามารถใช้พวกมันเพื่อเพิ่มองค์ประกอบภาพเพิ่มเติมให้กับรูปภาพ ข้อความ และอื่นๆ ที่มีอยู่!
เหตุใดเราจึงใช้องค์ประกอบหลอกเหล่านี้ ก่อนและหลังเหมาะอย่างยิ่งสำหรับการปลดล็อกความเป็นไปได้ในการออกแบบโดยไม่จำเป็นต้องเพิ่มองค์ประกอบหรือโมดูลเพิ่มเติม มีประโยชน์สำหรับการเพิ่มองค์ประกอบเพิ่มเติมโดยไม่ต้องแตะเทมเพลต html หรือไฟล์ธีมหลัก
คุณใช้องค์ประกอบก่อนและหลังกับ Divi อย่างไร
หากทั้งหมดนี้ฟังดูสับสนเล็กน้อยไม่ต้องกังวล! ถ้าเราจะใช้ ::before และ ::after เมื่อเขียนโค้ด CSS ตั้งแต่ต้น มันจะมีลักษณะดังนี้:
ลองนึกภาพว่าเรามีบรรทัดข้อความที่มีคลาส “text-example” – CSS เพื่อจัดรูปแบบและปรับแต่งบรรทัดนี้จะเป็น:
.text-example {*This is where you add the styles*}ตอนนี้ ถ้าคุณต้องการเพิ่มและจัดรูปแบบองค์ประกอบ ::before หรือ ::after CSS จะมีลักษณะดังนี้:
.text-example::before {*This is where you add before content and styles*}.text-example::after {*This is where you add after content and styles*}โชคดีที่ Divi สามารถเข้าถึง ::before และ ::after pseudo-elements ได้อย่างง่ายดายโดยมีความยุ่งยากน้อยกว่ามาก ที่จริงแล้ว หากคุณเคยเปิดแท็บ "ขั้นสูง" สำหรับโมดูลใดๆ เพื่อเพิ่มโค้ด CSS ที่กำหนดเอง คุณจะเห็นส่วนต่างๆ ที่เราอ้างถึง
กล่องเหล่านี้มีทางลัดด่วนในการเพิ่มและปรับแต่งเนื้อหาก่อนและหลังโมดูล Divi ที่มีอยู่ และเราสามารถใช้เพื่อสร้างการออกแบบที่ยืดหยุ่นและน่าสนใจ
แอบมอง
นี่คือสิ่งที่เราจะสร้างในบทช่วยสอนนี้:
ตัวอย่าง 1
ตัวอย่าง 2
ตัวอย่างที่ 3
เริ่มต้น
สำหรับบทช่วยสอนนี้ เราแค่ต้องการสำเนาของธีม Divi และกระดานชนวนเปล่า ในการเริ่มต้น เราจะสร้างหน้าใหม่ และหลังจากเพิ่มชื่อหน้าแล้ว ให้คลิกที่ตัวสร้างภาพ
ตอนนี้เราพร้อมที่จะเริ่มต้นแล้ว!
ตัวอย่างที่ 1: โมดูลการนำเสนอที่มีหมายเลขโดยใช้ Pseudo Elements
การประกาศแจ้งอาจเป็นหนึ่งในโมดูล Divi ที่ยืดหยุ่นที่สุดสำหรับคุณ ในกรณีนี้ เราจะใช้องค์ประกอบหลอกเพื่อเพิ่มตัวเลขก่อนการบรรยายแต่ละครั้ง เพื่อสร้างส่วน "วิธีการทำงาน" ทีละขั้นตอน นอกจากนี้เรายังจะเพิ่มรูปร่างลูกศรทางด้านขวาเพื่อระบุกระบวนการ
เราจะสร้างอะไร:
แม้ว่าการออกแบบนี้จะใช้ได้กับการออกแบบการนำเสนอ แต่เราขอยืมส่วนการนำเสนอจาก Web Agency Layout หากคุณต้องการใช้สิ่งเหล่านี้เป็นจุดเริ่มต้น คุณสามารถเข้าถึงหน้า Landing Page ของ Web Agency โดยการสร้างหน้าใหม่และเข้าถึงตัวสร้างส่วนหน้า
เมื่อหน้าเว็บของคุณโหลดขึ้น คุณจะมีตัวเลือกในการใช้เค้าโครงที่สร้างไว้ล่วงหน้า หนึ่งในเค้าโครงที่บันทึกไว้หรือสร้างใหม่ทั้งหมด เลือกเลย์เอาต์ที่สร้างไว้ล่วงหน้าและใช้แถบค้นหาเพื่อค้นหาเลย์เอาต์ “เว็บเอเจนซี่” ส่วนการนำเสนอในบทช่วยสอนนี้สามารถพบได้ที่หน้า Landing Page
เมื่อโหลดแล้ว ความแตกต่างเพียงอย่างเดียวระหว่างเลย์เอาต์ที่สร้างไว้ล่วงหน้าและตัวอย่างของเราคือ เราได้เปลี่ยนพื้นหลังของการนำเสนอแต่ละรายการ สีชื่อและแบบอักษรของข้อความ และเพิ่มช่องว่างภายในเล็กน้อย
เมื่อคุณเปลี่ยนการตั้งค่าเหล่านี้ในข้อความแจ้งหนึ่งฉบับแล้ว คุณสามารถคลิกขวาที่โมดูลและใช้ "รูปแบบส่วนขยาย" เพื่อนำไปใช้กับอีกสามรายการ
ตอนนี้เราได้ปรับแต่งโมดูลการนำเสนอสี่โมดูลเพื่อให้มีลักษณะตามที่เราต้องการแล้ว ก็ถึงเวลาเพิ่มโค้ดเพื่อสร้างองค์ประกอบที่มีตัวเลข อย่างไรก็ตาม เพื่อให้การออกแบบนี้ใช้งานได้ เราต้องเพิ่ม css หนึ่งบรรทัดลงในกล่อง css แบบกำหนดเองขององค์ประกอบหลัก
overflow: visible;
วิธีนี้จะช่วยให้มองเห็นองค์ประกอบใดๆ ที่เราสร้างขึ้นในขั้นตอนต่อไปได้ไม่ว่าจะอยู่ที่ใดก็ตามที่ซ้อนทับกับขอบของโมดูลการนำเสนอของเรา
เมื่อคุณทำเสร็จแล้ว ให้เปิดตัวเลือกโมดูลและไปที่ "แท็บขั้นสูง" ภายในช่อง "ก่อน" ให้เพิ่มข้อมูลโค้ด CSS นี้:
content: '1.'; /* Adds the number 1. as before content */ font-weight: bold; font-size: 80px; opacity: 0.7; /* Makes the number slightly transparent */ color: blue; /* Changes the color of the number text */ position: absolute; z-index: 9999; left: 0; /* Positions the content 0px away from the left border */ Top:-20px; /* Positions the content 20px above the top border */
เมื่อคุณเพิ่มข้อมูลโค้ดนี้แล้ว คุณจะเห็นตัวเลขปรากฏที่ด้านบนซ้ายของโมดูลการนำเสนอ คุณสามารถแก้ไขตำแหน่งของตัวเลขได้โดยเปลี่ยนเส้น “ซ้าย:” และ “บน:” หรือเปลี่ยนสีและขนาดตัวอักษรของตัวเลขภายในข้อมูลโค้ด CSS นี้
เมื่อคุณทำสิ่งนี้เสร็จสิ้นสำหรับโมดูลแรกแล้ว ให้ไปที่โมดูลการนำเสนอใหม่สามโมดูลและเปลี่ยนบรรทัด "เนื้อหา:" เป็น:
เนื้อหา: '2.';
เนื้อหา: '3.';
…และอื่นๆ
ตอนนี้เราได้จัดเรียงตัวเลขแล้ว เราต้องเพิ่ม css เล็กน้อยเพื่อสร้างรูปร่างลูกศร
เปิดแต่ละโมดูลและป้อนสิ่งนี้ลงในกล่องหลังจากภายในพื้นที่ CSS ที่กำหนดเอง:
content: ''; display:block; height:60px; /* Size of the shape */ width:60px; /* Size of the shape */ position:absolute; top:40%; right:-30px; z-index: -1; background-color: #e8e8e8; /* Colour of the shape */ transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg);
ตอนนี้สี่ประกาศของคุณควรมีลักษณะดังนี้:
ตัวอย่างที่ 2 การเพิ่มรูปร่างที่ไม่ซ้ำกันให้กับโมดูลที่มีอยู่ของคุณ
การออกแบบนี้อาศัยข้อมูลโค้ดเล็กๆ น้อยๆ ที่เรียบง่ายแต่มีประสิทธิภาพ ซึ่งเพิ่มลงในทั้งกล่อง CSS ::before และ ::after ที่กำหนดเองภายในโมดูลข้อความแต่ละโมดูล
ข้อดีของการใช้องค์ประกอบหลอกที่นี่คือเราสามารถรวมรูปร่างและวัตถุที่ไม่ซ้ำกันเข้ากับโมดูลที่มีอยู่ของเราโดยไม่จำเป็นต้องเพิ่มองค์ประกอบหรือโมดูลเพิ่มเติมใด ๆ ในหน้าของเรา เนื่องจากองค์ประกอบเทียมเหล่านี้มีอยู่ภายในโมดูลที่มีอยู่ของเรา จึงไม่เพิ่มพื้นที่เพิ่มเติมให้กับการออกแบบของเราและยังคงดูดีบนอุปกรณ์ทั้งหมด
เราจะสร้างอะไร:
ในการสร้างเค้าโครงเริ่มต้น เราจำเป็นต้องเพิ่มส่วนปกติที่มีแถวสามคอลัมน์ ตั้งค่าความกว้างเริ่มต้น เมื่อคุณทำเสร็จแล้ว ให้เพิ่มโมดูลข้อความลงในคอลัมน์ใหม่
อีกครั้ง คุณสามารถจัดรูปแบบโมดูลข้อความนี้ได้ตามที่คุณต้องการ อย่างไรก็ตาม หากคุณปฏิบัติตาม ขั้นตอนเหล่านี้คือขั้นตอนเพื่อให้บรรลุการออกแบบนี้:
เปิดตัวเลือกโมดูลข้อความและเพิ่มเนื้อหาข้อความและรูปภาพพื้นหลังหรือสีพื้นหลังตามต้องการ เราใช้ภาพพื้นหลังปกติที่มีการไล่ระดับสีแบบโปร่งใสอยู่ด้านบน:
ถัดไป กำหนดค่าตัวเลือกการออกแบบต่อไปนี้:
1. ช่องว่างภายใน: 120px และช่องว่างภายใน: 120px
2.การจัดตำแหน่งข้อความ: กึ่งกลาง & สีข้อความ: #ffffff
3. การจัดแนวหัวเรื่อง: กึ่งกลาง & สีของหัวเรื่อง: #f5ee5d
ตอนนี้เรามีทุกแง่มุมที่มองเห็นได้สำหรับโมดูลข้อความแรกของคุณแล้ว ก็ถึงเวลาเพิ่ม CSS เพื่อทำให้เวทย์มนตร์เกิดขึ้น ในแท็บขั้นสูงของโมดูลข้อความ ให้เพิ่มโค้ดต่อไปนี้ลงในช่อง "before":
content:''; height: 30px; /* change the size to suit your design */ width: 30px; /* change the size to suit your design */ display: block; position: absolute; border-top: solid 3px #f5ee5d; /* change the colour to suit your design */ border-left: solid 3px #f5ee5d; /* change the colour to suit your design */ left: 20px; /* change the position to suit your design */ top: 20px; /* change the position to suit your design */
จากนั้นเพิ่มรหัสต่อไปนี้ลงในช่อง "หลัง":
content:''; height: 30px; /* change the size to suit your design */ width: 30px; /* change the size to suit your design */ display: block; position: absolute; border-bottom: solid 3px #f5ee5d; /* change the colour to suit your design */ border-right: solid 3px #f5ee5d; /* change the colour to suit your design */ right: 20px; /* change the position to suit your design */ bottom: 20px; /* change the position to suit your design */
เมื่อคุณได้เพิ่มข้อมูลโค้ดเหล่านี้ลงในโมดูลแล้ว คุณจะเห็นรูปทรงใหม่ที่สวยงามของเราเพิ่มเข้ามา
หากคุณสงสัยว่า CSS นี้ทำอะไร จริงๆ แล้วค่อนข้างง่าย สิ่งที่เราทำคือสร้างสี่เหลี่ยมโปร่งใสที่วางตำแหน่งห่างจากด้านบนและซ้าย (และด้านล่างและขวา) 20px ของโมดูลข้อความ จากนั้นเราเพิ่มสองเส้นขอบให้กับสี่เหลี่ยมเหล่านี้เพื่อสร้างเอฟเฟกต์ลูกศร
เมื่อคุณพอใจกับรูปลักษณ์ของโมดูลข้อความแรกนี้ เพียงคัดลอกและวางเพื่อเติมคอลัมน์อื่นๆ และเปลี่ยนเนื้อหาข้อความ พื้นหลัง และสไตล์ให้เหมาะสม
โบนัสของวิธีนี้คือใช้งานได้กับโมดูล Divi แทบทุกชนิดที่มีการปรับแต่งเล็กน้อย หากคุณต้องการจินตนาการมากขึ้น ให้ลองเพิ่ม CSS เพิ่มเติมเพื่อหมุน เอียง และปรับแต่งองค์ประกอบ ::before และ ::after ให้ดียิ่งขึ้นไปอีก มีความสุข!
ตัวอย่างที่ 3 การเพิ่มไอคอนและคำอธิบายให้กับชื่อแท็บ
ภายในการออกแบบนี้ เราจะใช้ประโยชน์จากความสามารถในการเพิ่มไอคอนรูปภาพก่อนเนื้อหาที่มีอยู่ รวมทั้งคำอธิบายข้อความขนาดเล็กด้านล่าง เหมาะอย่างยิ่งสำหรับการปรับแต่งโมดูลแท็บ Divi ให้ไกลกว่าปกติเล็กน้อย
หมายเหตุ – แม้ว่าการเพิ่มเนื้อหาผ่าน css นั้นยอดเยี่ยมสำหรับการออกแบบ แต่ก็ไม่ได้จัดทำดัชนีโดยเครื่องมือค้นหา (แม้ว่าที่จริงแล้ว Google จะทำดัชนีเนื้อหา CSS และ Javascript แต่ใช้เวลานานกว่ามากและไม่น่าเชื่อถือในปัจจุบัน เครื่องมือค้นหาเช่น Bing และ DuckDuckGo ทำ ไม่สร้างดัชนีเนื้อหานี้เลย) ด้วยเหตุผลนี้ เนื้อหาของคุณควรมีน้อย และคุณไม่ควรพึ่งพาเนื้อหานั้นเพื่อมีอิทธิพลต่อศักยภาพในการจัดอันดับของคุณ
เราจะสร้างอะไร:
ก่อนอื่นเราต้องเพิ่มส่วนมาตรฐานและแถว 1 คอลัมน์ ตามด้วยโมดูลแท็บ Divi ภายในโมดูลแท็บ เราเพียงแค่เพิ่มชื่อและเนื้อหาของเราในแต่ละแท็บ เนื่องจากเราจะจัดการสไตล์ในขั้นตอนต่อไป
เมื่อเนื้อหาของเราพร้อมแล้ว เราต้องเริ่มเพิ่มเนื้อหาลงในองค์ประกอบ ::before ของโมดูล เนื่องจากเราไม่สามารถเพิ่ม CSS ที่กำหนดเองลงในแท็บเฉพาะโดยใช้วิธีที่เราได้ปฏิบัติตามข้างต้น เราจึงต้องดำเนินการให้แตกต่างกันเล็กน้อย
เปิดตัวเลือกโมดูลแท็บและภายในแท็บขั้นสูงให้โมดูลคลาส "แท็บแฟนซี"
เมื่อคุณเพิ่มคลาส CSS นี้แล้ว เราต้องเตรียมการเล็กน้อย ในการเพิ่มไอคอนหรือรูปภาพให้กับชื่อแท็บของคุณ เราจำเป็นต้องเพิ่มสิ่งเหล่านี้ใน WordPress อย่างชัดเจน ไปที่แท็บสื่อในแดชบอร์ด WordPress และอัปโหลดไอคอนที่คุณเลือกตามปกติ
เมื่ออัปโหลดรูปภาพแล้ว เราจำเป็นต้องคลิกแต่ละภาพและคัดลอก URL ที่ WordPress สร้างขึ้นให้เรา ดูรูปภาพแต่ละภาพของคุณแล้วคัดลอกและวาง URL เหล่านี้ลงในเอกสารหรือแอปพลิเคชันบันทึกย่อที่คุณเลือก
ด้วย URL ของรูปภาพที่คุณเลือก ให้ไปที่ตัวเลือกธีม Divi ภายในเมนู Divi ในแดชบอร์ด WordPress
ที่ด้านล่างของหน้านี้ คุณจะเห็นกล่องที่คุณสามารถเพิ่ม CSS ที่กำหนดเองได้ ในช่องนี้เราจะวางโค้ด CSS บางส่วน
ตัวอย่างต่อไปนี้จะเพิ่มรูปภาพเหนือชื่อแท็บแต่ละแท็บ เพียงคัดลอกและวางข้อมูลโค้ดนี้ลงในช่อง CSS ที่กำหนดเอง และแทนที่เนื้อหาระหว่าง (และรวมถึง) เครื่องหมายดอกจัน (เช่น *แทนที่ด้วย URL สำหรับรูปภาพแรกของคุณ*) ด้วย URL ที่คุณระบุไว้ก่อนหน้านี้
.fancy-tabs .et_pb_tab_0 a::before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::before {
content: url(*Replace this with the URL for your second image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::before {
content: '' !important; }
หากคุณกลับไปที่หน้าโดยเปิดโมดูลแท็บ คุณจะเห็นว่ามีการเพิ่มรูปภาพเหนือแต่ละชื่อ – สำเร็จ!
แล้วการเพิ่มคำอธิบายล่ะ? โชคดีที่สิ่งนี้ค่อนข้างง่ายเช่นกัน ด้านล่างโค้ดที่คุณเพิ่งคัดลอกลงในกล่อง CSS ที่กำหนดเอง ให้วางสิ่งต่อไปนี้
.fancy-tabs .et_pb_tab_0 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::after {
content: '' !important; }
เช่นเดียวกับรูปภาพของคุณ คุณจะต้องแทนที่ "นี่คือคำอธิบาย" ด้วยเนื้อหาของคุณเอง เมื่อกลับมาที่หน้าที่มีโมดูลแท็บของคุณ คุณจะเห็นว่าตอนนี้เรามีคำอธิบายที่สวยงามเช่นกัน!
สุดท้ายนี้ เราแค่ต้องใช้ CSS เพิ่มอีกเล็กน้อยเพื่อให้ได้การออกแบบที่สมบูรณ์ดังที่แสดงด้านบน อีกครั้ง ให้คัดลอกข้อมูลโค้ดต่อไปนี้ลงในกล่อง CSS แบบกำหนดเองเดียวกัน:
.fancy-tabs .et_pb_tab_content a:after {
content: '' !important; }
.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
.fancy-tabs .et_pb_tabs_controls li a {
width: 100% !important;
text-align: center;
}
@media (max-width: 768px) {
.fancy-tabs .et_pb_tabs_controls li {
width: 100% !important;
}
.fancy-tabs .et_pb_tabs_controls {
padding: 0 !important;
}
}
โค้ดนี้จะจัดข้อความและรูปภาพของแท็บให้อยู่ตรงกลาง และเพิ่มความกว้างของแท็บเพื่อให้ครอบคลุมทั้งโมดูล
เรายังเพิ่ม CSS บางส่วนเพื่อให้แน่ใจว่าแท็บจะดูดีบนอุปกรณ์ทั้งหมด หากคุณไม่ต้องการให้มีแท็บเต็มความกว้างและสแต็กบนมือถือ เราจะต้องย้อนกลับและล้อมรอบโค้ด CSS ดั้งเดิมในคิวรี่สื่อ ซึ่งหมายความว่าในอุปกรณ์ที่มีขนาดเท่ากับแท็บเล็ตและในวงกว้าง เราจะเพิ่มคำอธิบายและไอคอน อย่างไรก็ตาม สำหรับอุปกรณ์ขนาดเล็ก เราจะเปลี่ยนกลับเป็นสไตล์เริ่มต้นของ Divi
ในการดำเนินการนี้ ให้คัดลอกโค้ด CSS ที่แก้ไขด้านล่างแล้ววางลงในพื้นที่ CSS ที่กำหนดเองของคุณในแผงตัวเลือกธีม Divi:
@media (min-width: 769px) {
.fancy-tabs .et_pb_tab_0 a::before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::before {
content: url(*Replace this with the URL for your second image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::before {
content: '' !important; }
.fancy-tabs .et_pb_tab_0 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::after {
content: '' !important; }
.fancy-tabs .et_pb_tab_content a:after {
content: '' !important; }
.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
.fancy-tabs .et_pb_tabs_controls li a {
width: 100% !important;
text-align: center;
}
}
กำลังเพิ่มแท็บเพิ่มเติม
ในตัวอย่างนี้ เราได้สร้างโมดูลแท็บที่มี 2 แท็บที่แตกต่างกัน อย่างไรก็ตาม ในทางปฏิบัติบางครั้งเราต้องการมากกว่านี้ หากคุณอยู่ในตำแหน่งที่ต้องการสร้างแท็บมากกว่า 2 แท็บ เราจะต้องแก้ไขโค้ดที่คุณเพิ่งเพิ่มเข้าไป
ดังที่คุณเห็นจากข้อมูลโค้ด Divi จะกำหนดคลาสให้กับชื่อแท็บแต่ละแท็บโดยอัตโนมัติ โดยครั้งแรกเริ่มต้นด้วย 0 (.et_pb_tab_0) เพิ่มขึ้น 1 ในแต่ละครั้ง (.et_pb_tab_1, .et_pb_tab_2 และอื่นๆ) เราได้ดูแลสองแท็บแรกแล้ว ดังนั้นเมื่อเพิ่มมากขึ้น เราสามารถคัดลอกและวางส่วนของโค้ดสำหรับแท็บใหม่ทุกแท็บ:
.fancy-tabs .et_pb_tab_0 a:before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
}
และเปลี่ยนหมายเลขในคลาส (.et_pb_tab_0) เป็น 2, 3, 4 เป็นต้น คุณจะต้องทำเช่นเดียวกันกับคำอธิบายของคุณด้วย
การแก้ไขขั้นสุดท้ายที่เราต้องทำคือการปรับ CSS อีกหนึ่งบรรทัด ใช้จำนวนแท็บของคุณแล้วหารด้วย 100 จดตัวเลขนี้และไปที่ส่วนต่อไปนี้ใน CSS ที่กำหนดเองของคุณ:
.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
และเปลี่ยน 50% เป็นคำตอบของคุณ เพื่อให้แน่ใจว่าแท็บของคุณมีระยะห่างเท่ากันตลอดความกว้างของโมดูล
ตัวอย่างเช่น หากคุณกำลังสร้างแท็บที่สาม โค้ด CSS เพิ่มเติมที่คุณต้องการจะเป็นดังนี้:
.fancy-tabs .et_pb_tabs_controls li {
width: 33% !important;
}
ในการปิด
เรามีสามวิธีที่ยอดเยี่ยมในการใช้องค์ประกอบ CSS ::before และ ::after เพื่อสร้างความเป็นไปได้ในการออกแบบใหม่ หวังว่าคู่มือนี้จะสร้างแรงบันดาลใจให้คุณสำรวจว่าคุณสามารถใช้องค์ประกอบเทียมในการสร้างสรรค์ในอนาคตได้อย่างไร โอกาสไม่มีที่สิ้นสุดจริงๆ!