Layanan jasa pembuatan website

by with No Comment jasawebsite

Jasa pembuatan website adalah layanan yang ditawarkan oleh individu atau perusahaan untuk membantu bisnis, organisasi, atau individu dalam membuat dan mengembangkan situs web. Layanan ini mencakup berbagai aspek, mulai dari perencanaan, desain, pengembangan, hingga pemeliharaan website. Berikut adalah penjelasan lebih lanjut mengenai layanan yang biasanya disediakan:

1. Perencanaan dan Konsultasi

  • Konsultasi Awal: Diskusi mengenai kebutuhan dan tujuan pembuatan website, target audiens, dan fitur yang diinginkan.
  • Penentuan Struktur: Merancang struktur website, seperti navigasi, halaman utama, halaman produk, blog, dll.
  • Riset Pasar: Analisis kompetitor dan tren industri untuk memastikan website yang dibuat relevan dan kompetitif.

2. Desain Website

  • Desain UI/UX: Mendesain antarmuka pengguna (UI) dan pengalaman pengguna (UX) yang menarik dan mudah digunakan.
  • Mockup dan Wireframe: Membuat representasi visual dari tampilan website sebelum proses pengembangan dimulai.
  • Branding: Penyesuaian desain website dengan identitas visual brand, termasuk warna, logo, dan tipografi.

3. Pengembangan Website

  • Front-end Development: Pengkodean tampilan depan website menggunakan HTML, CSS, dan JavaScript untuk membuat website interaktif dan responsif.
  • Back-end Development: Pengembangan sisi server untuk menangani database, autentikasi pengguna, pengelolaan konten, dll.
  • Integrasi CMS: Mengintegrasikan sistem manajemen konten (CMS) seperti WordPress, Joomla, atau Drupal untuk memudahkan pengelolaan konten oleh pengguna.

4. Optimasi SEO

  • Optimasi Mesin Pencari: Menyusun konten dan struktur website agar mudah ditemukan oleh mesin pencari seperti Google.
  • Penggunaan Kata Kunci: Penelitian dan penerapan kata kunci yang relevan untuk meningkatkan visibilitas website.
  • Optimasi Kecepatan: Memastikan website memiliki waktu muat yang cepat dan responsif di berbagai perangkat.

5. Pengujian dan Peluncuran

  • Pengujian Kinerja: Menguji website untuk memastikan tidak ada bug, kesalahan, atau masalah kompatibilitas di berbagai browser dan perangkat.
  • Peluncuran: Melakukan deploy atau peluncuran website ke server live, sehingga bisa diakses oleh publik.
  • Pemantauan Awal: Pemantauan performa website setelah peluncuran untuk memastikan semuanya berjalan lancar.

6. Pemeliharaan dan Dukungan

  • Pemeliharaan Rutin: Update keamanan, backup data, dan perbaikan bug secara berkala.
  • Pengembangan Berkelanjutan: Menambahkan fitur baru atau melakukan redesign sesuai kebutuhan klien.
  • Dukungan Teknis: Memberikan bantuan jika ada masalah teknis atau pertanyaan dari klien setelah website diluncurkan.

Jasa pembuatan website ini penting untuk membantu bisnis memiliki kehadiran online yang profesional, menarik, dan efektif dalam mencapai tujuannya, baik itu meningkatkan penjualan, memperluas jangkauan, atau membangun brand awareness.

Keuntungan dari SEO

Apa saja keuntungan dari optimasi SEO (Search Engine Optimization)?

by ElementorwebsiteWordpress

Jasa optimasi SEO website adalah layanan yang ditawarkan oleh profesional SEO atau agensi digital untuk meningkatkan peringkat dan visibilitas sebuah situs web di hasil pencarian organik mesin telusur seperti Google, Bing, dan lainnya. Tujuan utama dari jasa optimasi SEO adalah membuat situs web menjadi lebih ramah mesin telusur sehingga lebih mudah ditemukan oleh pengguna yang mencari informasi atau produk yang relevan.

Berikut ini beberapa komponen utama dari jasa optimasi SEO website:

  1. Penelitian Kata Kunci: Melakukan penelitian kata kunci untuk mengidentifikasi kata kunci yang relevan dengan bisnis atau topik situs web, serta memiliki volume pencarian yang tinggi dan tingkat persaingan yang sesuai.
  2. Optimasi On-Page: Mengoptimalkan berbagai elemen di dalam halaman web, termasuk judul, deskripsi meta, tag header, struktur URL, konten, gambar, dan tag alt, untuk meningkatkan relevansi dan kualitas halaman dalam konteks kata kunci yang ditargetkan.
  3. Optimasi Off-Page: Meningkatkan otoritas situs web melalui tautan balik (backlink) berkualitas dari situs web lain, media sosial, direktori online, dan sumber lainnya. Ini juga termasuk strategi pemasaran konten untuk mendapatkan tautan alami.
  4. Optimasi Teknis: Memastikan situs web memiliki struktur teknis yang baik, seperti kecepatan halaman yang cepat, mobile-friendly, pengindeksan yang efisien oleh mesin telusur, dan penggunaan protokol HTTPS yang aman.
  5. Analisis dan Pelaporan: Melakukan analisis terus-menerus terhadap kinerja situs web, termasuk peringkat kata kunci, lalu lintas organik, tingkat konversi, dan metrik lainnya. Pelaporan berkala disediakan kepada klien untuk menunjukkan kemajuan dan hasil dari upaya optimasi SEO.
  6. Strategi Konten: Merancang strategi konten yang relevan dan berkualitas untuk menarik pengunjung dan mendukung upaya SEO, seperti pembuatan blog, artikel, panduan, infografis, dan jenis konten lainnya yang dapat memperkaya situs web.

Dengan menggunakan jasa optimasi SEO website, pemilik situs web dapat meningkatkan visibilitas online mereka, menarik lalu lintas organik yang lebih banyak, meningkatkan kesadaran merek, dan akhirnya meningkatkan konversi dan penjualan.

