Cara Menggunakan Paket Tata Letak Toko Roti Cyber ​​Monday Eksklusif untuk Membuat Halaman Lokasi untuk Bisnis Anda

Tahun ini, mendapatkan Cyber ​​Monday Deal berarti mendapatkan banyak barang gratis juga! Selain menikmati diskon 25%, setiap orang yang membeli Keanggotaan Tema Elegan baru atau meningkatkan akun yang ada (atau yang sudah memiliki Keanggotaan Seumur Hidup) juga akan menerima 6 paket tata letak gratis dan eksklusif yang HANYA tersedia untuk diunduh selama penjualan Cyber ​​Monday kami.

Unduh Tata Letak Eksklusif Sebelum Menghilang!

Sudah Menjadi Anggota Seumur Hidup? Anda dapat mengunduh paketnya sekarang, tidak perlu ikut serta dalam penjualan Cyber ​​Monday kami!

Sekilas Tentang Paket Tata Letak Toko Roti Cyber ​​Monday Eksklusif

Salah satu paket tata letak eksklusif yang kami sediakan untuk Anda sebagai Anggota Seumur Hidup dan pelanggan Cyber ​​Monday baru adalah yang ini untuk Toko Roti. Ini terdiri dari 5 halaman lezat yang akan membuat situs web toko roti apa pun tak tertahankan.

Desain Halaman Arahan

Download Tata Letak Eksklusif Sebelum Menghilang!

Sudah Menjadi Anggota Seumur Hidup? Anda dapat mengunduh paketnya sekarang, tidak perlu ikut serta dalam penjualan Cyber ​​Monday kami!

Desain Halaman Resep

Download Tata Letak Eksklusif Sebelum Menghilang!

Sudah Menjadi Anggota Seumur Hidup? Anda dapat mengunduh paketnya sekarang, tidak perlu ikut serta dalam penjualan Cyber ​​Monday kami!

Desain Halaman Menu

Download Tata Letak Eksklusif Sebelum Menghilang!

Sudah Menjadi Anggota Seumur Hidup? Anda dapat mengunduh paketnya sekarang, tidak perlu ikut serta dalam penjualan Cyber ​​Monday kami!

Tentang Desain Halaman

Unduh Tata Letak Eksklusif Sebelum Menghilang!

Sudah Menjadi Anggota Seumur Hidup? Anda dapat mengunduh paketnya sekarang, tidak perlu ikut serta dalam penjualan Cyber ​​Monday kami!

Desain Halaman Kontak

Unduh Tata Letak Eksklusif Sebelum Menghilang!

Sudah Menjadi Anggota Seumur Hidup? Anda dapat mengunduh paketnya sekarang, tidak perlu ikut serta dalam penjualan Cyber ​​Monday kami!

Dapatkan Paket Tata Letak Toko Roti Cyber ​​Monday Eksklusif

Sebelum masuk ke kasus penggunaan ini, Anda harus mendapatkan Paket Tata Letak Toko Roti Cyber ​​​​Monday Eksklusif yang bisa Anda dapatkan dengan menjadi Anggota Tema Elegan baru, meningkatkan akun Anda yang ada, atau dengan menjadi Anggota Seumur Hidup bersama kami. Jika Anda memang sudah menjadi Anggota Seumur Hidup, Anda dapat masuk ke area anggota kami dan mengunduh semua paket tata letak eksklusif kami di sini. Semua orang perlu menggunakan tombol di bawah ini untuk membeli atau meningkatkan versi sebelum mereka dapat mengikuti sisa tutorial kami.

Unduh Tata Letak Eksklusif Sebelum Menghilang!

Sudah Menjadi Anggota Seumur Hidup? Anda dapat mengunduh paketnya sekarang, tidak perlu ikut serta dalam penjualan Cyber ​​Monday kami!

Cara Menggunakan Paket Tata Letak Toko Roti Cyber ​​Monday Eksklusif untuk Membuat Halaman Lokasi untuk Bisnis Anda

Untuk sisa posting ini, kami akan menganggap Anda telah memanfaatkan kesepakatan Cyber ​​​​Monday kami atau bahwa Anda sudah menjadi Anggota Seumur Hidup dan memiliki akses ke Paket Tata Letak Toko Roti.

Setelah Anda mengunduh Paket Tata Letak Roti baru dari area anggota kami, Anda dapat menonton video di bawah ini untuk melihat betapa mudahnya menyiapkannya. Kami juga mendorong Anda untuk mengikuti tutorial ini agar situs Anda siap untuk penyesuaian lebih lanjut.

