Cara Membuat Sticky Footer Bar dengan Opsi Sticky Divi

Jika Anda mencari cara untuk menambahkan CTA yang mengikuti pengunjung Anda saat mereka menavigasi situs web Anda, Anda dapat mempertimbangkan untuk menggunakan bilah footer yang lengket. Bilah footer lengket digunakan di bagian bawah browser Anda dan Anda dapat menyertakan ajakan bertindak apa pun pilihan Anda, apakah itu tombol atau informasi kontak. Segera setelah pengunjung menggulir ke area footer halaman Anda, bilah footer dan desain footer akan bergabung sambil mengubah gaya bilah footer lengket Anda. Estetika yang indah ini dapat membantu Anda meningkatkan tingkat konversi di halaman Anda! Anda juga dapat mengunduh file template JSON secara gratis.

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Template Footer Global secara GRATIS

Untuk mendapatkan template footer global gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

1. Buat Template Footer Baru

Buka Divi Theme Builder & Tambahkan Footer Global atau Kustom Baru

Mulailah dengan membuka Divi Theme Builder di bagian belakang situs WordPress Anda. Di sana, tambahkan footer global atau kustom baru.

Mulai Membangun Dari Awal

Mulai buat template footer dari awal.

2. Bangun Desain Footer

Pengaturan Bagian

Warna latar belakang

Begitu berada di dalam editor template, Anda akan melihat sebuah bagian. Buka bagian itu dan terapkan warna latar belakang hitam.

• Warna Latar Belakang: #000000

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Warna latar belakang

Tanpa menambahkan modul, buka pengaturan baris dan ubah warna latar belakang.

• Warna Latar Belakang: #ea6c01

Perekat

Pindah ke tab desain baris dan ubah pengaturan ukuran berikutnya.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 90%
• Lebar Maks: 2580px
• Penjajaran Baris: Pusat

Jarak

Tambahkan beberapa bantalan atas dan bawah khusus pada ukuran layar yang lebih kecil juga.

• Padding Atas: 5px (Hanya Tablet & Ponsel)
• Padding Bawah: 5px (Hanya Tablet & Ponsel)

Berbatasan

Selanjutnya, tambahkan beberapa sudut bulat responsif ke pengaturan perbatasan.

• Semua Sudut:
  • Desktop: 30px
  • Tablet & Telepon: 15px

Meluap

Dan untuk memastikan kita dapat membuat tumpang tindih nanti di tutorial, kita akan mengatur agar baris meluap menjadi terlihat.

• Luapan Horisontal: Terlihat
• Luapan Vertikal: Terlihat

Visibilitas Kolom 1 & 3

Untuk mencegah terlalu banyak item bilah footer muncul pada ukuran layar yang lebih kecil, kami akan menyembunyikan kolom pertama dan terakhir di baris kami di tablet dan ponsel.

Tambahkan Modul Blurb ke Kolom 1

Tambah isi

Saatnya menambahkan modul, dimulai dengan Modul Blurb di kolom 1. Tambahkan beberapa konten pilihan Anda.

Pilih Ikon

Pilih ikon berikutnya.

Pengaturan Ikon

Pindah ke tab desain modul dan beri gaya ikon yang sesuai:

• Warna Ikon: #f5d72e
• Ikon Lingkaran: Ya
• Warna Lingkaran: #000000
• Penempatan Gambar/Ikon: Atas
• Penjajaran Gambar/Ikon: Tengah
• Gunakan Ukuran Font Ikon: Ya
• Ukuran Font Ikon: 32px

Pengaturan Teks

Selanjutnya, ubah pengaturan teks.

• Perataan Teks: Tengah
• Warna Teks: Cahaya

Pengaturan Teks Judul

Buat beberapa perubahan pada pengaturan teks judul juga.

• Judul Font: Poppins
• Warna Teks Judul: #000000

Pengaturan Teks Tubuh

Ubah juga pengaturan teks isi.

• Font Tubuh: Poppins
• Berat Huruf Tubuh: Ultra Tebal
• Ukuran Teks Tubuh: 20px

Perekat

Masukkan lebar konten ke "100%" di pengaturan ukuran berikutnya.

• Lebar Konten: 100%

Jarak

Untuk membuat tumpang tindih, tambahkan beberapa margin atas negatif ke pengaturan spasi.

• Margin Atas: -60px

Animasi

Dan selesaikan pengaturan modul dengan menghapus ikon animasi di pengaturan animasi.

• Gambar/Ikon Animasi: Tanpa Animasi

Clone Blurb Module & Tempatkan Duplikat di Kolom 3

