Cara Bikin Website Portfolio

Seperti janji saya sebelumnya lewat Twitter, kali ini saya akan membahas tentang bagaimana cara bikin website portfolio.

Saya juga akan coba untuk menceritakan bagaimana sebuah website portfolio yang baik akan membantu pekerjaan kita berkembang. Terutama bagi para pekerja di industri kreatif.

Buat kalian yang ingin mempunyai website portfolio untuk publik, maka tulisan cara bikin website portfolio ini bisa jadi panduan kalian untuk memulai.

Apapun pekerjaannya (di industri kreatif), mulai dari fotografer, desainer sampai copy writers, mempunyai website portfolio bisa dibilang sangat penting.

Karena portfolio yang baik akan menjadi “aset” pendukung karir kita.

Yuk kita mulai!

Sebelumnya saya pernah mengajarkan bagaimana cara membuat personal website menggunakan WordPress self-hosted.

Tutorial tersebut saya tulis pada tulisan ini: Cara Bikin Website Untuk Pemula

Sebelum lanjut membaca tutorial cara bikin website portfolio pada tulisan ini, kalian wajib melakukan hal-hal yang saya jelaskan pada link di atas terlebih dahulu, karena tulisan cara bikin portfolio ini merupakan sambungan dari tulisan cara bikin website tersebut.

Jika sudah, kita bisa lanjut ke bagaimana langkah-langkah cara bikin website portfolio ini.


Alasan Kenapa Wajib Memiliki Website Portfolio

Sebelum menjelaskan ke hal teknis tentang ini, ada beberapa hal yang mungkin bisa menjadi motivasi tambahan kalian untuk membuat website portfolio.

Dalam industri kreatif, memiliki portfolio sangatlah penting dan juga sangat membantu. Hal ini juga yang saya rasakan berdasarkan pengalaman pribadi.

Ketika baru “terjun” ke industri kreatif, biasanya kita kesulitan untuk meyakinkan calon klien yang ingin bekerjasama.

Tetapi jika kita sudah memiliki portfolio (dan mudah dilihat), maka calon klien berkemungkinan besar akan menjadi klien.

Tapi tentunya kita harus melakukan beberapa pekerjaan terlebih dahulu yang bisa kita “klaim” sebagai portfolio kita.

Karena memiliki portfolio bisa meyakinkan calon klien dan membuat kita terlihat lebih profesional

Dijamin.

Selain itu, memiliki portfolio juga akan membuat hasil karya kita menjadi lebih tertata rapih. Kita dapat mengelompokan portfolio sesuai jenis pekerjaaannya.

Sehingga orang yang ingin melihat portfolio kita dalam bidang tertentu akan menemukannya dengan mudah.

Kita juga bisa me-review kembali pekerjaan apa saja yang pernah kita lakukan. Buat saya pribadi, memiliki portfolio bisa memotivasi untuk mengerjakan lebih banyak dan lebih baik lagi.

Bentuk dari potfolio ada memang ada berbagai jenis. Ada yang masih lewat media fisik (kertas, dsb), tetapi biasanya para pekerja di industri kreatif juga memiliki portfolio online berupa website.

Tentunya karena lebih mudah diakses.

Selain itu, memiliki website portfolio bisa menjadi ajang kita untuk “pamer” keahlian secara terbuka. (Balas dengan karya? :p)

Sayangnya, masih banyak orang (yang menurut saya) berbakat dan memiliki karya yang bagus, tapi kurang “rapih” dalam menyusun portfolio mereka.

Padahal dengan membuat portfolio yang baik, bisa menjadi sebuah langkah untuk pekerjaan yang lebih baik dan kehidupan yang lebih baik. (Bukan motivasi super, tapi ini berdasarkan kisah nyata :)) )


Catatan sebelum memulai:

  • Contoh pengerjaan ini dilakukan pada WordPress 4.9.8
  • Tanpa menggunakan plugin Guttenberg / Visual Composer dan sejenisnya.
  • Menggunakan Bahasa Indonesia.