Ada berapa banyak keuntungan yang dapat diperoleh dari melakukan optimasi SEO (Search Engine Optimization) untuk situs web Anda? Berikut adalah beberapa keuntungannya:

  1. Peningkatan Visibilitas: Dengan mengoptimalkan situs web Anda untuk kata kunci yang relevan, Anda dapat meningkatkan peringkat situs Anda di hasil pencarian mesin telusur. Hal ini akan membuat situs Anda lebih mudah ditemukan oleh pengguna yang mencari informasi atau produk yang relevan.
  2. Lalu Lintas Organik yang Lebih Tinggi: Dengan meningkatkan peringkat Anda di hasil pencarian organik, Anda juga dapat meningkatkan jumlah lalu lintas organik yang mengunjungi situs web Anda. Lalu lintas organik ini sering kali merupakan sumber lalu lintas yang paling berharga karena pengguna mencarinya secara aktif.
  3. Peningkatan Kualitas Lalu Lintas: Pengguna yang menemukan situs Anda melalui hasil pencarian organik cenderung lebih berkualitas karena mereka sudah memiliki minat atau kebutuhan yang sesuai dengan konten atau produk yang Anda tawarkan.
  4. Peningkatan Kesadaran Merek: Dengan muncul di hasil pencarian untuk kata kunci yang relevan, Anda dapat meningkatkan kesadaran merek Anda di kalangan pengguna. Pengguna akan melihat situs Anda sebagai otoritas dalam bidangnya jika mereka melihatnya muncul di hasil pencarian.
  5. Biaya Rendah: Meskipun membutuhkan waktu dan upaya, SEO umumnya memiliki biaya yang lebih rendah dibandingkan dengan strategi pemasaran online lainnya seperti iklan berbayar. Hal ini membuatnya menjadi investasi yang lebih berkelanjutan dalam jangka panjang.
  6. Keunggulan Kompetitif: Dengan melakukan optimasi SEO yang efektif, Anda dapat memenangkan keunggulan kompetitif dengan bersaing dengan pesaing Anda di ruang online. Peringkat yang lebih tinggi di mesin telusur dapat memberi Anda keunggulan atas pesaing Anda dalam hal mendapatkan lalu lintas dan pelanggan potensial.
  7. Peningkatan Tingkat Konversi: Pengguna yang datang ke situs Anda melalui hasil pencarian organik cenderung memiliki tingkat konversi yang lebih tinggi karena mereka sudah memiliki minat yang relevan dengan produk atau layanan yang Anda tawarkan.

BACA JUGA : https://www.digimagine.web.id/teknik-seo-dalam-60-menit-untuk-meningkatkan-traffic-blog-dari-search-engine-google/

Dengan memanfaatkan keuntungan-keuntungan ini, optimasi SEO dapat menjadi strategi yang sangat efektif untuk meningkatkan visibilitas online dan kesuksesan bisnis Anda secara keseluruhan.

How-to-Create-Landing-Pages-With-Elementor-for-WordPress

langkah-langkah membuat landing page dengan elementor di wordpress

by with No Comment ElementorwebsiteWordpress

Membuat landing page di WordPress dengan menggunakan Elementor adalah proses yang relatif mudah dan intuitif. Berikut adalah langkah-langkah umum untuk membuat landing page menggunakan Elementor di WordPress:

  1. Instalasi Elementor:
    • Pastikan Anda telah menginstal dan mengaktifkan plugin Elementor di situs WordPress Anda. Anda dapat menemukannya di bagian “Plugins” > “Tambah Baru” di dasbor WordPress, kemudian cari “Elementor” dan instal plugin tersebut.
  2. Buat Halaman Baru:
    • Masuk ke dasbor WordPress Anda dan buat halaman baru dengan mengklik “Halaman” > “Tambah Baru”.
  3. Buka Editor Elementor:
    • Setelah halaman baru dibuat, klik tombol “Edit dengan Elementor” di bagian atas halaman untuk membuka editor visual Elementor.
  4. Pilih Template atau Mulai dari Nol:
    • Anda dapat memilih untuk memulai dari template yang sudah ada atau membuat landing page dari awal.
    • Jika ingin memilih template, klik tombol “Folder” di pojok kiri bawah untuk membuka panel template, lalu pilih kategori “Landing Page” atau ketik kata kunci yang sesuai untuk mencari template yang diinginkan.
    • Jika ingin memulai dari awal, Anda dapat menambahkan widget dan elemen secara manual dari panel kiri.
  5. Edit dan Sesuaikan:
    • Setelah memilih template atau menambahkan elemen, Anda dapat mengedit konten dengan mudah dengan mengklik langsung di atas elemen yang ingin Anda ubah.
    • Anda dapat menyesuaikan teks, gambar, warna, tata letak, dan elemen lainnya menggunakan opsi pengeditan yang tersedia di panel kiri atau dengan mengklik elemen itu sendiri.
  6. Tambahkan Elemen Baru:
    • Anda bisa menambahkan elemen baru dengan mengklik tombol “+” di panel kiri Elementor dan memilih elemen yang ingin Anda tambahkan, seperti teks, gambar, tombol, formulir, dan banyak lagi.
  7. Atur Seksi dan Kolom:
    • Anda dapat mengatur tata letak halaman dengan menambah, menghapus, atau mengatur ulang bagian (sections) dan kolom (columns) menggunakan tombol kanan-klik.
  8. Preview dan Publikasikan:
    • Setelah Anda puas dengan desain landing page Anda, Anda dapat menekan tombol “Preview” untuk melihatnya dalam tampilan yang sesungguhnya atau langsung mempublikasikannya dengan menekan tombol “Publikasikan”.
  9. Konfigurasi Setelan Halaman:
    • Sebelum menutup editor, pastikan Anda juga menyesuaikan setelan halaman seperti judul, slug, dan setelan SEO jika diperlukan.
  10. Optimalkan untuk Responsif:
    • Pastikan untuk mengoptimalkan landing page Anda untuk tampilan responsif dengan memeriksa tampilannya pada perangkat berbeda seperti komputer desktop, tablet, dan ponsel.

Setelah mengikuti langkah-langkah di atas, Anda akan memiliki landing page yang siap digunakan di situs WordPress Anda menggunakan Elementor. Jangan ragu untuk bereksperimen dengan berbagai fitur dan elemen yang ditawarkan oleh Elementor untuk mendapatkan hasil yang sesuai dengan kebutuhan Anda.

pexels-photo-546819-1-1.jpeg

contoh skrip untuk membuat landing page di WordPress

by with No Comment codingTutorialWordpress 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Landing Page WordPress</title>
  <style>
    /* Gaya CSS khusus untuk landing page */
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      text-align: center;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 40px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    }
    h1 {
      font-size: 28px;
      margin-bottom: 20px;
    }
    p {
      font-size: 18px;
      margin-bottom: 30px;
    }
    .cta-button {
      display: inline-block;
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      font-size: 16px;
      text-decoration: none;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Welcome to Our Landing Page</h1>
    <p>Thank you for visiting our website. Learn more about our amazing products and services.</p>
    <a href="#contact" class="cta-button">Contact Us</a>
  </div>

  <div id="contact">
    <h2>Contact Us</h2>
    <p>Please fill out the form below to get in touch with us.</p>
    <?php echo do_shortcode('[contact-form-7 id="123" title="Contact Form"]'); ?>
  </div>

  <!-- Atau Anda bisa menambahkan formulir kontak langsung menggunakan HTML jika tidak menggunakan Contact Form 7 -->
  <!-- <div id="contact">
    <h2>Contact Us</h2>
    <p>Please fill out the form below to get in touch with us.</p>
    <form action="your-action-url" method="POST">
      <input type="text" name="name" placeholder="Your Name" required>
      <input type="email" name="email" placeholder="Your Email" required>
      <textarea name="message" placeholder="Your Message" required></textarea>
      <button type="submit">Send Message</button>
    </form>
  </div> -->
</body>
</html>

Untuk menggunakan skrip diatas, ikuti langkah-langkah sebagai berikut:

  1. Buka halaman WordPress Anda dan buka editor tema Anda (misalnya, melalui Appearance > Theme Editor).
  2. Buat file baru dan beri nama landing-page.php.
  3. Salin dan tempelkan skrip di atas ke dalam file landing-page.php.
  4. Simpan file tersebut dan keluar dari editor tema.
  5. Kembali ke halaman WordPress dan buka Halaman > Tambah Baru.
  6. Buat halaman baru untuk landing page Anda dan beri judul yang sesuai.
  7. Di bagian atribut halaman (Page Attributes) di sebelah kanan, cari opsi Template dan pilih “Landing Page”.
  8. Klik “Publikasikan” untuk menerbitkan halaman landing page Anda.
outputdone

Tutorial Membuat Aplikasi Blog Flutter Backend WordPress API

by with No Comment APIFlutterTeknologiTutorialWordpress

Artikel ini akan membahas tutorial bagaimana membuat aplikasi blog sederhana menggunakan flutter dengan menggunakan wordpress sebagai API-nya, studi kasus kali ini menggunakan backend.

Langkah pertamanya adalah membuat project di flutter

flutter create blogwp

create flutter project

main.dart

Ubah bagian main.dart pada folder lib

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  const MyHomePage({ Key? key,  }) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('belajarflutterapp'),
      ),
    );
  }
}