Setelah Anda menyelesaikan Modul Blurb pertama di kolom 1, kloning sekali dan tempatkan duplikatnya di kolom 3.

Ubah Konten & Ikon

Ubah konten dan ikon untuk duplikat.

Tambahkan Modul Blurb ke Kolom 2

Pilih Ikon

Selanjutnya, tambahkan Modul Blurb baru ke kolom 2. Biarkan kotak konten kosong dan pilih ikon pilihan Anda.

Warna latar belakang

Tambahkan warna latar belakang berikutnya.

• Warna Latar Belakang: #000000

Pengaturan Ikon

Pindah ke tab desain modul dan ubah pengaturan ikon yang sesuai:

• Warna Ikon: #ffffff
• Penempatan Gambar/Ikon: Atas
• Penjajaran Gambar/Ikon: Tengah
• Gunakan Ukuran Font Ikon: Ya
• Ukuran Font Ikon: 30px

Perekat

Buat beberapa perubahan pada pengaturan ukuran selanjutnya.

• Lebar: 70px
• Penyelarasan Modul: Pusat
• Tinggi: 40px

Jarak

Kemudian, terapkan nilai margin dan padding khusus di berbagai ukuran layar.

• Margin Atas: -20px (Hanya Tablet & Ponsel)
• Padding Atas: 5px
• Padding Bawah: 0px

Berbatasan

Selanjutnya, tambahkan beberapa sudut membulat ke pengaturan perbatasan.

• Semua Sudut: 10px

Animasi

Dan hapus animasi default di pengaturan animasi.

• Gambar/Ikon Animasi: Tanpa Animasi

Tambahkan Modul Teks ke Kolom 2

Tambah isi

Modul berikutnya dan terakhir yang kita butuhkan di baris ini adalah Modul Teks di kolom 2. Tambahkan beberapa konten pilihan Anda.

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks sebagai berikut:

• Berat Font Teks: Semi Tebal
• Ukuran Teks: 18px
• Tinggi Baris Teks: 1.8em
• Perataan Teks: Tengah

Tambahkan Baris #2

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul, buka pengaturan baris, buka tab desain dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 2
• Lebar Maks: 2580px

Jarak

Tambahkan beberapa margin atas dan bawah berikutnya.

• Margin Atas: 50px
• Margin Bawah: 50px

Tambahkan Modul Gambar ke Kolom 1

Unggah Gambar

Tambahkan Modul Gambar ke kolom 1 dan unggah logo Anda atau gambar apa pun pilihan Anda.

Perekat

Pindah ke tab desain modul dan ubah pengaturan ukuran sebagai berikut:

• Lebar: 59%
• Penyelarasan Modul: Kiri

Tambahkan Modul Teks ke Kolom 2

Tambahkan Konten H3

Selanjutnya, tambahkan Modul Teks ke kolom 2 dengan beberapa konten H3 pilihan Anda.

Pengaturan Teks H3

Ubah pengaturan teks H3 modul sebagai berikut:

• Judul 3 Font: Poppins
• Judul 3 Berat Font: Tebal
• Judul 3 Warna Teks: #6d6d6d

Modul Teks Klon 3x & Tersebar di Kolom 3 & 4

Setelah Anda menyelesaikan Modul Teks ini, Anda dapat mengkloning tiga kali dan menyebarkan duplikat di dua kolom baris yang tersisa.

Ubah Konten

Pastikan Anda mengubah konten di setiap Modul Teks duplikat.

Tambahkan Modul Teks ke Kolom 2

Tambah isi

Tambahkan Modul Teks lain tepat di bawah Modul Teks sebelumnya di kolom 2 dan tambahkan beberapa konten tertaut pilihan Anda.

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks sebagai berikut:

• Font Teks: Poppins
• Ukuran Teks: 30px
• Tinggi Baris Teks: 1em
• Perataan Teks: Kiri
• Warna Teks: Cahaya

Pengaturan Teks Tautan

Ubah juga warna teks tautan.

• Warna Teks Tautan: #ffffff

Modul Teks Klon Sesuai Kebutuhan

Setelah Anda menyelesaikan Modul Teks, klon sebanyak yang Anda inginkan.

Ubah Konten

Pastikan Anda mengubah konten dan tautan di setiap modul duplikat.

Tambahkan Modul Teks ke Kolom 3

Tambah isi

Kemudian, tambahkan Modul Teks lain ke kolom 3. Tambahkan beberapa konten tertaut pilihan Anda.

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks sebagai berikut:

• Font Teks: Poppins
• Ukuran Teks: 22px
• Tinggi Baris Teks: 1em
• Perataan Teks: Kiri
• Warna Teks: Cahaya

Pengaturan Teks Tautan

