Cara Menambahkan Toggle Peta Tetap ke Templat Halaman Divi Anda

Jika Anda menjalankan toko fisik dan membuat situs web untuknya, banyak orang mungkin mengunjungi situs web Anda untuk mendapatkan informasi praktis, seperti alamat Anda. Tentu saja, di situlah halaman kontak Anda berguna, tetapi itu bukan satu-satunya cara Anda dapat membagikan detail kontak dengan mulus kepada pengunjung Anda. Jika Anda mencari cara kreatif untuk berbagi alamat perusahaan Anda, Anda akan menyukai tutorial ini. Kami menunjukkan kepada Anda cara menambahkan sakelar peta tetap secara dinamis ke setiap halaman menggunakan Pembuat Tema Divi. Kita akan mulai dengan membuat template halaman baru. Kemudian, kami akan menyertakan konten halaman dinamis di samping badan template dan kami akan menambahkan sakelar peta tetap di atas konten halaman dinamis. 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 Halaman GRATIS

Untuk mendapatkan template halaman 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 Halaman Di Dalam Divi Theme Builder

Buka Divi Theme Builder & Tambahkan Template Halaman Baru

Kita akan memulai tutorial ini dengan menavigasi ke Divi Theme Builder dan menambahkan template halaman baru.

Masukkan Area Tubuh Template

Kemudian, masukkan body template dengan memilih “Build Custom Body”.

2. Tambahkan Konten Halaman Dinamis ke Area Tubuh

Pengaturan Bagian

Jarak

Begitu berada di dalam editor template, Anda akan melihat sebuah bagian. Buka pengaturan bagian dan hapus semua padding atas dan bawah default.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

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

• Lebar: 100%
• Lebar Maks: 100%

Jarak

Hapus semua padding atas dan bawah default berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Modul Konten Posting ke Kolom

Untuk memungkinkan konten setiap halaman muncul secara dinamis, kami akan menggunakan Modul Konten Posting di dalam baris ini.

3. Buat Desain Pin Peta Tetap

Tambahkan Baris #2 ke Bagian

Struktur Kolom

Ke baris berikutnya, yang menggunakan struktur kolom berikut:

Perekat

Buka pengaturan baris, buka tab desain dan ubah pengaturan ukuran sebagai berikut:

• Lebar: 90%
• Lebar Maks:
  • Desktop: 600px
  • Tablet & Telepon: 100%

Jarak

Hapus semua padding atas dan bawah default berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Pengaturan Kolom 1

Warna latar belakang

Kemudian, buka pengaturan kolom 1 dan gunakan warna latar belakang hitam.

• Warna Latar Belakang: #000000

Gambar latar belakang

Unggah gambar latar belakang pilihan Anda selanjutnya. Anda dapat menemukan gambar latar belakang di folder zip yang dapat Anda unduh di awal tutorial ini.

Elemen Utama CSS

Tambahkan juga baris kode CSS berikut ke elemen utama kolom:

width: 80% !important;
max-height: 80vh;

Visibilitas

Kemudian, masukkan luapan vertikal ke otomatis. Ini, dalam kombinasi dengan ketinggian maksimum pada langkah sebelumnya, memastikan bilah gulir muncul segera setelah kolom melebihi ketinggian 80vh.

• Luapan Vertikal: Otomatis

Pengaturan Kolom 2

Elemen Utama CSS

Buka pengaturan kolom 2 selanjutnya dan terapkan baris kode CSS berikut ke elemen utama:

width: 12% !important;

Tambahkan Modul Peta ke Kolom 1

Saatnya menambahkan modul, dimulai dengan Modul Peta di kolom 1. Tambahkan pin peta pilihan Anda.

Perekat

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

• Lebar: 88%
• Penyelarasan Modul: Pusat

Jarak

Hapus margin bawah default berikutnya.

• Margin Bawah: 0px

Tambahkan Modul Blurb ke Kolom 1

Tambah isi

Tambahkan Modul Blurb di bawah Modul Peta di kolom 1. Gunakan beberapa konten pilihan Anda.

Pilih Ikon

Pilih ikon berikutnya.

Pengaturan Gambar/Ikon

Pindah ke tab desain dan ubah pengaturan ikon sebagai berikut:

• Warna Ikon: #ffffff
• Penempatan Gambar/Ikon: Kiri

Pengaturan Teks Judul

Gaya teks judul berikutnya.

