Cara Membuat Bagian Situs Hero di Gutenberg dengan Tema Total

Tema Total WordPress hadir dengan serangkaian alat yang mungkin dibutuhkan situs web bisnis.

Tema ini menawarkan pengeditan visual melalui WordPress Customizer dan impor data demo cepat, yang sangat membantu untuk membangun halaman depan yang luar biasa.

Seperti yang Anda lihat, versi gratis Total tidak mengunci Anda dengan pembuat halaman WordPress tambahan, melainkan memberikan cara asli WordPress untuk mendesain situs web Anda.

Dengan kedatangan Gutenberg, editor WordPress berbasis blok, tema WordPress apa pun, termasuk Total, dapat dikustomisasi lebih jauh. Pilihan elemen konten (blok) memberi kami kebebasan penyesuaian yang belum pernah kami lihat sebelumnya di inti WordPress, sulit untuk menyangkalnya.

Beberapa pengaturan gaya blok, bagaimanapun, masih sangat terbatas di editor default. Jadi, jika Anda berada di editor Gutenberg baru dan Total yang ingin membangun dan mendesain konten yang lebih baik, Anda akan menemukan beberapa tip bermanfaat dalam tutorial ini.

Untuk lebih tepatnya, dalam posting ini, kami ingin menunjukkan beberapa contoh bagaimana membangun dan menyesuaikan elemen situs web penting seperti bagian pahlawan, sub-pahlawan, dan ajakan bertindak di Gutenberg. Mereka yang biasanya membantu bisnis:

• Buat bagian situs web intro/selamat datang
• Promosikan produk atau acara utama
• Fokus pada item atau layanan portofolio tertentu, dll.

Untuk meningkatkan kemungkinan penyesuaian Gutenberg, kami akan menggunakan plugin Getwid WordPress Blocks yang kami rekomendasikan untuk pengguna tema Total. Kami yakin beberapa pengguna Total telah mencoba Getwid.

Namun bagi Anda yang bertanya-tanya apa itu Getwid, berikut penjelasan singkatnya.

Singkatnya, ini adalah addon asli Gutenberg gratis yang sejauh ini hadir dengan perpustakaan blok seperti premium terbesar dan koleksi desain yang disesuaikan untuk Gutenberg . Ini bukan satu-satunya alasan mengapa kami merekomendasikannya.

Kami secara khusus menyukai plugin ini karena menyatu dengan baik dengan gaya Total default, memungkinkan Anda untuk mematikan blok apa pun yang tidak Anda perlukan, dan benar-benar kaya fitur.

Plugin muncul sebagai yang direkomendasikan ketika Anda mengaktifkan Total – ini adalah solusi sementara untuk melihat apakah itu cocok untuk pelanggan kami.

Tapi yah, Anda perlu mencobanya sendiri untuk melihat apakah itu solusi Anda. Sementara itu, mari kita lihat contoh yang berhasil kita buat.

Contoh bagian pahlawan & ajakan bertindak yang dibuat dengan Getwid di Total

Kami melakukan uji coba ini dalam versi gratis dari tema Total dan dapat dikatakan bahwa hampir tidak ada batasan.

Namun, opsi Lebar penampung situs web Total terbatas, jadi jika Anda mencari tata letak layar penuh yang imersif, Anda mungkin ingin mempertimbangkan Total Plus.

Pertama-tama, Anda hampir selalu perlu menggunakan blok Bagian oleh blok Getwid WordPress. Ini adalah wadah yang dapat menangani sejumlah blok lainnya. Dengan demikian, bagian pahlawan Anda dapat menampilkan konten apa pun.

Hal menonjol lainnya tentang wadah Bagian adalah ia menawarkan banyak jenis latar belakang: gambar, warna, video (dari Perpustakaan Media WP atau YouTube), gradien multi-warna, dan banyak lagi.

Jadi tugas utama Anda saat mendesain area situs web dengan blok Bagian adalah:

• Pilih dan sesuaikan jenis latar belakang sehingga konten di atasnya tetap dapat dibaca dan jelas.
• Masukkan blok yang dibutuhkan dalam urutan yang diinginkan.
• Sesuaikan jarak (ada sudut yang dapat diseret seperti pada pembangun visual untuk mengatur ruang dalam dan luar).
• Opsional: tambahkan animasi, pembagi bentuk, dan elemen dekorasi lainnya.

Sekarang mari kita pergi dengan contoh.

Contoh 1. Pameran produk

Semua blok dalam contoh ini ditempatkan di dalam blok Bagian:

1. Judul Lanjutan
2. Judul Lanjutan
3. Judul Lanjutan
4. Grup Tombol
5. Latar belakang bagian: gambar (Pemosisian > Kanan atas; Ukuran > Otomatis)

Blok heading memungkinkan Anda untuk menggunakan font Google, ukuran teks, berat font, dll. Ada juga beberapa gaya untuk tombol (isi atau garis besar).

Tantangan terbesar yang mungkin terjadi adalah menemukan gambar latar belakang yang tepat dan memilih posisi gambar yang tepat karena ukurannya akan diubah secara otomatis berdasarkan viewport.

Contoh 2. Ekstrak portofolio

Semua blok ditempatkan di dalam blok Bagian:

1. Judul Lanjutan
2. Judul Lanjutan
3. Tiga kolom (Paragraf, Gambar, Gambar, Gambar)
4. Latar belakang bagian: gradien

