Как создать красивую страницу со скидками, используя только настраиваемые CSS и HTML, на любом сайте WordPress?

Опубликовано: 2019-01-10
Как создать красивую страницу со скидками на сайте WordPress

В любой момент на рынке доступны тысячи предложений. Скидки на одежду, мебель, коммунальные услуги, а также на плагины WordPress, темы, услуги, хостинг и так далее.

Страница «Создание сделок» — мечта всех блоггеров. Есть несколько плагинов, которые помогут вам создать красивую страницу со скидками.

Вы просматривали страницу со скидками? https://crunchify.com/deals/.

Недавно мы обновили нашу страницу «Сделки» в другом формате, но этот учебник по-прежнему создает красивую страницу «Сделки» и работает отлично.

Если нет, проверьте это и дайте мне знать, что вы думаете. На Crunchify мы создали эту пользовательскую страницу сделок. Мы не использовали никаких пользовательских плагинов. Создан только на основе пользовательского CSS.

Если вы хотите создать аналогичную пользовательскую страницу «Предложения», то вы попали по адресу. Мы рассмотрим код CSS и HTML, чтобы создать очень похожую страницу для всех вас.

Давайте начнем:

Шаг 1 CSS (style.css)

Откройте файл style.css вашей темы WordPress и добавьте в него приведенный ниже код.

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
}

Приведенный выше код CSS создаст красивый макет для вашего раздела сделок.

Мы используем шрифты FontAwesome на Crunchify. Вот почему значок со стрелкой в ​​виде руки исходит от. Если вы хотите добавить Font Awesome в свою тему WordPress, следуйте подробному руководству FontAwesome.

Шаг 2 (HTML-страница)

  • Перейти к Pages
  • Нажмите Add New
  • Создать новую страницу Full width
  • Поместите ниже код в раздел HTML страницы
  • Сохранить файл
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 >

Приведенный выше код добавит для вас 4 разных раздела «Сделки». Просто замените ссылку и изображение по мере необходимости.

Дайте мне знать, если у вас возникнут проблемы с добавлением вышеуказанного кода в вашу тему.