Manage WordPress Using Flatsome Theme [PDF]

Citation preview

Using WordPress



With UX Builder from Flatsome Theme Awesome Theme from UX Themes



Wikistra MT, 27 Feb. 2020



Wikistra Mitra Teknologi Konsultan Bisnis dan Teknologi Masa Kini



1



Login ke WordPress Login ke WordPress dengan cara menambahkan path pada akhir alamat website Anda /wp-admin For example: https:// https://tokobungabangkok.com/wp-admin Input username dan password Klik Log In



Dashboard Anda Bagian ini dimana Anda dapat mengelola konten website Anda. Various content you can use are pages, media, posts



Wikistra Mitra Teknologi Konsultan Bisnis dan Teknologi Masa Kini



2



Flatsome Settings Global Settings Pilih menu Flatsome, kemudian click menu Advance untuk membuat pengaturan tingkat lanjut website. -



-



Global Settings untuk menambahkan scripts pada elemen tertentu. Misalnya pada Header scripts dapat digunakan untuk menambahkan scripts Google Analitics, Facebook Pixel, dll. Custom CSS untuk menambahkan css custom untuk website secara keseluruhan (all screen), tablet and down untuk menerapkan css pada tablet saja, dst.



Pengaturan Tampilan Pilih menu Flatsome, kemudian click menu Theme Options untuk membuat pengaturan tampilan website. Anda akan diarahkan ke halaman live customization Pada bagian live customization anda dapat mengatur tampilan; - Header (menu, sub menu, elemn button, dll) - Style untuk mengatur warna font, -



-



background, typografi, dll Blog untuk mengatur tampilan halaman blog. Single blog (artikel): posisi widget kanan/ kiri, tampilan arsip, tampilan kategori blog, dll WooCommerce untuk mengatur tampilan WooCommerce. Termasuk store notice, product catalog, halaman single product (posisi sidebar, product meta, title header, dll), pengaturan tampilan my account, product images (ukuran/ rasio gambar produk), dll Layout untuk mengatur lebar maksimal website, jenis box/ fullwidth, dll.



Wikistra Mitra Teknologi Konsultan Bisnis dan Teknologi Masa Kini



3



Footer untuk mengatur tampilan footer ingin default/ custom block. Custom block dapat menggunakan UX builder untuk membuat layout footer custom. Sehingga tampilan tidak tergantung dengan default widget WordPress. Anda dapat membuat layout footer dengan cara membuat block custom (bagian dari page).



Custom block dapat digunakan untuk membuat footer.



Wikistra Mitra Teknologi Konsultan Bisnis dan Teknologi Masa Kini



4



Pengaturan Tampilan Header Tampilan header dapat diatur sedemikian rupa dengan menempatkan element tertentu. Pilih Preset terlebih dahulu jika Anda ingin menggunakan jenis layout header yang telah disediakan. Misalnya, logo di tengah, menu rata kanan, dll. Anda dapat melakukan drag & drop untuk menempatkan suatu elemen pada header atau menyembunyikannya. Untuk elemen tertentu akan muncul secara otomatis bila plugin terinstall, misalnya jika terinstall WooCommerce, maka elemen icon cart akan muncul, dll. -



Main menu, pengaturan tampilan menu utama Cart/ account , pengaturan icon cart Nav icon, untuk menampilkan icon navigasi saja. Menu slider dari arah kiri. Search icon, untuk menampilkan icon pencarian. Search form, jika anda hendak menampilkan kolom pencarian pada header. HTLM 1, 2, 3, 4, 5 dapat digunakan untuk menampilkan elemen html sesuai dengan keinginan Anda. Misalnya menampilkan image dalam format html, dll.



Arahkan mouse pada bagian tertentu, kemudian click tombol sesuai element untuk langsung mengarah ke pengaturan elemen tersebut. Misalnya product layout untuk mengatur layout single product.



Wikistra Mitra Teknologi Konsultan Bisnis dan Teknologi Masa Kini



