Cara Menata dan Memposisikan Gambar di Tempat Abstrak di Divi

Gambar adalah aspek kunci dari desain web. Dan desain web modern tampaknya membutuhkan cara baru dan abstrak untuk menampilkan gambar di situs web Anda. Opsi transformasi Divi memudahkan untuk menata dan memposisikan gambar di halaman Anda di mana saja Anda inginkan. Ini membuka pintu untuk membuat tata letak unik yang akan membawa situs web Anda ke tingkat berikutnya.

Dalam tutorial ini, saya akan menunjukkan kepada Anda beberapa cara untuk menata dan memposisikan gambar di tempat-tempat abstrak di situs web Anda. Ini akan memungkinkan Anda untuk membuat variasi desain yang tak terhitung jumlahnya untuk gambar yang mungkin Anda pikir hanya mungkin dilakukan di editor foto seperti Photoshop atau Sketch.

Mari kita mulai!

Sneak Peek

Berikut adalah sneak peek dari desain yang akan kita buat dalam tutorial ini.

Unduh Contoh Desain dari Tutorial Ini GRATIS

Untuk mendapatkan contoh desain ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file json ke Divi Builder.

Sekarang mari kita ke tutorialnya ya?

Memulai

Untuk memulai, pastikan Anda telah menginstal dan mengaktifkan Tema Divi. Kemudian buat halaman baru dan gunakan Divi Builder di ujung depan. Pilih opsi "Bangun dari Awal".

Sekarang Anda siap untuk mendesain!

Memosisikan Gambar Sebagian Di Luar Viewport (ke kanan atau kiri)

Dalam contoh pertama ini, saya akan menunjukkan cara memposisikan gambar sebagian di luar viewport. Ini cara yang bagus untuk menambahkan lebih banyak tampilan abstrak untuk gambar Anda yang akan berfungsi seperti gambar latar belakang khusus untuk konten Anda. Kemudian Anda dapat menata gambar untuk desain yang lebih unik.

Berikut cara melakukannya.

Buat dan Gaya Modul Teks

Pertama kita akan membuat modul teks yang akan berfungsi sebagai konten utama untuk bagian kita.

Jika Anda belum melakukannya, buat bagian reguler dengan baris satu kolom. Kemudian tambahkan modul teks ke baris.

Perbarui konten untuk menyertakan hal berikut:

<h2>About Us</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Kemudian perbarui pengaturan desain sebagai berikut:

Font Teks: Raleway
Judul 2 Font: Raleway
heading 2 Berat Font: Tebal
Judul 2 Ukuran Teks: 44px (desktop), 24px (ponsel)
Lebar: 680 piksel (desktop), 60% (tablet), 80% (ponsel)
Padding Kustom: 10% atas, 10% bawah, 10% kiri, 5% kanan

Tambahkan Gambar #1

Sekarang kita siap untuk menambahkan gambar pertama. Silakan dan tambahkan modul gambar langsung di atas modul teks.

Kemudian unggah gambar Anda ke modul gambar. Pastikan gambar cukup besar agar tidak kehilangan kualitas saat kita memperbesar gambar menggunakan properti transform. Saya menggunakan gambar berukuran 400 x 580 piksel.

Selanjutnya turunkan lebar modul gambar dan sejajarkan ke kiri sebagai berikut:

Lebar: 5%
Penyelarasan Modul: kiri

Mengecilkan modul gambar seperti ini pada awalnya memungkinkan kita untuk mengurangi ruang negatif dari tata letak. Dengan cara ini kita tidak perlu menyesuaikan jarak menggunakan margin negatif.

Sekarang kita dapat memperbesar gambar menggunakan opsi transformasi sebagai berikut:

Transformasi Sumbu X Skala: 416%
Transformasi Skala sumbu Y: 416%

Kemudian kita dapat memposisikan gambar menggunakan transform translate sebagai berikut:

Transformasi Terjemahkan sumbu X: -36%
Transformasi Terjemahkan sumbu Y: 41%

Terakhir, Anda dapat memutar gambar menggunakan transform rotate:

Transform Putar sumbu Z: 11deg

Sekarang kita siap untuk menambahkan gambar kedua. Silakan dan tambahkan modul gambar langsung di bawah modul teks.

Kemudian unggah gambar baru ke modul gambar.

Selanjutnya turunkan lebar modul gambar dan sejajarkan ke kiri sebagai berikut:

Lebar: 10%
Penyelarasan Modul: kiri

Lebar tidak harus tepat 10%. Yang ingin Anda lakukan hanyalah mengecilkan modul sehingga tidak memakan terlalu banyak ruang vertikal pada tata letak.

Kemudian perbarui opsi transformasi sebagai berikut:

