Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Business
  2. Legal
Business

Cara Mendesain Situs Web Biro Hukum Dengan Template HTML Responsif

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Ilham Saputra (you can also view the original English article)

Jika Anda ingin meluncurkan situs web pengacara Anda dengan cepat, tidak ada tempat yang lebih baik untuk memulai daripada dengan template HTML responsif yang dibuat dengan situs web pengacara dalam pikiran. Tidak seperti tema CMS, template situs web pengacara mudah diunggah ke server karena tidak ada perangkat lunak khusus untuk dipasang.

Mereka juga mudah diedit dalam hal konten dan gaya, yang berarti Anda dapat membuat situs web biro hukum Anda aktif dan berjalan dalam hitungan jam dan mulai membangun kehadiran online Anda dan memesan lebih banyak klien.

Dalam pos ini, kami akan mendemonstrasikan cara menggunakan kerangka HTML untuk desain situs web pengacara Anda serta berbagi kiat yang akan membantu Anda membawa situs web Anda ke tingkat berikutnya.

Bagaimana Memulai Dengan Desain Situs Web Biro Hukum Anda

Untuk memulai, Anda harus memastikan Anda memiliki paket hosting serta nama domain, template HTML pilihan Anda, klien FTP, serta gambar dan konten yang ingin Anda gunakan. Mari jelaskan tujuan masing-masing yang lebih mendalam di bawah ini.

1. Paket Hosting dan Nama Domain

Tempat yang bagus untuk memulai adalah dengan membeli nama domain dan paket hosting yang akan memberi Anda ruang server tempat nama domain itu akan diarahkan dan semua file untuk situs Anda akan ditayangkan. Ini akan memungkinkan klien potensial untuk menemukan situs web Anda secara online.

Biasanya Anda dapat membeli nama domain dan hosting pada saat yang sama dan dari perusahaan hosting yang sama, yang membuatnya mudah untuk mengelola semuanya di satu tempat. Beberapa penyedia hosting bahkan akan memberi Anda domain gratis dengan pembelian tahunan paket hosting mereka.

Saat ini, Anda akan menemukan paket hosting yang mulai serendah $5/bulan dan menawarkan bandwidth dan ruang disk tanpa batas. Cara terbaik untuk menemukan host yang andal adalah memeriksa berapa lama perusahaan hosting telah berada dalam bisnis, apa yang pelanggan pikirkan tentang mereka, dan memulai obrolan dengan dukungan mereka untuk melihat seberapa responsif mereka.

2. Sebuah Template Responsif Situs Web Biro Hukum

Setelah Anda memiliki domain dan perusahaan hosting, saatnya memilih template situs web responsif yang dirancang untuk situs web biro hukum. Ini akan memastikan bahwa semua laman yang mungkin diperlukan oleh biro hukum atau pengacara untuk menyajikan layanan mereka sudah dipromosikan sehingga Anda tidak perlu khawatir tentang mengubah jenis laman yang berbeda.

Untuk keperluan tutorial ini, saya akan menggunakan template Trust dari Envato Elements, yang menawarkan beberapa variasi homepage serta halaman yang memungkinkan Anda untuk memamerkan area latihan Anda, anggota tim, dan bahkan menjual template dokumen legal pada Anda situs.

Trust template

3. Program FTP dan Editor Kode

Anda juga akan ingin menggunakan editor kode sehingga Anda dapat membuat perubahan pada file template dan mengedit stylesheet. Program seperti Textwrangler atau Notepad++ adalah pilihan bagus untuk komputer Mac dan Windows.

Program lain yang Anda perlukan adalah program FTP yang memungkinkan Anda terhubung ke server hosting dan mengunggah semua file templat sekaligus. Program FTP populer yang tersedia di sistem operasi Windows, Mac, dan Linux adalah FileZilla.

4. Konten untuk Situs Web Anda

Terakhir, Anda perlu konten dan gambar untuk situs Anda. Mempersiapkan semua teks dan mengumpulkan semua gambar akan membantu Anda menghemat waktu saat Anda mengubah template dan membuatnya lebih mudah untuk menyalin dan menempel konten Anda ke dalam file template.

Cara Mengedit Template Situs Web Pengacara Anda

Setelah Anda memiliki semua item dan program yang disebutkan di atas, kita dapat mulai mengedit template situs web pengacara Anda untuk menambahkan konten Anda. Untuk memulai, unduh folder zip dari template Anda dan unzip di suatu tempat seperti Desktop atau folder Donwloads tempat Anda dapat dengan mudah mengaksesnya.

