Loncat ke Konten Utama

Cara membuat tata letak kustom dengan Elementor

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

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

Apakah Anda ingin membuat tata letak khusus di WordPress? Apakah Anda ingin dengan mudah membuat situs web dengan penampilan profesional? Jadi kamu harus Unduh plugin WordPress Elementor di sini.

 Elementor adalah pembangun halaman visual yang menawarkan fitur "Seret dan Jatuhkan" yang memungkinkan Anda untuk dengan mudah membuat tata letak khusus di WordPress tanpa pengetahuan pengkodean.

Dalam tutorial ini, kami akan menunjukkan kepada Anda cara mudah membuat layout WordPress kustom dengan Elementor hanya dengan beberapa klik. Kami juga menawarkan lihat alternatif lain dari plugin WordPress yang indah ini.

Tetapi sebelumnya, jika Anda belum pernah menginstal WordPress temukan Bagaimana menginstal sebuah blog WordPress langkah 7 et Bagaimana menemukan, menginstal dan mengaktifkan tema WordPress di blog Anda 

Lalu kembali ke mengapa kita ada di sini.

Mengapa dan kapan membuat tata letak khusus di WordPress?

Sebelum Anda mulai, Anda dapat menemukan di plugin WordPress ini dengan berkonsultasi dengan artikel Presentasi halaman pembuat WordPress: Elementor atau menemukan Tutorial elemen atau: Memperkenalkan antarmuka 

Banyak tema WordPress gratis dan premium menawarkan beberapa pilihan tata letak untuk berbagai jenis halaman. Namun, terkadang tidak ada template tata letak ini yang memenuhi kebutuhan Anda.

Namun, jika Anda penggemar PHP, HTML dan CSS, Anda memiliki opsi untuk membuat templat halaman Anda sendiri atau bahkan membuat tema turunan untuk situs web Anda. Tapi, sebagian besar pengguna WordPress bukan pengembang, jadi opsi ini tidak berfungsi untuk mereka.

Temukan juga ini Plugin 8 WordPress untuk membuat tata letak Anda dengan mudah

Bukankah lebih bagus untuk membuat layout menggunakan antarmuka sederhana (Drag and Drop)?

Inilah tepatnya yang dilakukan Elementor. Ini adalah plugin pembuat halaman WordPress yang memungkinkan Anda dengan mudah membuat tata letak WordPress kustom Anda sendiri tanpa keterampilan pengkodean apa pun.

Ini memiliki antarmuka pengguna yang intuitif yang memungkinkan Anda membuat tata letak khusus dengan pratinjau waktu nyata. Muncul dengan banyak modul siap pakai untuk semua jenis elemen desain web.

Ini menawarkan beberapa templat halaman yang dirancang secara profesional yang dapat Anda muat dan gunakan secara instan sebagai titik awal. Karena itu, mari kita lihat cara membuat tata letak WordPress kustom dengan plugin Elementor WordPress.

Memulai dengan Elementor

Pertama, Anda perlu membeli plugin " Elementor Pro ". Ini adalah versi berbayar dari plugin " Elementor Gratis yang memberi Anda akses ke fitur tambahan dan dukungan pelanggan 1.

Maka Anda harus menginstal dan mengaktifkan plugin Elementor. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami di cara memasang plugin WordPress.

Setelah aktivasi, kunjungi " Elementor> Pengaturan Untuk mengkonfigurasi operasi plugin ini.

Pengaturan elemen

Di sini Anda dapat mengaktifkan "Elemen" untuk berbagai jenis publikasi. Secara default, ini diaktifkan untuk artikel Anda dan halaman WordPress. Jika Anda memiliki format penerbitan khusus di situs web Anda, ini juga akan muncul di sini, dan Anda juga dapat mengaktifkannya.

Anda akan dapat mengecualikan atau memasukkan peran pengguna yang dapat menggunakan Elementor saat menulis posting atau halaman. Secara default, ini diaktifkan hanya untuk administrator.

Temukan kami Plugin 8 WordPress untuk mengelola peran dan pengguna

Jangan lupa klik tombol « Simpan Perubahan Untuk menyimpan pengaturan Anda.

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]

Membuat tata letak khusus dengan Elementor

Pertama, Anda perlu membuat halaman baru (atau posting) di situs WordPress Anda. Pada halaman edit posting, Anda akan melihat tombol "Edit With Elementor" yang baru.

Edit dengan elementor

