{"id":221,"date":"2020-02-05T11:12:00","date_gmt":"2020-02-05T04:12:00","guid":{"rendered":"https:\/\/bikin.website\/kb\/?p=221"},"modified":"2020-10-05T09:56:29","modified_gmt":"2020-10-05T02:56:29","slug":"cara-membuat-gallery-di-divi","status":"publish","type":"post","link":"https:\/\/bikin.website\/kb\/cara-membuat-gallery-di-divi\/","title":{"rendered":"Cara Membuat Gallery Menggunakan Divi"},"content":{"rendered":"\r\n

Meski kerap dipandang sebagai hiasan semata, gambar merupakan elemen penting dari sebuah website yang mampu meningkatkan keindahan desain sekaligus memperkaya konten.<\/p>\r\n\r\n\r\n\r\n

Selain itu, sajian gambar yang menarik dengan susunan layout yang tepat juga bisa menambah ketertarikan pengunjung terhadap informasi bisnis yang Anda sajikan.<\/p>\r\n\r\n\r\n\r\n

Bagi para pengguna website berbasis WordPress, secara default Anda bisa mengunggah gambar ke dalam widget maupun postingan. Hanya saja, tata letak gambar tersebut masih memiliki tampilan terbatas yang mungkin kurang begitu menarik untuk dipandang.<\/p>\r\n\r\n\r\n\r\n

Untungnya, saat ini kita bisa menampilkan gambar dalam bentuk yang lebih rapi dan atraktif menggunakan modul Gallery dari Divi. Bagaimana caranya? Berikut tutorial cara membuat gallery menggunakan Divi.<\/p>\r\n\r\n\r\n\r\n

Cara Membuat Gallery Menggunakan Divi<\/strong><\/h2>\r\n\r\n\r\n\r\n

Langkah ke-1: Mengakses Divi Builder<\/strong><\/p>\r\n\r\n\r\n\r\n

Untuk bisa membuat Gallery dengan Divi, sebelumnya Anda harus masuk ke halaman postingan atau page terlebih dahulu, kemudian memilih menu Gunakan<\/strong> Divi Builder<\/strong>.<\/p>\r\n\r\n\r\n\r\n

\"\"<\/figure>\r\n\r\n\r\n\r\n

Pilihan menu Divi Builder ini biasanya terletak di bagian atas dekat dengan judul postingan setiap kali Anda membuka text editor. Klik tombol ini untuk mengakses semua modul Divi<\/p>\r\n\r\n\r\n\r\n

Langkah ke-2: Menambahkan Section Baru<\/strong><\/p>\r\n\r\n\r\n\r\n

Setelah Anda berhasil masuk ke menu Divi Builder Anda akan di hadapkan dengan menu pop-up berisi tiga pilihan seperti berikut ini.<\/p>\r\n\r\n\r\n\r\n

\"\"<\/figure>\r\n\r\n\r\n\r\n

Tidak perlu bingung, pilih saja kolom Bangun Dari Awal<\/strong> untuk menambah modul gallery kedalam postingan\/laman yang masih kosong.<\/p>\r\n\r\n\r\n\r\n

Selanjutnya, Anda akan diberikan opsi untuk menentukan layout\/tata letak gallery yang ingin dibuat. Anda bisa memilih satu kolom, dua kolom, atau variasi yang sudah disediakan oleh Divi. Kali ini kita akan memilih layout satu baris yang biasanya dipilih karena lebih simpel dan sederhana.<\/p>\r\n\r\n\r\n\r\n

\r\n
\"\"<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n

Klik pada gambar single line berwarna hijau untuk membuat section baru dan melanjutkan ke proses berikutnya.<\/p>\r\n\r\n\r\n\r\n

Langkah ke-3: Memasukkan Modul Gallery<\/strong><\/p>\r\n\r\n\r\n\r\n

Jika sudah berhasil menambahkan baris atau elemen section baru, kini saatnya mengisi bagian tersebut dengan modul gallery yang berisi portofolio desain ataupun foto project yang pernah Anda kerjakan.<\/p>\r\n\r\n\r\n\r\n

Cara menambahkan modul gallery sangat sederhana, yakni Anda tinggal meng-klik pada bagian tanda berwarna abu-abu, kemudian mengetikkan kata \u201cgalery<\/em>\u201d<\/strong> di kotak pencarian yang tersedia. Berikut rincian ilustrasi langkah-langkahnya:<\/p>\r\n\r\n\r\n\r\n

\"\"<\/figure>\r\n\r\n\r\n\r\n

Klik pada tombol berwarna abu-abu.<\/p>\r\n\r\n\r\n\r\n

\r\n
\"\"<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n

Menyortir modul Gallery di template Divi dengan cara mengetikkan kata kunci di kolom pencarian. Setelah itu, Anda tinggal klik kotak gallery untuk bisa menambahkan gambar serta melakukan pengaturan sesuai dengan keinginan.<\/p>\r\n\r\n\r\n\r\n

\"\"<\/figure>\r\n\r\n\r\n\r\n

Untuk mengunggah gambar Anda bisa memilih tombol berwarna abu-abu di bagian bawah. Sebagai informasi, dalam menu ini terdapat sejumlah tombol pengaturan desain jika Anda ingin membuat gallery yang memiliki tampilan menawan.<\/p>\r\n\r\n\r\n\r\n

Tab Konten:<\/strong><\/p>\r\n\r\n\r\n\r\n

Halaman ini berisi modul untuk mengunggah gambar, menentukan urutan gambar (default\/random), jumlah gambar di gallery, elemen, tautan, laber, serta latar belakang.<\/p>\r\n\r\n\r\n\r\n

Tab Desain:<\/strong><\/p>\r\n\r\n\r\n\r\n

Anda bisa memanfaatkan opsi ini untuk mempercantik tampilan Gallery sehingga semakin membuat betah para pengunjung.<\/p>\r\n\r\n\r\n\r\n

Berikut merupakan contoh pengaturan tab desain yang bisa Anda terapkan.<\/p>\r\n\r\n\r\n\r\n

Layout: Orientasi Gambar Mini Kisi: Ikon Lansekap Warna: #ffffff Rolover flyover color: rgba (0,0,0,0.48) Arahkan Pemilih Ikon: default<\/p>\r\n\r\n\r\n\r\n

Tata Letak:<\/strong> Pada bagian ini Anda bisa memilih desain gambar apakah dalam bentuk grid atau slider.<\/p>\r\n\r\n\r\n\r\n

Overlay:<\/strong> Anda bisa mengatur warna dan bentuk icon kursor di dalam modul Gallery pada bagian ini.<\/p>\r\n\r\n\r\n\r\n

Gambar:<\/strong> Menu ini sangat membantu jika Anda ingin mengatur posisi gambar dari pojok kanan atas, hingga kanan bawah, satuannya menggunakan pixel (px).<\/p>\r\n\r\n\r\n\r\n

Teks:<\/strong> Keberadaan teks sangat berpengaruh dalam mendeskripsikan identitas gambar. Anda bisa mempercantik tampilan teks melalui menu ini.<\/p>\r\n\r\n\r\n\r\n

Judul Teks:<\/strong> Secara default, judul teks akan ditampilkan dalam mode H3 reguler. Namun, Anda bisa dengan mudah<\/p>\r\n\r\n\r\n\r\n

Filter:<\/strong> Filter bisa dimanfaatkan untuk mempercantik tampilan gambar di gallery<\/p>\r\n\r\n\r\n\r\n

Animasi:<\/strong> Selain filter, modul gallery Divi juga memberikan kita keleluasaan dalam menambahkan animasi pada gallery. Anda bisa bebas mengkreasikan ide Anda melalui menu ini.<\/p>\r\n\r\n\r\n\r\n

Tab Lanjutan:<\/strong><\/p>\r\n\r\n\r\n\r\n

Perlu diketahui, tab lanjutan merupakan menu pengaturan yang biasanya digunakan oleh para perancang website berpengalaman. Pada menu ini terdapat rincian atribut seperti HTML dan CSS khusus yang memang dihadirkan untuk menambah kesan otentik pada gallery yang ingin Anda sajikan.<\/p>\r\n\r\n\r\n\r\n

Penutup<\/strong><\/p>\r\n\r\n\r\n\r\n

Itulah panduan cara membuat galery menggunakan Divi. Menambahkan gallery memang mampu menambah banyak fungsi untuk kebutuhan promosi. Jadi, jangan lupa untuk menambahkan fitur ini setiap kali Anda membuat project untuk website bisnis.<\/p>\r\n\r\n\r\n\r\n

 <\/p>\r\n","protected":false},"excerpt":{"rendered":"

Meski kerap dipandang sebagai hiasan semata, gambar merupakan elemen penting dari sebuah website yang mampu meningkatkan keindahan desain sekaligus memperkaya konten. Selain itu, sajian gambar … Read More ›<\/a><\/span><\/p>\n","protected":false},"author":2,"featured_media":375,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[38,37],"yoast_head":"\nCara Membuat Gallery Menggunakan Divi | Bikin.website Manual Knowledge Base<\/title>\n<meta name=\"description\" content=\"Bikin.website Manual Knowledge Base | Cara Membuat Gallery Menggunakan Divi Tutorial\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bikin.website\/kb\/cara-membuat-gallery-di-divi\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cara Membuat Gallery Menggunakan Divi | Bikin.website Manual Knowledge Base\" \/>\n<meta property=\"og:description\" content=\"Bikin.website Manual Knowledge Base | Cara Membuat Gallery Menggunakan Divi Tutorial\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bikin.website\/kb\/cara-membuat-gallery-di-divi\/\" \/>\n<meta property=\"og:site_name\" content=\"Bikin.website Manual Knowledge Base\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-05T04:12:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-05T02:56:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/bikin.website\/kb\/wp-content\/uploads\/2020\/02\/cara-membuat-gallery.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"834\" \/>\n\t<meta property=\"og:image:height\" content=\"453\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Andy\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andy\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cara Membuat Gallery Menggunakan Divi | Bikin.website Manual Knowledge Base","description":"Bikin.website Manual Knowledge Base | Cara Membuat Gallery Menggunakan Divi Tutorial","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/bikin.website\/kb\/cara-membuat-gallery-di-divi\/","og_locale":"en_US","og_type":"article","og_title":"Cara Membuat Gallery Menggunakan Divi | Bikin.website Manual Knowledge Base","og_description":"Bikin.website Manual Knowledge Base | Cara Membuat Gallery Menggunakan Divi Tutorial","og_url":"https:\/\/bikin.website\/kb\/cara-membuat-gallery-di-divi\/","og_site_name":"Bikin.website Manual Knowledge Base","article_published_time":"2020-02-05T04:12:00+00:00","article_modified_time":"2020-10-05T02:56:29+00:00","og_image":[{"width":834,"height":453,"url":"https:\/\/bikin.website\/kb\/wp-content\/uploads\/2020\/02\/cara-membuat-gallery.jpg","type":"image\/jpeg"}],"author":"Andy","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Andy","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/bikin.website\/kb\/cara-membuat-gallery-di-divi\/#article","isPartOf":{"@id":"https:\/\/bikin.website\/kb\/cara-membuat-gallery-di-divi\/"},"author":{"name":"Andy","@id":"https:\/\/bikin.website\/kb\/#\/schema\/person\/3a5665ab219f734a37b8b2133a06bc4b"},"headline":"Cara Membuat Gallery Menggunakan Divi","datePublished":"2020-02-05T04:12:00+00:00","dateModified":"2020-10-05T02:56:29+00:00","mainEntityOfPage":{"@id":"https:\/\/bikin.website\/kb\/cara-membuat-gallery-di-divi\/"},"wordCount":669,"commentCount":0,"publisher":{"@id":"https:\/\/bikin.website\/kb\/#organization"},"keywords":["divi","gallery"],"articleSection":["Tutorial"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/bikin.website\/kb\/cara-membuat-gallery-di-divi\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/bikin.website\/kb\/cara-membuat-gallery-di-divi\/","url":"https:\/\/bikin.website\/kb\/cara-membuat-gallery-di-divi\/","name":"Cara Membuat Gallery Menggunakan Divi | Bikin.website Manual Knowledge Base","isPartOf":{"@id":"https:\/\/bikin.website\/kb\/#website"},"datePublished":"2020-02-05T04:12:00+00:00","dateModified":"2020-10-05T02:56:29+00:00","description":"Bikin.website Manual Knowledge Base | Cara Membuat Gallery Menggunakan Divi Tutorial","breadcrumb":{"@id":"https:\/\/bikin.website\/kb\/cara-membuat-gallery-di-divi\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bikin.website\/kb\/cara-membuat-gallery-di-divi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/bikin.website\/kb\/cara-membuat-gallery-di-divi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bikin.website\/kb\/"},{"@type":"ListItem","position":2,"name":"Cara Membuat Gallery Menggunakan Divi"}]},{"@type":"WebSite","@id":"https:\/\/bikin.website\/kb\/#website","url":"https:\/\/bikin.website\/kb\/","name":"Bikin.website Manual Knowledge Base","description":"Bikin.website Manual Knowledge Base","publisher":{"@id":"https:\/\/bikin.website\/kb\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bikin.website\/kb\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/bikin.website\/kb\/#organization","name":"Bikin.website","url":"https:\/\/bikin.website\/kb\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bikin.website\/kb\/#\/schema\/logo\/image\/","url":"https:\/\/bikin.website\/kb\/wp-content\/uploads\/2019\/11\/logo-blue-scaled.png","contentUrl":"https:\/\/bikin.website\/kb\/wp-content\/uploads\/2019\/11\/logo-blue-scaled.png","width":2560,"height":313,"caption":"Bikin.website"},"image":{"@id":"https:\/\/bikin.website\/kb\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/bikin.website\/kb\/#\/schema\/person\/3a5665ab219f734a37b8b2133a06bc4b","name":"Andy","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bikin.website\/kb\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9ae509f9672b601e324430c787bc1731?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9ae509f9672b601e324430c787bc1731?s=96&d=mm&r=g","caption":"Andy"},"url":"https:\/\/bikin.website\/kb\/author\/andy\/"}]}},"_links":{"self":[{"href":"https:\/\/bikin.website\/kb\/wp-json\/wp\/v2\/posts\/221"}],"collection":[{"href":"https:\/\/bikin.website\/kb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bikin.website\/kb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bikin.website\/kb\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bikin.website\/kb\/wp-json\/wp\/v2\/comments?post=221"}],"version-history":[{"count":4,"href":"https:\/\/bikin.website\/kb\/wp-json\/wp\/v2\/posts\/221\/revisions"}],"predecessor-version":[{"id":376,"href":"https:\/\/bikin.website\/kb\/wp-json\/wp\/v2\/posts\/221\/revisions\/376"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bikin.website\/kb\/wp-json\/wp\/v2\/media\/375"}],"wp:attachment":[{"href":"https:\/\/bikin.website\/kb\/wp-json\/wp\/v2\/media?parent=221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bikin.website\/kb\/wp-json\/wp\/v2\/categories?post=221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bikin.website\/kb\/wp-json\/wp\/v2\/tags?post=221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}