Anda juga dapat menempatkan tombol ajakan bertindak untuk menautkan ke halaman portofolio lengkap.

Contoh 3. Fitur atau kartu acara

Di bagian pahlawan seperti itu, Anda dapat memamerkan produk, acara, layanan, benda, orang, dll.

Blok Advanced Heading memungkinkan Anda memilih font apa saja:

Dalam contoh ini, kami menggunakan latar belakang gradien dan pembagi bentuk bawah latar belakang (Gelombang Berlapis-lapis).

1. Dua Judul Lanjutan
2. Gugus kalimat
3. Tombol
4. Gambar
5. Latar belakang bagian: gradien + pembagi bentuk

Contoh 4. Bagian ajakan bertindak

Sekali lagi, Anda harus mulai dengan blok Bagian. Untuk menempatkan heading seperti pada contoh di bawah ini, Anda dapat menggunakan template dari Getwid Template Library atau membuat pola dari awal.

Ini adalah bagian yang sangat mudah dengan gambar latar belakang, beberapa judul dan tombol terpusat.

1. Tiga blok Heading Lanjutan
2. Blok tombol
3. Latar belakang bagian: gambar dengan opacity (Ukuran > sampul)

Anda juga akan menikmati betapa mudahnya Anda menyesuaikan perataan konten dengan sudut yang dapat diseret:

Ini juga merupakan tren untuk membuat tata letak offset dengan meletakkan judul di atas gambar:

Di Getwid, Anda dapat mencapainya dengan mengatur gambar latar belakang yang sesuai dengan beberapa ruang kosong untuk baris teks.

Contoh 5. Bagian sub-pahlawan

Cukup sering bagian sub-pahlawan memberikan lebih banyak informasi tentang proyek atau orang. Ini cocok untuk menampilkan bio, cerita, atau tujuan utama Anda.

Sebagai elemen visual, kami menggunakan blok Galeri Gambar Tumpukan oleh Getwid, yang hadir dengan beberapa gaya. Namun, Anda dapat menggantinya dengan gambar, video, atau elemen konten lainnya.

1. Dua Judul Lanjutan
2. Gugus kalimat
3. Tombol
4. Blok Galeri Gambar Tumpukan
5. Latar belakang bagian: warna solid

Contoh 6. Aksen visual

Galeri gambar, penggeser, dan video adalah alat visual yang sangat umum untuk membuat bagian yang menarik perhatian.

Misalnya, Anda dapat menggunakan blok Media & Penggeser Teks oleh Getwid untuk membuat tayangan slide dengan konten teks opsional:

1. Penggeser Media & Teks
2. Latar belakang bagian: gradien + pembagi atas dan bawah dengan ketinggian khusus

Ada juga banyak blok Getwid berbasis pasca yang dapat disajikan dalam slider (mereka akan secara otomatis bersumber dari konten situs web Anda). Ingin menyajikan beberapa posting terbaru atau yang dipilih secara manual dalam format slider atau grid/daftar? Ada blok untuk itu.

Contoh 7. Spanduk

Getwid hadir dengan blok Banner praktis yang menawarkan wadah default gambar dan teks. Ini juga memiliki pilihan efek animasi yang memungkinkan Anda membuat bagian dengan spanduk lebih dinamis.

Blok ini sangat cocok untuk penjualan sementara dan sorotan konstan.

1. Spanduk
2. Latar belakang bagian: gradien monokrom

Contoh 8. Bagian informatif

Jika Anda ingin menampilkan lebih banyak informasi dengan cara yang terstruktur dan ringkas, Getwid menawarkan tiga blok khusus untuk tujuan ini: Tabs, Accordion, dan Toggle.

Berikut adalah tata letak dua kolom dengan blok Accordion dan gambar di sampingnya:

Fitur unik dari blok ini adalah kemampuan untuk memuat blok apa pun di dalam widget tab. Artinya, selain teks, Anda dapat menambahkan gambar, daftar, video, galeri, penggeser ke tab.

Ada banyak lagi blok yang dapat menambahkan fungsionalitas unik ke bagian pemasaran Anda, misalnya Hotspot Gambar untuk membuat bagian gambar yang informatif, Kotak Ikon untuk layanan, umpan galeri Instagram waktu nyata, dan banyak lagi.

Anda dapat membuat dan mendesain bagian serupa dari halaman Gutenberg kosong, memilih tata letak halaman yang diperlukan dalam pengaturan halaman Total.

Untuk menyelesaikan

Apakah Anda tahu apa hal terbaik tentang menggunakan kombo Gutenberg dan Getwid dalam tema Total gratis? Tidak, bukan hanya jumlah blok yang penting.

Yang lebih penting, Anda tidak perlu memiliki mata desainer (atau keterampilan pengembang) untuk membuat konten yang menarik. Ada begitu banyak skin yang sudah jadi, pola blok, dan desain siap pakai yang siap membantu Anda. Getwid WordPress Blocks juga merupakan alternatif yang baik untuk pembuat halaman bagi Anda yang tetap menggunakan Total versi gratis.

Sampai editor blok tidak cukup matang, tambahan tambahan asli Gutenberg bisa menjadi titik awal yang bagus.

Sudahkah Anda mencoba Gutenberg atau Getwid? Beri tahu kami di komentar.