Add Dependency

lalu kita siapkan package yang dibutuhkan dengan menggunakan shortcut ctrl + shift + P, tampilannya akan seperti di bawah ini :

Dart :add dependency

Function Get

 

Selanjutnya kita akan membuat function / fungsi yang berfungsi untuk mengirimkan permintaan ke aplikasi mobile yang ingin kita buat.

Future<List> getPosts() async {
var response = await http.get(
Uri.parse("https://belajarflutter.com/wp-json/wp/v2/posts?_embed"),
headers: {
"Accept": "application/json",
},
);
return jsonDecode(response.body);
}

initstate

lalu tambahkan function getPosts ke dalam void initstate

 

void initState() {
getPosts();
super.initState();
}

Untuk full code nya di atas ada di bawah ini :

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Future<List> getPosts() async {
var response = await http.get(
Uri.parse("https://belajarflutter.com/wp-json/wp/v2/posts?_embed"),
headers: {
"Accept": "application/json",
},
);
return jsonDecode(response.body);
}
@override
void initState() {
getPosts();
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'BelajarFlutterApps',
),
),
body: FutureBuilder(
future: getPosts(),
builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
if (snapshot.hasData) {
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
Map posts = snapshot.data[index];
return Text(posts['title']['rendered']);
});
}
return CircularProgressIndicator();
},
),
);
}
}

Output Sementara

Next Step

langkah selanjutnya kita akan tampung datanya di dalam column dan sedikit merapikan user interfacenya

Column

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Future<List> getPosts() async {
var response = await http.get(
Uri.parse("https://belajarflutter.com/wp-json/wp/v2/posts?_embed"),
headers: {
"Accept": "application/json",
},
);
return jsonDecode(response.body);
}
@override
void initState() {
getPosts();
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'BelajarFlutterApps',
),
),
body: FutureBuilder(
future: getPosts(),
builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
if (snapshot.hasData) {
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
Map posts = snapshot.data[index];
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
posts['title']['rendered'],
style: TextStyle(
fontSize: 20.0,
color: Colors.blueAccent,
fontWeight: FontWeight.bold,
),
),
],
);
});
}
return CircularProgressIndicator();
},
),
);
}
}

Card dan Padding

tambahkan card dan padding pada desain yang kita buat

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Future<List> getPosts() async {
var response = await http.get(
Uri.parse("https://belajarflutter.com/wp-json/wp/v2/posts?_embed"),
headers: {
"Accept": "application/json",
},
);
return jsonDecode(response.body);
}
@override
void initState() {
getPosts();
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'BelajarFlutterApps',
),
),
body: FutureBuilder(
future: getPosts(),
builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
if (snapshot.hasData) {
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
Map posts = snapshot.data[index];
return Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
posts['title']['rendered'],
style: TextStyle(
fontSize: 20.0,
color: Colors.blueAccent,
fontWeight: FontWeight.bold,
),
),
],
),
),
);
});
}
return CircularProgressIndicator();
},
),
);
}
}

Tampilkan Gambar

return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
Map posts = snapshot.data[index];
return Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.network(
posts['_embedded']['wp:featuredmedia'][0]['source_url'],
),
Text(
posts['title']['rendered'],
style: TextStyle(
fontSize: 20.0,
color: Colors.blueAccent,
fontWeight: FontWeight.bold,
),
),
],
),
),
);
});
Output finalnya adalah seperti di bawah ini :

Full Code nya : 

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Future<List> getPosts() async {
var response = await http.get(
Uri.parse("https://belajarflutter.com/wp-json/wp/v2/posts?_embed"),
headers: {
"Accept": "application/json",
},
);
return jsonDecode(response.body);
}
@override
void initState() {
getPosts();
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'BelajarFlutterApps',
),
),
body: FutureBuilder(
future: getPosts(),
builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
if (snapshot.hasData) {
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
Map posts = snapshot.data[index];
return Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.network(
posts['_embedded']['wp:featuredmedia'][0]['source_url'],
),
Text(
posts['title']['rendered'],
style: TextStyle(
fontSize: 20.0,
color: Colors.blueAccent,
fontWeight: FontWeight.bold,
),
),
],
),
),
);
});
}
return CircularProgressIndicator();
},
),
);
}
}

Sumber : belajarflutter.com

wordpress-1288020_640

Apakah Benarkah WordPress itu SEO Friendly? mari kita buktikan ya guys

by with No Comment ArtikelSEOWordpress

WordPress merupakan platform Content Management System (CMS) yang paling banyak digunakan, hingga 43% website di seluruh dunia. Salah satu alasan utamanya adalah karena WordPress itu SEO friendly.

Ada yang mengatakan kalau WordPress memang dikembangkan agar ramah mesin pencari. Ada juga yang beranggapan bahwa platform CMS ini punya banyak kemudahan untuk optimasi SEO tingkat lanjut.

Benarkah demikian? Apakah WordPress SEO friendly itu sekadar mitos? Atau, ada fakta yang menunjukkan kalau platform ini lebih unggul dibanding CMS lainnya, seperti Blogger dan Ghost?

Temukan jawabannya dengan menyimak artikel yang satu ini. Yuk, langsung scroll ke bawah!

Benarkah WordPress SEO Friendly?

Harus diakui bahwa WordPress adalah platform CMS yang SEO friendly secara default. Kenapa bisa dikatakan begitu?

WordPress menjelaskan bahwa platform ini memang dirancang untuk memudahkan cara kerja search engine dalam memahami konten sebuah website. 

Pada dasarnya, di website WordPress, robot mesin pencari jadi leluasa untuk melakukan crawling (menjelajahi konten website), indexing (memasukkan website ke database pencarian), dan ranking (memunculkan website di hasil pencarian).

Kalau bicara sedikit teknis, WordPress juga memungkinkan pemilik website mengatur permalink, merapikan struktur konten, melakukan optimasi SEO lanjutan melalui plugin pihak ketiga dan lainnya. 

Itu semua mungkin tidak akan Anda dapatkan dari platform CMS lainnya. (Kami akan membahasnya di bagian lain)

Jadi, kenapa WordPress SEO friendly? Berikut penjelasannya!

1. Kemudahan Menata Struktur Konten

