Cara Membuat Beranda Pengumuman Pernikahan Dengan Divi

Diterbitkan: 2017-05-16

Posting ini adalah bagian 1 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.

Menyiapkan halaman pengumuman pernikahan adalah cara kreatif untuk memberi tahu tamu Anda bahwa Anda akan menikah. Dengan memberi mereka URL situs web Anda, mereka akan tetap berhubungan. Mereka juga dapat melihat detail pernikahan secara online kapan pun mereka mau.

Mari kita lihat tata letak beranda yang akan kami bantu Anda buat langkah demi langkah:

Membuat Menu Navigasi Anda

Kami akan menunjukkan dengan tepat cara membuat halaman pengumuman, halaman galeri, dan halaman daftar hadiah untuk situs web pernikahan Anda. Posting pertama ini didedikasikan untuk membuat halaman pengumuman. Tetapi sebelum kami pergi ke sana, kami ingin memastikan para tamu dapat menemukan jalan mereka melalui situs web Anda dengan lancar.

Itu sebabnya Anda harus membuat menu navigasi yang tepat dan elegan terlebih dahulu.

Mulailah dengan membuka Divi > Opsi Tema > dan unggah logo yang ingin Anda gunakan di seluruh situs web Anda.

Klik Simpan Perubahan dan lanjutkan ke halaman situs WordPress Anda. Tambahkan halaman baru tempat Anda akan membuat halaman pengumuman. Lakukan hal yang sama untuk halaman galeri dan halaman daftar hadiah yang akan kami tunjukkan cara membuatnya di postingan mendatang.

Biarkan konten kosong untuk saat ini dan buka Penyesuai Tema situs web Anda untuk mengubah menu navigasi. Mulailah dengan menambahkan halaman situs web Anda ke menu dengan membuka Menu > Add a menu > Add the pages to your menu . Menu ini harus menjadi menu utama situs web Anda.

Selanjutnya, buka Header & Navigation > Primary Menu Bar dan buat perubahan berikut:

Tinggi Menu: 66
Sesuaikan Tinggi Maks Logo tergantung pada dimensi gambar
Ukuran Teks: 16
Spasi Huruf: 2
Font: Raleway Light
Gaya font: Tebal
Warna teks: #9b7461
Warna latar belakang: rgba(155,116,97,0.13)

Sekarang, kembali ke Header & Navigation dan ubah gaya header menjadi 'Centered' dalam Format Header.

Simpan & Publikasikan perubahan yang Anda buat.

Memulai di Halaman Pengumuman

Situs web ini memiliki empat bagian, dan masing-masing bagian memberikan kontribusi nilainya ke situs web – membuat pengumuman pernikahan Anda selesai. Kami akan menjelaskan setiap bagian secara detail, dan kami akan menunjukkan kepada Anda bagaimana tepatnya Anda dapat membuat desain yang sama seperti tata letak yang ditunjukkan di atas.

Bagian Pahlawan (Termasuk Hitung Mundur)

Bagian pertama dari desain adalah header. Kami memutuskan untuk membuat tamu merasa langsung berinteraksi dengan situs web dan pernikahan dengan meletakkan Modul Hitung Mundur di dalamnya. Di dalam pembuat Divi, bagian header terlihat seperti ini:

Kami akan menggunakan bagian standar dengan satu baris penuh dalam modus lebar penuh di bagian situs web ini. Di bagian baris, Anda harus menambahkan tiga modul; dua Modul Teks dan satu Modul Hitung Mundur. Modul Hitung Mundur terletak di tengah kedua modul teks.

Memulai Dengan Modul Teks Pertama

Mulailah dengan menambahkan Modul Teks ke baris. Tulis teks yang ingin Anda gunakan, ubah Orientasi Teks ke 'Tengah' dan terapkan perubahan berikut ke tab Pengaturan Desain Lanjutan:

Ukuran Font Teks: 100px (desktop), 80px (tablet), 66px (ponsel)
Font Teks: Tangerine
Warna Teks: #9b857b

Di tab yang sama, gulir ke bawah dan ubah margin Modul Teks Anda dengan menambahkan '10%' ke atas dan '5%' ke bawah.

Klik Simpan & Keluar.

Modul Penghitungan (Desktop)