Seperti yang dapat Anda lihat dari tangkapan layar di bawah ini, folder template memiliki sejumlah file HTML yang berbeda serta folder yang menyimpan file CSS, JavaScript, dan PHP tambahan. Masing-masing file dan folder memiliki tujuan yang berbeda:

  • File HTML. File HTML mewakili halaman dari template yang dapat Anda gunakan untuk beranda Anda, tentang, layanan, kontak, dan halaman lain di situs Anda.
  • CSS. Folder ini menyimpan file stylesheet yang mengontrol font, warna, dan aturan gaya ekstra yang menentukan tampilan situs web Anda
  • JS, JavaScript atau scripts. Di sini Anda akan menemukan script yang digunakan untuk menambahkan efek animasi dan memvalidasi input form
  • PHP. Memegang kode PHP yang diperlukan agar formulir kontak berfungsi
  • Assets, fonts, dan images. Folder-folder ini berisi gambar, latar belakang, dan font yang digunakan dalam template

1. Bekerja Dengan File HTML

HTML adalah bahasa markup yang menggunakan pasangan tag berbeda untuk mewakili judul, paragraf, tautan, gambar, dan bagian lain dari situs web. Setiap pasangan tag memiliki pembukaan dan tag penutup seperti:

<h2>My Awesome Website </h2>

Tag di atas mewakili tajuk tingkat dua. Jika Anda membuka salah satu file HTML di editor kode, Anda akan melihat bahwa seluruh file HTML penuh dengan tag ini dan bahwa konten Anda harus berada di antara tag pembuka dan penutup untuk muncul di halaman web.

Cara termudah untuk mengedit file HTML adalah membukanya di browser Anda terlebih dahulu dan menggunakan alat inspektur kode browser untuk menemukan bagian kode mana yang perlu Anda edit. Berikut adalah proses 5 langkah sederhana untuk membantu Anda melakukan hal ini:

Inspector for HTML files
  1. Klik dua kali file HTML atau klik kanan dan pilih Open With Chrome/Firefox atau browser apa pun yang Anda gunakan.
  2. Klik kanan pada bagian dari template yang ingin Anda modifikasi dan pilih Inspect. Sebagai contoh, saya memilih untuk memeriksa bagian yang bertuliskan Welcome to Trust.
  3. Setelah Inspektur muncul di bagian bawah layar, saya dapat melihat bahwa teks ini dibungkus dalam tag h2.
  4. Kembali ke folder template, pilih file HTML yang sama, klik kanan padanya, dan pilih Buka Dengan Notepad++, TextWrangler, atau editor kode pilihan Anda.
  5. Cari tag yang sesuai dalam file HTML, letakkan kursor mouse Anda di antara tag, hapus teks tiruan, dan gantilah dengan milik Anda sendiri.

Untuk mengedit sisa template dan mengganti konten dummy dengan informasi Anda sendiri di seluruh file lainnya, yang harus Anda lakukan hanyalah mengulangi proses ini sampai Anda mengganti semua teks palsu dengan milik Anda sendiri.

Editing content in code editor

Jika Anda ingin menambahkan lebih banyak informasi di bagian yang sama dari setiap halaman Anda, yang harus Anda lakukan hanyalah menduplikat bagian tersebut tepat di bawah kode asli dan kemudian mengganti teks dengan milik Anda sendiri.

Sebagai contoh, saya telah menggandakan seluruh baris di bagian Welcome untuk memiliki lebih banyak ruang untuk menampilkan informasi penting tentang biro hukum.

Duplicated code

Dan inilah yang terlihat seperti hidup:

duplicated code live view

Ketika menyangkut gambar, Anda harus mengumpulkan semua gambar yang ingin Anda gunakan dan menambahkannya ke folder gambar di dalam folder utama template Anda. Kemudian, Anda harus mengikuti langkah yang sama seperti di atas: klik kanan gambar untuk memeriksanya, temukan kode itu di editor kode dan edit nama gambar.

Pada gambar di bawah ini, Anda dapat melihat bagaimana saya memeriksa gambar dan mengganti nama di editor kode serta bagaimana gambar baru muncul di halaman Practice Area:

Replacing images
New image

Cara Mengedit Tampilan Website Situs Web Firm Hukum Anda

Mengedit konten template HTML Anda akan menghabiskan sebagian besar waktu Anda, tetapi setelah selesai, Anda dapat mulai mengubah tampilan visual. Mulailah dengan masuk ke folder CSS dan mencari stylesheet utama. Dalam kebanyakan kasus, itu akan disebut main.css atau styles.css atau stylesheet.css.

Klik kanan pada file dan buka di editor kode Anda. Ketika stylesheet memuat, kembali ke browser Anda dan periksa suatu elemen. Kali ini, Anda ingin fokus pada sisi kanan panel Inspektur seperti yang digambarkan dalam gambar di bawah ini.

Inspecting styles

