Membangun di Elementor – alat yang dipakai

So I’ve been working (neck deep) in Elementor for over three years, and as you might expect there’s a ton of things I’ve learnt over that time and a lot I wish I knew 3 years ago that I know now.   As I circle back on my first Elementor sites I cringe at some of the structural and toolset decisions I made but they seemed like the right ones at the time.

Jadi tanpa menunda lagi – mari kita lanjutkan – inilah cara kami membangun situs Elementor saat ini – mulai dari sini adalah permulaan terbaik untuk memulai jika Anda membangun situs web untuk mencari nafkah dan ingin mencoba beralih ke Elementor.

Plugin

Setiap orang pasti punya favorit kan? Ini adalah yang biasa kita gunakan:

  • Siteground Security – free, good basic firewall that works with Siteground and other providers.
  • Classic Editor – because let’s face it – Gutenberg is not great.
  • Search & Replace Yang Lebih Baik – untuk pengkinian dB saat kita cut live atau ganti domain.
  • Elementor / Pro – versi pro adalah keharusan – penuh dengan fitur bagus karena versi yang gratis agak merepotkan (fitur pembuat tema, formulir, dan lainnya).
  • Crocoblock Suite – I chose this as a toolset to build with.   To be honest, I think there’s about 4 choices here – Jetelements/Crocoblock, EssentialAddons, PremiumAddsOns and prob one or two other good ones (and a long list of mediocre ones).   Doesn’t matter all that much which you use but each have certain widgets that are very handy to extend default Elementor features – tip: turn off ALL the elements except what you use for best performance.   Initially I spent around 2 years working with ElementsKit and it was fine up to a point but about a year ago I switched to Crocoblock as JetEngine and its query builder and other features allowed me to take dynamic functionality and site features MUCH further and closer to precise client requirements.
  • JetEngine listings – part of Croocblock, this is a tool that allows you to create any kind of custom post repeater for blog posts, job listings, property listings or any kind of repeated post based data.    Here’s a blog post on how to do this.
  • ACF – custom field support on post types and custom posts.  I use ACF Pro for sites needing field repeaters or galleries.
  • CPT UI - dukungan post type kustom. ACF plus ini menciptakan banyak kemampuan untuk membuat segala jenis post type kustom dan hampir setiap situs web serius butuhkan. ACF dan CPT UI bekerja dengan sangat baik dengan Elementor Pro dan menyediakan cara yang sangat cepat / fleksibel untuk membangun repeater post dan tata letak kustom dari hampir semua post kustom.
  • Rankmath – untuk SEO.
  • TranslatePress – for any foreign language or translation work.

Tema

Kita sudah mencoba banyak tema Elementor tetapi pada akhirnya kita membangun menggunakan Hello Elementor (tema kosong yang sangat kompatibel dengan Elementor – saya menggunakan kontrol Elementor sendiri untuk membuat tema font, warna, tata letak). Saya juga menginstal Hello Elementor Child Theme untuk latihan yang baik – pertahankan perubahan tema saya (yang jarang dan sederhana) di luar arena tema inti.

Kami telah menemukan bahwa Theme Forest “Elementor Template Kits” adalah sekitar setengah harga dari tema wordpress lengkap dan sebagian besar menyediakan satu set tata letak Elementor yang bagus dan lebih baik daripada memilih tema wordpress asli dengan dukungan Elementor karena pencipta tema hanya menyediakan kumpulan pilihan acak.

Dalam kebanyakan kasus kami cenderung hanya membangun fitur asli di Hello Elementor dan akhirnya menghemat banyak waktu – tetapi menyediakan banyak efek animasi halus dan model yang bagus dibagian di mana Elementor Template Kit Theme Forest berguna.

Membangun Proses

Tidak ada yang super unik atau menarik tentang cara kami membangun namun proses dan praktik Elementor yang baik meliputi:

Investasikan waktu untuk menyiapkan font dan warna global Anda sejak awal – warna global “Putih” dan   Warna "Hitam" berguna di atas apa pun warna utama Anda. Atur warna "Utama" Anda menjadi warna utama judul Anda dan pastikan Anda mengatur warna "Teks" Anda sejak awal.

Demikian pula, investasikan waktu dalam mengatur font global Anda dengan benar.

