Jak stworzyć fajną stronę z ofertami tylko z niestandardowym CSS i HTML w dowolnej witrynie WordPress?

Opublikowany: 2019-01-10
Jak stworzyć fajną stronę z ofertami w witrynie WordPress

W dowolnym momencie na rynku dostępne są tysiące ofert. Oferty na ubrania, meble, narzędzia, a także wtyczki WordPress, motywy, usługi, hosting i tak dalej.

Tworzenie strony z ofertami to jedno z marzeń wszystkich blogerów. Istnieje kilka wtyczek, które pomogą Ci stworzyć fajną stronę z ofertami.

Czy sprawdziłeś stronę z ofertami? https://crunchify.com/deals/.

Niedawno zaktualizowaliśmy naszą stronę z ofertami o inny format, ale ten samouczek nadal generuje ładną stronę z ofertami i działa doskonale.

Jeśli nie, sprawdź to i daj mi znać, co myślisz. W Crunchify utworzyliśmy tę niestandardową stronę z ofertami. Nie użyliśmy żadnej niestandardowej wtyczki. Zbudowany wyłącznie w oparciu o niestandardowy CSS.

Jeśli chcesz stworzyć podobną niestandardową stronę z ofertami, jesteś we właściwym miejscu. Przeanalizujemy kod CSS i HTML, aby stworzyć dla Was bardzo podobną stronę.

Zacznijmy:

CSS Step-1 (style.css)

Otwórz plik style.css motywu WordPress i dodaj do niego poniższy kod.

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
}

Powyższy kod CSS stworzy ładny układ dla Twojej sekcji ofert.

W Crunchify używamy czcionek FontAwesome. Dlatego pochodzi ikona strzałki ręki. Jeśli chcesz dodać Font Awesome do swojego motywu WordPress, postępuj zgodnie ze szczegółowym samouczkiem FontAwesome.

Krok 2 (strona HTML)

  • Przejdź do Pages
  • Kliknij Add New
  • Utwórz nową stronę Full width
  • Umieść poniższy kod w sekcji HTML strony
  • Zapisz plik
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 >

Powyższy kod doda dla Ciebie 4 różne sekcje ofert. Wystarczy wymienić link i obraz w razie potrzeby.

Daj mi znać, jeśli napotkasz problem z umieszczeniem powyższego kodu w swoim motywie.