3 Point Beautiful CSS’nin Divi menünüze ekleyebileceğiniz etkileri
Menünüz, ziyaretçilerin web sitenizi ziyaret ettiklerinde gördükleri ilk şeylerden biridir, bu yüzden bazı stillere sahip olmak istersiniz, değil mi? Tabii ki! Bu yüzden bugünün yazısında, özel CSS ile menünüze bazı iyi vuruş efektleri eklemenin üç yolunu paylaşacağım. Hover etkisi pürüzsüz olmalı, görsel ilgi istiyoruz, ancak sitenin en önemli kısmı, içeriğiniz değil. Bu, divi navigasyonunuza doğru miktarda “pop” ekleyecektir. Yalnızca iyi bir seri etkisi eklemekle kalmayacağız, aynı zamanda etkin sayfa bağlantısına uygulanan bazı stiller de olacaktır. Örneğin, kullanıcı verandadaysa, menüdeki veranda bağlantısında uygulanan bir tür küçük tasarım tedavisi olacaktır. Bu, kullanıcılara sitede nerede olduklarını hatırlatmak için web sitesine dahil edilecek yaygın bir görsel işaretleyicidir. Bu kesinlikle gerekli değildir, ancak bu biraz UX’e yardımcı olur.
Başlayalım! 3 Divi menünüze ekleyebileceğiniz güzel CSS’nin etkileri YouTube kanalımıza abone olun İlk tema ayarını ayarlayın, tüm stiller için varsayılan ayarları başlık biçimi için kullanacağız. Divi’yi yeni yüklediyseniz, bu ayarı yapılandırmanız gerekmez, otomatik olarak düzenlenmelidir.
İçerik: “”;
Pozisyon: Mutlak;
Z-index: 2;
Sol: 0;
Sağ: 0;
}
#Top-Menu Li A: Önce {
İçerik: “”;
Pozisyon: Mutlak;
Z -index: -2;
Sol: 0;
Doğru:%100;
Alt:%50;
Arka plan: #15BF86; /*** çizginin rengi ***/
Yükseklik: 3px; /*** çizginin kalınlığı ***/
-Webkit-Transition-Profession: Doğru;
Geçiş-property: doğru;
-Webkit-Transition süresi: 0.3s;
Geçiş süresi: 0.3s;
-Webkit-Transition-Timing-Fonction: kolaylık;
Geçiş-zamanlama fonksiyonu: kolaylık;
}
#Top-Menu Li A: Hover {
Opaklık: 1! Önemli;
}
#Top-Menu Li A: Hover: Önce {
Sağ: 0;
}
#Top-Menu Li Li A: Önce {
Alt:%10;
}
Style Two Two-A kalınlığında “Kutu” ekran Bu menü tarzında aşağıda bir satır ile, değişen fare menü öğesinin altındaki menü bölümünden aşağı hareket eden “kutular” ın bir taslağını koyacağız. Ayrıca tıknaz kutuyu etkin menü bağlantısına yerleştirdi.
İlhamım bu tarzı, yönetici olarak adlandırdığım Divi çocuklarının temasında kullanıyor (gerçek sitedeki gezinen hareketleri görebilmeniz için aşağıdaki demoya bağlanacağım). Görsel olarak bu ilk stil kadar pürüzsüz değil, bunu kullanmak için doğru siteyi seçmek anahtar olacaktır. Yüzen efektler gibi her türlü küçük tasarım detayının sitenin genel tonlarıyla eşleşmesi çok önemlidir. Uygulama Aşağıdaki kodu çocuğunuzun temasının stil sayfasına veya genel sekme seçeneği altındaki CSS Kustom Divi kutusuna ekleyin. Renkleri düzenleme kolaylığını değiştirmesi çok kolaydır, ancak sınırın genişliğini değiştirmeyi planlıyorsanız, CSS’deki diğer numaralarla da oynamanız gerektiğini göreceksiniz.#Top-Menu Li> A: Hover { Box-Shadow: 0 10px 0 0 #F15A29! Önemli; /*** Hatta Hatta Rengi ve Kalınlığı ***/
Dolgu Alt: 34px;
Opaklık: 1! Önemli;
}
#Top-Menu Li A {
Pilding Alt: 6px! Önemli;
}
#Top-menu li.current-menu-item> a,
.et-Fixed-Header #Top-Menu li.current-menu-item> a {
Sınır: 10px katı #f15a29; /*** Kutunun rengi ve kalınlığı ***/
Dolgu: 10 piksel;
Marj -bottom: -10px;
}
Stil Üç – Arka Plan -Katlantısı Bu Menü Stili Menü öğesini koordineli bir vuruş rengine sahip bir düğmeye dönüştürür. Ayrıca etkin menü bağlantısına ayrı bir renk daha verir.
Bu ilham, elbette düğmenin navigasyon görüntüsünü gerçekten sevdiğim düğmelerden ilham aldı. Ayrıca neredeyse tüm sitelerde çalışabilen oldukça çok yönlü bir ekran olan tek bir stil gibi düşünüyorum. Arka plan rengini değiştirmek de oldukça kolaydır. Uygulama Yukarıdaki diğer iki stil gibi, çocuğunuzun tema stili sayfasına veya Divi Genel Tema Ayarları sekmesindeki özel bir CSS kutusuna özel bir CSS kodu eklemek istersiniz. Yorumlanan kod bölümünün yanındaki değeri ayarlayarak kendi ayarlarınızı ve koddaki (renk gibi) değişiklikler yapabilirsiniz.
.et_header_style_left .et-fixed-header #et-top-navigation nav> ul> Li> a {
}
#Top-Menu Li {
Dolgu-sağ: 5px;
}
#ET-TOP-Navigation {
Dolgu: 20px 0! Önemli;
}
#Top-Menu Li A {
Arka plan: #c1b2ab; /*** arka plan rengini değiştirir ***/
Dolgu: 15px 20px;
Border-Radius: 3px;
}
#Top-Menu Li A: Hover,
#Top-Menu Li Li A: Hover {
Renk: #fff! Önemli;
}
#Top-Menu Li A: Hover {
Arka plan: #559CAD! Önemli; /*** Hover /**/Arka plan rengini değiştirir ***/
}
#Top-Menu li.current-menu-item> a {
Arka plan: #EDC77B; /*** Geçerli sayfa bağlantısının arka plan rengini değiştirir ***/
}
#Top-Menu. Menü-öğe-hildren> A: İlk çocuk: sonra {
İçerik: Yok;
}
“Vahşi” divi sitesinde bu stil örnekleri, doğrudan Divi web sitesinde kullanılan bu stilin (veya çok benzeri) bazı örnekleri.
Tam Asansör Hizmeti
Bu site, başlıktaki başka yerlerde kullanılan ince bir çizgi tedavisine sahiptir, böylece yüzer stili genel ekrana bağlanır, böylece mantıklıdır. Bkz. Asansör Hizmet Sitesi Divi Execution Premium Children Teması Yukarıdaki örnekte olduğu gibi, farklı tasarım öğelerinin birbirini tamamlamaları için sitenin başka bir yerinde kalın çizgi stili kullanılır. Çocukların temasına bakın Execution Premium Divi Web Stüdyosu Hayatta Kaldı
Tamam, bu yüzden her menü bağlantısı için bir düğme kullanan bir site bulmakta zorlanıyorum. CSS’yi sadece bu öğretici için yazdım, ancak Dardure bir bağlantının bir düğmeye benzemesini sağlamak için popüler bir kullanım gösterdi, bu yüzden bu öğreticideki üçüncü stil sadece fikri aldı ve tüm navigasyon bağlantıları için kullandı.
DIVI web sitenizde bir veya hatta tüm Hover menü stilleri için bazı kullanımlar bulabileceğinizi umuyoruz. Bunun gibi öğreticilerden snippet kullanmanın harika bir şeyi, acemi seviyesi kullanıcıların bile bunu kolayca uygulayabilmeleri ve gerçekten özel tasarım teşviki gerektiren en temel siteyi sağlayabilmesidir. Ve teknik olarak hiçbiri gerçekten animasyon işlevini kullansa da, bu nüanslara son zamanlarda çok popüler ve moda olan animasyonlu bir şey gibi verir. Bize aşağıdaki yorumlarda daha sonra ne öğrenmek istediğinizi anlatın. Ve zarif temalardan uygulanması daha kolay olan Divi öğreticilerine abone olduğunuzdan emin olun!