Transformasi Skala X-sumbu: 464%
Transformasi Skala sumbu Y: 464%

Transformasi Terjemahkan sumbu X: 7%
Transformasi Terjemahkan sumbu Y: -80%

Transform Putar sumbu Z: -10deg

Kemudian tambahkan bayangan kotak untuk elemen desain tambahan.

Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: -20px
Posisi Vertikal Bayangan Kotak: -7px

Memastikan Modul Teks Tetap Di Atas

Kami ingin memastikan Modul Teks tetap di atas gambar setiap kali mereka mulai tumpang tindih di ponsel. Ini memastikan gambar terus berfungsi sebagai gambar latar belakang dalam desain.

Untuk melakukan ini, buka modul teks dan tambahkan CSS Kustom berikut ke Elemen Utama:

CSS Elemen Utama:

position: relative;

Kemudian atur Z-index ke 1.

Menyembunyikan Bagian yang Meluap

Karena kita akan memiliki gambar yang memanjang di luar bagian halaman, lebar viewport browser akan meningkat untuk mengakomodasi ruang ekstra. Ini akan melibatkan bilah gulir horizontal di bagian bawah browser. Untuk menonaktifkan ini, Anda perlu menambahkan potongan CSS ke bagian tersebut.

Buka pengaturan bagian dan tambahkan CSS khusus berikut ke Elemen Utama:

overflow: hidden;

Sekarang Lihat hasil akhirnya.

Membuat Latar Belakang Kolase Gambar Abstrak untuk Header Anda

Untuk desain berikutnya, saya akan menunjukkan cara membuat kolase abstrak dari gambar yang akan berfungsi sebagai latar belakang untuk header. Untuk melakukan ini, kita akan menggunakan properti display flex untuk membuat deretan gambar yang dapat kita skala dan bergerak dengan cara yang kreatif.

Berikut cara melakukannya.

Merancang Modul Teks Header

Pertama, buat bagian reguler baru dengan baris satu kolom. Kemudian tambahkan modul teks ke baris dan perbarui konten berikut:

<h1>Interior Design</h1>
<p>This is some content</p>

Kemudian perbarui desain sebagai berikut:

Warna Latar Belakang: rgba(0,0,0,0.07)
Warna Teks Teks: #ffffff
Orientasi Teks: Tengah
Font Judul: Raleway
Berat Huruf Judul: Tebal
Perataan Teks Judul: Kanan
Warna Teks Judul: #ffffff
Ukuran Teks Judul: 44px (desktop), 34px (tablet), 24px (ponsel)
Lebar: 500 piksel (desktop), 60% (tablet), 80% (ponsel)
Penyelarasan Modul: Pusat
Padding Kustom: 5vw atas, 5vw bawah, 1vw kanan

Pengaturan Bagian

Sebelum menambahkan gambar dan membangun latar belakang kolase, mari sesuaikan bagian kita. Ini akan menyediakan kanvas kami untuk menyelesaikan sisa desain.

Buka pengaturan bagian dan perbarui yang berikut ini:

Warna Latar Belakang: #4c606d
Padding Kustom (desktop): 0px atas, 0px bawah
Padding Kustom (tablet): 20px bawah
Padding Kustom (telepon): 40px bawah

Selanjutnya, tambahkan bayangan kotak dalam ke bagian bawah bagian dengan warna yang cocok dengan latar belakang bagian berikutnya pada halaman (dalam hal ini akan menjadi putih). Ini akan memungkinkan kita untuk membuat efek gambar kita tumpang tindih dengan bagian bawah header ke bagian berikutnya (Anda akan melihat apa yang saya maksud nanti).

Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: 0px
Posisi Vertikal Bayangan Kotak: -80px
Warna Bayangan: #ffffff

Dan karena kita akan memindahkan gambar di luar viewport bagian untuk kolase kita, kita perlu menambahkan CSS berikut ke Elemen Utama.

overflow: hidden;

Pengaturan Baris 1

Sekarang kita perlu menambahkan beberapa padding ke baris yang berisi modul teks kita. Kita juga perlu menambahkan indeks-z untuk menjaga bagian di atas gambar yang akan kita tambahkan ke bagian kita. Secara default, setiap bagian memiliki nilai z-index 9. Jadi yang perlu kita lakukan adalah menambahkan z-index 10 ke baris yang ingin kita tetap di atas.

Buka pengaturan baris dan perbarui yang berikut:

Padding Kustom: 10vw atas
Indeks Z: 10

Membuat Kolase Gambar Abstrak

Pada titik ini bagian siap untuk mulai menambahkan gambar kita.