• Judul Font Berat: Tebal
• Warna Teks Judul: #ffffff
• Ukuran Teks Judul: 16px
• Tinggi Baris Judul: 1.6em

Pengaturan Teks Tubuh

Kemudian, ubah pengaturan teks isi sesuai:

• Warna Teks Tubuh: #ffffff
• Ukuran Teks Tubuh:
  • Desktop: 16px
  • Tablet: 14px
  • Telepon: 13px
• Tinggi Garis Tubuh: 1.8em

Jarak

Terapkan juga nilai padding berikut:

• Padding Atas: 70px
• Padding Bawah: 70px
• Padding Kiri: 7%
• Padding Kanan: 7%

Animasi

Dan hapus animasi modul default di pengaturan animasi.

• Gambar/Ikon Animasi: Tanpa Animasi

Tambahkan Modul Blurb ke Kolom 2

Biarkan Kotak Konten Kosong

Ke kolom 2. Di sana, kita akan menambahkan Modul Blurb tanpa konten.

Pilih Ikon

Pilih ikon berikutnya.

Warna latar belakang

Kemudian, ubah warna latar belakang.

• Warna Latar Belakang: #0045ff

Pengaturan Gambar/Ikon

Pindah ke tab desain dan gaya pengaturan ikon yang sesuai:

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

Perekat

Ubah pengaturan ukuran berikutnya.

• Lebar: 70px
• Tinggi: 70px

Jarak

Kemudian, hapus margin bawah default.

• Margin Bawah: 0px

Bayangan Kotak

Sertakan bayangan kotak juga.

• Posisi Horizontal Bayangan Kotak: 6px
• Posisi Vertikal Bayangan Kotak: 6px
• Warna Bayangan: rgba(0,0,0,0.3)

Elemen Utama & Gambar Blurb CSS

Kemudian, navigasikan ke tab lanjutan dan gunakan baris kode CSS berikut untuk elemen utama:

display: flex;
justify-content: center;
align-items: center;

Dan tambahkan baris kode CSS ini di dalam kotak Gambar Blurb:

margin-bottom: 0;

4. Tambahkan Fungsi Toggle

Tambahkan Kelas CSS ke Baris #2

Sekarang kita memiliki semua elemen di tempat, saatnya untuk fokus pada fungsionalitas. Mulailah dengan membuka baris kedua dan menerapkan kelas CSS berikut:

• Kelas CSS: peta-toggle-row

Tambahkan Kelas CSS ke Modul Blurb di Kolom 2

Buka Modul Blurb di kolom 2 berikutnya dan gunakan kelas CSS berikut:

• Kelas CSS: map-toggle

Tambahkan Modul Kode Di Bawah Modul Blurb di Kolom 2

Kemudian, tambahkan Modul Kode di bawah Modul Blurb di kolom 2.

Tambahkan Gaya & Tag Skrip

Tempatkan beberapa tag gaya dan skrip di dalam kotak kode.

Masukkan Kode CSS

Kami menggunakan kode CSS berikut di dalam tag gaya:

.map-toggle-row {
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}

.reveal-map{
left: 0 !important;
}

.map-toggle {
cursor: pointer;
}

Masukkan Kode JQuery

Dan kode JQuery berikut di dalam tag skrip:

jQuery(function($){
$(document).ready(function(){

var toggleIcon = $('.map-toggle');
var toggleRow = $('.map-toggle-row');

toggleIcon.click(function(){
toggleRow.toggleClass('reveal-map');
});

});
});

Tambahkan Posisi Tetap dengan Horizontal Offset ke Baris #2

Last but not least, kita perlu memodifikasi pengaturan posisi baris kedua yang sesuai:

• Posisi: Tetap
• Lokasi: Kiri Tengah
• Offset Horisontal:
  • Desktop: -500px
  • Tablet & Telepon: -72%
• Indeks Z: 11

5. Simpan Perubahan Halaman & Pembuat Tema

Setelah semua perubahan diterapkan, Anda dapat menyimpan semua perubahan Divi Theme Builder dan 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 tutorial ini, kami telah menunjukkan kepada Anda cara memasukkan detail alamat bisnis Anda secara kreatif di seluruh desain halaman Anda. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara membuat templat halaman yang menyertakan sakelar peta tetap, sehingga pengunjung Anda dapat mengakses lokasi bisnis Anda setiap saat! 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.