Cara membuat halaman gaya gaya 80 dengan Elementor

Desain tahun 80-an - kami menyukainya! Dengan semua bentuk geometris, latar belakang spasial, dan efek lampu neon, halaman arahan kami untuk acara khusus (pesta Natal) tidak bisa lebih bersinar! Mari kita tunjukkan bagaimana melakukannya.

Lepaskan ikat kepala Anda, nyalakan lampu neon Anda dan masukkan Tron ke VCR Anda ... tahun-tahun 80 telah kembali!

Sebagai seorang desainer, saya selalu memiliki titik lemah untuk desain tahun 80-an yang tidak dibicarakan siapa pun. Dengan semua bentuk geometris ini, berton-ton pola, latar belakang ruang dengan efek neon murah itu (seharusnya mengembalikan kenangan indah).

Nyatanya, Anda bisa melihatnya dimana-mana. Dari "Strangers Things" dari Netflix, MineCraft atau Muse yang baru saja merilis album dengan rasa tahun 80-an - atau bahkan remake dari Tron.

Jadi mengapa tidak memanfaatkan tren ini dan menunjukkan cara menerapkannya di halaman arahan yang dibuat dengan Elementor ?

Ini bukan hanya tutorial teoritis. Kami telah mengambil beberapa elemen untuk periode diskon saat ini (Black Friday), untuk memberi Anda alat untuk mempersiapkan acara mendatang Anda.

Bagian pembukaan

Bagian pembuka kami adalah bagian pahlawan. Hal pertama yang perlu diperhatikan di sini adalah judulnya. Saya sarankan melakukan banyak upaya dalam bidang ini karena ini adalah hal pertama yang Anda lakukan pengunjung akan melihat.

Pikirkan tentang pesan persis yang ingin Anda sampaikan. Judul yang besar dan jelas akan menarik perhatian orang. Bagian pertama ini juga harus mendorong pengguna untuk menggulir ke bawah dan menjelajahi sisa halaman.

Efek neon

Di tengah komposisi, saya menempatkan logo, pesan, dan tombol.

Anda dapat melihat bahwa pesan terpenting tertulis dalam "lampu neon". Untuk mendapatkan tampilan neon itu, Anda perlu menambahkan CSS ke desain Anda. CSS akan menambahkan banyak bayangan merah muda ke teks. Itu semuanya.

Jadi Anda perlu menambahkan widget tajuk, mengubah ukuran font yang dipilih untuk membuatnya bersinar dan mengatur warnanya menjadi putih.

Kemudian buka tab Advanced dan rekatkan ke tab CSS kustom, tambahkan kode ini:

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; }

Jika Anda ingin menggunakan warna berbeda di sebelah merah muda, ubah saja nomor warna setelah tanda pagar. Itu saja.

Judul vertikal

Aspek menarik lainnya dari desain ini muncul di sebelah huruf "FRI", dengan tahun yang menyertainya muncul secara vertikal (90 derajat).

Untuk mendapatkan tampilan ini, Anda perlu menambahkan widget bagian interior. Ini dilakukan untuk menerapkan efek vertikal hanya pada satu kolom.

Setelah menambahkan bagian dalam, tambahkan widget judul ke setiap kolom.

Style teks Anda dan kemudian buka tab lanjutan dari kolom kedua (yang ingin Anda putar) dan di tab CSS khusus tulis kode ini:

selector { float: left; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); }

80 latar belakang retro

Setelah Anda selesai mengerjakan posting utama, mulailah mengerjakan latar belakang untuk memberi dorongan pada teks dan membuat fiksi ilmiah era 80-an menjadi kenyataan. Di sini saya menambahkan gambar yang dirancang di Photoshop dan menggunakannya sebagai latar belakang pahlawan.

Dalam desain ini, latar belakang menampilkan kisi geometris yang mengingatkan pada Tron dengan sentuhan pohon palem yang condong ke kiri dan gradien utama biru-ungu-merah muda untuk mencapai kesan retro itu. Ada juga beberapa sentuhan bagus seperti "DeLorean DMC-12" (Anda mungkin akan mengenalinya di Back to the Future).

Mobil, serta bintang jatuh, semua menargetkan teks utama bagian kami, menyoroti pesan utama kami.

Bagian fitur

Saat mendesain halaman arahan, Anda perlu memikirkan tentang hubungan antara setiap bagian. Ini adalah tugas yang lebih rumit dalam hal desain modis seperti retro 80-an.

Jadi, setelah mendesain bagian pertama yang menakjubkan dan menaikkan bilah, Anda harus mempertahankan level tinggi dan mempertahankan tema desain yang sama, sambil mempertimbangkan setiap bagian sebagai komposisi.

Disain

Di bagian ini, saya mendesain tampilan "objek tidak dikenal" yang lebih gelap saat kita "merangkak" halaman. Di sini Anda dapat melihat judul, 3 peluru, dan sebuah tombol. Untuk membuat efek 3D mengambang ini saya menggunakan sedikit Photoshop dalam kombinasi dengan pengaturan Flip-box dariElementor.

