80'lerin tasarımı - onu seviyoruz! Tüm bu geometrik şekiller, uzamsal arka planlar ve neon ışık efektleriyle, özel bir etkinlik (Noel partileri) için açılış sayfamız daha parlak olamazdı! Bize nasıl yapılacağını gösterelim.
Saç bantlarınızı çıkarın, neon ışıklarınızı açın ve Tron'u VCR'ınıza takın ... 80 yıl geri döndü!
Bir tasarımcı olarak, 80'lerin tasarımında her zaman kimsenin bahsetmediği bir zaafım oldu. Tüm bu geometrik şekillerle, tonlarca desenle, bu ucuz neon efektli uzamsal arka planlarla (sevimli anıları geri getirmelidir).
Aslında onu her yerde görebilirsiniz. Netflix, MineCraft veya Muse'dan "Strangers Things", 80'lerin tadına sahip bir albüm çıkardı - hatta Tron'un yeniden yapımı.
O halde neden bu trendden yararlanıp, şununla oluşturulmuş bir açılış sayfasında nasıl uygulayacağınızı göstermiyorsunuz. Elementor ?
Bu sadece teorik bir öğretici değildir. Gelecekteki etkinliklerinize hazırlanmanız için size araçlar sağlamak üzere mevcut indirim dönemi (Kara Cuma) için bazı unsurlar aldık.
Açılış bölümü
Neon etkisi
Kompozisyonun ortasına logoyu, mesajı ve düğmeyi yerleştirdim.
Gördüğünüz gibi en önemli mesaj "neon ışık" ile yazılmış. Bu neon görünümü elde etmek için tasarımınıza CSS eklemeniz gerekir. CSS, metne çok fazla pembe gölge ekleyecektir. Hepsi bu.
Bu nedenle, bir başlık widget'ı eklemeniz, parlaması için seçilen yazı tipinin boyutunu değiştirmeniz ve rengi beyaza ayarlamanız gerekir.
Ardından Gelişmiş sekmesini açın ve özel CSS sekmesine yapıştırın, şu kodu ekleyin:
selector { text-shadow: 0 0 20px #fff, 0 0 10px #fff, 0 0 50px #ff0fad, 0 0 50px #ff0fad, 0 0 40px #ff0fad, 0 0 100px #ff0fad, 0 0 75px #ff0fad; }
Pembenin yanında farklı bir gölge kullanmak istiyorsanız, pound işaretinden sonraki renk numarasını değiştirmeniz yeterlidir. Bu kadar.
Dikey başlık
Bu tasarımın bir başka ilginç yönü de "FRI" harflerinin yanında, ona eklenen yıl dikey olarak (90 derece) görünüyor.
Bu görünümü elde etmek için bir iç bölüm widget'ı eklemeniz gerekir. Bu, dikey efektin yalnızca bir sütuna uygulanması için yapılır.
İç bölümü ekledikten sonra, her sütuna bir başlık widget'ı ekleyin.
Metninizin stilini belirleyin ve ardından ikinci sütunun (döndürmek istediğiniz) gelişmiş sekmesini açın ve özel CSS sekmesine şu kodu yazın:
selector { float: left; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); }
80 retro arka plan
Özellikler bölümü
Tasarım
Photoshop'ta Aşamalı
Canlı yayınla
CTA
Eleştirmenler Bölümü
Tasarım
Fiyat tablosu bölümü
Tasarım
Bu tamamen harika bir model olsun
Bu eğitimde gösterilen şablon artık kitaplıkta mevcuttur Elementor. Yani tek tıkla kullanabilirsiniz.