CSS, Thủ thuật Ngày 22/10/2021 8357 lượt xem

Css frame background sản phẩm wordpress

Khi làm trang bán hàng cần làm cho sản phẩm đẹp ta thường chỉnh sửa hình sản phẩm úp lên , tuy nhiên trong một số trường…

Lê Anh ĐôngFlatsome trên Google News

Chuẩn bị file hình frame để chèn vào background cho sản phẩm

Khi làm trang bán hàng cần làm cho sản phẩm đẹp ta thường chỉnh sửa hình sản phẩm úp lên , tuy nhiên trong một số trường hợp trang Sản phẩm có rồi mà ko được như ý

nên ta cần css frame background sản phẩm cho lung linh lại , bài hôm nay tớ chỉ cách bạn làm nhé .

Css frame background sản phẩm wordpress

Css frame background sản phẩm wordpress — Css frame background sản phẩm wordpress – Demo được làm trên trang sản phẩm của khách

Chuẩn bị file hình frame để chèn vào background cho sản phẩm

có nhiuè trang share hình này , trên trang tớ có share hình chèn cho sản phẩm , lựa chọn và tải về úp lên host mình cái ứng ý nhé

Link tại đây : Bộ sưu tập khung ảnh sản phẩm shopee đẹp và cách chèn Khung

chọn tấm hình mình thích và úp lên web nhé

xác định vị trí muốn chèn hình này ( có thể chèn giống nhau hoặc khác nhau cho mỗi vị trí ở trang chủ )

Ví dụ : tớ chèn vào sản phẩm nổi bật

= > tạo sản phẩm nổi bật = > đặt class “noibat” như hình

Chuẩn bị file hình frame để chèn vào background cho sản phẩm

Chèn css vào khung theo mã sau :

/* Khung cho sản phẩm nổi bật */
.noibat .box-image:before {
    content: '';
    z-index: 3;
    width: 100%;
    height: 100%;
    background: url(http://vattubd.com/wp-content/uploads/2021/10/khung4.png) no-repeat;
    background-size: contain;
    position: absolute;
 margin-left: -50%;
}
/* Khung cho sản phẩm - shop - bài liên quan */
.has-equal-box-heights .box-image:before {
   content: '';
    z-index: 3;
    width: 100%;
    height: 100%;
    background: url(http://vattubd.com/wp-content/uploads/2021/10/khung2.png) no-repeat;
    background-size: contain;
    position: absolute;
    margin-top: -100%;
}
/* Khung cho siler sản phẩm */
.product-gallery-slider:before {
    content: '';
    z-index: 3;
    width: 100%;
    height: 100%;
    background: url(http://vattubd.com/wp-content/uploads/2021/10/khung.png) no-repeat;
    background-size: contain;
    position: absolute;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

/* Khung cho sản phẩm nổi bật */

.noibat .box-image:before {

content: '';

z-index: 3;

width: 100%;

height: 100%;

background: url(http://vattubd.com/wp-content/uploads/2021/10/khung4.png) no-repeat;

background-size: contain;

position: absolute;

margin-left: -50%;

}

/* Khung cho sản phẩm - shop - bài liên quan */

.has-equal-box-heights .box-image:before {

content: '';

z-index: 3;

width: 100%;

height: 100%;

background: url(http://vattubd.com/wp-content/uploads/2021/10/khung2.png) no-repeat;

background-size: contain;

position: absolute;

margin-top: -100%;

}

/* Khung cho siler sản phẩm */

.product-gallery-slider:before {

content: '';

z-index: 3;

width: 100%;

height: 100%;

background: url(http://vattubd.com/wp-content/uploads/2021/10/khung.png) no-repeat;

background-size: contain;

position: absolute;

}

Có 3 chỗ background khung sản phẩm ( như vị trí note )
Nhớ thay đổi link hình của bạn nhé

OK xong rồi bạn thử xem qua demo nhé

Sau khi chèn vào trang rất đẹp , Demo chèn backgroup cho Sản phẩm — Sau khi chèn vào trang rất đẹp , Demo chèn backgroup cho Sản phẩm – trang sản phẩm nổi bật

Sau khi chèn vào trang rất đẹp , Demo chèn backgroup cho Sản phẩm - trang sản phẩm nổi bật — Sau khi chèn vào trang rất đẹp , Demo chèn backgroup cho Sản phẩm – trang sản phẩm shop

Chúc bạn thành công nhé

theo : https://vattubd.com

Điểm 5/5 - ( Có 1 bình chọn)

Lê Anh Đông

Thích học hỏi, chia sẽ những điều minh biết. Nhận làm web dạo cho bạn bè :)

SALE TƯNG BỪNG – MỪNG NĂM MỚI 2023

iNET khuyến mại Flash Sale tháng 11, giảm giá tới 68% rất nhiều dịch vụ

Làm danh mục sản phẩm flatsome trong wordpress siêu đẹp và đơn giản

Chèn Breadcrumbs plugin Yoast Seo cho website WordPress sử dụng

Có Nhận xét cho "Css frame background sản phẩm wordpress"

Thiện says:
mã code chèn vào đâu vậy ad?

29/12/2023 at 11:47 sáng
Bình luận
- Lê Anh Đông says:
  Chèn vào css bổ sung đó bạn, bạn nhớ để ý cái name class mình đặt nhé
  
  30/12/2023 at 10:30 chiều
nghĩa says:
mình có thử làm tương tự rồi mà không thấy được

04/12/2023 at 5:05 chiều
Bình luận
- Lê Anh Đông says:
  bạn phải chỉnh đúng kiểu hiện thị như bài viết mới được , nếu ko được bạn có thể để lại link mình giúp nhé
  
  07/12/2023 at 2:14 chiều
Pingback: Bộ sưu tập khung ảnh sản phẩm shopee đẹp và cách chèn Khung - FLATSOME - FREE EVERY THING
Pingback: Fix lỗi No URLs waiting to be saved trong Content crawler - FLATSOME - FREE EVERY THING
Pingback: Css frame background sản phẩm wordpress - FLATSOME - FREE EVERY THING

Để lại một bình luận Hủy

Các dịch vụ của FLATSOME.XYZ