如何在任何 WordPress 網站上僅使用自定義 CSS 和 HTML 創建漂亮的交易頁面？

已發表: 2019-01-10

在任何時候，市場上都有數以千計的交易可用。布料、家具、公用事業以及 WordPress 插件、主題、服務、託管等方面的交易。

創建交易頁面是所有博主的夢想之一。很少有插件可以幫助您創建漂亮的交易頁面。

您查看過交易頁面嗎？ https://crunchify.com/deals/。
我們最近用不同的格式更新了我們的交易頁面，但是本教程仍然可以生成漂亮的交易頁面並且可以完美運行。

如果沒有，請檢查一下，讓我知道您的想法。在 Crunchify 上，我們創建了這個自定義交易頁面。我們沒有使用任何自定義插件。僅基於自定義 CSS 構建。

如果您想創建類似的自定義交易頁面，那麼您來對地方了。我們將檢查 CSS 和 HTML 代碼，為大家創建非常相似的頁面。

讓我們開始吧：

第 1 步 CSS (style.css)

打開您的 WordPress 主題的 style.css 文件並將以下代碼添加到其中。

/* 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 代碼將為您的交易部分創建漂亮的佈局。

我們在 Crunchify 上使用 FontAwesome 字體。這就是手形箭頭圖標的來源。如果您想將 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 個不同的交易部分。只需根據需要替換鏈接和圖像。

如果您在將上述代碼放入主題時遇到任何問題，請告訴我。