5



Pages & Posts Editing page Klik menu Pages dari Dashboard. Akan terlihat daftar pages yang telah dibuat.



Arahkan mouse Anda ke salah satu judul pages Click Edit untuk edit page Click Quick Edit untuk edit cepat title, link atau template page Clikc Edit with UX Builder untuk mengedit halaman menggunakan UX Builder.



Menambah page baru From the menu, click Add New.



Wikistra Mitra Teknologi Konsultan Bisnis dan Teknologi Masa Kini



6



Add title untuk membuat judul halaman, misalnya “Contact Us” Tambahkan konten pada kolom textarea untuk menambahkan konten. Click UX Builder untuk membuat konten halaman menggunakan EX Builder. Pilih template untuk menggunakan template halaman yang berbeda, misal. -



Page – Full Width membuat halaman lebar penuh satu layar monitor. Page – No Header/ No Footer membuat halaman tanpa header/ footer (biasanya untuk landing page).



Set featured image untuk membuat gambar unggulan yang akan digunakan dalam preview jika halaman dibagikan di medsos, misalnya. Click Publish to publish page



Menambah post baru Untuk menambah post baru, clikc Add New pada menu Posts. The Add New Post page will appear. Posts have a variety of options to choose from. Format: Video, Audio, Quote, Gallery, Link



Wikistra Mitra Teknologi Konsultan Bisnis dan Teknologi Masa Kini



7



The Format option allows the post to be displayed in different ways depending on the format selected, to find out more about Post Formats go to page 12.



Tags: Add tags to keyword your posts (You can create your own, or use what is already available.) Categories: Use categories to set a post in a set category, ie “News”, “Video”, “Lectures“. (You can create your own, or use what is already available.) Set Featured Image: Use an image to display in the post.



Wikistra Mitra Teknologi Konsultan Bisnis dan Teknologi Masa Kini



8



Introduction UX Builder Overview of the PageBuilder Online docs: https://docs.uxthemes.com/ UX Builder include dalam tema Flatsome. Tema ini fokus untuk membuat toko online secara cepat. Beberapa kunci fitur yang tersedia dalam tema Flatsome adalah: -



Custom header & footer layout High compatible dengan WooCommerce Sangat mobile friendly Tersedia banyak template halaman. Misal anda ingin membuat landingpage dapat menggunakan template halaman Page – No Header/ No Footer. Tingkat kostumasi halaman sangat tinggi, ditambah dengan kemampuan UX Builder.



Beberapa elemen yang tersedia dalam UX Builder



Anda dapat menggunakan setiap elemen dengan pengaturan tingkat lanjut untuk membuat website yang luar biasa.



Wikistra Mitra Teknologi Konsultan Bisnis dan Teknologi Masa Kini



9



Get Started: Design Using UX Builder “Case, menu header pada beranda memiliki tampilan yang berbeda” Pada menu Page, click Add new Tambahkan title page Pilih template page untuk membuat tampilan halaman sesuai keinginan. Misalnya, halaman Home hendak dibuat tanpa menu, sedangkan page lain ada menu headernya/ berbeda tampilan menunya. Anda bisa menggunakan template Page – Full Width – Header on Scroll, agar menu terlihat saat halaman discroll. Click Publish to publish page



Setelah page dipublish clik tombol UX Builder Anda dapat memulai membuat halaman dari template yang telah disediakan.



Wikistra Mitra Teknologi Konsultan Bisnis dan Teknologi Masa Kini



10



Atau membuat from scratch dengan menambahkan elemen demi elemen. Biasanya dimulai dari row/ section.



Di dalam row dapat ditambahkan elemen lain misalnya button, image, dll.



Klik pada elemen button, untuk mengatur tampilan, link, dll Misalnya: Letter case KAPITAL SEMUA atau Kapital di Awal. Color warna background button. Style Outline, button bergaris tepi. Simple, buttom standar Bevel, button effect behel.