Mengkliknya akan meluncurkan antarmuka pengguna Elementor di mana Anda dapat mengedit halaman Anda menggunakan pembuat halaman visual dengan fungsionalitas seret dan lepas.

Drag dan drop elementor

Anda sekarang dapat menambahkan bagian dan membuat halaman Anda dari awal, atau Anda masih dapat memuat salah satu templat default yang dikirimkan.

Model adalah cara yang lebih cepat untuk memulai dengan cepat. Dengan demikian, Elementor menawarkan beberapa templat yang dirancang secara profesional yang dapat Anda sesuaikan sebanyak yang Anda inginkan.

Mari kita mulai dengan templat dengan mengklik tombol " Tambahkan templat '.

Ini akan menampilkan jendela sembulan di mana Anda dapat melihat berbagai model yang tersedia. Anda harus mencari model yang terlihat seperti yang Anda inginkan. 

Plugin elemntor tata letak

Sekarang klik untuk memilih model yang Anda inginkan, lalu klik tombol menyisipkan Untuk menambahkannya ke halaman Anda.

Elementor akan memuat template untuk Anda.

Anda sekarang dapat mulai memodifikasi templat agar sesuai dengan kebutuhan Anda. Cukup tunjuk dan klik elemen apa saja untuk memilihnya, dan Elementor akan menunjukkan pengaturannya di kolom kiri.

Awal pengeditan halaman pada elementor

Sekarang mari kita bicara tentang bagaimana tata letak Elementor bekerja.

Model yang ditawarkan oleh plugin Elementor dibangun di atas bagian, kolom dan widget. Bagian seperti garis atau blok yang Anda tempatkan di halaman Anda.

Setiap bagian dapat memiliki beberapa kolom dan setiap bagian dan kolom dapat memiliki gaya, warna, kontennya sendiri, dll.

Mengedit halaman dengan elementor

Anda memiliki opsi untuk menambahkan elemen di kolom dan bagian Anda menggunakan widget yang ditawarkan Elementor.

Widget ini adalah jenis blok konten yang dapat Anda tempatkan di bagian halaman Anda.

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]

Cukup pilih widget dan letakkan di bagian atau kolom Anda. Ada sekumpulan besar widget yang tersedia yang mencakup setiap elemen desain web populer yang dapat Anda bayangkan.

Elemen e desain dengan elemen

Anda dapat menambahkan gambar, teks, topik, galeri gambar, video, peta, ikon, testimonial, slider, carousel dan banyak lagi.

Lihat juga kami 15 Elementor tema dan templat untuk membuat situs web

Anda juga dapat menambahkan widget WordPress default dan bahkan widget yang dibuat oleh plugin WordPress lain ke situs web Anda.

Setelah selesai membuat sendiri atau memodifikasi tata letak, Anda dapat mengklik tombol " Register Untuk menyimpan perubahan Anda.

Menyesuaikan tata letak dengan elementor

Ucapan: Menyimpan tata letak tidak akan menerbitkan halaman ke situs WordPress Anda. Ini hanya akan menyimpan tata letak Anda.

Pada titik ini Anda memiliki opsi untuk melihat pratinjau halaman Anda atau pergi ke dasbor WordPress. Yang akan membawa Anda kembali ke editor posting WordPress default. Anda sekarang dapat menyimpan halaman WordPress Anda atau menerbitkannya ke situs web Anda.

Publikasi tata letak dengan elementor

Itu saja, jadi selesaikan membuat halaman dengan plugin WordPress Elementor.

Tetapi seperti banyak pembangun halaman, ia juga menawarkan ekstensi yang memungkinkan Anda membuat tata letak baru dengan mudah dan cepat dengan menghadirkan lebih banyak elemen desain ke plugin default.

Unduh Elementor

Temukan juga beberapa plugin WordPress premium  

Anda dapat menggunakan plugin WordPress lainnya untuk memberikan tampilan modern dan mengoptimalkan cengkeraman blog atau situs web Anda.

Kami menawarkan kepada Anda beberapa plugin WordPress premium yang akan membantu Anda melakukannya.

1. JetElements 

Plugin ini akan meningkatkan bundel Elementor Anda dengan berbagai macam modul, yang akan sangat berguna saat membangun situs web Anda. Elemen yang kuat telah secara khusus dibuat untuk diintegrasikan dengan fungsionalitas Elementor akhirnya memberi Anda solusi serbaguna dan elemen elegan.

Elemen jet plugin wordpress elemen

