fbpx

Cara Mengatur Header Transparan Elementor dengan Mudah

Share on facebook
Share on twitter
Share on whatsapp
Share on email
Ditulis oleh Fazanash Dev
Hosting Unlimited Indonesia

Daftar Isi

Halo sobat PW, pada artikel kali ini kita akan membahas tentang cara mengatur efek header pada wordpress bagi pengguna Elementor Builder. Pastinya, kalian ingin dong membuat tampilan yang menarik pada website, termasuk dalam hal ini adalah header. Salah satu tampilan yang menarik adalah header transparan elementor dalam posisi standby

Selanjutnya tampilan hedaer akan berubah saat visitor web melakukan scroling, seperti ukuran Logo, background header, dan sebagainya. Nah, kali ini kita akan membahas hal tersebut dengan memanfaatkan fitur Custom CSS yang ada pada elementor. Yuk, ikutin terus artikel ini

Membuat Transparan Background Header

  • Buat Header Section dengan elementor sebagaimanya biasanya, lalu klik pada Advanced -> Scrolling Effect -> Sticky -> Top. Pada bagian Effect Offset masukan angka 1
  • Atur bagian Z-indeks header yang akan membuatnya berada pada semua konten nantinya, misal dengan angka 5 atau lebih
  • Atur pada bagian Header’s BOTTOM margin ke angka negatif, misal -140px. Hal ini agar background header nantinya akan ditempati oleh konten.
  • Buka menu Custom CSS dan masukkan kode berikut

/* Changes the header to not be sticky when editing (doesn’t show in the front end) */ body.elementor-editor-active selector { margin-bottom:0px !important; }

  • Pastikan kamu tidak mengatur apapun pada header background melalui visual editing elementornya ya, karena ini akan menyebabkan rencanamu gagal total dong

 

Sekarang kamu sudah membuat background header transparan elementor dan selanjutnya adalah membuat background tersebut berubah menjadi warna lain saat scroll

Membuat Background Header Berubah Saat Scrolling

Buka kembali Custom CSS pada bagian yang sudah dibuat Sticky Top dan sudah dimasukkan kode CSS di atas. Tambahkan kode berikut di bawahnya

/* Background color on sticky */ .elementor-sticky–effects { background-color:rgba(255,255,255,0.85); transition: all 0.5s ease; }

Kode tersebut akan memberikan perintah agar saat scrolling, background menjadi putih transparan. Jika ingin menambahkan efek yang lain, kamu bisa menambahkan kode css sebelum tag penutup } sebagai misalnya, ingin agar saat scroll juga ada efek box shadow maka tambahkan box-shadow: 1px 1px 8px 1px #888888; sehingga menjadi

/* Background color on sticky */ .elementor-sticky–effects { background-color:rgba(255,255,255,0.85); transition: all 0.5s ease; box-shadow: 1px 1px 8px 1px #888888; }

  • Bagian background-color dapat kamu ubah sesuai selera, baik dengan RGBA, Hex, atau HTML. Sedangkan warna shadow bisa kamu ubah pada bagian #888888 sesuai selera kamu juga ya.

Layanan: Buat Landingpage Murah Tanpa Coding dengan Elementor

Mengubah Ukuran Gambar / Logo saat Scrolling

Biasanya, saat posisi standby (tidak di-scroll) pasti kamu ingin agar logo / gambar terlihat besar agar jelas, tapi waktu di-scroll ingin agar logo mengecil agar konten tidak banyak yang tertutupi. Nah kali ini kita akan lakukan itu.

  • Pastikan kamu  juga tidak melakukan pengaturan apapun pada image melalui visual editor elementor ya, pokoknya kosongin aja deh ya, kaya gini
  • Masukkan nama pada CSS Classes sesuai maumu. Mimin PW pakai nama image_menu seperti ini
  • Masukkan kode berikut pada Custom CSS gambar yang kamu pilih tadi

/* — image_menu —- */ /* image_menu sizing before sticky */ .image_menu img { width: auto; max-height: 80px; transition: all 0.5s ease; }

/* image_menu sizing after sticky */ .elementor-sticky–effects .image_menu img { max-height: 65px; width: auto; }

  • Kata image_menu baik pada judul CSS maupun pada selector bisa diganti sesuai nama yang kamu buat pada CSS Classes. Sementara max-height pada image_menu sizing before sticky bisa kamu ubah dengan ukuran yang kamu sebelum scroll. Begitu juga max-height pada image_menu sizing after sticky bisa kamu ubah dengan ukuran yang kamu mau saat scrolling.

Dapatkan: Layanan Hosting Gratis Elementor Pro

Mengubah Gambar / Logo saat Scrolling

Biasanya, saat posisi standby (tidak di-scroll) seringkali kita ingin tampilan gambar berwarna putih dan saat scroll gambar berganti dengan full color, atau perubahan bentuk yang lainnya, maka CSS adalah solusinya yaitu dengan menggunakan fungsi visibility: visible untuk menampilkan dan visibility: hidden untuk menyembunyikan. Misalkan saat standby logo berwarna putih sebagai berikut:

dan saat scroll gambar berubah sebagai berikut:

Maka, langkah pertama adalah siapkan dua gambar tersebut. Sebagai catatan kita akan mengatur agar gambar saat standby berwarna putih dan saat scroll akan berubah menjadi full color dan jika ingin sebaliknya, maka nanti kamu sesuaikan saja penempatan kodenya. Oke, langsung saja:

  • Buat CSS Classes untuk masing – masing gambar tersebut, sebagai misal untuk gambar full color saya beri nama image_menu_color dan gambar putih saya beri nama image_menu_white
  • Masukkan kode CSS berikut pada gambar full color

/* — image_menu_color  —- */ /* image_menu_color sizing before sticky */ .image_menu_color img { width: auto; max-height: 60px; visibility: hidden; }

/* image_menu sizing after sticky */ .elementor-sticky–effects .image_menu_color img { max-height: 45px; width: auto; visibility: visible; }

  • Masukkan kode CSS berikut pada gambar berwarna putih

/* — image_menu_white  —- */ /* image_menu_white sizing before sticky */ .image_menu_white img { width: auto; max-height: 50px; transition: all 0.05s ease; visibility: visible; }

/* image_menu sizing after sticky */ .elementor-sticky–effects .image_menu_white img { max-height: 45px; width: auto; visibility: hidden; }

Sekian tips kali ini tentang membuat header transparan elementor, semoga bermanfaat 🙂

Share on facebook
Share on twitter
Share on whatsapp
Share on email

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Subscribe

Dapatkan informasi terbaru dari kami. Yuk, jangan sampai ketinggalan

Baca Juga

Hosting Unlimited Indonesia

Instagram