Loncat ke Konten Utama

Tutorial elemen atau: Memperkenalkan antarmuka

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Merancang situs web yang terlihat profesional bukan untuk semua orang, terutama karena kami semua merasa seperti kami benar-benar perlu menjadi ahli coding dan desain web. Saat ini, kami melihat alat baru muncul untuk ekosistem WordPress, untuk memberikan solusi yang lebih mudah untuk mendesain situs web dan ini dalam jangkauan sebagian besar pemula.

Mengenai desain tata letak WordPress, kami sudah harus mengirimkan plugin Visual Composer, yang tentunya merupakan salah satu alat terbaik dalam hal desain tata letak. Namun, perhatikan bahwa solusi ini tidak cocok untuk semua orang. Inilah alasan mengapa dalam tutorial ini, kami akan memperkenalkan Anda lebih banyak ke plugin Elementor WordPress, yang merupakan plugin WordPress freemium (gratis, tetapi dapat diperpanjang dengan berlangganan).

Di mana mendapatkan Elementor untuk WordPress

Kami serius mempertimbangkan untuk membuat Anda melihat potensi plugin, dan solusi gratis akan membantu Anda memulai tanpa membayar sepeser pun. Solusi gratis ini tersedia di WordPress.org. Menjadi plugin WordPress, itu diinstal seperti yang lain plugin dari dasbor. 

Jika plugin berhasil memuaskan Anda sepenuhnya, Anda akan dapat memperoleh lisensi lengkap dengan semua fungsi di situs elementor resmi.

Fitur utama Elementor

Sebelum memulai tutorial dengan ikhtisar plugin, pertama-tama kami akan memperkenalkan fitur utama plugin (versi gratis dan versi lengkap).

versi gratis Versi Lengkap
Banyak Kolom Menu navigasi, artikel
Modul Teks, Judul Modul WooCommerce (produk, kategori)
Modul Video, Gambar, Korsel, Galeri, Soundcloud Integrasi Facebook (halaman, tombol, komentar)
Modul berbagi tabel harga
Modul HTML Portofolio, Formulir
Modul untuk widget WordPress Modul Penelitian

 

Perhatikan bahwa ini adalah daftar lengkap dari berbagai fitur yang ditawarkan oleh plugin. Anda akan menemukan detail lebih lanjut di menjelajahi situs web mereka.

Mulai dengan Elementor

Kami tidak akan membahas seluruh proses instalasi di sini. Karena ini adalah plugin WordPress, prosedur penginstalan telah dijelaskan di tutorial sebelumnya. Namun, setelah penginstalan, Anda akan dibawa ke halaman utama plugin.

halaman presentasi delementor.png

Jika Anda memiliki halaman ini di layar Anda, maka Anda telah berhasil menginstal plugin Elementor. Kami saat ini menggunakan versi lengkap untuk tutorial ini, tetapi antarmuka tidak boleh terlalu berbeda dari versi gratis.

Sebelum pergi ke antarmuka pengeditan, saya akan mengundang Anda untuk mendaftarkan lisensi Anda. Ini hanya berlaku untuk mereka yang memilih versi lengkap. Jika Anda memiliki versi gratis, Anda dapat pergi ke bagian selanjutnya. Untuk mendaftarkan lisensi Anda, Anda akan melihat pemberitahuan di WordPress yang akan meminta Anda untuk mendaftarkan lisensi Anda.

notification plugin elementor.png

Jadi klik saja untuk pergi ke halaman registrasi dan klik Mengaktifkan.

pendaftaran elementor.png lisensi

Anda biasanya perlu halaman konfirmasi Anda jika lisensi Anda valid.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

elementor.png lisensi aktif

Jika Anda tidak membuka halaman ini, saya mengundang Anda untuk menghubungi pengembang plugin untuk informasi lebih lanjut bantuan untuk masalah tersebut.

Bagaimana cara menggunakan Elementor

Elementor berfungsi pada Halaman dan Posting di WordPress. Baik Anda menggunakan antarmuka klasik atau antarmuka Gutenberg baru, Anda akan melihat tombol yang akan meminta Anda untuk menggunakan pembuat Elementor.

konstruktor elementor.png

Dalam praktiknya, Anda tidak selalu perlu mengedit postingan Anda menggunakan Elementor. Karena itu saya mengundang Anda untuk menggunakan plugin hanya di halaman. Dengan mengklik tombol tersebut, Anda akan mengakses antarmuka desain Elementor yang memberikan suasana déjà vu (bagi mereka yang menggunakan Penyesuai WordPress).