Fitur utamanya adalah: banyak modul yang berguna, berisi banyak pilihan gaya, parameter fungsional dan elemen yang benar-benar dapat disesuaikan, elemen luar biasa untuk dengan cepat meluncurkan toko online Anda, dukungan untuk bahasa RTL, Dukungan plugin WPML dan modul Hubungi Formulir 7 menakjubkan, yang memungkinkan Anda menambahkan formulir kontak dan menyematkannya ke situs web Anda.

Download | Demo | Hébergement Web

2. JetMenu 

JetMenu adalah ekstensi sangat fungsional plugin Elementor, yang memungkinkan Anda untuk membuat megamenus dengan elemen gulir yang mudah digunakan. Plugin ini tidak membatasi imajinasi Anda dan memiliki potensi untuk membuat menu yang luar biasa dan merubahnya sesuai dengan visi dan kebutuhan Anda.

Plugin elemen jetmenu wordpress

Fitur utamanya adalah: Tidak diperlukan pengetahuan pengkodean, fitur kaya yang menggabungkan sempurna dengan kesederhanaan dan kejelasan, banyak pilihan modul konten, yang dikembangkan khusus untuk membantu Anda membuat menu, tata letak yang sangat responsif, dan banyak lagi.

Jika Anda ingin membumbui menu atau megamenus situs web Anda, plugin WordPress ini adalah untuk berkonsultasi.

Download | Demo | Hébergement Web

Buat Toko Online Anda dengan mudah

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

3. JetWooBuilder 

JetWooBuilder adalah add-must-have yang memungkinkan Anda membuat halaman produk WooCommerce sepenuhnya dengan Elementor.

Jetwoobuilder wordpress elementor plugin

Sebagai fitur yang akan Anda temukan antara lain: beberapa templat halaman produk unik, banyak visual untuk membuat halaman produk WooCommercebanyak widget konten yang menarik, seperti Tambahkan ke keranjang, Pratinjau, Gambar, Peringkat, Terkait dan banyak lagi, kemampuan untuk menampilkan taksonomi produk dan banyak lagi.

Download | Demo | Hébergement Web

Beberapa sumber yang bermanfaat:

Kesimpulan:

Itu saja untuk tutorial ini, saya harap ini akan memungkinkan Anda untuk membuat layout modern dan profesional dengan plugin Elementor.

Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.

Terutama bagikan artikel ini di jejaring sosial Anda yang berbeda.

...