Untuk membuat kolase gambar abstrak, kita akan menambahkan 5 gambar ke satu baris kolom dan kemudian menggunakan "display: flex" untuk menyelaraskan semua gambar tersebut secara horizontal di halaman. Ini diperlukan untuk menjaga gambar tetap di tempatnya (secara horizontal) pada semua ukuran browser. Jika kita menggunakan tata letak 5 kolom tradisional, gambar yang dipecah menjadi tata letak kolom yang berbeda pada perangkat yang berbeda dan merusak desain.

Setelah itu kita akan dapat menata dan memposisikan gambar kita satu per satu dengan opsi transformasi.

Menambahkan Baris Gambar

Lanjutkan dan buat baris satu kolom baru langsung di bawah baris yang berisi modul teks.

Kemudian buka pengaturan baris dan perbarui yang berikut:

Lebar Kustom: 50%
Lebar Talang: 1

Dan untuk menyelaraskan semua modul di baris ini secara horizontal, tambahkan CSS berikut ke Elemen Utama Kolom:

display: flex;

Sekarang ketika Anda menambahkan modul gambar ke baris, mereka akan sejajar secara horizontal.

Lihat apa yang terjadi saat saya menduplikasi modul gambar di baris dengan display:flex add to the column.

Lanjutkan dan tambahkan 5 gambar ke baris untuk memastikan ukurannya cukup besar untuk mengakomodasi peningkatan ukuran saat menskalakan gambar untuk kolase. Saya menggunakan gambar yang ditampilkan dalam Paket Tata Letak Perbaikan Rumah kami yang lebarnya sekitar 800px dan tingginya bervariasi. Gambar dengan dimensi yang berbeda cenderung membuat kolase abstrak terlihat lebih baik.

Memposisikan Gambar dengan Transform Translate

Saatnya untuk mulai memposisikan gambar kita untuk membuat kolase kita.

Gambar #1

Buka pengaturan untuk modul gambar pertama (paling kiri) dan perbarui opsi transformasi sebagai berikut:

Transformasi Sumbu X Skala: 266%
Transformasi Skala sumbu Y: 266%

Transform Terjemahkan: Sumbu X: -68%
Transformasi Terjemahan: Sumbu Y: -54%

Gambar #2

Buka pengaturan untuk modul gambar kedua dan perbarui opsi transformasi sebagai berikut:

Transformasi Skala X-sumbu: 184%
Transformasi Skala sumbu Y: 184%

Transform Terjemahkan: Sumbu X: -36%
Transform Terjemahkan: Sumbu Y: -66%

Gambar #3

Buka pengaturan untuk modul gambar ketiga dan perbarui opsi transformasi sebagai berikut:

Transformasi Skala X-sumbu: 206%
Transformasi Skala sumbu Y: 206%

Transform Terjemahkan: Sumbu X: -51%
Transform Terjemahkan: Sumbu Y: -27%

Gambar #4

Buka pengaturan untuk modul gambar keempat dan perbarui opsi transformasi sebagai berikut:

Transformasi Skala X-sumbu: 180%
Transformasi Skala sumbu Y: 180%

Transform Terjemahkan: Sumbu X: 20%
Transformasi Terjemahan: Sumbu Y: 42%

Gambar #5

Buka pengaturan untuk modul gambar kelima dan perbarui opsi transformasi sebagai berikut:

Transformasi Skala X-sumbu: 290%
Transformasi Skala sumbu Y: 290%

Transformasi Terjemahkan: Sumbu X: -50%
Transform Terjemahkan: Sumbu Y: 72%

Menambahkan Bayangan Kotak ke Gambar

Untuk membuat elemen desain tambahan, kita dapat menambahkan bayangan kotak ke gambar kita. Untuk melakukannya, aktifkan mode grid dan gunakan fitur multiselect untuk memilih semua modul gambar. Kemudian buka pengaturan salah satu modul gambar untuk menerapkan modal pengaturan elemen.

Kemudian perbarui yang berikut ini:

Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: -40px
Posisi Vertikal Bayangan Kotak: 40px
Warna Bayangan: rgba (255,255,255,0.13)

Hasil Akhir

Berikut adalah hasil akhir dari desain tersebut.

Desktop

Tablet

Telepon

Pikiran Akhir

Contoh desain ini akan memberi Anda beberapa inspirasi tentang cara menata dan memposisikan gambar di situs web Anda dengan cara yang mungkin tidak pernah Anda pikirkan sebelumnya di luar perangkat lunak pengedit foto. Setelah Anda mempelajari cara menyesuaikan tata letak dengan benar, opsi transformasi Divi dapat memposisikan gambar di tempat yang unik dan abstrak. Mudah-mudahan, ini akan berguna untuk proyek Anda berikutnya.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!