Langkah Membuat Website Portfolio

Pada dasarnya membuat website portfolio dengan WordPress kita bisa lakukan dengan dua cara, pertama menggunakan tema berjenis portfolio dan yang kedua menggunakan plugin (dalam tulisan ini adalah plugin Jetpack).

Jadi langkah cara bikin website portfolio ini akan saya bagi jadi dua, yaitu:

  • Cara Bikin Website Portfolio Menggunakan Plugin (Murah & Sederhana)
  • Cara Bikin Website Portfolio Menggunakan Tema (Mudah & Fitur Menarik)

Dari dua pilihan cara ini, saya akan mulai dari yang paling murah dan sederhana, yaitu….

Cara Bikin Website Portfolio Menggunakan Plugin

Langkah pertama untuk memulai tentunya harus udah punya WordPress self-hosted sesuai yang saya tulis disini:  Cara Bikin Website Untuk Pemula

Langkah kedua kalian harus meng-install plugin Jetpack. Caranya saya bahas pada tulisan ini:  Kupas Fitur: Jetpack untuk WordPress

Kupas Fitur Jetpack untuk WordPress
Kupas Fitur Jetpack untuk WordPress

Langkah ketiga, aktifkan fitur ‘Portfolio’ yang ada pada ‘Pengaturan’ > ‘Tulisan’ plugin Jetpack yang sudah di-install tadi. Tampilan pengaturan tadi bisa dilihat pada gambar di bawah ini:

Mengaktifkan Fitur Portfolio pada Plugin Jetpack
Mengaktifkan Fitur Portfolio pada Plugin Jetpack

Setelah fitur tersebut aktif, kalian bisa melihat menu baru yang ada pada Dashboard WordPress kalian, yaitu ‘Portfolio’ yang ada pada gambar di bawah ini.

Fitur Portfolio Jetpack Telah Aktif
Fitur Portfolio Jetpack Telah Aktif

Pada dasarnya fitur ‘Portfolio’ ini mirip dengan ‘Pos’ pada WordPress. Karena ‘Portfolio’ memiliki struktur yang sama, yaitu tag dan juga kategori.

Jadi ‘Portfolio’ kalian bisa dikategorikan (sesuai jenis pekerjaan) dan juga diberi tag.

Sebelum melakukan input portfolio, kategori ataupun tag, kalian harus membuat sebuah halaman yang di isi kode singkat (shortcode).

[portfolio]

Halaman tersebut akan digunakan untuk menampilkan portfolio-portfolio kalian.

Membuat Kategori Portfolio

Menambahkan Kategori Portfolio - Cara Bikin Website Portfolio
Menambahkan Kategori Portfolio – Cara Bikin Website Portfolio

Arahkan kursor pada menu ‘Portfolio’ dan klik ‘Jenis Proyek’ seperti pada gambar di atas.

Input Jenis Proyek - Cara Bikin Website Portfolio
Input Jenis Proyek – Cara Bikin Website Portfolio

Pada halaman formulir kategori / ‘Jenis Proyek’, kita wajib mengisi beberapa bagian seperti yang saya jelaskan pada gambar di atas. Silahkan diklik untuk memperbesar gambar.

Setelah bagian pada formulir tersebut sudah diisi, klik tombol ‘Tambahkan Jenis Proyek Baru’ yang ada pada bagian bawah. Kategori portfolio kalian telah dibuat.

Langkah ini bisa diulangi berkali-kali sesuai kebutuhan masing-masing orang.

Sebagai tips tambahan, biasanya saya akan memisahkan kategori portfolio berdasarkan jenis pekerjaan. Tetapi banyak juga yang memisahkan portfolio dengan kategori berdasarkan “tema” dari pekerjaan tersebut.

Membuat Tag Portfolio

