Cum să creezi o pagină frumoasă de oferte cu numai CSS și HTML personalizate pe orice site WordPress?

Publicat: 2019-01-10
Cum să creezi o pagină de oferte frumoase pe site-ul WordPress

În orice moment, există mii de oferte disponibile pe piață. Oferte pe cârpe, mobilier, utilități și, de asemenea, pe pluginuri WordPress, teme, servicii, găzduire și așa mai departe.

Crearea paginii de oferte este unul dintre visurile tuturor bloggerilor. Există câteva plugin-uri care vă ajută să creați o pagină frumoasă de oferte.

Ai verificat pagina Oferte? https://crunchify.com/deals/.

Am actualizat recent pagina noastră de Oferte cu un format diferit, dar acest tutorial generează încă o pagină frumoasă de Oferte și funcționează perfect.

Dacă nu, verifică-l și spune-mi ce părere ai. Pe Crunchify, am creat această pagină personalizată de oferte. Nu am folosit niciun plugin personalizat. Construit numai pe baza CSS personalizat.

Dacă doriți să creați o pagină de Oferte personalizată similară, atunci sunteți în locul potrivit. Vom trece peste codul CSS și HTML pentru a crea o pagină foarte asemănătoare pentru voi toți.

Să începem:

Pasul 1 CSS (style.css)

Deschideți fișierul style.css al temei WordPress și adăugați codul de mai jos în el.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/* 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
}

Codul CSS de mai sus va crea un aspect frumos pentru secțiunea dvs. de oferte.

Folosim fonturi FontAwesome pe Crunchify. De aceea, pictograma săgeată de mână vine de la. Dacă doriți să adăugați Font Awesome la tema dvs. WordPress, urmați tutorialul detaliat FontAwesome.

Pasul 2 (pagina HTML)

  • Accesați Pages
  • Faceți clic pe Add New
  • Creați o nouă pagină Full width
  • Pune codul de mai jos în secțiunea HTML a paginii
  • Salvează fișierul
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
< 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 &amp; 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 >

Codul de mai sus va adăuga 4 secțiuni diferite de Oferte pentru tine. Doar înlocuiți linkul și imaginea după cum este necesar.

Anunțați-mă dacă vă confruntați cu vreo problemă la punerea codului de mai sus în tema dvs.