Cara Membuat Timeline untuk Jadwal Pernikahan Anda dengan Plugin Divi & the Divi Timeline Module

Diterbitkan: 2017-05-22

Posting ini adalah bagian 5 dari 5 dalam miniseri kami Cara Membuat Situs Web Pernikahan yang Elegan dengan Divi. Dalam seri ini, kami akan memandu Anda melalui bagian terpenting dalam membuat situs web pernikahan untuk diri sendiri atau klien dengan Divi.


Di empat bagian pertama dari miniseri, kami menunjukkan cara membuat:

  • halaman pengumuman pernikahan yang elegan
  • halaman galeri
  • halaman daftar hadiah
  • dan cara menggunakan plugin Testimonial Divi Otomatis di situs web pernikahan Anda.

Tata letak yang kami buat konsisten dalam gaya dan mudah dibuat.

Di bagian terakhir dari miniseri ini, kami akan menunjukkan cara membuat timeline untuk situs web pernikahan Anda dengan plugin Divi Timeline Module oleh Elegant Marketplace. Kami akan memberi Anda contoh tentang cara membuat garis waktu vertikal yang menarik yang akan membuat tamu pernikahan Anda mengetahui apa yang akan terjadi selama hari besar pasangan pengantin.

Contoh Garis Waktu Vertikal

Tata letak yang kita buat akan terlihat seperti contoh di bawah ini. Kami akan berbicara tentang langkah-langkah paling penting yang akan membantu Anda menemukan jalan Anda dengan timeline. Setelah membaca posting ini, Anda dapat dengan cepat memulai, membuatnya sendiri dan memberikan sentuhan ekstra ke situs web pernikahan Anda.

Membeli Plugin

Jika Anda belum memiliki plugin Divi Timeline Module, Anda harus membelinya di situs web Elegant Marketplace. Plugin ini berharga $11. Setelah membeli plugin di situs web mereka, Anda akan menerima file ZIP yang berisi modul baru yang akan Anda tambahkan ke situs web Anda.

Memasang Plugin

Masuk ke situs WordPress Anda dan buka 'Tambah baru' di bagian Plugin.

Unggah file ZIP yang Anda terima dari pembelian.

Aktifkan plugin dan Anda siap melakukannya. Plugin sekarang akan secara otomatis menambahkan Modul Timeline ke pembuat Divi Anda.

Dua Cara Berbeda untuk menggunakan Modul Timeline Divi di Situs Web Anda

Menampilkan Jadwal Pernikahan

Garis waktu di situs web pernikahan Anda benar-benar dapat memberikan nilai tambah ekstra ke situs web Anda. Anda dapat menggunakan garis waktu untuk menunjukkan bagaimana hari pernikahan akan terlihat. Transparansi online ini membantu tamu Anda menemukan jalan mereka melalui jadwal sibuk pernikahan.

Anda hanya perlu ingat untuk membagikan tautan ke situs web pernikahan Anda dengan tamu Anda terlebih dahulu. Dengan begitu, mereka akan dapat mengakses informasi di mana saja dan kapan saja.

Anda dapat membuat halaman terpisah untuk garis waktu, atau memutuskan untuk memasukkannya ke salah satu halaman Anda yang lain. Karena garis waktu menempati banyak tempat di layar, kami sarankan Anda mendedikasikan seluruh halaman baru ke garis waktu.

Menampilkan Timeline Hubungan Pasangan Pernikahan

Selain membuat jadwal pernikahan dengan plugin, Anda juga dapat menggunakan modul timeline untuk menampilkan timeline hubungan pasangan pengantin. Dengan memasukkan cara pasangan bertemu dan fase berbeda yang mereka alami dalam hubungan mereka, Anda dapat terlibat lebih banyak dengan para tamu dan menyampaikan cerita di luar sana.

Berbagai Jenis Modul Kesaksian

Saat mengunduh plugin, Anda akan melihat empat modul tambahan muncul di daftar modul Anda. Semuanya adalah timeline tetapi dengan fokus yang berbeda.

Anda memiliki satu untuk posting, konten, gambar unggulan, judul posting, dan hanya yang vertikal biasa. Untuk contoh timeline yang akan kita buat di postingan ini, kita hanya akan menggunakan Timeline – Vertikal. Modul ini memungkinkan kami untuk langsung menuliskan informasi di kotak konten, tanpa ditautkan ke hal lain di situs web seperti posting Anda.

Memulai

Kami menunjukkan kepada Anda langkah demi langkah cara membuat garis waktu berikut:

Modul ini responsif dan akan terlihat bagus di desktop Anda serta di ponsel atau tablet Anda. Mari kita mulai!

Tambahkan item Timeline dan Timeline

Karena Modul Timeline adalah plugin pihak ketiga, kami tidak akan dapat membuat modifikasi visual apa pun dengan Visual Builder. Itu sebabnya kami hanya akan tetap berada di bagian belakang situs web untuk membuat perubahan yang diperlukan.

Mulailah dengan menambahkan halaman baru yang akan Anda dedikasikan untuk timeline Anda. Di dalam halaman itu, Anda tentu saja membutuhkan bagian pahlawan. Namun, selain itu, Anda hanya memerlukan satu bagian standar untuk timeline. Tambahkan bagian standar baru dengan baris lebar penuh ke halaman. Selanjutnya, tempatkan Timeline – Vertical Module di baris lebar penuh itu.