Bersikaplah konsisten untuk SELALU menggunakan font dan gaya global dan membuat penggunaan yang terbatas / sederhana untuk mengganti gaya ini di tata letak halaman Anda. Hindari memiliki 5 varian yang kurang menonjol pada gaya global – kembali ke desainer dan dorong mereka untuk sedikit menstandarisasi jika Anda melihat ini diperlukan.

Tata Nama Heading – I switch between a simple “Large Heading, Medium Heading, Small Heading” kind of logical naming convention and actually naming my heading styles “Heading 1, Heading 2, Heading 3” etc.   You can define global styles for these in Elementor > Site Settings > Fonts.   Note: this is different from Elementor > Site Settings > Typography which is where you to the underlying default HTML tag H1, H2, H3 etc – this config area is where the theme draws from if you are using for example the native wordpress editor for blog posts but Elementor for other page elements but its more important to get it right in the global fonts area and use those styles (and not HTML tags) to set your fonts.

Menyiapkan gaya tautan Anda di area Tipografi kemungkinan akan berguna karena Anda akan menggunakan widget elementor "Editor Teks" yang mengembalikan gaya tema asli untuk tautan dan semacamnya.

 

Template dan Widget Global – penggunaan kami telah berkembang dari waktu ke waktu dan merupakan praktik yang baik untuk dipelajari dari awal namun sebelumnya – Anda perlu memahaminya untuk benar-benar mendapatkan implikasi penuh karena saya melewatkan belajar di area ini pada awalnya (saya tidak sabar) yang kemudian saya menyadari bahwa saya dapat menggunakan fitur-fitur ini dengan lebih efektif.

Apa yang kita bicarakan? Awalnya kemampuan untuk menyimpan widget yang ditata / disesuaikan sebagai widget global sangat bagus. Menyimpan Bagian berguna dan Menyimpan template halaman juga.

Berikut adalah fitur yang bagus dan template pertama/mudah digunakan yang dapat Anda buat.

Namun bagi kami, kami mengabaikan widget “template” Elementor Pro – dan baru mulai menggunakannya nanti di pembuatan situs.   Widget ini adalah tempat Anda dapat mengambil elemen halaman umum seperti pengulang blog, atau panel testimonial atau hal-hal yang akan Anda gunakan di berbagai tempat di situs – dan alih-alih menyimpannya sebagai template dan hanya menyisipkan salinan di banyak tempat (cepat, mudah) – sebenarnya gunakan widget 'template' elementor untuk menambahkan salinan bagian yang terpusat / tunggal – jadi Anda hanya perlu menyimpannya di satu tempat. Setara dengan Elementor untuk membangun "sistem desain" yang sebenarnya (Figma et al).

Manfaatkan tata letak pembuat tema Elementor dengan benar yaitu tata letak pos tunggal untuk blog dan jenis pos kustom, dan semua tata letak pembuat tema lainnya. Tata letak arsip untuk arsip pos kustom penting dan praktis – dan juga untuk menempatkan semuanya di ingatan Anda dalam hal cara kerjanya dan membuatnya berjalan dengan lancar, tetapi sekali lagi – investasi waktu yang layak dari awal untuk membuat semua ini bekerja dengan baik di WordPress.  Here’s a blog post with some video training on how to setup custom post type listings (uses theme builder layouts for the archive / single post)

Hindari penggunaan margin dan padding yang berlebihan – jika Anda sering menemukan padding dan spasi besar yang diluar kebiasaan / acak di sekitar benda – ini adalah tanda peringatan bahwa Anda mungkin tidak memiliki pilihan struktural yang tepat.

Use Containers as a way to keep logical areas of a page grouped within a single section.   If a single logical section, ends up being built as 3 or 4 elementor “container” widgets (kinda like rows in your page) – then you miss an opportunity to group things into a single (template-able) section.   Not always possible, but good practice I find.

Yang kami pikirkan - kami bisa menulis posting detail di hampir setiap masalah dan pilihan individu di atas. Selamat membangun di Elementor – dan jika Anda memulai dengan hal di atas, Anda akan menghemat berbulan-bulan pembelajaran dan coba-coba dan tidak diragukan lagi Anda akan membuat pilihan Anda sendiri dan mungkin lebih baik daripada kami, dengan beberapa pengalaman.

 

 

 

 

 

 

 

 

Tulisan Terbaru