Imej-imej dalam contoh-contoh ini diambil dari Pack Layout Pereka Dalaman Free

Transkripsi

1 Sorotan Plugin Divi: Blurb Bahan untuk Divi 1 Blurbs adalah salah satu modul yang paling popular dan serba boleh di Divi. Mereka sering digunakan untuk pautan ke halaman, penerangan untuk perkhidmatan, panggilan ke tindakan, kategori menu makanan, pautan ke halaman ahli pasukan, pautan ke acara, jadual mingguan, pautan untuk menyimpan kategori, portfolio, dan banyak lagi. Plugin pihak ketiga yang dipanggil Blurb Bahan untuk Divi mengambil reka bentuk blurb satu langkah lebih jauh dengan memberi anda alat untuk membuat kad materi. Blurb Bahan untuk Divi menambah modul baru kepada Divi Builder yang mewujudkan kad rekabentuk bahan yang termasuk ciri-ciri seperti imej atau ikon, teks, dan panggilan ke butang tindakan. Kesan termasuk 6 tahap ketinggian, kesan hover, dan 4 hover animasi. Tambah warna latar belakang, kecerunan, atau gambar latar belakang, memaparkannya dengan atau tanpa sempadan, dan membuat susun atur anda sendiri menggunakan editor teks yang kaya. Imej-imej dalam contoh-contoh ini diambil dari Pack Layout Pereka Dalaman Free Tetapan Modul Blurb Bahan untuk Divi 1

2 Sorotan Plugin Divi: Blurb Bahan untuk Divi 2 Blurb Bahan untuk Divi menambah modul baru kepada Pembina Divi yang dipanggil Bahan Blurb. untuk Divi 2

3 Sorotan Plugin Divi: Blurb Bahan untuk Divi 3 Tab Kandungan termasuk imej, teks, pautan, tetapan latar belakang, dan label admin. Untuk imej yang anda boleh pilih untuk menggunakan ikon atau gunakan imej hover, yang memaparkan imej baru apabila anda berlegar. untuk Divi 3

4 Sorotan Plugin Divi: Blurb Bahan untuk Divi 4 Reka bentuk tab termasuk tetapan untuk gaya bahan, teks, teks tajuk, teks badan, butang, butang kedua, jarak, sempadan, bayang kotak, dan animasi. Tetapan bahan termasuk ketinggian, ketinggian hover, durasi animasi, dan hover animasi. untuk Divi 4

5 Sorotan Plugin Divi: Blurb Bahan untuk Divi 5 Lanjutan tab memberikan anda medan standard dan menambahkan medan untuk bekas blurb, kontena gambar, imej, gambar hover, kontena teks, kandungan teks, tajuk, badan, butang butang, butang, butang kedua, ikon, dan ikon hover. Ia juga menambah pilihan sifat untuk hubungan butang dan untuk Divi 5

6 Sorotan Plugin Divi: Blurb Bahan untuk Divi 6 hubungan butang kedua. Contoh Default Divi Blurb Modul dan Bahan Blurb Perbandingan Berikut adalah contoh yang menggunakan imej, tajuk, dan teks. Ia memaparkan imej dalam saiz penuh. Tetapan lalai meletakkan sempadan di sekeliling blurb untuk membuat kad dan meletakkan tajuk dan teks badan di pusat bawah dalam kad. untuk Divi 6

7 Sorotan Plugin Divi: Blurb Bahan untuk Divi 7 Untuk perbandingan di sini modul Divi blurb lalai menggunakan imej dan teks yang sama dengan tetapan lalainya. Sudah tentu anda boleh meletakkan sempadan di sekitar standard Divi blurb dan pusat teks jika anda mahu, tetapi ia masih kelihatan berbeza daripada apa yang anda dapat dari Bahan Blurb. untuk Divi 7

8 Sorotan Plugin Divi: Blurb Bahan untuk Divi 8 Ikon paparan bahan blurbs ini. Ini ialah tetapan lalai untuk modul Bahan Blurb. Untuk perbandingan di sini adalah modul Divi lalai dengan tetapan lalai. Contoh Blurb Bahan untuk Divi Kawasan teks secara automatik mengambil warna latar belakang. Anda boleh menukar ini jika anda mahu. Saya telah menambah warna latar belakang yang berlainan untuk setiap bahan untuk Divi 8

