Modüller Nasıl Tasarlanır Divi’nin doğasında var olan sosyal medyayı takip edin
Divi’nin varsayılan macun seçenekleriyle, kullanıcı sayfayı eğittiğinde sosyal ağ simgesinin ön planda kalmasını sağlayacak yapışkan sosyal medyayı takip etmek için modülleri kolayca tasarlayabilirsiniz. Ayrıca, modüle yapışkan bir durumda özel bir stil ekleyerek, kaydırmalarda yapışkan durumu kullanırken benzersiz bir tasarım geçişi oluşturabiliriz. Yani, yapışkan bir sosyal medya düğmesi tasarımının tasarımı üzerinde tam bir kontrol arıyorsanız, bu öğretici sizin için uygundur! Aşağıdaki gizlice göz atma, bu öğreticide yapacağımız tasarımın bir bakış. Bu öğreticiden bir tasarım almak için düzeni ücretsiz indirin, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmelere erişmek için, aşağıdaki formu kullanarak Divi Daily E -posta listemize abone olmanız gerekir. Yeni bir müşteri olarak, her Pazartesi daha fazla Divi’nin iyi ve ücretsiz Divi düzen paketleri alacaksınız! Zaten listede iseniz, e -posta adresinizi aşağıya girin ve İndir’i tıklayın. “Abone olmayacak” veya ek e -postalar almayacaksınız.
Dosyayı indir
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Parçanın düzenini Divi kütüphanenize aktarmak için YouTube kanalımıza abone olun, Divi kütüphanesine gidin. İçe Aktar düğmesini tıklayın. Taşınabilirlik açılır penceresinde, İçe Aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin. Ardından İçe Aktar düğmesini tıklayın.
Bittiğinde, parçanın düzeni Divi Builder’da mevcut olacak. Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacın var Başlamak için aşağıdakileri yapmanız gerekir: Değilse, divi temasını yükleyin ve etkinleştirin.
WordPress’te yeni bir sayfa oluşturun ve ön taraftaki sayfaları düzenlemek için Divi Builder’ı kullanın (görsel yapımcı).
“Başından Uyan” seçeneğini seçin.
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak.
Modüller Tasarlama Divi’nin doğasında var olan sosyal medyayı takiben başlamak için yapılan daha önce yapılmış sayfaların düzenini kullanarak, yapışkan sosyal medyayı takip eden modüller tasarlamadan önce bazı yapay sayfa içeriğine ihtiyacımız var. Bunu yapmak için Ayarlar menüsünü açın ve Kütüphaneden Yükleme simgesini tıklayın. Kütüphaneden yükleme açılır penceresinden, moda tasarımcının yön sayfasının düzenini bulun ve seçin. Ardından “Bu düzeni kullan” yeşil düğmesini tıklayın.
Bölümün düzene yeni bir düzenli bölüm eklemesini sağlayın. Ardından, sayfanın en üstüne yeni bir parça taşıyın (veya sosyal medyanızı takip etmek için bir bağlantı eklemek istediğiniz yere). Bölüm ayarlarını açın ve arka plan rengini düzeni aşağıdaki gibi eşleştirecek şekilde güncelleyin: Arka plan rengi: #fff9f2
Tasarım sekmesinin altında dolgu bölümünü güncelleyin: Dolgu: 10 piksel üst 10 piksel aşağıda
İçeride bir satır yapın, bir sütun satır ekleyin. Satır ayarlarını açın ve boyut ve alanı aşağıdaki gibi güncelleyin: Özel Talang genişliğini kullanın: Yalebar Talang: 1
Genişlik:% 100
Maksimum genişlik:% 100
Dolgu: 0px üst, 0px aşağıda
Modüller Yapma Parça ve satır yer aldıktan sonra doğal sosyal medyayı takip edin, yeni sosyal medyayı hatta takip etmek için modüller ekleyin.
Modül Ayarlarını Güncelleme Modül Ayarlarını Açın Sosyal Medya’yı takip edin. Yapmamız gereken ilk şey, divi yapışkan seçeneğini kullanarak modüle yapışkan bir konum eklemektir. Gelişmiş sekmesi altında aşağıdakileri güncelleyin: Yapışkan pozisyon: tepeye sadık kalın Yapışkan pozisyon yerine geldikten sonra, modül stilini yapışkan durumda hedefleyebilirsiniz (Hover durumunda yapabileceğiniz gibi). Bu, imleci seçeneğe yönlendirerek ve küçük resim simgesini tıklayarak yapılabilir.
Tasarım sekmesinin altında aşağıdakileri güncelleyin: Modül hizalaması: merkez
Renk simgesi: #000 (masaüstü), #fff (nokta imleç), #fff (yapışkan)
Genişlik:% 100
Maksimum genişlik:% 100
Dolgu: 20 piksel üst, 12px alt, 10 piksel sol, 10px sağ
Sosyal Ağ Ayarları Modül ayarları hazır olduktan sonra, dikkatimizi bireysel sosyal ağ simgelerinin düzenlemesine yönlendirebiliriz. Bunu yapmak için önce bir sosyal ağ simgesi ayarlayacağız. Sonra başkalarını yapmak için sosyal ağları çoğaltacağız.
Varsayılan içerik sekmesi altında zaten iki sosyal ağınız olmalıdır. Bunlardan birini silin ve kalanları düzenlemek için tıklayın.
Sosyal Ağ: Tiktok (veya ne istersen) Arka plan: şeffaf (masaüstü), #fe2c55 (yüzer), #000 (yapışkan)
İpuçları: Arka plan rengi, sosyal ağ markasına uyacak şekilde otomatik olarak değişecektir. Bu rengi kopyalayabilir ve simge için yüzen durumun arka plan rengi olarak ekleyebilirsiniz. Bu, imleci simgeye yönlendirirken varsayılan sosyal ağın arka plan rengini gösterecektir. Şimdi üç durumun arka plan rengini (masaüstü, havada ve yapışkan) görmek için sekmeyi değiştirebilirsiniz.
Sonra, iyi bir oval şekil simgesi verelim ve düzeni eşleştirme sınırı biraz daha iyi. Tasarım sekmesinin altında aşağıdakileri güncelleyin:
Yuvarlak açı:% 50 Sınır Genişliği: 1 piksel Renk Sınırı: #000 (masaüstü), şeffaf (nokta imleci)
Şu anda simgenin bir daire şekli var. Daha oval bir şekil elde etmek için sağa ve sola daha fazla dolgu ekleyebiliriz. Simgeler arasında sağ ve sol kenar boşlukları arasında daha fazla alan yapabiliriz. Tabletteki alanı ve cep telefonunun görünümünü de güncellediğinizden emin olun.
Marj (masaüstü): 15px sol, 15px sağ
Marj (yapışkan): 0px sol, 0px sağ Marj (telefon): 0px sol, 0px sağ
Dolgu (masaüstü): 16px sol, 16px sağ
Dolgu (Tablet): 14px sol, 14px sağ
Dolgu (cep telefonu): 0px sol, 0px sağ
Yinelenen sosyal ağlar, ilk sosyal ağ tasarımını bitirdikten sonra daha fazlasını yapmak için, daha fazlasını yapmak için ikonları çoğaltabiliriz. Bunu yapmak için, sosyal medyayı takip etmek için modül ayarlarını açın ve sosyal ağ öğelerindeki kopya simgesini tıklayın. Bu örnek için 4 tane daha yapalım.
Şimdi, tek yapmamız gereken her yeni sosyal ağ öğesini yeni sosyal ağlarla güncellemek. Bu, arka plan rengini değiştireceğinden, arka plan rengini de güncellemeniz gerekir. Bunu yapmak için ikinci sosyal ağ ayarlarını açın ve aşağıdakileri güncelleyin:
Sosyal Ağ: Facebook Arka plan rengi: şeffaf (masaüstü), #3B5998 (nokta imleci) Diğer sosyal ağları güncellemek için aynı sürece devam edin.
Nihai sonuç şimdi doğrudan sayfadaki sonucuna bakalım. Simgeler, daha benzersiz tasarım ve geçiş için yapışkan durumda dikey olarak hizalanmış sosyal medyayı takip etmek, yapışkan durum etkinleştirildiğinde sosyal medyayı dikey olarak takip etmek için simgeleri uyumlu hale getirebiliriz. Bunu yapmak için modüle birkaç CSS parçası ekleyebiliriz.
Gelişmiş sekmesi altında, yapışkan durumdaki ana öğelere aşağıdaki CSS ekleyin. Ekran: Flex;
Esnek yönlendirme: sütun; Hizalama-öğeler: merkez; Gerekçelendirme: Merkez;
Genişlik: Otomatik! Önemli; Ardından, yapışkan durumdaki sosyal simgeye aşağıdaki CSS ekleyin. Marj-sağ: 0;
Sonuç bu! Ağ simgesini doğru duruma göre uyumlu hale getirmek için, yapışkan durumdaki ana öğeden mevcut CSS altına aşağıdakileri ekleyin: Sol: Otomatik! Önemli;
Sağ: 0;