Tambahkan Modul Hitung Mundur di bawah Modul Teks yang baru saja Anda buat. Di tab General Settings, tambahkan tanggal dan waktu pernikahan dan ubah warna latar belakang menjadi '#fae4de'. Kami akan menggunakan hitungan mundur ini hanya di desktop, lanjutkan dan nonaktifkan untuk tablet dan ponsel.

Pindah ke Pengaturan Desain Lanjutan dan buat perubahan berikut:

Font Angka: Tangerine
Ukuran Font Angka: 74px
Warna Huruf Angka: #9b857b
Tinggi Garis Angka: 70px
Font Label: Raleway Light
Ukuran Font Label: 14px
Warna Teks Label: #9b857b
Tinggi Garis Label: 25px

Di tab yang sama, gulir ke bawah dan sesuaikan Padding Kustom Atas ke '10%' dan Padding Kustom Bawah ke '10%'.

Selanjutnya, buka tab Custom CSS ketiga dan tambahkan kode berikut ke elemen utama:

max-width: 50%;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 12px 50px #a9a9a9;

Hitung mundur Anda sekarang akan terlihat persis seperti yang ada di gambar tata letak yang kami tunjukkan di atas.

Modul Hitung Mundur (Tablet & Ponsel)

Sekarang lanjutkan, kloning hitungan mundur sebelumnya yang Anda buat dan nonaktifkan di desktop (bukan tablet dan ponsel). Selanjutnya, buat perubahan berikut pada modul:

Ukuran Font Numbers: 72px (tablet dan ponsel)
Tinggi Garis Angka: 70px
Label Ukuran Font: 14px (tablet), 12px (ponsel)

Dan ubah kode di Elemen Utama tab CSS menjadi:

margin-left: auto;
margin-right: auto;
box-shadow: 0px 12px 50px #a9a9a9;

Modul Teks Kedua

Sekarang, di bawah Modul Hitung Mundur, tambahkan Modul Teks lainnya. Pada tab General Settings, ubah Text Orientation menjadi 'Center'. Lanjutkan dengan menambahkan nama pengantin pria dan wanita dan pergi ke tab Pengaturan Desain Lanjutan.

Di Pengaturan Desain Lanjutan, buat perubahan berikut:

Font Teks: Tangerine
Ukuran Font Teks: 50px
Warna Teks: #9b857b
Tinggi Baris Teks: 1.7em

Lanjutkan menggulir di tab Pengaturan Desain Lanjutan ke Margin Kustom dan tambahkan '10%' ke margin atas.

Pembagi

Bagian terakhir dari bagian hero ini adalah pembagi. Tambahkan pembatas dan ubah warna di tab General menjadi '#9b857b'. Pastikan pembagi dibuat 'terlihat' juga.

Selanjutnya, buka tab Design dan buat Divider Style 'Solid', Divider Position 'Top', ubah bobot divider menjadi '1px' dan sembunyikan di ponsel.

Pindah ke tab CSS dan tambahkan kode berikut ke elemen utama:

margin-left: auto;
margin-right: auto;
width: 30%;

Klik Simpan & Keluar. Anda menyelesaikan bagian pertama situs web, yang akan terlihat seperti ini:

Sekarang kita dapat beralih ke bagian kedua dari tata letak ini di mana Anda dapat mulai menceritakan kisah Anda kepada para tamu.

Mendongeng Pengumuman: Bagian Kedua

Bagian kedua ini memiliki dua baris simetris yang membentuk satu bagian dari beranda pernikahan. Bagian ini memiliki lebar yang sedikit lebih kecil yang menciptakan sedikit lebih banyak perspektif di situs web Anda.

Baris Pertama Bagian

Mulailah dengan membuat bagian standar, ubah warna latar belakang menjadi '#fffaf6' dan tambahkan '5%' ke Padding Bawah. Selanjutnya, tambahkan baris dua kolom ke bagian ini.

Selanjutnya, buka pengaturan baris. Di Pengaturan Umum, pilih 'YA' untuk menggunakan lebar khusus, ubah satuan menjadi persentase dan isi '90%'. Gulir ke bawah di tab yang sama, aktifkan Lebar Talang dan sembunyikan untuk ponsel & tablet.

