Herhangi bir WordPress sitesinde yalnızca özel CSS ve HTML ile güzel Fırsatlar sayfası nasıl oluşturulur?

Yayınlanan: 2019-01-10

WordPress sitesinde güzel Fırsatlar Sayfası Nasıl Oluşturulur

Herhangi bir noktada, piyasada mevcut binlerce fırsat var. Kumaşlar, mobilyalar, yardımcı programlar ve ayrıca WordPress eklentileri, temalar, hizmetler, barındırma vb.

Fırsatlar sayfası oluşturmak, tüm blog yazarlarının hayallerinden biridir. Güzel Fırsatlar sayfası oluşturmanıza yardımcı olacak birkaç eklenti var.

Fırsatlar sayfasına baktınız mı? https://crunchify.com/deals/.
Kısa süre önce Fırsatlar sayfamızı farklı bir formatta güncelledik, ancak bu eğitim hala güzel Fırsatlar sayfası oluşturuyor ve mükemmel çalışıyor.

Değilse, kontrol edin ve ne düşündüğünüzü bana bildirin. Crunchify'da bu özel Fırsatlar sayfasını oluşturduk. Herhangi bir özel eklenti kullanmadık. Yalnızca özel CSS'ye dayalı olarak oluşturulmuştur.

Benzer özel Fırsatlar sayfası oluşturmak istiyorsanız doğru yerdesiniz. Hepiniz için çok benzer bir sayfa oluşturmak için CSS ve HTML kodunu gözden geçireceğiz.

Başlayalım:

1. Adım CSS (style.css)

WordPress temasının style.css dosyasını açın ve içine aşağıdaki kodu ekleyin.

/* 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

}

Yukarıdaki CSS kodu, fırsatlar bölümünüz için güzel bir düzen oluşturacaktır.

Crunchify'da FontAwesome yazı tiplerini kullanıyoruz. Bu yüzden el ok simgesi geliyor. WordPress temanıza Font Awesome eklemek istiyorsanız, ayrıntılı FontAwesome eğitimini izleyin.

2. Adım (HTML sayfası)

Pages Git
Add New tıklayın
Yeni Full width sayfası oluştur
Aşağıdaki kodu sayfanın HTML bölümüne koyun
Dosyayı kaydet

< 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 >

Yukarıdaki kod sizin için 4 farklı Fırsat bölümü ekleyecektir. Bağlantıyı ve resmi gerektiği gibi değiştirin.

Yukarıdaki kodu temanıza eklerken herhangi bir sorunla karşılaşırsanız bana bildirin.