Menurut Google, struktur konten yang rapi memudahkan mesin pencari menjelajahi isi konten. Jadi, robot Google bisa beralih dari satu konten ke konten lain yang berkaitan demi mendapatkan konteks informasi di dalamnya.

Hasilnya, konten Anda berpeluang lebih besar untuk meranking di hasil pencarian atau SERP pada kata kunci yang relevan dengan informasi tersebut.

Nah, WordPress menyediakan sederet fitur untuk membantu Anda menata struktur konten. Mulai dari judul, subjudul atau heading, tag, kategori, dan masih banyak lagi.

Semuanya bisa Anda temukan dengan mengakses editor bawaan WordPress. Baik saat membuat halaman maupun postingan blog baru.

1 wordpress seo friendly kemudahan menata struktur konten

Sebagai contoh, saat menulis postingan blog, judul artikel akan otomatis dilabeli sebagai heading 1 atau H1. Beberapa rekomendasi SEO merekomendasikan bahwa setiap halaman setidaknya memiliki satu H1 yang menjelaskan topik tertentu.

Tak berhenti di situ, Anda bisa menambahkan heading baru, mulai dari H2, H3, dan seterusnya sesuai kebutuhan topik yang dibahas.

Selain itu, Anda juga bisa menambahkan tag artikel dengan mudah. Tak lupa, ada juga opsi untuk menempatkan artikel sesuai kategorinya.

2 mengatur kategori tag wordpress

Singkatnya, konten website dengan adanya penataan heading dan kategori membuat mesin pencari lebih paham isi konten. Dari segi user experience, pengunjung juga jadi lebih mudah mencari konten yang dibutuhkan.

Hal ini tentunya merupakan suatu keunggulan. Karena di beberapa CMS lain, Anda harus repot membongkar coding HTML untuk sekadar mengatur heading atau tag konten.

Masih berhubungan dengan konten, WordPress adalah platform serba bisa untuk membuat rich content. Sesuai namanya, rich content tidak hanya berisi teks, tapi juga elemen multimedia seperti gambar, video, embed code, dan lain-lain.

Di mata pengunjung, rich content jauh lebih nyaman dinikmati dibanding konten yang hanya berisi teks (plain content). Contohnya potongan artikel Niagahoster Blog berikut:

21 contoh rich content niagahoster

Faktanya, konten dengan rich media 13% lebih menarik untuk diklik calon pengunjung, dibandingkan konten plain. Sehingga lama kelamaan, performa SEO website dengan rich content jadi meningkat.

Untungnya di WordPress, Anda bisa menambahkan berbagai elemen ke konten cukup bermodalkan editor bawaan. Mau gambar, video, audio, button, sampai kode bahasa pemrograman, semuanya ada.

3 wordpress seo friendly ramah rich content

Bahkan jika Anda menginstall plugin tambahan seperti Yoast SEO, maka semakin banyak elemen yang bisa Anda tambahkan, seperti contoh di bawah:

4 rich content dengan yoast

Itu baru soal isi konten. Untuk jenis kontennya sendiri, ada banyak. Anda bisa mengikuti cara memasang rich snippet untuk masing-masing konten yang ingin dibuat. Caranya mudah, asal Yoast SEO sudah terpasang ke WordPress Anda.

Misalnya, ketika Anda membuat konten berita, tinggal pilih News Article untuk jenis schema, yang nantinya ikut menentukan tampilan konten di hasil pencarian utama.

5 rich schema yoast

Dengan begitu, konten berita Anda bisa nangkring di pencarian, utamanya di section News sesuai schema yang ditentukan tadi. 

Begitu pula ketika Anda menambahkan gambar atau video di artikel blog, aset tersebut jadi punya kesempatan untuk muncul di section-nya masing-masing di hasil pencarian. 

22 wordpress seo friendly hasil rich result

3. Kemudahan Optimasi Gambar

Menambahkan gambar akan membuat artikel kian menarik. Namun, jangan lupakan optimasi gambar sebagai upaya image SEO.

Untungnya di WordPress, fitur optimasi gambarnya sudah cukup lengkap kok.

Dengan mengakses Media Library, Anda bisa mengetahui ukuran dan format gambar. Informasi ini bisa membantu Anda untuk memonitor apakah gambar tersebut terlalu besar atau sudah teroptimasi dengan baik.

6 wordpress seo friendly kemudahan optimasi gambar

Lebih jauh, Anda juga bisa menambahkan Alt Text, Title, dan Caption, agar gambar lebih mudah dipahami oleh mesin pencari.

Tak berhenti di situ, WordPress juga sudah mendukung format gambar generasi baru, yaitu Webp. Format Google Webp ini mampu mengkompres ukuran gambar jadi jauh lebih kecil, tanpa mengubah kualitasnya.

Sebagai contoh, gambar Webp berukuran 11 KB punya kualitas setara dengan gambar JPG dengan size 65 KB.

7 webp vs jpg

Kalau itu masih dianggap belum cukup, WordPress juga menyediakan berbagai plugin kompresi gambar otomatis, kok. Sebut saja Smush, Imagify, ShortPixel, dan masih banyak lagi. 

Dengan plugin tersebut, Anda bisa mendapatkan size gambar yang tetap kecil tanpa repot kompres secara manual.

Permalink adalah istilah lain dari URL suatu halaman website. Penggunaan permalink yang tepat cukup berpengaruh bagi upaya SEO.

Menurut Google Search Central, permalink merupakan cara mesin pencari mengetahui isi konten, ketika konten tersebut belum pernah di-crawling sama sekali.

Itulah kenapa, penting bagi Anda untuk membuat permalink yang menggambarkan kontennya. Jangan sampai Anda asal bikin permalink seperti ini:

8 permalink bagus vs jelek

Berhubung WordPress SEO friendly, ia memberi Anda kebebasan untuk mengatur permalink sesuka hati. Opsi permalink ini juga sudah tertanam sebagai fitur bawaan, loh.

Anda cukup memilih satu dari beberapa pilihan permalink yang tersedia. Saran dari kami, pilihlah opsi Post name. Karena itulah yang paling ringkas dan deskriptif, sehingga bagus untuk SEO.

9 wordpress seo friendly kemudahan mengatur permalink

Secara umum, Anda bisa berhenti sampai di situ. Namun terkadang, permalink yang dihasilkan masih terlalu panjang, karena menyesuaikan judul halaman atau postingan.

Untungnya, Anda masih bisa mengatur custom slug untuk masing-masing halaman. Cukup gunakan Yoast SEO dan isilah kolom slug sesuai kebutuhan Anda.

Intinya dengan WordPress, Anda bisa menciptakan permalink sebaik mungkin. Sehingga tidak hanya mudah dimengerti oleh mesin pencari, tapi juga calon pengunjung.

5. Fitur SEO Lanjutan Lengkap

Satu hal yang membuat WordPress SEO friendly adalah ketersediaan banyak plugin SEO untuk optimasi tingkat lanjut. Dengan begitu, Anda tak akan kesulitan mengkonfigurasi optimasi SEO dengan lebih mudah.

Sebagai contoh, Anda bisa mengatur SEO title dan meta description dengan bantuan plugin Yoast SEO.