Sekarang mari kita masuk ke use case itu sendiri.

Saat membangun situs web untuk perusahaan dengan lebih dari satu lokasi, penting untuk memikirkan cara terbaik untuk mengomunikasikan informasi tersebut kepada pengunjung. Mereka perlu tahu lokasi mana yang paling dekat dengan mereka dan info penting apa pun yang spesifik untuk lokasi itu. Dan, membangun halaman Lokasi untuk situs web adalah awal yang baik.

Dalam kasus penggunaan ini, saya akan menunjukkan kepada Anda betapa mudahnya membuat halaman lokasi profesional untuk bisnis Anda menggunakan Paket Tata Letak Toko Roti.

Dengan menggunakan kerangka Tata Letak Halaman Kontak Toko Roti, saya akan menunjukkan kepada Anda cara menambahkan pin tambahan ke modul peta Anda untuk mencerminkan semua lokasi bisnis Anda bersama dengan bagian yang terorganisir dan dirancang dengan baik untuk menampilkan informasi penting untuk setiap lokasi. Karena kita dapat menggunakan elemen desain yang sudah disediakan oleh tata letak, proses ini menyegarkan dan menyenangkan (setidaknya bagi saya).

Mari kita mulai.

Mulailah dengan Menggunakan Tata Letak Kontak untuk Membangun Halaman Lokasi Anda

Tata letak halaman Kontak Toko Roti sangat cocok digunakan sebagai dasar untuk halaman Lokasi baru kami. Ini memiliki modul peta di bagian atas yang akan kami gunakan untuk menampilkan setiap lokasi perusahaan kami. Plus itu memiliki beberapa elemen lain seperti modul teks yang sudah dirancang yang dapat kita atur ulang dan modifikasi sesuai kebutuhan.

Buat Halaman Baru

Pertama, Anda perlu membuat halaman baru dan memberinya judul (seperti “Lokasi Kami”) dan klik untuk menggunakan divi Builder dan kemudian visual builder.

Muat Tata Letak Halaman Kontak Toko Roti

Pada titik ini Anda seharusnya sudah memiliki tata letak halaman yang diunggah ke Perpustakaan Divi Anda. Klik untuk membuka menu ungu di bagian bawah halaman dan pilih tombol “Tambahkan dari Perpustakaan” dengan ikon plus. Pilih beban dari tab perpustakaan dan kemudian pilih tata letak Kontak Toko Roti dari daftar. Tata letak akan segera dimuat di halaman.

Menerbitkan.

Menambahkan Bagian untuk Informasi Lokasi Spesifik Anda

Kami benar-benar tidak memiliki banyak konten di halaman kontak yang dapat digunakan untuk membuat konten tambahan untuk lokasi spesifik kami. Jadi, mari pergi ke halaman Bakery Landing dan pilih baris dari bagian kedua halaman dan simpan ke Library.

Sekarang kembali ke halaman lokasi. Gandakan bagian di bagian bawah halaman yang berisi formulir kontak (jangan hapus ini, kami akan membutuhkannya nanti). Di bagian tepat di bawah peta, hapus seluruh baris dari bagian dan tambahkan baris yang Anda simpan dari perpustakaan Anda.

Selanjutnya ubah tata letak kolom baris menjadi tata letak sepertiga dua pertiga.

Temukan modul teks dengan konten alamat di kolom kanan bagian bawah. Seret di bawah modul gambar di kolom kanan baris di bagian di atasnya.

Kemudian perbarui Konten dalam modul teks di kolom kiri untuk mewakili lokasi spesifik perusahaan Anda. Untuk contoh saya, saya akan menambahkan yang berikut:

Markas Besar
Kota New York

Sekarang perbarui modul gambar di kolom kanan untuk menyertakan gambar lokasi perusahaan Anda.

Ini akan berfungsi sebagai bagian yang bagus untuk setiap uraian lokasi spesifik Anda.

Sekarang yang perlu Anda lakukan adalah menduplikasi bagian ini untuk menambahkan lokasi tambahan.

Gandakan bagian ini dua kali sehingga Anda memiliki total 3 bagian lokasi. Kemudian ubah warna latar belakang bagian lokasi tengah menjadi putih untuk membantu membagi bagian dengan lebih baik.

