Membuat Sendiri Services Box Responsive Pada Tema GeneratePress

Sebagai pemilik website, apapun produk atau jasa yang kita tawarkan, akan sangat menarik jika kita bisa menampilkan highlight produk/jasa dalam bentuk services box. Jika Anda menggunakan theme GeneratePress, maka Anda dapat membuatnya sendiri.

Membuat Custom Shortcode

Agar lebih mudah "menempelkan" services box kita, maka kita akan membuat custom shortcode. Untuk itu Anda butuh plugin Code Snippets untuk menulis kode. Silahkan pasang dan aktifkan plugin tersebut.

Menyiapkan Font Awesome

Font awesome diperlukan untuk menampilkan icon pada services box kita,  dan berita baiknya GeneratePress sudah dilengkapi dengan fontawesome, kita hanya perlu memastikan pilihan "Load essential icons only" ( pada Customizer pilih section General ) tidak tercentang.

Menulis Kode untuk Shortcode

Buat snippet baru, beri judul "Services Box", kemudian tulis kode dibawah ini pada bagian Code

Pilih opsi "Only run on site front-end" kemudian klik "Save Changes and Activate". Pada kode diatas kita lihat css class "grid-25 mobile-grid-100 tablet-grid-50" adalah kelas-kelas dari Unsemantic Framework, yaitu framework CSS yang digunakan pada tema GeneratePress.

Tempel Shortcode pada Halaman

Sebelum ditempel mari kita beri sentuhan terakhir berupa sedikit kode CSS, silahkan masuk ke Customizer, kemudian pilih section Additional CSS. Tulis kode css sesuai keinginan.

Setelah semua beres, tinggal tempel shortcode [spr_services_box]  pada page/post manapun yang ingin Anda munculkan Services Box ini.

Happy WordPressing 🙂

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
envelope-otagscalendarwhatsapp
0
Would love your thoughts, please comment.x
()
x