В любой момент на рынке доступны тысячи сделок. Предложения на одежду, мебель, утилиты, а также на плагины 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
|
/ * Для предложения Box * /
дела. crunchify — панель {
плавать : слева ;
ширина : 43 % ;
поле : 25 пикселей ;
набивка : 35px 30px 30px 30 пикселей ;
граница : 1px твердый #ececec;
размер шрифта : 15 пикселей ;
положение : родственник ;
коробка — тень : 0 1px 4px ргба ( 0 , 0 , 0 , , 3 ) , 0 0 40px ргба ( 0 , 0 , 0 , , 1 ) вставка ;
высота : 420px
}
дела. crunchify — панель IMG {
граница : 1px твердый # e8e8e8
}
/ * Для прямоугольника пунктирной рамки * /
, crunchify — предложения — купон {
граница : 2px пунктирная # dd7127;
набивка : 3px 3px 5px 8 пикселей ;
граница — радиус : 5 пикселей ;
цвет : # 464646;
размер шрифта : 13 пикселей ;
дисплей : inline — блок ;
поле — снизу : 15 пикселей ;
ширина : 100 % ;
}
, crunchify — сделки — купонные:: до {
размер шрифта : 18 пикселей ;
вертикальный — выровнять : верх ;
содержание : / f0a4 ;
font — family : «Font Awesome 5 Free» ;
цвет : # b11f24;
поле : 5px 10 пикселей ;
}
, crunchify — предложения — купон : hover {
граница : 2px твердый # dd7127;
текст — оформление : никто
}
|
Выше 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 >
< а href = https: //crunchify.local/go/genesis target = _blank rel = noopener noreferrer > < img class = центр выравнивания по размеру src = https: //crunchify.local/wp-content/uploads/2017/08/GenesisWP-Crunchify-Deals.png alt = Genesis WordPress Framework Logo ширина = 100 высота = 100 / > < / a >
< h3 style = text-align: center; > < a href = https: //crunchify.local/go/genesis target = _blank rel = noopener noreferrer > Genesis WP < / a > < / h3 >
< р style = text-align: center; > Лучший WordPress рамки дизайна. Быстро и легко создавать невероятные сайты — < а href = https: //crunchify.local/crunchify-co-moved-to-genesis-framework-thesis-vs-genesis/ target = _blank rel = noopener noreferrer > Подробности < / a > < / p >
< / div >
< div class = crunchify-panel >
< а href = https: //crunchify.local/go/wpengine target = _blank rel = noopener noreferrer > < img class = aligncenter size-full src = https: //crunchify.local/wp-content/uploads/2017/08/WP-Engine-Crunchify-Deals.png alt = WP Engine ширина = 100 высота = 100 / > < / a >
< h3 style = text-align: center; > < a title = Премиум темы WordPress, которые работают href = https: //crunchify.local/go/wpengine target = _blank rel = noopener noreferrer > WP Engine < / a > < / h3 >
< р style = text-align: center; > Хруст и WP двигатель объединился, чтобы дать вам специальное предложение. Яркий и Полностью управляемый хостинг WordPress < / p >
< div class = crunchify-сделок-купон > < b > 25 % < / b > купон выключен : < а href = https: //crunchify.local/go/wpengine target = _blank rel = noopener noreferrer > crunchify25 < / a > < / div >
< / div >
< div class = crunchify-panel >
< а href = https: //crunchify.local/go/maxcdn target = _blank rel = noopener noreferrer > < img class = центр выравнивания по размеру src = https: //crunchify.local/wp-content/uploads/2017/08/MaxCDN-Crunchify-Deals.png alt = Логотип MaxCDN ширина = 100 высота = 100 / > < / a >
< h3 style = text-align: center; > < a href = https: //crunchify.local/go/maxcdn target = _blank rel = noopener noreferrer > MaxCDN < / a > < / h3 >
< р style = text-align: center; > Один из лучших CDN для WordPress & амп; используется в Crunchify . MaxCDN ускоряет свой веб — сайт — < а href = https: //crunchify.local/maxcdn-content-delivery-network-and-crunchify-exclusive-coupon-code-crunchify/ target = _blank rel = noopener noreferrer > Шаги < / a > < / p >
< div class = crunchify-сделок-купон > < b > 25 % < / b > купон выключен : < а href = https: //crunchify.local/go/maxcdn target = _blank rel = noopener noreferrer > CRUNCHIFY < / a > < / div >
< / div >
< div class = crunchify-panel >
< а href = https: //crunchify.local/go/bluehost target = _blank rel = noopener noreferrer > < img class = центр выравнивания по размеру src = https: //crunchify.local/wp-content/uploads/2017/08/BlueHost-Crunchify-Deals.png alt = Логотип Bluehost ширина = 100 высота = 100 / > < / a >
< h3 style = text-align: center; > < a href = https: //crunchify.local/go/bluehost target = _blank rel = noopener noreferrer > Bluehost < / a > < / h3 >
< р style = text-align: center; > Один из крупнейших и большинство доверенных веб — хостинга Powering миллионы сайта — < а href = https: //crunchify.local/bluehost-wordpress-hosting/ target = _blank rel = noopener noreferrer > Шаги < / a > < / p >
< div class = crunchify-сделок-купон > Upto < b > 40 % < / b > от ссылки : < а href = https: //crunchify.local/go/bluehost target = _blank rel = noopener noreferrer > Нажмите здесь < / a > < / div >
< / div >
|
Выше код добавит 4 различных раздела сделок для вас. Просто замените ссылку и изображение по мере необходимости.
Дайте мне знать, если вы столкнетесь с какой-либо проблемой, добавив код выше в вашу тему.
0.00 (0%) 0 votes