Membuat Tag Proyek - Cara Bikin Website Portfolio
Membuat Tag Proyek – Cara Bikin Website Portfolio

Untuk mulai membuat tag portfolio, pada menu ‘Portfolio’ klik ‘Tag proyek’ seperti gambar di atas.

Formulir tag ini sama seperti formulir membuat kategori / ‘Jenis Proyek’ di atas. Kalian bisa mengisinya sesuai instruksi seperti pada gambar ‘Input Kategori’ di atas.

Beberapa mungkin sudah tahu kalau kategori dan tag pada dasarnya bisa dibuat pada halaman kita memasukan konten. Tetapi, cara yang saya share di sini adalah cara yang bisa membuat kita meningkatkan website kita dari segi SEO (Search Engine Optimization).

Dengan mengisi deskripsi, nama kategori dan tag, maka hal tersebut dapat meningkatkan kemungkinan lalu lintas tambahan ke website kita dari mesin pencari seperti Google, Bing dan sebagainya.

Untuk yang bingung penggunaan kategori dan tag, mungkin saya bisa memberikan beberapa masukan. Seperti ini:

Kategori biasanya digunakan untuk memisahkan jenis pekerjaan kita. Misalnya pada bidang fotografi, kita bisa memisahkan kategori dengan fotografi pernikahan, fotografi produk, fotografi acara dan sebagainya.

Sementara tag bisa digunakan untuk subjek / objek dari foto tersebut. Misal pada fotografi acara dan foto tersebut terdapat artis Raisa, kita bisa menambahkan tag ‘Raisa’ pada portfolio tersebut.

Mungkin beberapa tag hanya digunakan satu kali dalam portfolio kita, tetapi dengan tag yang beragam, maka kemungkinan pengunjung yang datang ke website kita juga dari beragam kata kunci.

Sehingga potensi yang melihat website portfolio kita semakin banyak.

Memasukan Portfolio

Bagian utama dari cara bikin website portfolio ini adalah mulai memasukan portfolio pada website kita.

Menambahkan Portfolio - Cara Bikin Website Portfolio
Menambahkan Portfolio – Cara Bikin Website Portfolio

Untuk mulai menambahkan portfolio, klik ‘Tambahkan Baru’ seperti arah panah pada gambar di atas.

Jika sudah, kalian akan melihat tampilan seperti pada gambar di bawah ini:

Input Konten Portfolio Bagian Atas - Cara Bikin Website Portfolio
Input Konten Portfolio Bagian Atas – Cara Bikin Website Portfolio
Input Konten Portfolio Bagian Bawah - Cara Bikin Website Portfolio
Input Konten Portfolio Bagian Bawah – Cara Bikin Website Portfolio

Pada dua gambar di atas, di dalamnya saya coba jelaskan bagian mana saja yang harus di isi. Seperti judul portfolio, konten portfolio, kategori portfolio, tag portfolio, kutipan dan juga gambar unggulan (gambar yang akan digunakan sebagai thumbnail).

Dengan bagian-bagian tersebut di isi, maka portfolio kalian telah selesai dan bisa di ‘Terbitkan’. Tapi saya akan coba mengajarkan bagaimana cara sedikit kreatif dalam mengisi konten pada portfolio ini.

Pada bagian mengisi kolom konten portfolio, kita harus kreatif karena pada dasarnya kolom ini tidak ada bedanya dengan kolom ‘Pos’.

Karena tidak ada kolom untuk menambahkan galeri atau video, maka kita harus memasukannya manual (jika portfolio kita terdapat beberapa foto atau video).

Cara Memasukan Beberapa Foto (Galeri) Pada Portfolio

Langkah 1 Menambahkan Galeri Pada Portfolio - Cara Bikin Website Portfolio
Langkah 1 Menambahkan Galeri Pada Portfolio – Cara Bikin Website Portfolio

