Cara menambahkan perbatasan, frame dan efek bayangan gambar wordpress Anda

Apakah Anda ingin menggantung gambar di sekitar dinding tanpa framing itu? Tidak ada yang tidak! Sebuah gambar tanpa bingkai tidak terlihat keren dan bahkan tidak gambar, itu hanya gambar biasa. Apakah itu adalah ruang tamu Anda atau website Anda, menambahkan border atau membingkai gambar akan memberikan tampilan ditingkatkan. Berikut mari kita lihat bagaimana untuk menambahkan perbatasan, frame dan efek bayangan gambar wordpress Anda.
Dalam rangka untuk bekerja dengan gambar, wordpress memiliki baik membangun perpustakaan media. Satu dapat gambar insert sederhana ke pos mereka dan halaman dengan meng-upload, memilih dari perpustakaan atau memasukkan langsung dari URL. Ketika Anda menyisipkan gambar ke dalam posting Anda atau halaman Anda akan melihat beberapa pilihan seperti menambahkan judul, keterangan, alt teks, keselarasan dan ukuran. Semua ini adalah pengaturan dasar untuk gambar, tetapi apakah Anda tahu bahwa Anda dapat menambahkan border, gaya dan kelas CSS untuk gambar.

Bagaimana menambahkan perbatasan, frame dan efek bayangan gambar wordpress

Di sini kita akan melihat bagaimana cara menambahkan frame gambar individu dari wordpress editor visual, menambahkan perbatasan untuk semua gambar dengan CSS sedikit trik dan menambahkan perbatasan gambar dengan bayangan.
Keempat gambar di bawah ini akan menggambarkan bagaimana sebuah unframed, dibingkai dan gelap gambar terlihat dalam posting atau halaman.

• Gambar pertama adalah salah satu yang polos tanpa batas atau bayangan.
• Gambar kedua memiliki perbatasan hitam tipis.
• Gambar ketiga memiliki bayangan tanpa batas.
• Yang terakhir memiliki kedua perbatasan dan bayangan.

Jadi mengapa ke perbatasan atau bingkai gambar

Orang menggunakan perbatasan dan frame gambar dalam rangka untuk meningkatkan citra tampilan. Tetapi kenyataannya adalah frame yang digunakan untuk membenarkan tepi gambar. Mari kita asumsikan bahwa warna situs latar belakang Anda putih, sekarang gambar dimasukkan terlihat normal dalam posting Anda hanya itu juga memiliki latar belakang putih.

Sebuah gambar yang tidak lengkap, dipotong dan yang memiliki latar belakang berwarna terlihat aneh dan tidak wajar seperti ini.

Menambahkan perbatasan gambar individu dalam wordpress

Dalam dashboard wordpress Anda pergi ke posting atau halaman. Sekarang masukkan gambar sebagai biasanya akan melakukan dari editor visual. Setelah memasukkan klik pada gambar itu dan Anda akan melihat ikon edit di pojok kiri atas. Klik dan ketika Anda melakukannya, Anda akan melihat jendela pop up di mana Anda dapat mengedit gambar Anda.


Beralih ke tab pengaturan lanjutan yang kebanyakan orang tidak menyadarinya biasanya. Sekarang dalam pengaturan gambar maju Anda akan melihat bidang kosong bernama perbatasan. Cukup masukkan nomor (1, 2 atau 3) dalam piksel dan akan menambahkan perbatasan hitam kecil kecil di sekitar gambar Anda. Ini adalah di mana dan bagaimana Anda perlu menambahkan perbatasan gambar individu. Dengan mengubah nilai yang Anda dapat membuat perbatasan tipis atau tebal yang Anda inginkan.

Terkait: cara mengubah font keluarga, warna, gaya dan ukuran di wordpress

Menambahkan frame untuk semua gambar di wordpress menggunakan CSS

Menambahkan perbatasan masing-masing gambar secara individual bukan ide yang baik dan itu butuh waktu. Jadi dengan sedikit CSS Anda dapat menambahkan perbatasan untuk semua gambar Anda yang Anda dimasukkan ke dalam posting Anda dan halaman.

1

img {

2	border:2px solid #000000;

3

}

Tambahkan satu di atas dalam file CSS kustom tema Anda dan itu akan menambah perbatasan hitam kecil untuk semua gambar Anda.

Jangan seperti tampilan, kemudian menambahkan satu di bawah ini.
1 img {
2 border: 2px solid # 000000;
3 border-radius: 25px;
4}

Berikut warna perbatasan dan ukuran yang sama, tetapi gambar akan memiliki tepi melengkung. Cobalah dengan warna berbeda dan menyesuaikan ukuran perbatasan dan radius untuk membuat gambar lebih elegan.


Berikut ini adalah contoh lain:


1 img {
2 padding: 7px;
3 border: 1px solid # 1b3041;
4 background-color: # 62ade6;
5}

Dalam semua contoh di atas gaya perbatasan solid. Anda dapat mencoba batas yang berbeda dengan mengganti solid dengan putus-putus, putus-putus, ganda, alur, bubungan dll
Menambahkan bayangan gambar wordpress

Menambahkan bayangan gambar wordpress Anda sama seperti apa yang Anda lakukan di atas untuk frame dan perbatasan, tetapi dengan garis satu lagi dari CSS. Berikut di bawah ini CSS akan memberikan efek bayangan untuk semua gambar Anda. Mengubah angka, kode warna dan melihat tampilannya.
1 img {
2 border: 1px awal # c8c8c8;
3 border-radius: 5px;
4 box-shadow: 10px 10px 5px # 717070;
5}

O.K semua dilakukan! Berikut ini adalah mencoba lagi. Jika Anda ingin menambahkan perbatasan, bingkai atau bayangan khususnya satu atau dua gambar maka Anda dapat menentukan kelas dan menyebutnya dari style sheet. Berikut adalah bagaimana Anda melakukannya.

Arahkan ke posting wordpress Anda atau halaman, menyisipkan gambar seperti biasa lakukan. Sekarang klik edit gambar, pergi ke pengaturan lanjutan dan menentukan kelas CSS. Anda dapat nama itu apa.

Dalam kasus kami, kami telah menetapkan kelas CSS sebagai "satu-frame".
1 .one-frame {
2 box-shadow: 0 0 20px RGBA (0, 0, 0, 10);
3 WebKit-box-shadow: 0 0 20px RGBA (0, 0, 0, 10);
4 -moz-box-shadow: 0 0 20px RGBA (0,0,0,10);
5 margin: 4px 0;
6 padding: 4px;
7 background: # b9b9b9;
8 border: 2px solid # 716a51;
9}

Jadi dengan CSS di atas hasil akhir adalah ini.

Jika Anda memiliki ide sedikit tentang CSS maka Anda dapat membuat gambar dan website Anda terlihat luar biasa.

Harap posting ini membantu Anda (terutama fotografer) dalam menambahkan perbatasan, frame dan efek bayangan gambar wordpress Anda. Jika Anda seperti ini maka silakan luangkan waktu untuk berbagi. Untuk tips dan trik berlangganan feed RSS kami.