9 Sorotan Plugin Divi: Blurb Bahan untuk Divi 9 binaan. Tetapan ketinggian menambah bayangan. Setakat ini saya telah menggunakan 1 (tetapan lalai) untuk ketinggian. Contoh ini, dari kiri ke kanan, menggunakan 2, 3, dan 4. Ini mempunyai ketinggian yang dimatikan tetapi mempunyai ketinggian hover 5. Saya melayang-layang di atas pukulan bahan pusat. untuk Divi 9

10 Sorotan Plugin Divi: Blurb Bahan untuk Divi 10 Saya telah menambahkan imej hover, yang berubah kepada imej baru sambil anda tetikus ke atas mana-mana kawasan bahan blur, termasuk butang. Dalam satu ini saya telah menukar ketinggian, jejari sempadan, dan menukar tajuk dan gaya teks badan dan kedudukan. Untuk yang jauh meninggalkan ketinggian ditetapkan kepada 3 dan jejari sempadan menjadi 100. Bagi yang di untuk Divi 10

11 Sorotan Plugin Divi: Blurb Bahan untuk Divi 11 tengah-tengah saya telah melumpuhkan sempadan dan warna latar belakang supaya ia akan bercampur dengan latar belakang. Yang di sebelah kanan mempunyai jejari sempadan sebanyak 20. Saya telah menambah butang ke blurbs bahan. Anda boleh menambah sama ada satu atau dua dan menyusunnya atau menetapkannya secara bersebelahan. Anda boleh memilih orientasi butang (pilih dari kanan, kiri, atau tengah), mod butang (pilih dari bungkus atau isi), tetapkan jarak butang, dan gunakan gaya tersuai. Berikut adalah beberapa gaya yang berbeza untuk butang tersebut. Semua untuk Divi 11

12 Sorotan Plugin Divi: Blurb Bahan untuk Divi 12 tetapan yang anda harapkan di sini. Contoh-contoh ini menggunakan ikon. Saya telah memasukkan bulatan, mengalih keluar sempadan, menukar jejari sempadan, menukar ketinggian, dan lain-lain Inilah melihat animasi. Pukulan material boleh bergerak naik, turun, kiri, atau kanan di atas hover dan anda boleh menetapkan jarak dalam piksel. Anda boleh menggunakan gradien, imej, dan video untuk latar belakang. Pukulan bahan di sebelah kiri menggunakan latar belakang gradien dengan sempadan. Yang di sebelah kanan menggunakan imej dengan ikon yang untuk Divi 12

13 Sorotan Plugin Divi: Blurb Bahan untuk Divi 13 mempunyai ketelusan 60% untuk latar belakangnya. Saya telah memberikan bayangan kotak untuk sempadan dan bayangan teks kepala dan badan untuk membuat teks lebih mudah dibaca. Saya telah membuat tajuk yang lebih kecil dan teks tubuh lebih besar. Imej latar belakang boleh menggunakan paralaks, overlay, dll Teks badan menggunakan editor teks kaya. Anda boleh membuat bahan binaan anda hanya dari kandungan yang anda letakkan di sini. untuk Divi 13

14 Sorotan Plugin Divi: Blurb Bahan untuk Divi 14 Kedua-dua kekangan bahan ini dicipta menggunakan hanya editor teks yang kaya. Yang pertama meletakkan teks header di atas imej sementara yang kedua mengubah saiz imej, meletakkannya di sebelah kiri, dan teks diletakkan di sebelah kanan. Dalam contoh-contoh ini saya telah meletakkan butang di atas tajuk. Ini dilakukan dengan menambahkan CSS. Nasib baik kod tersebut disediakan di untuk Divi 14

15 Sorotan Plugin Divi: Blurb Bahan untuk Divi 15 laman web pemaju lengkap dengan arahan di mana untuk menambahnya. Saya telah menambah kecerunan pada butang di sebelah kiri dan meletakkan imej di dalam kawasan teks dengan lapisan. Butang di sebelah kanan mempunyai imej latar belakang. Saya telah meningkatkan saiz fon, menyelaraskan jejari sempadan, dan menamakan tajuk dan teks tubuh. Dalam contoh-contoh ini saya meletakkan tempat di sebelah kiri untuk menunjukkan perkhidmatan dengan butang untuk maklumat lanjut dan butang untuk melihat lebih banyak perkhidmatan. Blurb pada pautan yang betul ke halaman produk dan termasuk butang membeli tunggal. Yang di sebelah kiri mempunyai ketinggian 5 manakala yang di sebelah kanan ditetapkan ke 2. Saya juga menyesuaikan radius sempadan dan butang hingga 5 untuk blurb yang betul. untuk Divi 15