10 wordpress seo friendly mengatur seo title meta description

Dengan begitu, hasil pencarian untuk konten tersebut menjadi seperti ini:

23 wordpress seo friendly hasil serp

Mengatur SEO title dan meta description ini sangat penting. Menurut Google, keduanya berguna untuk membantu mesin pencari dan pengguna agar lebih mudah memahami topik konten.

Tentu saja, masih banyak hal yang bisa Anda lakukan untuk meningkatkan SEO website dengan Yoast. Selengkapnya bisa Anda temukan di panduan cara setting Yoast SEO.

Dengan Yoast, Anda sudah cukup melakukan upaya optimasi SEO lebih cepat. Namun, masih ada plugin SEO lain yang juga menjanjikan, yaitu Rank Math. 

Keistimewaan plugin ini adalah kemampuan menganalisis kualitas konten menurut standar SEO. Sebagai contoh, penempatan keyword, penggunaan heading, jumlah internal serta external link, dan masih banyak lagi.

Kalau Anda bingung, manakah yang akan dipilih dari keduanya, kami sudah mencoba membandingkannya di artikel Rank Math vs Yoast SEO. 

11 melihat google trends

Salah satu keunggulan Rank Math adalah memudahkan Anda memantau tren pencarian keyword berkat integrasinya dengan Google Trends. Itu tadi tentang Rank Math.

Nah, meskipun pengecekan tren bisa dilakukan manual, integrasi yang mudah dengan Google merupakan sebuah keuntungan. Kenapa demikian? 

Katakanlah, tentang kinerja website. Setelah mengoptimasi berbagai aspek SEO, Anda tentu ingin tahu apakah hasilnya sudah sesuai harapan atau belum, kan? Itulah mengapa, menghubungkan website WordPress dengan berbagai tools Google sangatlah membantu.

Misalnya Search Console untuk menelusuri proses indeksasi website, Analytics untuk memantau trafik pengunjung, atau PageSpeed Insights untuk menengok speed website berdasarkan metrik core web vitals.

12 integrasi tools google

Nah, WordPress lewat plugin Google Site Kit bisa membantu Anda mengintegrasikan website ke berbagai tools Google sekaligus.

Dengan begitu, Anda bisa mengetahui statistik kinerja website ditengok dari berbagai aspek cukup di satu tempat. Kalaupun terjadi sebuah kendala, Anda jadi lebih mudah mengetahui lalu memperbaikinya, kan?

6. Kebebasan Memilih Hosting Terbaik

Pengaruh hosting untuk SEO itu cukup besar. Mengingat WordPress membebaskan Anda untuk memilih hosting sendiri, pilihlah layanan hosting dengan server yang sudah teruji kualitasnya.

Alasannya, kualitas server hosting berdampak langsung pada kecepatan dan uptime website. Nah, uptime dan kecepatan merupakan dua faktor Google ranking yang dominan.

Di beberapa CMS lain, Anda tidak bisa berganti hosting seenak hati. Sebab, mereka umumnya menawarkan platform dan hosting dalam satu paket. 

Hal ini jadi merepotkan, jika suatu ketika server platform tersebut mengalami kendala yang cukup lama. Berbeda dengan WordPress, Anda bisa menggunakan berbagai layanan hosting sesuai kebutuhan.

Sebagai contoh, Anda kurang puas dengan performa suatu hosting, Anda bisa migrasi dengan mudah ke hosting lain.

Benarkah SEO WordPress Lebih Baik dari CMS Lain?

WordPress memang terbukti SEO friendly. Namun, apakah SEO WordPress lebih baik dibanding platform sejenis? Yuk buktikan bersama!

WordPress vs Blogger: Pengaturan Schema Markup

Website WordPress bisa menampilkan hasil pencarian yang lebih menarik karena kemudahan mengatur schema markup. Tak cuma teks, tapi elemen visual seperti gambar dan rating juga bisa ikut tampil di SERP.

Jenis website apapun seperti blog, toko online, atau website review bisa mendapatkan keuntungan dari kemudahan mengatur schema markup. Sebagai contoh, ini dia hasil pencarian sebuah produk toko online:

14 rich result website toko online

Bagi Anda pemilik website ecommerce, tampilan semacam ini lebih menarik minat calon pengunjung untuk mampir ke website Anda, loh.

Menariknya lagi di WordPress, Anda tak butuh kemampuan teknis untuk membuat rich schema. Cukup bermodalkan plugin Yoast, Anda tinggal pilih schema yang sesuai dengan jenis halaman seperti ini:

15 mengatur rich schema website toko online

Sementara di Blogger, platform blog buatan Google, Anda memang bisa mengatur rich result ini. Namun, prosesnya jauh lebih ribet dan melibatkan keterampilan teknis. 

Coba bayangkan, Anda perlu membongkar script HTML, lalu menuliskan kode schema di tempat yang spesifik.

16 mengatur rich schema di blogger

Dikhawatirkan, hal ini bisa menyebabkan website error kalau Anda salah ketik script atau menempatkan schema di posisi yang tidak seharusnya. Niat ingin memperbaiki upaya SEO malah bisa berujung ranking website drop karena tidak bisa diakses.

WordPress vs Ghost: Integrasi Tools Google

Hal lain yang membuat SEO WordPress menonjol dibandingkan CMS lain adalah kemudahan integrasinya dengan berbagai tools Google. Dengan begitu, Anda jadi tahu apakah performa website sudah optimal menurut standar Google.

Di WordPress, Anda cukup menggunakan satu plugin bernama Google Site Kit untuk enam tools berbeda. Proses konfigurasinya mudah. Tanpa keluar dashboard, apalagi sampai membuka banyak tab browser untuk setiap tools.

17 wordpress seo friendly plugin google site kit

Sementara di platform lain, meskipun bisa dilakukan, proses integrasi website ke tools Google butuh usaha lebih keras.

Sebagai contoh, di Ghost CMS yang merupakan platform khusus blogging, untuk sekadar mengintegrasikan website dengan Google Analytics saja Anda harus melalui beberapa tahapan.

Pertama, Anda harus membuka laman Analytics untuk mendaftarkan website dan mendapatkan kode tracking. Kemudian, kembali ke dashboard Ghost lalu menuju menu Code Injection guna menempelkan tracking code tersebut.

18 menghubungkan google analytics di ghost

Itu baru untuk satu tools. Bisa dibayangkan betapa ribetnya untuk menghubungkan website ke semua layanan Google yang kami sebutkan tadi, kan?

WordPress vs Shopify: Pembuatan Konten Blog

WordPress adalah platform CMS multifungsi. Artinya, Anda bisa membangun toko online sembari membuat konten blog sebagai upaya content marketing.

Jika konten blog Anda menduduki posisi puncak pencarian, reputasi website meningkat dan potensi penjualan bisa ikut terdongkrak. Itulah mengapa, cara menulis artikel SEO friendly itu sangat penting.

Untungnya, ada plugin Rank Math yang bisa memandu Anda selama membuat artikel. Plugin berbasis AI ini akan menilai kualitas konten Anda berdasarkan beberapa metrik. Misalnya penyebaran keyword, penempatan keyword, jumlah kata, dan lain-lain.