Sekarang, dalam pengaturan Timeline – Vertical Module, Anda dapat menambahkan item timeline yang berbeda ke timeline yang Anda buat.

Ada aliran standar yang biasanya diikuti selama pernikahan. Kami akan membuat item timeline baru untuk setiap kejadian berikut:

  • Rambut dan riasan pengantin
  • Pemotretan pernikahan
  • Pra-upacara
  • Upacara
  • Jam koktail
  • Mulai makan malam
  • bersulang
  • Dansa pertama
  • Waktu menari
  • Gurun
  • Ucapan terima kasih terakhir

Tentu saja, ini semua tergantung pada bagaimana Anda merencanakan hari pernikahan Anda. Anda dapat menambahkan Item Timeline sebanyak yang Anda suka.

Modifikasi Modul Garis Waktu

Tapi sebelum menambahkan Item Timeline, mari buat modifikasi yang perlu diterapkan ke semua Item Timeline melalui Timeline – Vertical Module. Buka tab Konten Timeline Anda – Modul Vertikal dan ubah Warna Garis Tengah menjadi '#fae4de' di subkategori Latar Belakang. Warna ini akan diterapkan ke semua garis dalam Modul Timeline yang memungkinkan Item Timeline yang berbeda berinteraksi satu sama lain.

Selanjutnya, buka tab Desain. Pertama-tama, buka subkategori Teks dan buat perubahan berikut:

  • Font Teks: Raleway Light
  • Gaya Font Teks: Tebal
  • Ukuran Font Teks: 14px
  • Warna Teks: #9b857b
  • Tinggi Baris Teks: 1em

Gulir ke bawah tab yang sama dan buat perubahan berikut pada subkategori Teks Label Item:

  • Font Label Item: Raleway Light
  • Gaya Font Label Item: Tebal
  • Ukuran Font Label Item: 39px
  • Warna Teks Label Barang: #9b857b
  • Item Label Line Tinggi: 1.5em

Selanjutnya, lakukan perubahan berikut pada subkategori Teks Judul:

  • Font Judul: Tangerine
  • Judul Ukuran Font: 70px (Desktop & Tablet), 60px (Tablet)
  • Warna Teks Judul: #9b857b
  • Judul Garis Tinggi: 1.5em

Semua modifikasi yang disebutkan di atas akan berlaku untuk setiap item timeline. Klik Simpan & Keluar.

Modifikasi Item Garis Waktu

Ketika Anda melihat hasilnya sejauh ini, Anda dapat melihat bahwa modifikasi telah dilakukan pada gambar total. Sekarang, kita harus membuat perubahan individual pada Item Timeline. Mulailah dengan menambahkan hanya satu Item Timeline. Lalu, buka tab Konten dari Item Timeline itu. Lanjutkan dengan menambahkan judul ke Item Timeline Anda di subkategori Latar Belakang.

Selanjutnya, tambahkan konten yang ingin Anda tampilkan di kotak konten (termasuk waktu dalam huruf miring) dan tulis waktu dalam sehari di bidang Label Garis Waktu. Anda juga dapat menambahkan lokasi di bidang yang sama jika Anda mau.

Konten Item Garis Waktu

Konten yang ditulis di bidang akan muncul di sisi berlawanan dari timeline ketika seseorang mengunjungi situs web Anda dengan desktop. Label ini tidak muncul saat seseorang melihat linimasa Anda di ponselnya. Itu sebabnya kami menyarankan untuk menempatkan informasi praktis yang ingin Anda bagikan di Label Item di kotak konten juga. Dengan begitu, orang yang mengunjungi website melalui telepon juga dapat melihat informasinya.

Gulir ke bawah tab yang sama dan cari ikon hati di daftar Ikon Item, ubah Warna Ikon menjadi '#9b857b' dan Warna Latar Belakang Ikon menjadi '#fae4de'.

Klik Simpan dan Item Timeline akan ditambahkan ke timeline Anda. Dalam contoh yang kami buat, kami menggunakan pengaturan yang sama untuk semua Item Timeline. Oleh karena itu, mengapa kami menyarankan Anda untuk mengkloning Item Timeline pertama dan melakukan penyesuaian lebih lanjut.

Buat Item Timeline sebanyak yang Anda butuhkan untuk membuat jadwal pernikahan Anda sejelas mungkin untuk para tamu pernikahan. Setiap kali Anda menambahkan Item Timeline baru, itu akan secara otomatis berada di sisi berlawanan dari Item Timeline sebelumnya tanpa Anda harus melakukan penyesuaian manual.

Membungkus

Ini adalah bagian terakhir dari miniseri Cara Membuat Website Pernikahan Elegan dengan Divi . Kami berharap ini adalah rangkaian posting yang berharga yang akan membantu Anda membuat situs web pernikahan yang elegan dan menakjubkan untuk diri sendiri atau klien Anda. Jika Anda memiliki pertanyaan tentang tutorial ini, atau jika Anda memiliki permintaan untuk tutorial/miniseri mendatang; pastikan Anda meninggalkan komentar di bagian komentar dari posting blog ini sehingga kami dapat membalas Anda dengan jawaban!

Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!