Ubah juga warna teks tautan.

• Warna Teks Tautan: #ea6c01

Modul Teks Klon sesuai Kebutuhan

Kloning modul ini sebanyak yang Anda butuhkan.

Ubah Konten

Dan, tentu saja, ubah konten dan tautan sesuai kebutuhan.

Tambahkan Modul Teks ke Kolom 4

Tambah isi

Di kolom 4, Kami akan menambahkan Modul Teks lain di bawah Modul Teks pertama. Tambahkan beberapa konten pilihan Anda.

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks sebagai berikut:

• Font Teks: Poppins
• Ukuran Teks: 16px
• Tinggi Baris Teks: 1.8em
• Perataan Teks: Kiri
• Warna Teks: Cahaya

Tambahkan Media Sosial Ikuti ke Kolom 4

Tambahkan Jejaring Sosial Pilihan

Kemudian, tambahkan Modul Ikuti Media Sosial di akhir kolom. Tambahkan jejaring sosial pilihan Anda.

Hapus Warna Latar Belakang Setiap Jejaring Sosial Satu per satu

Hapus warna latar belakang setiap jejaring sosial satu per satu.

Jarak

Kembali ke pengaturan modul biasa, buka pengaturan spasi dan tambahkan beberapa nilai margin khusus.

• Margin Atas: -15px
• Margin Kiri: -8px

Tambahkan Baris #3

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul, buka pengaturan baris, pindah ke tab desain dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 2
• Samakan Tinggi Kolom: Ya
• Lebar Maks: 2580px

Tambahkan Modul Teks ke Kolom 1

Tambah isi

Kemudian, tambahkan Modul Teks ke kolom 1. Sisipkan beberapa konten pilihan Anda.

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks sebagai berikut:

• Font Teks: Poppins
• Warna Teks: #595959
• Ukuran Teks: 13px
• Perataan Teks: Tengah

Pengaturan Teks Tautan

Ubah juga warna teks tautan.

• Warna Teks Tautan: #595959

Modul Teks Klon Dua Kali & Tempatkan Duplikat di Kolom Tersisa

Setelah Anda menyelesaikan modul di kolom 1, Anda dapat mengkloningnya dua kali dan menempatkan duplikatnya di dua kolom baris yang tersisa.

Ubah Perataan Teks

Ubah perataan teks untuk setiap Modul Teks duplikat sesuai:

• Modul Teks di Kolom 2:
  • Desktop: Pusat
  • Tablet & Telepon: Kiri

• Modul Teks di Kolom 3:
  • Desktop: Kanan
  • Tablet & Telepon: Kiri

Ubah Konten

Dan ubah konten di kedua modul duplikat juga.

3. Terapkan Efek Lengket ke Footer Bar

Buka Baris #1 & Terapkan Pengaturan Lengket

Sekarang setelah fondasi desain kita ada, saatnya untuk menerapkan efek lengket. Buka baris pertama di bagian tersebut, buka tab lanjutan dan terapkan pengaturan tempel berikut:

• Posisi Lengket: Menempel ke Bawah
• Offset Bawah Lengket:
  • Desktop: 50px
  • Tablet & Telepon: 20px

Gaya Lengket Baris

Warna latar belakang

Sekarang setelah kita mengubah baris menjadi lengket, kita dapat menerapkan gaya lengket ke baris dan semua elemen turunannya. Mulailah dengan menambahkan warna latar belakang yang lengket ke baris #1.

• Warna Latar Belakang Lengket: #000000

Terapkan Gaya Tempel ke Modul Blurb di Kolom 1 & 3

Pengaturan Ikon

Selanjutnya, buka Modul Blurb di kolom 1 dan 3 dan tambahkan warna lingkaran lengket.

• Warna Lingkaran Lengket: #ea6c01

Pengaturan Teks Judul

Tambahkan juga warna teks judul yang lengket.

• Warna Teks Judul Lengket: #ea6c01

Terapkan Gaya Tempel ke Modul Blurb di Kolom 2

Warna latar belakang

Kemudian, buka Modul Blurb di kolom 2 dan terapkan warna latar belakang yang lengket.

• Warna Latar Lengket: #ea6c01

4. Simpan Semua Perubahan Template & Pembuat Tema

Setelah Anda menyelesaikan langkah-langkah tempel, pastikan Anda menyimpan template dan perubahan pembuat tema Anda sebelum melihat hasilnya di situs web Anda!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara berkreasi dengan opsi lengket Divi. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara membuat bilah footer lengket yang menyatu dengan area footer utama setelah orang menggulir ke bawah halaman tempat mereka berada. Anda juga dapat mengunduh file template JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.