Pada langkah pertama, klik tombol ‘Tambahkan Media’ yang ada di atas kolom konten (lihat gambar di atas).

Langkah 2 Menambahkan Galeri Pada Portfolio - Cara Bikin Website Portfolio
Langkah 2 Menambahkan Galeri Pada Portfolio – Cara Bikin Website Portfolio

Selanjutnya klik ‘Buat Galeri’ yang ada pada sisi kiri, kemudian klik tombol ‘Pilih Berkas’.

Pilih gambar / foto yang terkait dengan portfolio tersebut untuk kemudian diunggah. Kalian bisa memilih beberapa sekaligus.

Langkah 3 Menambahkan Galeri Pada Portfolio - Cara Bikin Website Portfolio
Langkah 3 Menambahkan Galeri Pada Portfolio – Cara Bikin Website Portfolio

Setelah selesai, maka kalian akan melihat hasil gambar yang telah diunggah tadi seperti gambar di atas ini.

Kalian bisa klik satu per satu gambar untuk mengisi judul, keterangan, teks alt dan deskripsi. Bagian ini wajib di isi sebagai pendukung SEO website kita.

Terkadang juga saat malas saya akan menuliskan kalimat yang sama persis untuk judul, keterangan, teks alt dan deskripsi. Tetapi penting untuk diisi, terlebih jika judul secara default akan terisi nama file.

Sebelum unggah portfolio, biasanya saya akan membuat nama file yang sama seperti judul portfolio namun dengan penambahan A, B, C sesuai banyaknya gambar. Sehingga ketika selesai diunggah, saya cukup meng-copypaste judul default dari gambar tadi ke bagian yang lain.

Langkah 4 Menambahkan Galeri Pada Portfolio - Cara Bikin Website Portfolio
Langkah 4 Menambahkan Galeri Pada Portfolio – Cara Bikin Website Portfolio

Selesai mengisi judul dan sebagainya tadi, kalian akan masuk ke halaman Edit Galeri. Pada halaman ini kalian bisa mengatur tampilan galeri, seperti:

‘Tautkan Ke’ : kemana pengunjung akan dibawa ketika meng-klik gambar tersebut.

  • Pilihan ‘Tak ada’, maka gambar tersebut tidak bisa diklik.
  • Pilihan ‘Media file’, jika diklik, maka gambar tersebut akan membuka halaman asli dari file gambar.
  • Pilihan ‘Laman Lampiran’, ketika di klik maka akan membuka halaman lampiran di dalam website, namun terkadang juga akan membuat gambar menjadi pop up (tergantung tema masing-masing).

‘Kolom’ : Jumlah kolom untuk thumbnail gambar.

‘Urutan Acak’ : Urutan gambar dalam galeri akan teracak setiap kali orang membukanya.

‘Ukuran’ : Ukuran gambar yang akan ditampilkan. Maksud dari ‘Gambar Miniatur’ adalah thumbnail.

‘Jenis’ : Kalian bisa memilih galeri ingin ditampilkan seperti apa.

Dari semua pengaturan galeri ini, kalian harus mencobanya satu per satu agar menemukan yang cocok dengan selera kalian dan juga batasan tema website kalian.

Setelah selesai klik ‘Sisipkan Galeri’.

Tampilan Galeri Pada Portfolio - Cara Bikin Website Portfolio
Tampilan Galeri Pada Portfolio – Cara Bikin Website Portfolio

Setelah selesai, maka kalian akan melihat tampilan seperti gambar di atas ini.

Galeri tersebut bisa berada di atas atau di bawah tulisan tergantung bagaimana kalian ingin menyajikannya.

Jika foto dalam satu portfolio ada banyak, kalian juga bisa “memecah”nya jadi beberapa bagian dengan tujuan bisa selang seling dengan tulisan. Seperti bagian atas tulisan, kemudian galeri, lalu tulisan lagi dan kemudian galeri lagi.