Dipentaskan di Photoshop

Jadi, hal pertama yang saya lakukan adalah membuat seluruh pemandangan di Photoshop untuk melihat seperti apa semuanya sebelum saya mulai membuatnya. Dalam judul Anda dapat melihat tampilan neon dari sebelumnya, dan di bawahnya saya menambahkan 3 segitiga dengan ikon dan judul (lingkaran).

Saya menambahkan gradien biru-ungu-merah muda ke setiap segitiga. Di atasnya, pola garis memberikan tampilan TV tahun 80-an dan buram di belakangnya, untuk menciptakan tampilan sci-fi yang berkilau.

Ikon-ikon tersebut juga mendapatkan tampilan neon, serta judul di bagian bawah segitiga. Tambahkan efek mengambang dalam huruf tebal. Latar belakang memiliki efek smoky, cloudy, dan dark dengan pola garis yang sama dengan yang digunakan untuk segitiga.

Untuk animasi 3D, segitiga akan memiliki latar belakang transparan. Artinya, teks di belakang akan muncul jika tidak tertutup. Jadi saya menambahkan sedikit asap hitam ke sisi segitiga untuk membuat selimut menyatu dan tetap menutupi bagian belakang.

Jadi pada dasarnya ada tiga lapisan untuk dibangun ke dalam editor: latar belakang, ikon, dan judul.

Bangun secara langsung

Di editor, saya menambahkan widget flip-box. Di tab konten depan, saya memilih gambar sebagai elemen grafis dan menambahkan judul. Di tab Background, di color, saya mengubah warna menjadi transparan dan menambahkan segitiga yang saya rancang di bagian gambar, kemudian mengubah posisinya sehingga pas dengan sempurna .

Kemudian di tab belakang saya melakukan hal yang sama tetapi alih-alih menambahkan judul saya menambahkan teks. Untuk pindah ke tab pengaturan. Di sini saya bermain dengan ketinggian kotak. Saya menggunakan satuan VH karena merupakan satuan relatif, yang akan mengubah gambar relatif terhadap layar pengunjung akan menggunakan.

Ini membuatnya lebih responsif. Di bagian efek, saya mempertahankan efek Flip, mengubah arah ke kiri dan mengaktifkan kedalaman 3D untuk mencapai efek 3D yang menakjubkan ini.

CTA

Seluruh komposisi di sini ditujukan ke tombol (karena yang Anda inginkan adalah pengguna mengklik tombol). Di sini Anda dapat melihat bahwa tombolnya tidak tebal dan 'di wajah Anda', tetapi menyatu dengan baik dengan latar belakang berasap dengan sedikit kilau di sekitarnya. Tapi saat Anda berjalan di atasnya, warna merah jambu muncul.

Bagian Kritik

Jika pengguna menggulir ke bagian ketiga - itu berarti Anda melakukan sesuatu dengan benar. Nah, setelah membicarakan produk dan kekagumannya, kini saatnya pihak lain angkat bicara.

Disain

Di bagian ini kami memiliki widget komentar pada latar belakang geometris radikal dengan judul neon. Latar belakang dirancang di Photoshop dan kemudian ditempatkan di latar belakang bagian tersebut sebagai latar belakang tetap sehingga menciptakan efek hover scrolling.

Saya ingin membuat bagian ini terlihat 'di belakang layar', sehingga saat Anda menggulir ke bawah, Anda akan melihatnya.

Bagian tabel harga

Bagian ini adalah bagian Tabel harga . Di sini Anda dapat melihat semua item yang dapat mendukung penjualan. Judul, hitungan mundur dan tentu saja - tabel harga.

Ini adalah garis akhir halaman arahan. Oleh karena itu, jika pengguna Anda tidak mengklik, terjadi kesalahan.

Disain

Desain pada bagian ini memiliki lebih dari satu kontak galaksi 80-an. Latar belakang di sini telah diedit di Photoshop memberikan tampilan ungu lobak cerah dan menonjol dari latar belakang hitam-hitam yang ada sebelum memberikan pukulan pada akhirnya.

Di bawah header dan slogan terdapat counter yang menunjukkan waktu tersisa hingga akhir penjualan. Di sini saya menggunakan font spacy yang disebut 'space mono' yang saya tambahkan melalui opsi font khusus.

Pada tabel harga di bawah, setiap tabel memiliki latar belakang hitam terang yang memberikan tampilan "mengambang di ruang". Saat Anda mengarahkan kursor ke atasnya, latar belakang menjadi gelap dan ada cahaya di sekitarnya sebagai titik fokus yang mengarahkan Anda untuk membaca teks di dalamnya.

Saat Anda menggerakkan kursor mouse di atas tombol, tombol berubah warna lagi. Setelah Anda selesai membaca informasi tentang foto-foto hebat kami,

Dapatkan model yang benar-benar luar biasa ini

Templat yang ditunjukkan dalam tutorial ini sekarang tersedia di perpustakaan Elementor. Jadi Anda bisa menggunakannya dengan satu klik.

Cara membuat halaman gaya gaya 80 dengan Elementor