วิธีสร้างหน้าข้อเสนอที่ดีด้วย CSS และ HTML ที่กำหนดเองบนไซต์ WordPress ใด ๆ

เผยแพร่แล้ว: 2019-01-10

วิธีสร้างหน้าข้อเสนอที่ดีบนเว็บไซต์ WordPress

ณ จุดใดก็ตาม มีข้อเสนอมากมายในตลาด ข้อเสนอเกี่ยวกับเสื้อผ้า เฟอร์นิเจอร์ สาธารณูปโภค และปลั๊กอิน WordPress ธีม บริการ โฮสติ้ง และอื่นๆ

การสร้างหน้าดีลเป็นหนึ่งในความฝันของบล็อกเกอร์ทุกคน มีปลั๊กอินอยู่สองสามตัวที่ช่วยคุณสร้างหน้าข้อเสนอที่ดี

คุณได้ตรวจสอบหน้าข้อเสนอ? https://crunchify.com/deals/.
เราเพิ่งอัปเดตหน้าดีลด้วยรูปแบบที่แตกต่างกันไป แต่บทช่วยสอนนี้ยังคงสร้างหน้าดีลที่ดีและทำงานได้อย่างสมบูรณ์

ถ้าไม่ลองดูและแจ้งให้เราทราบว่าคุณคิดอย่างไร บน Crunchify เราได้สร้างหน้าข้อเสนอที่กำหนดเองนี้ เราไม่ได้ใช้ปลั๊กอินที่กำหนดเองใดๆ สร้างขึ้นตาม CSS ที่กำหนดเองเท่านั้น

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

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

ขั้นตอนที่ 1 CSS (style.css)

เปิดไฟล์ style.css ของธีม WordPress และเพิ่มโค้ดด้านล่างลงไป

/* For Deals Box */

div . crunchify - panel {

float : left ;

width : 43 % ;

margin : 25px ;

padding : 35px 30px 30px 30px ;

border : 1px solid #ececec;

font - size : 15px ;

position : relative ;

box - shadow : 0 1px 4px rgba ( 0 , 0 , 0 , . 3 ) , 0 0 40px rgba ( 0 , 0 , 0 , . 1 ) inset ;

height : 420px

}

div . crunchify - panel img {

border : 1px solid #e8e8e8

}

/* For Rectangle Dotted box */

. crunchify - deals - coupon {

border : 2px dashed #dd7127;

padding : 3px 3px 5px 8px ;

border - radius : 5px ;

color : #464646;

font - size : 13px ;

display : inline - block ;

margin - bottom : 15px ;

width : 100 % ;

}

. crunchify - deals - coupon : : before {

font - size : 18px ;

vertical - align : top ;

content : "\f0a4" ;

font - family : "Font Awesome 5 Free" ;

color : #b11f24;

margin : 5px 10px ;

}

. crunchify - deals - coupon : hover {

border : 2px solid #dd7127;

text - decoration : none

}

โค้ด CSS ด้านบนจะสร้างเลย์เอาต์ที่ดีสำหรับส่วนดีลของคุณ

เรากำลังใช้ฟอนต์ FontAwesome บน Crunchify นั่นเป็นเหตุผลที่ไอคอนลูกศรมือมาจาก หากคุณต้องการเพิ่ม Font Awesome ให้กับธีม WordPress ของคุณ ให้ทำตามบทช่วยสอน FontAwesome โดยละเอียด

ขั้นตอนที่ 2 (หน้า HTML)

ไปที่ Pages
คลิกที่ Add New
สร้างหน้า Full width ใหม่
ใส่โค้ดด้านล่างลงในส่วน HTML ของหน้า
บันทึกไฟล์

< div class = "crunchify-panel" >

< a href = "https://crunchify.me/genesis" target = "_blank" rel = "noopener noreferrer" > < img class = "size-full aligncenter" src = "https://cdn.crunchify.com/wp-content/uploads/2017/08/GenesisWP-Crunchify-Deals.png" alt = "Genesis WordPress Framework Logo" width = "100" height = "100" / > < / a >

