Bu eğitimde, Elementor Sekmeleri (Elementor Tab) başlıklarına nasıl yatay kaydırma ekleyeceğinizi göstereceğim. Elementor sekme bileşenini mobil versiyonu ne yazıkki iyi değil ve tasarım olarak kötü görünüyor. Soldan sağa kaydırılabilir bir tasarımı bu yazıda sizlere açıkladım. Mobil cihazlarda harika çalışıyor. Facebook uygulamaları bunu kullanıyor, Uber Eats, YouTube, neden siz kullanmıyorsunuz?
Başlangıç olarak, sekmelerinizi istediğiniz gibi oluşturun
Burada, Elementor ile varsayılan olarak gelenleri kullanıyoruz. Bu, hem eski sekme öğesiyle hem de doğrudan içeriğine öğe eklenmesine izin veren yenisiyle çalışır.
Ardından, elementor sekme bileşeninde Advanced > Custom CSS (Gelişmiş > Özel CSS) menüsünden aşağıda paylaştığım özel CSS kodunu ekleyin.
Kaydırmalı Sekme CSS Kodları (Scroll for Mobile CSS Code)
.elementor-tab-title.elementor-tab-mobile-title {
display: none;
}
.elementor .elementor-element .elementor-tabs-wrapper {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
margin-right: -10px;
}
.elementor-tabs-wrapper::-webkit-scrollbar {
height: 0;
}
.elementor-tab-title {
flex: 0 0 auto;
}
.elementor-tab-desktop-title.elementor-active:before,
.elementor-tab-desktop-title.elementor-active:after {
width: 0!important;
}
/* Masaüstü scroll bar stili */
@media (min-width:1025px){
.elementor-tabs-wrapper::-webkit-scrollbar-track {
background-color: #b6b6b6;
}
.elementor-tabs-wrapper::-webkit-scrollbar {
height: 8px;
background-color: #F4f4f4;
}
.elementor-tabs-wrapper::-webkit-scrollbar-thumb {
background-color: #0000008f;
}
}Elementor Tab Tasarımınını Geliştirmek
Bir web tasarımcısı olarak, CSS bilmek kariyeriniz için oyunun kurallarını değiştirebilir . İşte bazı nedenler:
Geliştirilmiş tasarım yetenekleri : Güçlü bir CSS anlayışıyla, rekabette öne çıkan, görsel olarak çarpıcı ve ilgi çekici tasarımlar oluşturabilirsiniz. Benzersiz düzenler oluşturmak, animasyonlar eklemek ve web sitelerinizin görünümünü müşterilerinizin marka kimliklerine uyacak şekilde özelleştirmek için CSS’yi kullanabilirsiniz.