Saya ingin mengubah warna tautan dan Inspektur memberi tahu saya, saya harus mencari baris 1033 di file main.css. Dalam editor kode, saya kemudian dapat mengubah kode HEX ke warna yang saya pilih seperti:

color: #65b5c1;

Untuk menghemat waktu, Anda dapat mencari kode warna yang Anda lihat di Inspektur, tekan CMD+F atau CTRL+F di editor kode Anda dan gantilah dengan kode warna warna merek Anda. Kemudian, simpan perubahan, perbarui file HTML di browser Anda, dan Anda akan melihat perubahan yang diterapkan.

Changes applied

Cara Mengunggah File Template ke Server Hosting

Setelah selesai mengganti konten dan mengubah tampilan visual template Anda, saatnya untuk mengunggahnya ke server.

Perusahaan hosting Anda memiliki kemungkinan besar mengirimi Anda email selamat datang dengan semua informasi yang Anda butuhkan untuk mengelola situs web Anda. Anda akan ingin mencari informasi FTP yang berisi nama server FTP, nama pengguna, dan kata sandi yang akan Anda gunakan untuk menyambung ke server menggunakan klien FTP.

Dengan informasi itu di tangan, mulailah program FTP Anda. Jika Anda menggunakan FileZilla, cari bilah bagian atas dan masukkan nama server, nama pengguna, dan kata sandi. Kemudian, klik QuickConnect:

Filezilla QuickConnect

Setelah koneksi dibuat, lihat ke sisi kiri jendela FileZilla dan temukan folder tempat Anda membuka ritsleting file template. Klik folder, pilih semua file dan folder di dalamnya, pindahkan ke sisi kanan layar FileZilla dan tempatkan ke folder public_html.

Proses pengunggahan akan dimulai dan memakan waktu beberapa menit. Setelah selesai, buka browser Anda, masukkan nama domain Anda, dan Anda akan dapat melihat situs web Anda secara langsung.

4 Panduan & Sumber Daya untuk Membantu Anda Membuat Situs Web Pengacara yang Mengagumkan

Setelah Anda membuat dan mendesain situs web biro hukum Anda, Anda perlu mempromosikannya sehingga calon klien dapat dengan mudah menemukan Anda serta memastikan bahwa situs Anda mengonversinya menjadi klien yang sebenarnya. Berikut beberapa sumber daya yang akan membantu membuat situs web pengacara yang hebat.

1. Tips Desain Situs Web Pengacara

Tidak ada yang salah dengan menggunakan template awal untuk situs web biro hukum Anda. Template menghemat waktu dan uang Anda, yang menjadikannya pilihan yang sangat baik bagi siapa saja yang baru memulai. Namun, jika Anda tidak meluangkan waktu untuk menyesuaikan template, situs web Anda tidak akan menonjol dari persaingan. Gunakan artikel ini untuk melihat tips desain situs web biro hukum kami yang paling populer sehingga Anda dapat membuat situs web yang menarik dan indah untuk praktik hukum Anda. Berikut sumbernya:

2. Tips Pemasaran Online untuk Biro Hukum

Lanskap pemasaran online terus berubah, itulah sebabnya Anda harus tetap berada di puncak tren pemasaran terbesar dan paling penting. Dengan bantuan panduan ini, Anda akan tahu persis apa yang berhasil dan apa yang tidak sehingga Anda dapat berhasil memasarkan situs web biro hukum Anda. Pelajari tutorial ini:

3. Menarik Lalu Lintas ke Situs Web untuk Pengacara

SEO adalah cara yang bagus untuk mendapatkan lebih banyak lalu lintas dan pengunjung organik ke situs Anda. Gunakan artikel ini untuk mempelajari tentang dasar-dasar SEO untuk pengacara, pahami potensi jebakan SEO untuk dihindari, dan terapkan praktik SEO yang disarankan untuk situs web biro hukum. Tutorial ini akan menunjukkan kepada Anda bagaimana caranya:

4. Desain Situs Web untuk Pengacara

Terakhir, jika Anda membutuhkan lebih banyak inspirasi atau ingin melihat apa yang dilakukan oleh pengacara, biro hukum, dan pengacara lain dengan situs web mereka, Anda akan menemukan banyak contoh dalam ringkasan ini.

Lahan Lebih Banyak Klien dengan Situs Web Biro Hukum yang Memukau

Membuat situs web untuk biro hukum atau praktik hukum Anda mudah dengan bantuan template situs web biro responsif. Gunakan langkah-langkah di atas untuk membantu Anda menyiapkan kerangka HTML hukum pilihan Anda dan menerapkan taktik pemasaran dan desain terbaik untuk membuat situs web Anda menonjol dari kerumunan.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.