Artikel ini berisi komentar 24

  1. Thierry Hello!

    Terima kasih banyak atas postingan bagus ini.
    Saya menggunakan ELEMENTOR PRO dan saya membuat halaman di mana saya mengunduh melalui ELEMENTOR sebuah tata letak yang sudah dibuat. Namun, saya tidak mengerti, yang ini ditemukan di SEMUA situs web saya ... semua arsitektur web saya telah berubah dan tata letak inilah yang saya temukan di semua halaman situs saya. Di sisi lain, tata letak lama belum dihapus tetapi ditemukan di bagian bawah halaman. Ketika saya mengklik "EDIT dengan ELEMENTOR", saya tidak dapat menghapusnya… tahu dari mana asalnya?
    Terima kasih banyak!

  2. Hello Thierry
    Dari lubuk hati saya yang paling dalam, terima kasih banyak atas artikelnya. Sekarang saya memiliki kekhawatiran yang telah mengganggu saya selama beberapa hari, saya baru mengenal wordpress dan saya menggunakan ocean WP sebagai tema dan kemudian saya menginstal elemenor sebagai versi gratis jadi dengan versi gratis ini saya mulai dengan membuat halaman saya dan itu bagus tetapi masalah yang muncul bagi saya adalah bahwa ketika saya menerbitkan halaman saya atau artikel setelah saya memilikinya, huruf kapital tidak muncul setelah titik atau di awal kalimat saya, apakah perlu pengaturan pada tipografi atau pada keluarga font yang dipilih singkatnya untuk membantu saya lebih memahami di mana itu adalah versi gratis yang tidak memiliki huruf kapital setelah titik. Terima kasih atas pengertian.

    1. Halo,

      Saya sarankan Anda menghubungi dukungan plugin Elementor di halaman WordPress.org-nya. Anda pasti akan menemukan jawaban dari penulis.

  3. Halo, dapatkah Anda menggunakan Elementor untuk mengubah halaman awal? Jika ya dimana? Bisakah saya membuat formulir kontak menggunakan plugin ini? 🙂

  4. Halo
    Saya membuat beranda melalui tab khusus antarmuka wordpress saya. Mengapa saya tidak menemukan elemen yang sama? pada elemenatau bilah menu saya tidak di tempat yang sama dan saya tidak memiliki logo saya yang muncul! Saya lebih suka yang ada di wordpress tetapi ketika saya melakukan visualisasi situs saya adalah homepage elementor yang muncul! Bisakah Anda memberi tahu saya cara melakukannya?
    Berterima kasih padamu hal

  5. Halo,
    Saya punya masalah Selama beberapa bulan, saya belum memperbarui situs saya di mana saya menggunakan elemen ini; hari ini saya mencoba melakukannya tetapi saya memiliki masalah, sebagian besar bagian menunjukkan kotak yang dicoret dengan kata OFF SECTION dan tidak ada yang dapat saya lakukan. Saya hanya dapat mengedit satu bagian halaman, bagian di mana saya memiliki teks itu sendiri.
    Apakah Anda tahu apa yang bisa berhasil?

  6. hai, bagaimana dan di mana Anda mengedit template arsip di elementor pro? Saya tidak bisa memasukkan konten di kolom samping blog

  7. Halo,
    Saya sedang belajar cara membuat situs web dengan WordPress, Elementor adalah plugin yang hebat, sangat membantu, saya menemukan sesuatu yang baru.
    Juga masalah;) Saya biasanya berurusan dengan solusi. Tidak sekarang.

    Saya punya masalah dengan pengeditan teks. Baik paragraf maupun tajuknya kaku dan saya tidak dapat mengubah font, warna, bobot, dll. Meskipun ada perubahan dalam pengaturan, tidak ada yang berubah. Ini bukan masalah pola, karena memiliki jenis huruf dan skema warna yang berbeda dari yang diberikan Elementor kepada saya.
    Saya tidak tahu bagaimana mengubah parameter template ini terjadi pada saya bahkan dengan header 1, tetapi saya mengubahnya dengan memasukkan kode html di header dan membantu, sekarang tidak berfungsi.

    Bagaimana ini akan berubah? - tolong bantu.

    1. Halo,

      Cobalah untuk menonaktifkan semua plugin WordPress dan coba lagi. Jika masalah Anda terpecahkan ketika mereka semua dinonaktifkan, mulailah dengan mengaktifkannya satu per satu lalu periksa setiap kali.

      Jika ini masalah kompatibilitas dengan plugin lain, Anda akan tahu yang mana.

  8. Bonsoir.
    Saya menambahkan foto di situs (Halaman Landas) dan saya mencoba untuk mengubah ke yang lain. Saya tidak bisa ... menghapus beberapa kali dan saya meletakkan foto baru tetapi tidak dimuat ... foto lama tetap ...
    Apakah Anda dapat membantu saya?

  9. Halo dan terima kasih untuk artikel ini yang menegaskan pilihan saya akan Elementor sebagai pembuat halaman saya. ^^

    Di sisi lain, apa pendapat Anda tentang pembuatan situs anak sebelum modifikasi. Apakah ini perlu dengan Elementor?

    Ketakutan saya adalah bahwa semua perubahan yang dibuat akan ditimpa saat memperbarui tema? Apakah tidak ada risikonya?

    Berterima kasih atas jawaban Anda,
    Bien à vous,
    Nicolas

  10. Halo dan terima kasih atas artikel yang sangat menarik ini.
    Saya mulai menggunakan Elementor dan bertanya-tanya apakah ada kebutuhan sebelum saya melanjutkan untuk membuat tema anak yang saya gunakan. Jika tidak, apakah tidak ada risiko bahwa pembaruan tema atau plugin hanya akan menimpa tata letak yang dibuat dengan Elementor?
    Berterima kasih atas kepulangan Anda,

  11. Halo,

    Saya ingin tahu bagaimana cara mendapatkan kode PHP dari ekstensi ELEMENTOR untuk mengintegrasikannya ke dalam beranda saya?

    Terima kasih atas perhatiannya atas permintaan saya.

  12. Halo,

    artikel yang sangat menarik
    Saya punya pertanyaan untuk elemen pro bahwa Anda.
    Apakah mungkin untuk menambahkan formulir yang dihasilkan, metode = "POST"?

    Jeanson

  13. bagus banget artikelnya gan mau nanya, kapan gw mulai masuk ke elementor, atau kenapa kelihatan ada header dan footernya, gimana kelihatan kosong

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
24 saham
saham18
menciak
Register6