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 글꼴을 사용하고 있습니다. 그래서 손 화살표 아이콘이 나오는 것입니다. WordPress 테마에 Font Awesome을 추가하려면 자세한 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개의 다른 거래 섹션을 추가합니다. 필요에 따라 링크와 이미지를 교체하기만 하면 됩니다.

위의 코드를 테마에 추가하는 데 문제가 있으면 알려주십시오.