antarmuka presentasi elementor.png

Jadi di sebelah kiri Anda memiliki berbagai kontrol yang ditawarkan oleh plugin dan di sebelah kanan, Anda memiliki pratinjau langsung dari perubahan Anda. Dalam tutorial ini, kami menggunakan tema Twenty Sixteen WordPress.

Bagian elemen

Bagian Elementor adalah grup blok fungsionalitas yang ditawarkan Elementor. Jumlah bagian bergantung pada apakah Anda menggunakan versi lengkap dan apakah Anda menggunakan WooCommerce, Yoast SEO, atau plugin lain yang kompatibel. Bergantung pada kondisi ini, Anda akan memiliki lebih banyak atau lebih sedikit bagian pada antarmuka Anda. Karena kami menggunakan versi lengkap dengan plugin WooCommerce diaktifkan, seperti inilah tampilan antarmuka kami.

bagian elementor.png

Cara menempatkan blok Elementor

Setelah Anda memperluas bagian, Anda akan menemukan Blok Elementor. Berbagai blok Elementor ditempatkan dengan "Drag & Drop" di area yang disorot dengan garis putus-putus.

tambahkan blok elementors.png

Bagaimana memilih tata letak di Elementor

Sebelum menambahkan blok pada Elementor, Anda harus ingat untuk memilih tata letak dengan mengklik tombol "+" pada bagian yang disorot.

pilih elemen tata letak.png

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

Tergantung pada kebutuhan Anda, Anda akan memilih tata letak yang paling sesuai. Setelah Anda memilih tata letak, Anda memiliki representasi dari bagian itu di area yang sama yang disorot. Bagian ini akan menampilkan jumlah kolom yang sama sesuai dengan pilihan Anda. Dalam kasus saya, saya memilih kolom dengan 3 kolom.

bagian elemen dengan zone.png

Blok yang berbeda dengan tanda "+" di dalamnya, adalah area yang dapat menerima blok Elementor. Jika Anda menambahkan blok Elementor tanpa memilih tata letak terlebih dahulu, tata letak kolom tunggal akan dipilih secara default.

Bagian elemen dapat diatur ulang di antara mereka sendiri, mengikuti prinsip "seret & lepas" yang sama. Anda juga dapat menghapus bagian, jika Anda tidak ingin lagi menggunakannya.

memindahkan elemen elementor.png

Berikut adalah contoh bagian yang berisi 2 blok yaitu blok judul dan blok teks.

elemen bagian dengan 2 blocs.png

Cara menggunakan alat desain lainnya

Setelah Anda menyelesaikan desain Anda, salah satu hal yang ingin Anda lakukan adalah menyimpan pekerjaan Anda. Anda akan menemukan opsi ini di bagian paling bawah dari bagian yang menampilkan berbagai bagian Elementor.

backup elementor.png

Anda dapat memilih untuk menyimpan secara langsung (Publikasikan), dan simpan sebagai draf atau sebagai template. Kami akan membahas poin-poin berbeda ini lebih lanjut nanti.

Selama desain Anda, Anda mungkin juga ingin melihat perubahan tanpa antarmuka tambahan Elementor. Yang harus Anda lakukan adalah mengklik ikon mata.

preview perubahan elementor.png

Itu terjadi bahwa selama desain, kesalahan terjadi (tindakan tidak disengaja). Dalam hal ini, Elementor menawarkan riwayat, yang memungkinkan Anda menavigasi semua tindakan Anda.

tindakan elementor.png

Ini akan memungkinkan Anda untuk dengan mudah kembali.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

Opsi "Peramban", yang ada tepat sebelum tombol riwayat, memungkinkan Anda untuk memodifikasi lebih jauh bagian yang berbeda sehubungan dengan peramban yang digunakan oleh pengunjung. Opsi ini memberi Anda akses ke modifikasi lanjutan dari struktur bagian (lebar kolom). Anda harus membuat perubahan di sini dengan sangat hati-hati.

elementor.png opsi browser

Tombol "Pengaturan" memungkinkan Anda untuk mengubah opsi tertentu khusus untuk halaman seperti judul, gambar unggulan atau status antara lain.

pengaturan elementor.png

Itu saja untuk tutorial ini, kita akan menjelajahi Elementor lebih lanjut di tutorial berikutnya. Jangan ragu untuk melihat situs resmi yang menawarkan contoh yang jauh lebih sukses.

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas