如何在任何 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 个不同的交易部分。只需根据需要替换链接和图像。

如果您在将上述代码放入主题时遇到任何问题，请告诉我。