Построить красивые веб-сайты WordPress, используя Divi и Divi Builder

Как добавить пользовательские ленты на WordPress с помощью элементаора

Muneeb Учебные пособия по WordPress May 1, 2021

Ленты визуально приятный способ сделать объявление на вашем сайте. Хотя Есть много ситуаций, когда вы можете использовать ленты, но вы часто найдете их с продаж, скидки, или из фондовой объявления на Woocommerce магазинов.

Ленты используются, чтобы рассказать посетителю о продаже или скидку, как только они приходят на ваш сайт. В этом учебнике мы поймем, как вы можете добавить ленты с помощью Элементор.

Почему вы должны использовать ленты?

Ленты являются отличным способом мгновенно привлечь посетителей, когда вы делаете объявление. Например, вы объявили скидку на определенный продукт, а затем применить ленту скидки на миниатюру этого продукта, он сразу же заставить пользователя нажать на продукт.

Ленты визуально привлекательным при использовании определенным образом. Они могут помочь пользователю пройти через несвязанные продукты и улучшить конверсии и продажи вашего сайта.

Скачать Divi Лучшая тема WordPress

Самая популярная тема WordPress в мире и Ultimate Page Buildress Page Builder

Скачать Divi

Как добавить пользовательские ленты с помощью elementor

Чтобы начать процесс, вам нужно добавить внутренний раздел, где мы добавим виджеты.

Далее вам нужно будет перетащить столбец в разделе. Для этого учебника мы будем использовать одну колонку структуры.

Как только вы сделали с настройками выше, вы можете пойти дальше и создать название для вашей ленты.

Для следующего шага перейти к классам CSS в расширенной вкладке и добавить "gc-ribbon-стиль" в этой области.

Ниже, что вам нужно будет добавить следующие пользовательские CSS.

.gc-ribbon-style {
text-shadow: 0em 0em 0.3em rgba(0,0,0,0.2);
background: #61CE70;
color: #ffffff;
font-size: 17px;
display: block;
width: calc(100% + 20px);
height: 50px;
line-height: 50px;
text-align: center;
margin-left: -10px;
margin-right: -10px;
position: relative;
top: 0px;
Z-index:10;
}

.gc-ribbon-style:before {
border-top: 10px solid #63a06c;
content: "";
position: absolute;
height: 0;
width: 0;
bottom: -10px;
left: 0;
border-left: 10px solid transparent;
}

.gc-ribbon-style:after {
border-top: 10px solid  #63a06c;
content: "";
position: absolute;
height: 0;
width: 0;
right: 0;
bottom: -10px;
border-right: 10px solid transparent;
}

Вы почти закончили. Опубликовать его и проверить свой сайт, чтобы увидеть, как это работает.

Это, как вы можете добавить ленты к вашей продукции с помощью Элементор. Убедитесь в том, чтобы присоединиться к нам на нашем Facebook и Twitter, чтобы продолжать получать частые обновления о нашем содержании.

Share Your Thoughts