16 Sorotan Plugin Divi: Blurb Bahan untuk Divi 16 Contoh-contoh ini menunjukkan butang tanpa ikon atau imej. Kedua di sebelah kiri termasuk latar belakang untuk kad manakala ketiga di sebelah kanan tidak. Orang-orang di sebelah kiri tidak memasukkan sempadan untuk kad. Saya telah memberikan setiap butang warna latar belakang atau kecerunan. Dua di sebelah kanan mempunyai butang yang disambungkan. Ini dicapai dengan menambahkan CSS untuk mengalih keluar sempadan di sisi yang anda mahu butang menyambung. CSS tersedia dalam demo yang boleh anda muat turun dari laman web pembangun dan dalam dokumentasi. untuk Divi 16

17 Sorotan Plugin Divi: Blurb Bahan untuk Divi 17 untuk Divi 17

19 Sorotan Plugin Divi: Blurb Bahan untuk Divi 19 Inilah caranya bahan api kelihatan dalam susun atur. Ini adalah halaman Kedai dari Pek Layout Dalaman. Ia menggunakan Blurb bahan yang sama sebagai contoh produk dari atas, tetapi saya telah membuat beberapa perubahan. Saya telah menambahkan CSS dari dokumentasi untuk menjadikan bahan tersebut sebagai saiz yang sama dan pusat teks tersebut. CSS mudah ditambah dan saya tidak perlu mengubahnya. Menggunakan Blurb Bahan untuk Divi dengan Tambahan untuk Divi 19

22 Sorotan Plugin Divi: Blurb Bahan untuk Divi 22 Bahan Blurb untuk Divi bekerja dengan baik dengan tambahan. Berikut adalah susun atur yang sama dari Pek Layout Dalaman. Saya telah menggantikan modul Kedai dengan modul Bahan Blurb. Lesen, Dokumentasi, Muat Layout Contoh Anda boleh membeli Bahan Blurb untuk Divi melalui pautan di laman web pemaju. Bahan Blurb untuk Divi mempunyai 2 lesen untuk dipilih: Tapak tunggal $ tapak tanpa had $ Laman ini juga termasuk dokumentasi. Ia termasuk beberapa petua tentang bagaimana untuk mencapai reka bentuk dalam demo termasuk beberapa CSS dengan arahan langkah demi langkah tentang cara melaksanakan kod tersebut. Dokumentasi ini juga termasuk fail JSON yang boleh dimuat turun untuk halaman sampel. Ini memberikan anda 43 contoh yang anda boleh salin dan menyesuaikan dan berfungsi sebagai demonstrasi bagaimana untuk mencapai reka bentuk tertentu dari halaman demo. Saya menggunakan dokumentasi untuk menambah kod untuk menyamakan ketinggian. Saya menggunakan susun atur sampel untuk memikirkan bagaimana untuk meletakkan butang di atas teks. Ini adalah satu-satunya masa saya memerlukan demo atau mana-mana dokumentasi. untuk Divi 22

23 Sorotan Plugin Divi: Blurb Bahan untuk Divi 23 Mengakhiri Pikiran Blurb Bahan untuk Divi mencipta kad bahan bagus dan serba boleh. Saya dapati ia mudah digunakan dan ia dapat melakukan semua yang saya mahu. Tetapan itu jelas dan CSS pada laman web pemaju yang anda boleh salin dan tampal memberikan anda lebih banyak ciri. Satu-satunya perkara yang kelihatan sedikit berbeza daripada apa yang saya gunakan ialah ciri tindanan imej. Daripada mempunyai lapisan standard ia mempunyai imej hover. Ini bagus untuk menggantikan imej pada hover dengan imej baru, tetapi jika anda mahu ia memaparkan teks dalam tindihan anda perlu membuat tindanan sebagai imej untuk digunakan sebagai imej hover. Antara editor teks yang kaya, ketinggian, sempadan, butang, imej, dan ikon anda boleh membuat praktikal apa-apa jenis kad bahan yang anda mahukan. Sekiranya anda berminat menggunakan blur bahan dengan Divi, Bahan Blurb untuk Divi mungkin menjadi plugin yang anda perlukan. Kami mahu mendengar daripada anda. Pernahkah anda mencuba Bahan Blurb untuk Divi? Marilah kita tahu apa yang anda ﬁkirkan tentangnya di dalam komen di bawah. Imej Pilihan melalui Sammby / shutterstock.com Credit to Elegant Themes untuk Divi 23