Jika ada satu aspek yang belum oke, plugin ini akan memberi Anda saran bagian mana yang harus diperbaiki.

19 wordpress seo friendly plugin rank math

Sementara di CMS lain, kemudahan semacam ini belum tentu Anda dapatkan. Di Shopify misalnya, aspek blogging jadi agak terpinggirkan. Sebab, CMS ini terlalu berfokus pada pengelolaan website ecommerce.

Memang sih, Shopify masih bisa untuk sekadar membuat konten blog. Namun, tidak ada fitur untuk mengetahui apakah konten Anda sudah oke menurut standar SEO atau belum.

20 membuat konten blog di shopify

Hasilnya, peluang konten blog Anda muncul di pencarian jadi setengah-setengah, karena Anda jadi tidak punya acuan penilaian yang akurat.

Terbukti, WordPress adalah CMS Paling SEO Friendly!

Benar bukan bahwa WordPress adalah platform yang SEO friendly? Bahkan jika dibandingkan dengan beberapa Content Management System lain, SEO WordPress masih jauh lebih unggul.

Itupun masih bisa optimasi lebih jauh via plugin WordPress, sehingga kinerja SEO jadi makin meroket. Yang penting, jangan salah optimasi, ya!

Nah, agar website WordPress Anda tetap SEO friendly, Anda perlu mempraktikkan tips optimasi SEO yang terbukti ampuh. Tenang, kami sudah menyiapkan panduannya dalam bentuk ebook gratis yang bisa langsung Anda download.

banner ebook meroketkan ranking website

Yang tak kalah penting agar upaya optimasi SEO makin oke, yaitu dukungan penyedia hosting terbaik untuk website WordPress Anda.

Nah, WordPress Hosting Niagahoster adalah pilihan tepat jika Anda ingin mengoptimalkan performa website WordPress. Layanan ini dibekali fitur dan keunggulan menarik, seperti:

  • Ketersediaan plugin Yoast SEO dan Google Site Kit siap pakai untuk memudahkan Anda mengoptimasi SEO website.
  • Fitur kecepatan canggih WordPress Accelerator untuk meningkatkan kecepatan website Anda hanya dengan sekali klik.
  • Teknologi server terbaik dengan Jaminan Uptime 99.98% untuk menjaga website Anda selalu ON 24 jam penuh.
  • Lokasi server Indonesia, cocok bagi Anda yang menargetkan pengunjung website dari dalam negeri.

untuk order silahkan klik link ini : ORDER HOSTING

8b4ca942e1ed0dc1617434d2e0432191

Cara Edit WordPress Menggunakan Elementor

by with No Comment ArtikelElementorwebsiteWordpress

Memiliki Tampilan website yang menarik dan elegan merupakan salah satu faktor pendukung dalam meningkatkan konversi atau penjualan. Membuat pengunjung dapat betah berlama-lama menelusuri website kita hingga akhirnya menjadi prospek dan berujung menjadi pelanggan.

Untuk website berbasis WordPress Anda dapat menginstall beberapa tema yang sudah tersedia. Namun, terkadang sedikit sulit untuk mendesain website hanya dengan fitur tema. Maka dari itu, Anda memerlukan bantuan page builder yang dapat memudahkan untuk mendesain. Anda tidak perlu repot mempelajari coding karena yang Anda perlu lakukan cukup dengan menarik dan menata elemen yang Anda inginkan (drag and drop).

WordPress sendiri memiliki banyak page builder yang bermacam-macam, dan salah satunya yang paling umum digunakan adalah Elementor. Elementor menyediakan template layout website yang bervarian hingga banyaknya fitur-fitur menjadikan Elementor sebagai page builder yang paling sering digunakan hingga memiliki lebih dari 5 juta pengguna aktif.

Cara Edit WordPress menggunakan elementor 1

Artikel ini akan memperkenalkan Anda terkait Elementor mulai dari Apa itu Elementor, cara menginstallnya, manfaat, kelebihan, kekurangan hingga step by step cara mendesain menggunakan Elementor.

Apa Itu Elementor?

Elementor adalah pembuat halaman atau page builder plugin bentuk visual dari WordPress yang bisa di dapat secara gratis. Dengan desainnya yang simple sangat mudah dipelajari oleh pengguna baru. Anda juga tidak harus mempelajari dan memahami bahasa pemrograman lagi.

Elementor dikembangkan pada tahun 2014 oleh Yoni Luksenberg dan Ariel Klikstein. Elementor dikenalkan ke publik pada 1 Juni 2016 dan hingga saat ini telah diinstal oleh sekitar 1 juta pengguna WordPress di seluruh dunia. Terdapat 2 versi elementor yaitu elementor versi gratis dan berbayar dengan kelebihannya masing-masing.

Jika dijelaskan secara singkat, beginilah kira-kira cara Elementor bekerja:

  • Elementor membantu Anda mengubah tampilan dengan sistem bernama drag and drop. Terdapat sejumlah tombol elemen web ─ semacam teks, video, galeri, spacer, dsb ─ yang bisa diklik, ditaruh, dan disusun sesuai keinginan.
  • Elementor memberi opsi bagi Anda untuk mengubah setiap halaman di website. Mulai dari post, custom post types, sampai dengan pages bisa didesain ulang. Opsi ini membuat Anda leluasa menyesuaikan nuansa tampilan dengan konten tertentu.
  • Plugin ini bekerja di front-end website. Artinya, apa yang Anda lihat ketika mengustomisasi website akan jadi tampilan yang dilihat oleh pengunjung. Cara ini membuat Anda lebih efektif dalam mendesain. Apalagi kalau dibandingkan dengan desain sistem back-end yang sedikit rumit dan menyita waktu.
  • Anda tak perlu kemampuan HTML atau PHP untuk desain website. Satu-satunya yang Anda butuhkan hanyalah kreativitas.

Install Elementor

Menambahkan plugin Elementor pada website cukup mudah berikut ini adalah tahap-tahapnya.

Klik menu Plugins > Add New > Kemudian masukan kata kunci Elementor pada kolom pencarian di sebelah kanan > Instal Now plugin Elementor > tunggu tombol berubah menjadi Active >lalu klik tombol Active > plugin telah siap sedia untuk digunakan.

Apa yang Bisa Anda Buat dengan Elementor?

Pada dasarnya Elementor digunakan untuk membantu mendesain tiap halaman pada website, namun selain itu Elementor juga menawarkan banyak kelebihan dan fitur- fitur yang fungsional yang bisa Anda coba seperti di bawah ini:

· Landing page

Ini adalah fitur khusus untuk dapat mengajak dan mengundang pengunjung website untuk melakukan feedback atau aksi tertentu. Aksi tersebut bisa berupa mengisi formulir, melakukan transaksi pembelian produk, melakukan subscribe pada website dan tautan serta lain- lainnya.

· Opt-in Forms

Fitur ini adalah sebuah formulir yang disediakan dan dirancang untuk meminta data dan informasi pengunjung website. Disini Anda dapat memasukkan apa saja informasi yang ingin Anda minta dari pengunjung situs Anda mulai dari nama, alamat email, dan sebagainya. Formulir opt-in ini juga bisa Anda tata di tempat yang menurut Anda sesuai seperti pada header, footer, sidebar maupun di dalam konten.