Kemudian perbarui bagian yang digandakan dengan konten khusus lokasi. Untuk contoh ini, selain lokasi saya di New York, saya juga akan membuat bagian untuk San Francisco dan Houston.

Desain Bagian Footer Formulir Kontak

Ingat bagian yang kami simpan di bagian bawah berisi formulir kontak kami. Ini akan berfungsi sebagai bagian footer yang bagus untuk halaman lokasi kami. Yang perlu kita lakukan adalah mengubahnya sedikit.

Pertama Mari kita hapus modul yang tersisa di kolom kanan. Kemudian perbarui tata letak kolom baris ke tata letak satu kolom. Sekarang yang harus Anda lihat hanyalah formulir kontak dalam satu baris kolom.

Klik berikutnya untuk mengedit pengaturan baris dan memperbarui yang berikut:

Di bawah tab konten…

warna latar belakang: #ffffff

Di bawah tab Desain…

bantalan kustom: 5% Atas, 5% Kanan, 5% Bawah, 5% Kiri

Bayangan kotak: [pilih bayangan kotak]

Sekarang mari tambahkan gambar latar belakang untuk bagian kita. Buka pengaturan bagian dan pilih salah satu gambar latar belakang yang disertakan dalam tata letak.

Besar! Sekarang ke modul peta.

Tambahkan Kunci API Google Anda

Pada titik ini, Anda harus memastikan bahwa Anda membuat Google API Key Anda dan kemudian menambahkannya ke Opsi Tema.

Perbarui Modul Peta dengan Pin Lokasi Baru

Pada titik ini, sebagian besar halaman kami telah selesai. Yang tersisa hanyalah pembaruan pada modul peta di bagian atas halaman. Kita perlu menambahkan lokasi pin baru untuk tiga bagian yang kita buat di bagian halaman (New York City, San Francisco, dan Houston).

Klik untuk mengedit Modul Peta dan memperbarui pengaturan sebagai berikut:

Hapus satu pin yang ditampilkan di modul sehingga Anda memulai dari awal. Kemudian tambahkan pin baru dan perbarui pengaturan sebagai berikut:

Judul: Toko Roti Kota New York
Konten: Info Lebih Lanjut
Alamat Pin Peta: Kota New York

Klik tombol Temukan.

Kemudian tambahkan pin baru dan perbarui pengaturan sebagai berikut:

Judul: Toko Roti San Francisco
Konten: info lebih lanjut
Alamat Pin Peta: San Francisco

Klik tombol Temukan.

Kemudian tambahkan pin baru dan perbarui pengaturan sebagai berikut:

Judul: Toko Roti Houston
Konten: info lebih lanjut
Alamat Pin Peta: Houston, TX

Klik tombol Temukan.

Anda dapat meninggalkan alamat pusat peta sebagai Kota New York. Namun sesuaikan tampilan peta dengan zoom out yang cukup jauh untuk dapat melihat semua lokasi saat pengunjung pertama kali melihat peta.

Tambahkan Tautan Jangkar ke Kotak Konten Pin

Sebagai fitur tambahan, Anda dapat meningkatkan pengalaman pengguna dengan menambahkan tautan jangkar di dalam konten pin yang muncul saat mengklik pin. Tautan jangkar ini akan membawa pengguna ke bawah halaman ke bagian tertentu dari halaman yang menampilkan info lokasi itu.

Buka pengaturan modul peta lalu edit pengaturan pin pertama. Sorot teks di kotak konten yang bertuliskan "Info Lebih Lanjut" dan kemudian klik ikon tautan untuk menjadikannya tautan. Untuk url, masukkan “#newyork” dan klik OK.

Lakukan hal yang sama untuk pin San Francisco (gunakan url “#sanfran”) dan pin Houston (gunakan url “#houston”).

Sekarang yang perlu Anda lakukan adalah menambahkan ID CSS khusus ke setiap bagian Anda yang akan sesuai dengan url tautan yang baru saja Anda buat di pin.

Untuk bagian "Kota New York", perbarui pengaturan bagian di tab Lanjutan dengan ID CSS "newyork" dan simpan pengaturan Anda.

Sekarang ketika pengguna mengklik tautan "info lebih lanjut" (dengan url #newyork) di pin New York, halaman akan melompat ke bagian itu.

Lakukan hal yang sama untuk bagian San Francisco (gunakan ID CSS “sanfran”) dan bagian Houston (gunakan ID CSS “houston”)

Itu dia. Anda sudah selesai!