Cara Memasukan Video Pada Portfolio

Untuk memasukan video pada isi konten portfolio sebenarnya mudah karena kalian bisa langsung mengunggahnya seperti foto, gambar atau audio. Tetapi akan memakan banyak ruang pada hosting website.

Cara yang paling “hemat” adalah mengunggah video tersebut di Youtube (atau sejenisnya) dan meng-embed video tersebut. Tapi jika menggunakan kode embed default, biasanya tampilannya kurang menarik.

Saya akan share trik bagaimana cara membuat video dari Youtube ditampilkan lebih menarik pada website kita menggunakan Custom Embed.

  1. Buka video Youtube yang ingin kalian embed dan copy URL-nya. Contoh: https://www.youtube.com/watch?v=aJOTlE1K90k
  2. Copy kode video tersebut. yaitu aJOTlE1K90k (kode tergantung URL pada poin 1).
  3. Buka website Custom Embed Youtube ini.
  4. Selanjutnya pada website tersebut kalian bisa paste kode yang ada poin 2.
  5. Silahkan bereksperimen mulai dari ukuran video, thumbnail dan opsi lainnya yang disediakan.
  6. Setelah selesai copy kode embed hasil opsi yang kalian atur tersebut. Jika bingung yang mana, yaitu yang dimulai dengan tulisan <iframe
  7. Paste kode tersebut pada halaman konten.

Sebagai informasi tambahan untuk memasukan kode pada isi konten portfolio, kita harus mengubah tampilan kolom menjadi ‘Teks’ yang terletak di sebelah ‘Tab’ visual. Lihat gambar di bawah ini:

Tampilan Teks Konten - Cara Bikin Website Portfolio
Tampilan Teks Konten – Cara Bikin Website Portfolio

Paste kode embed tersebut. Letakan di bagian bawah atau atas sesuai selera kalian masing-masing.

Memasukan Kode Embed Pada Konten Portfolio.- Cara Bikin Website Portfolio
Memasukan Kode Embed Pada Konten Portfolio.- Cara Bikin Website Portfolio

Setelah mem-paste kode embed tersebut, kembali ke tab ‘Visual’ untuk melihat hasilnya seperti pada gambar di bawah ini.

Tampilan Hasil Embed Video - Cara Bikin Website Portfolio
Tampilan Hasil Embed Video – Cara Bikin Website Portfolio

Informasi Tambahan Tentang Kode Teks

Informasi Tambahan Kode Teks - Cara Bikin Website Portfolio
Informasi Tambahan Kode Teks – Cara Bikin Website Portfolio

Pada gambar di atas, kalian bisa melihat tiga kotak merah. Yang pertama yaitu tulisan, yang kedua galeri dan yang ketiga adalah video.

Jika kalian ingin menukar posisi suatu objek dalam konten (terutama galeri dan video), maka kalian sebaiknya masuk ke tab ‘Teks’ kemudian memindahkan bagian-bagiannya dari sini.

Seperti meng-cut bagian video, kemudian mem-paste nya ke atas dan sebagainya.

Memindahkan galeri, video atau bahkan teks yang telah di-format terkadang sulit jika hanya menggunakan ‘Visual’, jadi kalian harus menggunakan “cara lama” ini.

Bagian ‘Teks’ ini juga berguna untuk kalian yang ingin memasukan kode HTML lain dan sebagainya. Sekaligus kalian bisa sambil belajar mengenai hal ini.

Setelah selesai, mengisi kolom, mengisi konten dan lainnya. Jangan lupa untuk klik ‘Pratinjau’ untuk melihat hasil akhirnya. Jika sudah sesuai klik tombol ‘Terbitkan’ untuk memunculkan portfolio ke publik.

Portfolio telah tayang dan dapat dilihat.

Sampai sini mungkin ada pertanyaan:

“Kenapa cara memasukan portfolio sama seperti ‘Pos’ dan tidak di ‘Pos’ saja?”