Radius untuk mengatur radius/ kelengkungan pojok tombol. Depth menambahkan shadow. Depth: hover, misalnya shadow bertambah besar saat mouse mengarah ke button dan transisinya. Expand, button lebar penuh. Dll Wikistra Mitra Teknologi Konsultan Bisnis dan Teknologi Masa Kini



11



Di dalam kolom dapat diisi dengan berbagai macam element. Termasuk row, slider, dll. Sehingga dapat digunakan untuk membuat berbagai macam desain halaman. Case: Home Image: logo header Text: menu utama (sebelum scroll) Divider: jarak antar elemen/ margin Slider: Slider bergerak - Row (Slider 1) berisi kolom 8/12 berisi gambar 4/12 text dan button Dst



Wikistra Mitra Teknologi Konsultan Bisnis dan Teknologi Masa Kini



12



Custom Element Builder tidak mampu menyelesaikan tugas dengan tingkat kustomasi sangat tinggi. Misalnya membuat menu custom pada halaman home



Anda dapat menambahkan element html, beserta class css nya. Kemudian tambahkan css custom pada menu Flatsome > Advance > Custom CSS



Wikistra Mitra Teknologi Konsultan Bisnis dan Teknologi Masa Kini



13



Overlapping Element Secara tradisional, element rumit html, biasanya dibuat dengan menggunakan gambar. Namun, ini akan mempengaruhi performa website Anda. Untuk mengatasinya, Anda dapat menggunakan overlapping dengan cara menambahkan custom class.



Kemudian tambahkan css custom dengan nilai margin negatif pada menu Flatsome > Advance > Custom CSS



Wikistra Mitra Teknologi Konsultan Bisnis dan Teknologi Masa Kini



14



More Information Instagram Feed



Isi pada kolom Hastag: isi hastag dari akun instagram yg unik untuk ftech image dr instagram Username: user instagram, perlu login dengan Facebook untuk fetch content.



Wikistra Mitra Teknologi Konsultan Bisnis dan Teknologi Masa Kini



15



Responsive Design Gunakan icon pada bilah sisi kanan untuk menggunakan fitur responsive. Case: Misal pada desktop tampilan ada 3 kolom sedang pada mobile ada 1 kolom.



Klik icon mobile/ tablet/ desktop pada bilah sisi kanan. Kemudian setting modul element sesuai kebutuhan. Fungsi responsive ditandai dengan bullet hijau pada elemen dan icon responsive.



Wikistra Mitra Teknologi Konsultan Bisnis dan Teknologi Masa Kini



16



Custom Footer Jika menggunakan custom footer, Anda bisa mengubahnya dengan cara menekan tombol Editor Block pada halaman live. Arahkan mouse anda pada bagian footer, kemudian klik tombol UX Builder.



Atau melalui Dashboard menu UX Blocks > pilih block yang digunakan sebagai footer. Case: title footer.



Wikistra Mitra Teknologi Konsultan Bisnis dan Teknologi Masa Kini



17



Store Locations (Map) Setting Map Pada menu AS Locator > ASL Settings. Tambah Google API Key.



Manage Lokasi Pada menu AS Locator > Manage Stores



Wikistra Mitra Teknologi Konsultan Bisnis dan Teknologi Masa Kini



18



Menambah Lokasi Outlet Pada menu AS Locator > Add new store Isi data sesuai data outlet



Letakkan pin lokasi sesuai dengan lokasi outlet.



Wikistra Mitra Teknologi Konsultan Bisnis dan Teknologi Masa Kini



19



Wikistra Mitra Teknologi Wikistra MT Jl. Wringinharjo, Gandrungmangu, Cilacap – Jawa Tengah Fanspage



: https://www.facebook.com/wikistramt



Hp/ WA



: 0812-5466-5440



Wikistra Mitra Teknologi Konsultan Bisnis dan Teknologi Masa Kini



20