¿Cómo crear una buena página de ofertas con solo CSS y HTML personalizados en cualquier sitio de WordPress?

Publicado: 2019-01-10
Cómo crear una buena página de ofertas en el sitio de WordPress

En un momento dado, hay miles de ofertas disponibles en el mercado. Ofertas en telas, muebles, utilidades y también en complementos, temas, servicios, alojamiento, etc. de WordPress.

La página de creación de ofertas es uno de los sueños de todos los bloggers. Existen algunos complementos que lo ayudan a crear una buena página de ofertas.

¿Has echado un vistazo a la página de ofertas? https://crunchify.com/ofertas/.

Recientemente hemos actualizado nuestra página de ofertas con un formato diferente, pero este tutorial aún genera una buena página de ofertas y funciona perfectamente.

Si no, échale un vistazo y déjame saber lo que piensas. En Crunchify, hemos creado esta página de Ofertas personalizada. No hemos utilizado ningún complemento personalizado. Construido solo en base a CSS personalizado.

Si desea crear una página de ofertas personalizada similar, entonces se encuentra en el lugar correcto. Repasaremos el código CSS y HTML para crear una página muy similar para todos ustedes.

Empecemos:

Paso 1 CSS (estilo.css)

Abra el archivo style.css de su tema de WordPress y agréguele el siguiente código.

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
}

El código CSS anterior creará un diseño agradable para su sección de ofertas.

Estamos usando fuentes FontAwesome en Crunchify. Es por eso que viene el icono de la flecha de la mano. Si desea agregar Font Awesome a su tema de WordPress, siga el tutorial detallado de FontAwesome.

Paso 2 (página HTML)

  • Ir a Pages
  • Haga clic en Add New
  • Crear nueva página de Full width
  • Coloque el código debajo de la sección HTML de la página
  • Guardar el archivo
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 >

El código anterior agregará 4 secciones de Ofertas diferentes para usted. Simplemente reemplace el enlace y la imagen según sea necesario.

Avíseme si tiene algún problema al colocar el código anterior en su tema.