Hal ini karena dengan adanya ‘Portfolio’ ini, maka ‘Pos’ dan ‘Portfolio’ akan terpisah. Jadi kita dapat menulis seperti normal dan tidak khawatir ‘Portfolio’ kita “tenggelam” karena pos berikutnya.

Dengan ini maka cara bikin website menggunakan plugin telah selesai. 😀

Untuk referensi, kalian bisa melihat tampilan salah satu website yang menggunakan fitur portfolio dari plugin Jetpack ini:  demo.

Tetapi tentu tampilan juga akan dipengaruhi tema website masing-masing.

Cara Bikin Website Portfolio Menggunakan Tema

Cara Bikin Website Portfolio Menggunakan Tema
Cara Bikin Website Portfolio Menggunakan Tema

Untuk membuat website portfolio WordPress menggunakan tema, bisa dibilang cara yang paling mudah dan praktis. Karena biasanya fitur-fitur portfolio yang diberikan oleh para pengembang tema lebih menarik dan mudah digunakan.

Untuk membuat website portfolio dengan tema, langkah-langkahnya adalah sebagai berikut (dengan asumsi kalian sudah memiliki website WordPress self-hosted:

  1. Baca tulisan ini: Tips Penting dalam Memilih Tema WordPress
  2. Setelah itu di dalam tulisan tersebut kalian akan tahu dimana tempat mencari tema yang baik dan apa saja yang diperlukan.
  3. Carilah tema dengan kata kunci ‘Portfolio’ pada website yang disebutkan dalam tulisan pada poin 1.
  4. Instalasi tema tersebut.
  5. Jika tema memiliki “Data Dummy” untuk contoh, bisa kalian impor terlebih dahulu (jika website kalian masih baru, jika sudah berjalan JANGAN).
  6. Baca dokumentasi tema secara teliti.
  7. Jika ada bug, laporkan ke pihak developer.
  8. Jika ada kesulitan silahkan komentar pada tulisan ini. 😀

Kenapa cara bikin website portfolio menggunakan tema tidak bisa dijabarkan seperti di atas? Karena setiap tema portfolio akan berbeda cara penggunaannya. Hal ini karena perbedaan fitur atau plugin yang masing-masing pengembang tema gunakan.

Tetapi saya akan berusaha membantu kalian agar website portfolio kalian selesai dibuat. Silahkan tanya ya.

Tips Tambahan

Sebagai tips tambahan untuk menyusun portfolio:

  1. Susun isi konten dengan satu atau dua paragraf cerita pekerjaan tersebut.
  2. Gambar-gambar yang dimasukan sebagai galeri dibuat dalam ukuran yang sama. Contoh jika semua 2000 px x 1000px, maka semua dibuat dengan ukuran itu.
  3. Gunakan ‘Gambar Unggulan’ (Featured Image), sesuai dengan ukuran default tema. Mencegah gambar terpotong dan sebagainya. Silahkan baca tulisan saya tentang tips memilih tema di atas untuk informasi lebih lengkap.

Sekian tulisan cara bikin website portfolio ini saya buat, semoga bermanfaat. Terima kasih telah membaca. 😀

Jika kalian merasa terbantu dengan tulisan ini, silahkan share tulisan ini ke sosial media kalian.

Jika ada pertanyaan atau apresiasi tentang tulisan ini, silahkan isi kolom komentar di bawah ya!

Sumber gambar utama: Designed by Freepik

3 Balasan untuk “Cara Bikin Website Portfolio”

  1. Dari pertama kali nulis blog di blogspot sampai sekarang belum pernah bikin portofolio.
    Mau bikin konsep dl deh. Otak atik di localhost dl.

    Makasih artikelnya. Membantu sangat.

Apa Komentar Kamu Tentang Tulisan Ini?

This site uses Akismet to reduce spam. Learn how your comment data is processed.