· Widget

Sebagai elemen penambah yang turut melengkapi fungsi halaman keseluruhannya, widget adalah pilihan tempat yang lengkap bagi pengguna WordPress. Anda bisa menambahkan dan memasukkan fitur login form, rekomendasi konten dan saran, peta dan alamat, dan banyak pilihan lainnya.

· Pop-up

Bagi Anda yang ingin menonjolkan iklan, pesan atau promosi yang menarik dan berbeda, Anda dapat mencoba fitur pop-up yang satu ini. Fitur pop-up akan muncul setiap kali pengunjung mengklik atau mengakses halaman website tertentu yang ingin Anda tonjolkan.

· Global Widget

Dengan tujuan pembuatan yang dirancang untuk desain dan dapat diterapkan pada bagian web dalam satu waktu sekaligus, Global Widget akan memberikan Anda kendali penuh atas widget yang ingin Anda tampilkan di banyak tempat pada situs web Anda.

· Custom Post Types

Ini adalah halaman konten biasa yang bisa Anda temukan pada WordPress, namun karena WordPress berevolusi dari platform tipe sederhana menjadi CMS yang kuat, istilah ini kemudian melekat. Elementor akan membantu tampilan postingan ini menyesuaikan keinginan si pengguna.

· Custom Header and Footer

Header dan footer adalah merupakan elemen yang berisi identitas dan juga informasi rinci mengenai sebuah situs web. Anda dapat mengisinya dengan penjelasan tentang apa situs web Anda dibuat dan ditujukan. Header terletak pada bagian atas web dan footer berada pada bagian bawah.

Mengenal Fitur-Fitur Di Elementor

Kelengkapan fitur dan elemen ini akan sangat menjanjikan bagi pengguna lama dan baru karena mereka tidak perlu lagi menambahkan aplikasi lain untuk melakukan back up. Berikut ini elemen dan bagian Elementor yang patut Anda ketahui.

1. Tab options

Fitur ini terletak pada bagian bawah side panel Elementor tapi jika Anda membukanya dari browser maka Anda akan menemukannya pada sisi kiri halaman Anda. Terdiri dari opsi atau pilihan berbentuk tab, tab options ini berisikan settings, navigator, responsive mode, history dan juga preview changes.

Cara Edit WordPress menggunakan elementor 2

Nama tab dari kiri ke kanan: settings, navigator, history, responsive mode, dan preview changes. Deskripsi singkat seperti berikut:

  • Settings : memuat pengaturan umum soal halaman (judul, status publikasi, featured image, opsi sembunyikan judul, dan page layout); pengaturan style halaman (opsi gaya latar belakang, warna latar, gambar, dan padding), dan custom CSS.
  • Navigator : semacam daftar isi yang memuat komponen Elementor apa saja yang digunakan di sebuah halaman. Tab ini memudahkan Anda merunut dan mengatur tampilan halaman.
  • History : mendaftar perubahan apa saja yang dilakukan pada halaman. Anda bisa dengan mudah undo atau redo sebuah aksi.
  • Responsive mode : preview tampilan web di tiga layar berbeda, yaitu desktop, tablet, dan mobile. Ubah langsung untuk sesuaikan tampilan di resolusi layar yang diinginkan.
  • Preview changes : lihat hasil desain web sebelum disimpan dan dipublikasi ke khalayak.

2. Page settings

Cara Edit WordPress menggunakan elementor 2

Elemen ini memuat pengaturan dasar dari Elementor yang terdiri dari 3 opsi berbeda yakni yang saling menunjang satu sama lain:

· Style

Pada opsi Style ini pengguna bisa melakukan penyesuaian tampilan warna dan font pada website mereka. Pilihan default color dan default font bisa Anda ubah dengan leluasa kapan saja. Fitur color picker juga akan membantu Anda menentukan kombinasi estetika yang unik

· Settings

Opsi Setting memuat pengaturan pada WordPress dan juga pengaturan plugin Elementor. Pengaturan WordPress memberikan aktivasi fitur di Elementor sedangkan pengaturan Elementor itu sendiri memungkinkan pengguna untuk mengatur konten pada jarak antara konten, lebar konten juga tampilan foto konten dan galeri.

· Go To

Fitur Go To mempunyai 3 opsi lain pula. Finder adalah fitur untuk mencari elemen konten Elementor dengan cepat tanpa harus manual scrolling di element library lagi. View page adalah fitur untuk melihat halaman setelah kita edit. Exit Dashboard adalah fitur yang bisa Anda klik jika ingin memutuskan kembali ke halaman dashboard.

3. Element library

Element library berisi semua elemen yang bisa Anda tambahkan ke halaman website. Ada tiga jenis elemen yang bisa Anda pilih, yaitu basic, general, dan WordPress yang memiliki fungsinya masing-masing dan dapat Anda sesuakan dengan kebutuhan.
Cara Edit WordPress menggunakan elementor 3

Cara Edit Menggunakan Elementor

Jika Anda sudah memahami semua fitur dan bagian elemen diatas, langkah berikutnya adalah mempelajari bagaimana caranya menggunakan plugin Elementor. Untuk mengetahui bagaimana cara mendesain website dari awal bagi Anda yang merupakan pemula, maka berikut ini adalah step by step dalam membuat Landing Page mulai dari nol.

1.Login WordPress

Pastikan kamu bisa melakukan login WordPress. Untuk melakukan login WordPress, silahkan buka namadomain/wp-admin di web browser. Lalu masukkan username dan password.

Cara Edit WordPress menggunakan elementor 4

2.Memilih Plugins Elementor Page Builder

Seperti yang sudah dijelaskan di poin sebelumnya mengenai cara menginstall plugin Elementor. Setelah proses instalasi selesai, klik Activate untuk mengaktifkan pluginnya. Setelah itu klik Create Your First Page jika belum membuat halaman landing page. Namun, kami sarankan untuk membuat halaman landing page di WordPress terlebih dahulu.

3.Membuat Landing Page dengan Elementor

Klik Menu Pages dan klik halaman yang kamu tunjuk sebagai halaman landing page. Silakan klik tombol Edit With Elementor yang berada diatas halaman untuk membuat landing page dengan elementor. Pertama-tama, silakan klik tombol “+” untuk memilih kolom yang diinginkan untuk tampilan website. Silakan pilih kolom yang kamu inginkan untuk pembagian tampilan website.

Cara Edit WordPress menggunakan elementor 5

4.Memilih Elemen Untuk Landing Page

Setelah memilih kolom, sekarang saatnya membuat landing page yang Anda inginkan. Pastikan Anda harus melakukan desain landing page terlebih dahulu agar. Anda dapat memasukkan Heading, image, carousel, Google Maps, Icon, Image Box, Icon Box, Image Gallery, Image Carousel, Progress Bar, Testimonial dan sebagainya.

Sebagai contoh berikut ini contoh tampilan landing page menggunakan template dengan beberapa elemen library yang bisa langsung Anda edit.

Cara Edit WordPress menggunakan elementor 5

1.Heading

