Artikel berikut ini adalah artikel yang hanya diperuntukan bagi anggota yang diberikan hak membership sebagai
Author CityResort
yaitu anggota yang diberikan hak untuk membuat konten pada situs ini
sehingga konten di bawah ini hanya dapat dilihat oleh anggota yang dikategorikan sebagai “Author CityResort”
Bilamana Anda merasa mempunyai hak akses sebagai pembuat konten situs ini dan tidak bisa mengaksesnya, maka Anda dapat menghubungi AdminWeb.
Untuk Anda yang melanjutkan membuat konten, kami anggap Anda sudah melihat dokumentasi tentang “Dashboard Back Office” sebagai dasar pengetahuan membuat konten
Terima kasih atas Perhatiannya
[ihc-hide-content ihc_mb_type=”show” ihc_mb_who=”13″ ihc_mb_template=”1″ ]
Contoh Membuat Konten Tingkat 1
Artikel ini menjelaskan contoh membuat konten tingkat 1
Anda dianggap sudah memahami artikel “Dasar Membuat Konten” karena artikel dasar itu tidak kami jelaskan lagi disini
Untuk membuat konten ini, kita akan menggunakan post sebelumnya yaitu “Dijual Murah BU Avanza 2020”
Duplicate dan/atau Edit Post Sebelumnya
( 1 ) Pada menu post silakan pilih “Duplicate Post” dan kemudian sistem menambahkan satu yang masih “draft” dengan nama dibelakangnya sebagai “…copy“
( 2 ) Edit post, mari kita edit post yang baru ini
Mula-mula ganti judulnya , dan ganti “Permalink” yaitu link untuk post ini
Permalink wajib diganti supaya permalinknya sesuai dengan judul dari post ini dan terlihat rapih, bilamana judulnya bentrok dengan punya orang lain, maka sistem secara otomatis akan menyesuaikannya
Setelah judul dan permalink diubah, Anda bisa menyimpannya sebagai draft (Save Draft)
( 3 ) Avada Builder
Kita akan mempelajari edit post dengan menggunakan editor baru yaitu “Avada Builder” dimana editor ini adalah editor yang jauh lebih powerfull, lebih lengkap dan jauh lebih intuitif
Pilih “Avada Builder“
Tampilannya akan menjadi seperti di bawah ini , artikel yang sebelumnya oleh Avada dikumpulkan ke dalam satu element yang bernama “Text Block” karena artikel sebelumnya digolongkan pada element “Text Block”
Avada builder memiliki banyak element, Anda dapat memakai element-element ini, setiap element mempunyai fungsi tertentu, dan saya tidak menjelaskan semuanya, saya akan menjelaskan element yang paling sering dipakai, yaitu element untuk pembuatan artikel ini, namun element-element ini pun sudah cukup canggih !
Pelajaran berikut ini akan lebih mendalam, jangan kuatir Anda bisa mencobanya tahap demi tahap
Setelah memahaminya, maka Anda dijamin dapat membuat artikel dengan tampilan yang bervariasi
( 4 ) Membuat 2 kolom layar, pilih “+ Element” , lalu pilih “Nested Columns”, pilih “1/2 – 1/2”
( 5 ) Selanjutnya adalah drag (tarik geser) nested columns 1/2+1/2 ini ke paling atas , sehingga menjadi gambar seperti di bawah ini
Nah mungkin Anda bertanya-tanya , apa tujuannya membuat nested columns dan menggesernya ke atas?
Sabar ya, ikuti saja langkah-langkah berikut ini, nanti Anda akan mempelajari dan melihat hasil tampilan iklannya akan jauh lebih bagus dibandingkan post sebelumnya
Langkah berikutnya yaitu membuat tampilan 2 kolom menjadi seperti gambar di bawah ini, yaitu kolom kiri berisi teks iklan, kolom kanan berisi 3 buah tombol
( 6 ) Menambahkan element pada nested column 1/2+1/2
Sekarang klik pada nested column 1/2+1/2 yang saat ini berada paling atas
Klik “Edit” (gambar pensil)
Kemudian setelah di dalam kolom 1/2+1/2 itu , tambahkan element pada kolom kiri , cari element dan pilih element “Text Block”
Kemudian isikan Text Block dengan teks iklan dan ubah font, font size, font warnanya sesuai selera Anda dan yang enak dilihat
Jangan lupa untuk klik “Save” untuk menyimpan isi text block itu
“Submit for Review” atau “Save Draft“
Jika dirasa post sudah mantep untuk diajukan, Anda dapat klik “Submit for Review” (diajukan kepada AdminWeb untuk publish) tapi jika masih ingin melakukan perubahan maka sebaiknya klik “Save Draft“
( 7 ) Menambahkan element “Button” pada kolom kanan
Sekarang masuk kembali ke dalam nested column 1/2+1/2 dan tambahkan element “Button” pada kolom kanannya
( 8 ) Mengisi parameter button
Button Text = Hubungi WA Saya
Button Url = link nomor WA ( https://wa.me/6281234567890xxx )
Jadi ketika button itu ditekan, maka akan dihubungkan ke nomor WA tersebut
Setelah button diisi, kemudian klik “Save“
Button target : ketika button di klik , maka URL di tampilkan pada halaman sama (_self ) atau pada tab browser berikutnya (_blank)
Berikut ini saya akan menjelaskan lebih detail tentang isi dari button, karena button ini element yang sering dipakai, simak baik-baiknya
Button Allignment : rata kiri, kanan, tengah atau mengikuti text
Button Style: saya selalu memakai 3D dan pilih warna button sesuai selera
Button Span: Yes = lebar button mengikuti lebar kolom yang disediakan
Animation Type adalah animasi saat button ditampilkan, atur juga Speed of Animation nya supaya jangan terlalu cepat
Setelah semua parameter button di isi dengan baik, jangan lupa klik “Save Draft“
Ingat ! “Save Draft” saja terlebih dulu jika post ini belum siap di publish !!!
“Submit for Review” atau “Save Draft“
Jika dirasa post sudah mantep untuk diajukan, Anda dapat klik “Submit for Review” (diajukan kepada AdminWeb untuk publish) tapi jika masih ingin melakukan perubahan maka sebaiknya klik “Save Draft“
Tampilannya menjadi seperti berikut ini :
( 9 ) Membuat 2 buah button lagi , dengan cara klik “Clone Element” pada button ke-1
Edit setiap button yang ditambahkan tersebut, dan isikan URL sesuai dengan keperluannya dan atur warna sehingga button mempunyai warna masing-masing
( 10 ) Tambahkan element “Separator” yaitu jarak pembatas antara button
Jika separator nya kosong , maka Style = No Style
Margin = jarak atas dan jarak bawah
Border Size = 0 dan Separator Color = FFFFFF ( warna putih )
Kemudian “clone” separator itu, dan drag separator itu tempatkan di antara button-button
Begitu selesai diubah, jangan lupa klik “Save” dan klik juga “Update“
Lalu klik “View Post” , maka tampilannya akan seperti gambar di bawah ini:
( 11 ) Kita akan menambahkan “Image Gallery” dan “Text Block” sehingga penampilannya akan menjadi sebagai berikut :
Yaitu ada image gallery dan penjelasan teks tambahan di kolom kanan, termasuk mengubah warna teks menjadi hitam pekat
Mula-mula lakukan clone nested column 1/2+1/2
Kemudian masuk (edit) ke nested column yang baru, dan hapus text block sebelah kiri
Lalu klik “+ Element” untuk membuat element “Gallery“
Di dalam element Gallery ini, pilih “Select Images” dan pilih semua gambar yang ingin dimasukkan ke dalam gallery
Kemudian atur parameter gallery
Layout = Grid
Picture Size = Fixed
Number of Columns = 3
Hover Type = Zoom Out
Kemudian jangan lupa klik “Save“
Terlihat pada gambar di atas , kolom kiri sudah berisi “Gallery” , tinggal kita urus yang kolom kanan
Sekarang kita urus yang kolom kanan
Hapus semua element pada kolom kanan yaitu element button dan element separator
Kemudian tambahkan element “Text Block” dan isikan dengan teks penjelasan tambahan, tuliskan penjelasan tambahan untuk iklan ini
Jangan lupa klik “Save“
Akhirnya kita sudah punya 2 buah nested columns seperti gambar di bawah ini
“Submit for Review” atau “Save Draft“
Jika dirasa post sudah mantep untuk diajukan, Anda dapat klik “Submit for Review” (diajukan kepada AdminWeb untuk publish) tapi jika masih ingin melakukan perubahan maka sebaiknya klik “Save Draft“
Jika post tersebut sudah disetujui, maka tampilannya pada situs adalah seperti gambar di bawah ini, dan jika gambar gallery di klik, maka akan tampil gambar gallery dengan tombol panah kanan kiri untuk mengganti gambar yang ditampilkan
Keren bukan ?
Demikian artikel ini, selanjutnya Anda dapat mempelajari pembuatan konten yang lebih lanjut, konten dengan variasi-variasi penampilannya yang lain lagi
[/ihc-hide-content]
Semoga artikel ini bermanfaat
Have a nice day!
Semoga harimu menyenangkan !
Sincerely – Salam dari
City Resort Residences