Lalu, masuk ke tab Advanced Design Settings, samakan tinggi kolom dan tambahkan '#9b857b' sebagai warna latar belakang kolom pertama. Di tab yang sama, ubah padding kolom 1 menjadi '5%' atas, '10%' kanan, '5%' bawah dan '10%' kiri.

Untuk kolom kedua, kita tidak perlu mengatur warna latar belakang tetapi mengunggah gambar latar belakang.

Modul Teks

Sekarang, tambahkan modul teks di kolom pertama baris. Di tab Pengaturan Umum, letakkan orientasi teks ke 'Tengah' dan ketik teks yang ingin Anda bagikan di kotak teks. Lalu buka tab Pengaturan Desain Lanjutan.

Di tab Pengaturan Desain Lanjutan, buat perubahan berikut:

Lebar Maks: 500px (hanya untuk desktop)
Font Teks: Tangerine
Ukuran Font Teks: 44
Warna Teks: #ffff6

Dan tambahkan 5% ke padding bawah.

Tekan Simpan & Keluar dan tambahkan Modul Teks lainnya. Jadikan Orientasi Teks 'dibenarkan'. Lanjutkan dengan membuat perubahan berikut pada Modul Teks di Pengaturan Desain:

Lebar Maks: 500px
Ukuran Font Teks: 14px
Font Teks: Raleway Light
Gaya Font: Tebal
Warna Font Teks: #fffaf6
Tinggi Baris Teks: 1.7em

Tekan Simpan dan Keluar.

Klon Baris Sebelumnya

Sekarang, kloning baris yang baru saja Anda buat. Baris yang dikloning akan secara otomatis ditempatkan di bawah baris yang baru saja Anda buat. Tetapi dalam kasus ini, kita membutuhkan modul berada di sisi yang berlawanan. Tempatkan dua modul teks di kolom kedua, bukan yang pertama.

Kemudian, buka pengaturan baris dan tambahkan gambar latar belakang ke kolom pertama. Hapus semua pengaturan padding yang kita buat di padding kolom pertama dan letakkan di padding kolom kedua.

Tekan Simpan & Keluar dan Anda siap melakukannya.

Baris untuk Ponsel & Tablet

Buat baris dua kolom lain dan sembunyikan untuk desktop. Buat baris dengan lebar penuh dan ubah lebar talang menjadi '3'.

Selanjutnya, buka tab Desain dan unggah gambar latar belakang untuk kedua kolom dan buat perubahan berikut pada Padding Kustom dari kedua kolom:

Atas: 5%
Kanan: 10%
Bawah: 5%
Kiri: 10%

Setelah menambahkan bagian kedua ini, beginilah tampilan tata letak Anda sekarang:

Best Man, Maid Of Honor, Bridesmen and Groomsmen

Mengapa tidak menempatkan orang-orang terpenting dalam hidup Anda di situs web pernikahan Anda? Memberikan siapa pria terbaik, pengiring pengantin, pengiring pengantin, dan pengiring pria akan menjadi, dapat memberikan sedikit dorongan ekstra ke situs web Anda.

Untuk menambahkan bagian ini ke situs Anda, mulailah dengan menambahkan bagian standar baru ke halaman Anda. Di dalam bagian baru itu, Anda harus membuat tiga baris dengan kolom dan modul yang berbeda.

Sekarang, setelah Anda membuat bagian, yang merupakan bagian standar, berikan warna latar belakang berikut: '#fae4de'. Anda tidak perlu mengubah apa pun di pengaturan bagian sehingga Anda dapat menekan Simpan & Keluar.

Membuat Modul Teks

Selanjutnya, buat baris lebar penuh pertama Anda. Satu-satunya hal yang harus Anda masukkan adalah Modul Teks. Buka Modul Teks, isi kotak teks dan pilih 'Tengah' di bidang Orientasi Teks.

Lalu pergi ke Pengaturan Desain Lanjutan, atur Font Teks ke 'Tangerine', Ukuran Font Teks ke '100px' (desktop & tablet) dan '68%' (ponsel) dan Warna Font Teks ke '#9b857b'. Gulir ke bawah tab yang sama dan ubah margin menjadi '10%' di atas dan '5%' di bawah.

Klik Simpan & Keluar. Modul dan baris pertama Anda sekarang sudah selesai.

