В настройках стандартного слайдера Elementor нет возможности менять иконки элементов управления листания слайдов и настройки их позиций. Ниже показан код стилей CSS, который помогает настроить вид слайдера так, как вам хочется.
.custom-slider-button {
--font-family:Manrope;
--font-weight:600;
--line-height:30px;
--button-width:56px;
--button-background:#FF8800;
--arrow-left:'<'; --arrow-right:'>';
--padding-button:10px 45px 10px 45px;
}
.custom-slider-button .elementor-slides-wrapper .elementor-swiper-button i, .custom-slider-button .elementor-slides-wrapper .elementor-swiper-button svg {
display: none;
}
.custom-slider-button .elementor-slides-wrapper .elementor-swiper-button {
font-family: var(--font-family);
font-weight: var(--font-weight);
line-height: var(--line-height);
width: var(--button-width);
z-index: 99;
}
.custom-slider-button .elementor-slides-wrapper .elementor-swiper-button::before {
padding: var(--padding-button);
background: var(--button-background);
}
.custom-slider-button .elementor-slides-wrapper .elementor-swiper-button-next::before {
content: var(--arrow-right);
border-left: solid #fff .5px;
}
.custom-slider-button .elementor-slides-wrapper .elementor-swiper-button-prev::before {
content: var(--arrow-left);
border-right: solid #fff .5px;
}
.custom-slider-button .elementor-slides-wrapper .elementor-swiper-button-next {
top: 100%!important;
transform: translate(-39px,-50px)!important;
}
.custom-slider-button .elementor-slides-wrapper .elementor-swiper-button-prev {
left: 100%!important;
top: 100%!important;
transform: translate(-210px,-50px)!important;
}
--button-background, --arrow-left, --arrow-right, --padding-button), которые позволяют легко изменять внешний вид кнопок.display: none; отключают стандартные иконки стрелок (если они добавлены как i или svg).font-family, font-weight, line-height и width.::before используются для отображения кастомных иконок, а также задания фона и отступов..elementor-swiper-button-next сдвигается вниз..elementor-swiper-button-prev сдвигается вправо и вниз.transform: translate(), чтобы точнее позиционировать кнопки относительно слайдера..custom-slider-button к вашему слайдеру в Elementor.--button-background, --arrow-left, --arrow-right) или другие переменные для настройки индивидуального внешнего вида кнопок.Этот метод позволяет легко стилизовать элементы управления слайдером в Elementor без использования сторонних плагинов или сложных решений.
© 2026 Сайтнаэлементор.рф