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ü

Açılış bölümümüz kahramanlık bölümüdür. Burada dikkat edilmesi gereken ilk şey başlıktır. Bu alana çok çaba harcamanızı öneririm çünkü ilk yapacağınız şey bu. ziyaretçi görecek.
Vermeyi düşündüğünüz mesajı tam olarak düşünün. Başlığınızın büyük ve net olması insanların dikkatini çekecektir. Bu ilk bölüm ayrıca kullanıcıları aşağı kaydırmaya ve sayfanın geri kalanına göz atmaya teşvik etmelidir.

Neon etkisi

Efekt neon siyah Cuma elementor.jpg

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

Ana gönderi üzerinde çalışmayı bitirdikten sonra, metni canlandırmak için arka planda çalışmaya başlayın ve 80'lerin retro bilimkurgunun gerçeğe dönüşmesini sağlayın. Buraya Photoshop'ta tasarlanmış bir görüntü ekledim ve bunu bir kahraman arka planı olarak kullandım.
Bu tasarımda arka planda, sola yaslanan palmiye ağaçlarının dokunuşuyla Tron'u anımsatan geometrik bir ızgara ve bu retro hissi elde etmek için mavi-mor-pembe ana gradyan bulunuyor. "DeLorean DMC-12" gibi bazı hoş dokunuşlar da var (Muhtemelen Geleceğe Dönüş'te tanıyacaksınız).
Kayan yıldızların yanı sıra otomobil, bölümümüzün ana metnini hedefleyerek ana mesajımızı vurguladı.

Özellikler bölümü

bilgi kutusu elementor.gif
Bir açılış sayfası tasarlarken, her bölüm arasındaki ilişkileri düşünmeniz gerekir. Retro 80'ler gibi modaya uygun bir tasarım söz konusu olduğunda daha karmaşık bir görevdir.
Bu yüzden, şaşırtıcı bir ilk bölüm tasarladıktan ve çıtayı yükselttikten sonra, her bölümü kendi içinde bir kompozisyon olarak değerlendirirken, yüksek seviyede tutmalı ve aynı tasarım temasını korumalısınız.

Tasarım

Bu bölümde, biz sayfayı "taradıkça" daha koyu bir "bilinmeyen nesneler" görünümü tasarladım. Burada bir başlık, 3 madde işareti ve bir düğme görebilirsiniz. Bu kayan 3B efekti oluşturmak için, Flip-box ayarlarıyla birlikte biraz Photoshop kullandım.Elementor.

Photoshop'ta Aşamalı

Yani yaptığım ilk şey, Photoshop'ta tüm sahneyi oluşturarak, onu oluşturmaya başlamadan önce her şeyin neye benzeyeceğini görmek oldu. Başlıkta neon ışıkların görünümünü daha önce görebilirsiniz ve altına simgeler ve bir başlık (daireler) içeren 3 üçgen ekledim.
Her üçgene bir mavi-mor-pembe gradyan ekledim. Üstünde, bir çizgi deseni, ışıltılı bir bilim kurgu görünümü oluşturmak için ona 80'lerin TV görünümü ve arkasında bir bulanıklık verir.
Simgeler ayrıca, üçgenin altındaki başlığın yanı sıra neon bir görünüm alır. Kalın yazıyla yüzen bir efekt ekleyin. Arka plan, üçgen için kullanılan aynı çizgi deseni ile dumanlı, bulutlu ve karanlık bir etkiye sahiptir.
3B animasyon için, üçgenlerin şeffaf bir arka planı olacaktır. Bu, arkadaki metnin kapatılmadığı zaman gösterileceği anlamına gelir. Bu yüzden, battaniyenin karışması ve arkasını örtmesi için üçgenin kenarlarına biraz siyah duman ekledim.
Yani temelde düzenleyiciye eklenecek üç katman vardır: arka plan, simge ve başlık.

Canlı yayınla

Editörde, flip-box widget'ını ekledim. Ön içerik sekmesinde, grafik öğesi olarak bir resim seçtim ve başlığı ekledim. Arkaplan sekmesinde, Renkli'de rengi şeffaf olarak değiştirdim ve tasarladığım üçgeni görüntü bölümüne ekledim, ardından mükemmel uyacak şekilde konumunu değiştirdim .
Daha sonra arka sekmede de aynısını yaptım ancak başlık eklemek yerine metni ekledim. Ayarlar sekmesine geçmek için. Burada kutunun yüksekliğiyle oynadım. VH ünitesini kullandım çünkü göreceli bir ünitedir ve görüntüyü ekrana göre değiştirir. ziyaretçi kullanacak.
Bu, onu daha duyarlı hale getirir. Efektler bölümünde, bu inanılmaz 3D efekti elde etmek için Çevir efektini tuttum, yönü sola değiştirdim ve 3D derinliği etkinleştirdim.

CTA

Buradaki kompozisyonun tamamı butona yöneliktir (çünkü istediğiniz şey kullanıcının butona tıklamasıdır). Burada, düğmenin cesur olmadığını ve 'yüzünüzde' olmadığını, ancak etrafındaki küçük bir parıltıyla dumanlı arka planla güzelce karıştığını görebilirsiniz. Ama üzerinden geçtiğinizde pembe renk belirir.

Eleştirmenler Bölümü

yorum listesi elementor.jpg
Kullanıcı üçüncü bölüme geçerse - bu, bir şeyi doğru yaptığınız anlamına gelir. Yani, ürün ve şaşkınlığı hakkında konuştuktan sonra, şimdi başka bir tarafın konuşma zamanı.

Tasarım

Bu bölümde radikal bir geometrik arka planda neon başlıklı bir yorum widget'ımız var. Arka plan Photoshop'ta tasarlandı ve ardından kayan bir vurgulu efekti oluşturmak için bölümün arka planına sabit bir arka plan olarak yerleştirildi.
Bu bölümün 'perde arkasına' bakmasını istedim, böylece aşağı kaydırdığınızda ona maruz kalırsınız.

Fiyat tablosu bölümü

fiyat grafiği elementor.jpg
Bu bölüm bölümdür Fiyat tablosu . Burada satışı destekleyebilecek tüm ürünleri görebilirsiniz. Başlık, geri sayım ve tabii ki - fiyat tablosu.
Bu, açılış sayfasının bitiş çizgisidir. Bu nedenle, kullanıcınız tıklamazsa, bir şeyler ters gitti.

Tasarım

Bu bölümdeki tasarımda birden fazla UAF ile 80'ler-galaksi. Buradaki arka plan Photoshop'ta düzenlendi ve ona parlak turp moru bir görünüm verdi ve sonunda bir yumruk atmadan önce var olan siyah-siyah arka plandan sıyrıldı.
Başlığın ve sloganın altında, satışın sonuna kadar kalan süreyi gösteren bir sayaç var. Burada özel yazı tipi seçeneğiyle eklediğim 'boşluk mono' adlı bir spacy yazı tipi kullandım.
Aşağıdaki fiyat tablosunda, her bir tablonun "uzayda yüzer" görünümü veren açık siyah bir arka planı vardır. Üzerine geldiğinizde, arka plan kararır ve odak noktası olarak sizi içindeki metni okumaya yönlendiren bir parıltı vardır.
Fare imlecini düğmenin üzerine getirdiğinizde, düğme rengi tekrar değişir. Harika çekimlerimizle ilgili bilgileri okuduktan sonra,

Bu tamamen harika bir model olsun

Bu eğitimde gösterilen şablon artık kitaplıkta mevcuttur Elementor. Yani tek tıkla kullanabilirsiniz.