< h3 style = "text-align: center;" > < a href = "https://crunchify.me/genesis" target = "_blank" rel = "noopener noreferrer" > Genesis WP < / a > < / h3 >

< p style = "text-align: center;" > Best WordPress design frameworks . Quickly and easily build incredible websites - < a href = "https://crunchify.com/crunchify-co-moved-to-genesis-framework-thesis-vs-genesis/" target = "_blank" rel = "noopener noreferrer" > Details < / a > < / p >

< / div >

< div class = "crunchify-panel" >

< a href = "https://crunchify.me/wp-engine" target = "_blank" rel = "noopener noreferrer" > < img class = "aligncenter size-full" src = "https://cdn.crunchify.com/wp-content/uploads/2017/08/WP-Engine-Crunchify-Deals.png" alt = "WP Engine" width = "100" height = "100" / > < / a >

< h3 style = "text-align: center;" > < a title = "Premium WordPress Themes that Work" href = "https://crunchify.me/wp-engine" target = "_blank" rel = "noopener noreferrer" > WP Engine < / a > < / h3 >

< p style = "text-align: center;" > Crunchify and WP Engine have teamed up to give you a special offer . Vibrant and Fully Managed WordPress Hosting < / p >

< div class = "crunchify-deals-coupon" > < b > 25 % < / b > off Coupon : < a href = "https://crunchify.me/wp-engine" target = "_blank" rel = "noopener noreferrer" > crunchify25 < / a > < / div >

< / div >

< div class = "crunchify-panel" >

< a href = "https://www.stackpath.com/products/cdn/" target = "_blank" rel = "noopener noreferrer" > < img class = "size-full aligncenter" src = "https://cdn.crunchify.com/wp-content/uploads/2017/08/MaxCDN-Crunchify-Deals.png" alt = "MaxCDN Logo" width = "100" height = "100" / > < / a >

< h3 style = "text-align: center;" > < a href = "https://www.stackpath.com/products/cdn/" target = "_blank" rel = "noopener noreferrer" > MaxCDN < / a > < / h3 >

< p style = "text-align: center;" > One of the best CDN for WordPress & used at Crunchify . MaxCDN speeds up your website - < a href = "https://crunchify.com/maxcdn-content-delivery-network-and-crunchify-exclusive-coupon-code-crunchify/" target = "_blank" rel = "noopener noreferrer" > Steps < / a > < / p >

< div class = "crunchify-deals-coupon" > < b > 25 % < / b > off Coupon : < a href = "https://www.stackpath.com/products/cdn/" target = "_blank" rel = "noopener noreferrer" > CRUNCHIFY < / a > < / div >

< / div >

< div class = "crunchify-panel" >

< a href = "https://crunchify.me/bluehost" target = "_blank" rel = "noopener noreferrer" > < img class = "size-full aligncenter" src = "https://cdn.crunchify.com/wp-content/uploads/2017/08/BlueHost-Crunchify-Deals.png" alt = "Bluehost Logo" width = "100" height = "100" / > < / a >

< h3 style = "text-align: center;" > < a href = "https://crunchify.me/bluehost" target = "_blank" rel = "noopener noreferrer" > Bluehost < / a > < / h3 >

< p style = "text-align: center;" > One of the largest and most trusted web hosting services powering millions of site - < a href = "https://crunchify.com/bluehost-wordpress-hosting/" target = "_blank" rel = "noopener noreferrer" > Steps < / a > < / p >

< div class = "crunchify-deals-coupon" > Upto < b > 40 % < / b > off link : < a href = "https://crunchify.me/bluehost" target = "_blank" rel = "noopener noreferrer" > Click here < / a > < / div >

< / div >

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

แจ้งให้เราทราบหากคุณประสบปัญหาใดๆ ในการใส่โค้ดด้านบนลงในธีมของคุณ