Tambahkan baris lain, dalam hal ini dengan dua kolom dan tambahkan 5% ke margin atas dan bawah. Selanjutnya, tambahkan modul person di kolom pertama baris.

Modul Gambar Dan Orang

Selanjutnya, buka pengaturan modul orang. Unggah gambar, masukkan URL saluran media sosial di bidang dan tulis sedikit tentang mereka di kotak teks. Jika Anda tidak yakin dimensi apa yang harus dimiliki gambar Anda, lihat posting blog ini.

Selanjutnya, buka Pengaturan Desain Lanjutan dan lakukan penyesuaian berikut:

Font Header: Raleway Light
Gaya Font Tajuk: Tebal
Ukuran Font Tajuk: 14
Warna Teks Tajuk: #9b857b
Tinggi Garis Tajuk: 1em
Font Tubuh: Raleway Light
Gaya Huruf Tubuh: Tebal
Ukuran Huruf Tubuh: 14
Warna Teks Tubuh: #9b857b
Tinggi Garis Tubuh: 1.7em

Buka pengaturan modul orang dan buka tab CSS. Di dalam bidang Gambar Anggota, tambahkan kode berikut:

-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
margin-left: 5%;
margin-right: 5%;

Sekarang lanjutkan dan kloning Modul Gambar dan Orang dan letakkan di kolom kanan.

Lanjutkan dengan menambahkan baris baru dengan empat kolom dan mengkloning modul Image and Person lagi (empat kali) dan meletakkannya di setiap kolom. Kode dan pengaturan yang kami gunakan pertama kali akan berlaku untuk semuanya.

Tata letak Anda akan terlihat seperti ini sekarang:

Dimana dan kapan

Ini adalah bagian terakhir dari beranda pernikahan Anda, di mana Anda akan memberi tahu audiens Anda tentang tempat dan waktu pernikahan Anda. Untuk bagian ini, kita membutuhkan baris dengan 3 kolom (1/2, 1/4, 1/4) dengan warna latar belakang berikut: '#fffaf6'.

Menambahkan Peta

Di kolom pertama bagian ini, tambahkan modul Peta. Untuk dapat menggunakan fitur Peta, Anda harus memasukkan kunci Google API. Jika Anda tidak memiliki kunci API, baca di sini cara membuatnya. Masukkan alamat pernikahan Anda dan biarkan modul menemukan lokasinya. Untuk membuat pin di peta Anda, tambahkan pin baru dan masukkan lokasi lagi, pin tersebut kemudian akan muncul di peta.

Di kolom lain, kita akan menggunakan modul teks dan uraian. Tambahkan modul teks dan atur pengaturan Orientasi Teks di Pengaturan Umum ke 'Tengah'. Selanjutnya, buka Pengaturan Desain Lanjutan dan buat perubahan berikut:

Font Teks: Tangerine
Ukuran Font Teks: 50px
Warna Teks: #9b857b
Tinggi Baris Teks: 1.7em

Pengaturan modul teks ini berlaku untuk modul teks di kedua kolom.

Modul Blurb

Di bawah Modul Teks, tambahkan Modul Blurb. Pilih ikon lokasi, ubah warnanya menjadi '#f9c8b8', tambahkan lokasi di kotak teks dan ubah Orientasi Teks menjadi 'Tengah'. Kemudian, buka Pengaturan Desain Lanjutan dan buat perubahan berikut:

Ukuran Font Ikon: 42px
Font Tubuh: Raleway Light
Gaya Font: Tebal
Ukuran Huruf Tubuh: 14
Warna Teks Tubuh: #9b857b
Tinggi Garis Tubuh: 1em

Pada kolom berikutnya, lakukan hal yang sama persis. Ubah hanya ikon uraian menjadi jam dan tambahkan detail 'kapan' di kotak teks.

Itu dia. Tata letak Anda sekarang akan terlihat semulus tata letak dalam tutorial ini:

Selanjutnya

Di bagian kedua dari miniseri ini, kita akan melihat bagaimana Anda membuat halaman galeri yang didedikasikan untuk berbagi foto dengan tamu Anda setelah pernikahan. Jika Anda memiliki komentar tentang tutorial ini, atau jika Anda memiliki permintaan untuk tutorial selanjutnya; pastikan Anda meninggalkan komentar di bagian komentar dari posting blog ini sehingga kami dapat membalas Anda!

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