Pada contoh pertama, ketika Anda akan membuat Header. Maka silakan drag elemen “Heading” ke kolom bagian kiri. Anda bisa mengubah tampilan Heading pada bagian kiri. Untuk mengubah konten text editor pada bagian tab Content. Jika ingin mengubah warna huruf, silakan klik tab Style. Jika ingin menambahkan background dan custom css silakan tab Advance. Setelah itu klik Update untuk menyimpan hasil editing.

2.Text Editor

Seperti contoh, kali ini akan dibuat Text Editor. Maka silakan drag elemen “Text Editor” ke kolom bagian kiri. Anda bisa mengubah tampilan text editor pada bagian kiri. Untuk mengubah konten text editor pada bagian tab Content. Jika ingin mengubah warna huruf, silakan klik tab Style. Jika ingin menambahkan background dan custom css silakan tab Advance. Setelah itu klik Update untuk menyimpan hasil editing.

3.Image

Contoh berikutinya, kali ini akan dibuat Image. Maka silakan drag elemen “Image” ke kolom bagian kiri. Anda bisa mengganti Image pada bagian kiri. Anda juga dapat menyesuaikan ukurannya pada pengaturan silakan klik tab Style. Jika ingin menambahkan background dan custom css silakan tab Advance. Setelah itu klik Update untuk menyimpan hasil editing.

4.Icon Box

Pada contoh terdapat beberapa icon media sosial yang dimana nantinya ketika di klik akan langsung terhubung dengan akun media sosialnya. Silakan klik “+” pada kolom lalu drag elemen “Social Icon” ke tiap kolom. Anda bisa ubah judul, icon, posisi icon, deskripsi dan jangan lupa untuk menambahkan link media sosial sesuai dengan iconnya, tulisan serta link pada bagian tab content.

Jika ingin mengubah warna, hover, spasi dan ukuran silakan klik tab Style. Jika ingin menambahkan background, pengaturan margin, pengaturan padding dan custom css silakan tab Advance. Setelah itu klik Update untuk menyimpan hasil editing.

5.Landing Page Sudah Jadi!

Silakan sesuaikan landing page dengan halaman lainnya yang akan Anda buat. Panduan cara membuat landing page dengan elementor telah selesai Anda dapat ikuti secara langsung untuk website Anda. Namun jika sebelumnya kita sudah membahas tahap-tahap dari awal, Elementor juga menyediakan template dengan banyak pilihan. Anda cukup mengedit text dan tidak perlu banyak mendesain.

Mendesain Template Elementor

  1. Begitu plugin Anda telah aktif, menu Elementor akan terlihat pada Dashboard dan tombol Edit with Elementor akan muncul di setiap halaman website Anda. klik tombol tersebut setiap kali Anda ingin mengedit halaman yang nantinya akan membawa Anda ke halaman khusus untuk mendesain.
    Cara Edit WordPress menggunakan elementor 6
  2. Pada bagian kanan dari side panel adalah tempat Anda dapat mengubah tampilan dan menambahkan fitur- fitur yang diinginkan.
  3. Sedangkan untuk membuat halaman dari template, Anda dapat mengklik tombol yang bergambar folder. Selanjutnya Anda akan menemukan halaman yang khusus berisi semua template.
    WhatsApp Image 2020 08 11 at 21.25.19
  4. Ada bermacam template yang berupa blocks atau susunan teks pada halaman, Pages yang merupakan template dari keseluruhan halaman.
    Cara Edit WordPress menggunakan elementor 7
  5. Jika Anda menemukan desain yang sesuai, klik Insert pada bagian bawah design
  6. Desain yang Anda inginkan akan muncul pada halaman dan Anda bisa mengubah isi dan menambahkan elemen yang dirasa perlu.
  7. Apabila kostumisasi telah memenuhi kebutuhan Anda, simpan design dengan mengklik tombol panah kecil disamping kotak Publish, lalu klik Save Draft.
  8. Untuk menyimpannya sebagai template, klik Save As Template yang memungkinkan Anda untuk menggunakan ulang tampilan yang sama pada halaman lain.

Mendesain Tanpa Template

Untuk mendesain halaman dari kanvas kosong, klik tombol + di sebelah kiri.

Cara Edit WordPress menggunakan elementor 8

Tombol ini akan mengarahkan Anda ke pilihan structure halaman.

Cara Edit WordPress menggunakan elementor 9

Setelah memilih structure yang cocok, halaman akan diisi dengan outline atau section. Dalam section ini Anda bisa tambahkan elemen-elemen yang ada di library. Ketika proses desain selesai, Anda bisa Save Draft, Save as Template, atau Publish.

Kelebihan Elementor

Dikutip dari Elementor, berikut ini merupakan kelebihan membangun website menggunakan Elementor

  • Lebih cepat, mudah dan fleksibel
  • Fitur lengkap dibandingkan dengan page builder lainnya
  • Mobile friendly
  • Open Source
  • Lihat perubahan tampilan secara real-time.
  • Terdapat opsi untuk kustomisasi tampilan di tiga jenis layar berbeda: dekstop, tablet, dan mobile.
  • Termasuk Responsive Website
  • Dikembangkan dengan script yang profesional
  • Cocok digunakan untuk pemula
  • Drag and drop tanpa koding
  • Ramah SEO (Search Engine Optimization)
  • Dapat melakukan custom CSS untuk kolom, widget dan section
  • Memiliki lebih dari 400 icon yang dapat digunakan
  • Memiliki lebih dari 800 beragam Google Font
  • Dapat melakukan resize kolom
  • Dapat mengatur kolom dan posisi konten yang ada
  • Mengatur padding dan margin
  • Memiliki Undo-Redo. Setiap perubahan yang dilakukan di halaman terekam dengan baik. Anda bisa mengembalikan tampilan ke versi sebelum dengan sekali klik.

Kekurangan Elementor

Tentu saja Elementor tak lepas kekurangan. Kalau Anda punya concern soal ini, kami coba beri gambaran hal-hal yang mungkin membuat Anda kurang puas.

  • Elementor tak membolehkan Anda melakukan kustomisasi tampilan URL.
  • Terkadang tampilan font dan teks tidak sinkron.
  • Fitur-fitur penting sekelas Mailchimp, Confirmation Email, Hubspot dan sebagainya hanya tersedia dalam versi Pro.

Kesimpulan

Memiliki website yang menarik nan elegan menjadi kewajiban bagi bisnis yang sedang mengembangkan diri di dunia digital marketing. Namun, keterbatasan waktu menjadi problema dalam memahami pembuatan website. Karena kebanyakan orang berfikir harus mempelajari bahasa pemograman serta coding agar dapat menciptakan website yang diinginkan.

Elementor sebagai page builder yang sudah dipercaya oleh jutaan orang menjadi solusi bagi Anda. Dilengkapi dengan fitur-fitur yang dapat kita gunakan hanya dengan drag and drop akan sangat membantu Anda pemula sekalipun dalam membangun situs web yang lebih efisien dan menarik.

Elementor memberikan bantuan dan dukungan yang mungkin tidak bisa Anda dapatkan dari plugin lainnya. Tidak terlepas dari kelebihan dan kekurangannya, Anda akan mendapatkan lebih banyak manfaat dibandingkan dengan kekurangannya.