Nếu muốn website của mình trở nên chuyên nghiệp và nổi bật, thì chắc bạn sẽ luôn cố gắng để làm nó thật đẹp. Có rất nhiều cách để trang web của bạn thu hút hơn, và một trong những cách đơn giản nhất trong số đó chính là Overlay các hình ảnh trên website của bạn. Trong bài viết này, mình sẽ giải thích và hướng dẫn thật chi tiết cách làm cho bạn nhé.
Mục lục
Overlay là gì ?
Như bạn hoàn toàn có thể thấy, mình đã sử dụng một hình ảnh chứa cả text và có thêm một lớp màu phủ mờ dưới nền chữ ( overlay ) để làm heading ( tiêu đề ). Điều này đã tạo ra một sự độc lạ đáng kể so với việc bạn chỉ viết một tiêu đề văn bản đơn thuần. Cách này làm tiêu đề bài viết của bạn đẹp mắt và lôi cuốn hơn so với thông thường đúng không ?
Quan trọng hơn, lớp phủ màu trên hình ảnh giúp làm nổi bật đoạn text trong khi vẫn hiển thị được phần hình của ảnh nền. Bạn có thể thêm ảnh với chữ và lớp phủ màu nền (overlay) như vậy cho các bài đăng hoặc trang trên website một cách dễ dàng. Trong bài viết này, mình sẽ hướng dẫn bạn cách thực hiện nó với các bước thật đơn giản.
Bạn đang đọc: Cách tạo Overlay cho hình ảnh trong WordPress – TitanWeb
Cách tạo Overlay cho hình ảnh trong WordPress
Bạn hoàn toàn có thể overlay một hình ảnh trong WordPress theo hai cách : 1 là sử dụng block Cover của Gutenberg và 2 là sử dụng CSS. Với trình soạn thảo Gutenberg, bạn hoàn toàn có thể thêm một ảnh mới trọn vẹn và thêm overlay cho bài đăng hoặc trang. Trong khi đó, nếu dùng CSS thì bạn sẽ cần ảnh có sẵn trong bài / trang rồi mới chỉnh sửa nó .Cả hai cách này đều rất dễ triển khai và mình sẽ hướng dẫn bạn lần lượt từng cách một nhé .
Cách 1 : Sử dụng block Cover của Gutenberg
Đầu tiên, bạn vào phần page editor ( chỉnh sửa trang ) trong Gutenberg và triển khai theo những bước sau đây .
Bước 1 : Thêm một ảnh mới sử dụng block Cover
Click vào biểu tượng Add block và chọn loại block là Cover.
Tiếp theo, bạn chọn một ảnh để làm ảnh nền. Ảnh này sẽ hiển thị trên block dạng Cover và nó sẽ giống như một ảnh bìa của bài viết / trang vậy. Bạn hoàn toàn có thể tải một hình ảnh lên hoặc chọn một hình ảnh từ trong thư viện ảnh của bạn .
Bạn cũng có thể chọn một ảnh có sẵn trong bài / trang và chuyển nó thành ảnh bìa nếu muốn. Chỉ cần nhấp vào hình ảnh, chọn Change block style or type và chọn dạng block là Cover là được:
Ví dụ như mình đang chọn hình ảnh chiếc mũ len này làm ảnh nền này. Sau đó, mình sẽ viết một đoạn text lên trên ảnh .Đồng thời, mình cũng hoàn toàn có thể thiết lập chiều rộng của hình ảnh hoặc căn lề cho ảnh như dưới đây .
Bây giờ ảnh bìa ( cover ) của mình đã có cả hình nền và chữ rồi. Theo mặc định thì những block dạng cover sẽ đều có sẵn một lớp overlay màu đen. Nếu bạn muốn chỉnh sửa lớp phủ này, thì cùng xem bước tiếp theo nhé .
Bước 2 : Tùy chỉnh overlay cho ảnh cover
Để chỉnh sửa lớp overlay mặc định, mình sẽ cần vào phần thiết lập cho block .
Bạn click vào block rồi click vào biểu tượng Options (hiển thị dưới dạng nút ba chấm) và chọn Show more settings.
Phần thiết lập cho block sẽ hiển thị ở bên phải màn hình của bạn. Bạn tìm đến phần Overlay nhé.
Ở phần thiết lập này, nó cho bạn hai tùy chọn kiểu màu overlay là Solid và Gradient để overlay ảnh bìa của bạn. Chúng mình sẽ thử cả hai tùy chọn này. Trước tiên, hãy thử lớp phủ màu dạng Solid nhé.
Lớp phủ màu dạng Solid ( một màu )
Với lựa chọn này, bạn hoàn toàn có thể :
- Chọn một màu được gợi ý ngay trong phần thiết lập;
- Chọn một màu bất kỳ trong bảng màu hoặc dùng mã màu như ảnh dưới đây:
Mình vừa chọn một màu hồng ngọt ngào cho lớp overlay phủ trên ảnh. Ngoài ra, bạn cũng có thể thay đổi độ mờ (độ trong suốt) của lớp phủ nữa đấy.
Tỷ lệ độ mờ từ 30% đến 60% là thích hợp nhất đấy. Nếu bạn đặt độ mờ thấp hơn hoặc cao hơn tỷ lệ này thì lớp màu overlay sẽ gần như không nhìn thấy được hoặc quá đậm nên sẽ che mất hình nền. Ví dụ như ở đây, mình đặt độ mờ ở mức 50%.
Như vậy là mọi thứ đã hoàn thành xong xong rồi đấy. Bạn thấy đấy, việc thêm lớp phủ màu solid vào ảnh bìa rất đơn thuần phải không ? .Bây giờ tất cả chúng ta hãy chuyển sang tùy chọn màu gradient
Lớp phủ màu dạng Gradient
Màu gradient là sự trộn lẫn của tối thiểu hai loại màu với nhau. Hay nói một cách đơn thuần, màu của lớp phủ này sẽ từ từ đổi khác từ màu tiên phong sang màu thứ hai được chọn ( và cứ liên tục như vậy ) .Để dễ hiểu hơn, bạn xem cách mình tạo lớp màu phủ dạng gradient nhé .
Đầu tiên, mình chuyển thiết lập ở phần Overlay từ Solid thành Gradient. Đồng thời, mình đã chọn một bộ màu gradient trong phần gợi ý. Trông nó sẽ như thế này:
Như bạn hoàn toàn có thể thấy, lớp phủ gồm có 3 điểm chính ( control points ). Mỗi điểm sẽ là một màu đơn và bạn trọn vẹn hoàn toàn có thể vận động và di chuyển vị trí của những điểm này để đổi khác những vị trí chuyển màu trên lớp overlay .Nếu bạn thấy bộ màu gradient mặc định này đã ổn rồi, thì bạn không cần biến hóa gì cả. Nếu không thì bạn hoàn toàn có thể kiểm soát và điều chỉnh bằng cách chuyển dời những điểm màu như này :
Ngoài ra, bạn cũng có thể điều chỉnh kiểu phối màu nữa. Bạn có thể chọn loại Linear hoặc Radial. Với kiểu Linear, bạn sẽ có thêm lựa chọn để đổi hướng của các dải màu.
Để sử dụng tùy chọn màu gradient sao cho hài hòa nhất, thì có lẽ rằng cũng cần một chút ít cảm quan tốt về sắc tố và cách phối màu sao cho tương thích. Nên nếu bạn không chắc, thì cứ dùng mặc định như mình cũng được nhé .
Cách 2 : Sử dụng CSS để thêm lớp overlay cho ảnh
Nếu bạn dùng trình soạn thảo kiểu cũ (Classic Editor) thì bắt buộc bạn phải dùng đến CSS để thêm overlay cho ảnh. Để thêm code CSS, bạn vào Appearance > Customize > Additional CSS.
Thêm lớp màu overlay dạng gradient
Để thêm một lớp phủ màu dạng gradient, bạn thêm đoạn code sau :
.background-gradient {
position: relative;
}
.background-gradient::before {
Nội dung: '';
background: linear-gradient(135deg,#0693e3,#9b51e0);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
opacity: .5;
}
Thêm lớp phủ màu dạng Solid ( một màu đơn )
Để thêm một lớp phủ chỉ có một màu, bạn dùng đoạn code sau :
.background-opacity {
position: relative;
}
.background-opacity:before {
Nội dung: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
opacity: .5;
background-color: #000;
}
Lưu ý: những đoạn code này sẽ chỉ giúp bạn thêm lớp phủ overlay thôi chứ không thêm chữ lên trên ảnh nhé.
Nếu bạn có nhiều ảnh và mỗi ảnh sử dụng một kiểu overlay thì bạn có thể thêm cả 2 đoạn code trên vào phần Additional CSS nhé. Để chỉ định chính xác ảnh nào dùng lớp phủ overlay nào, thì bạn tới phần chỉnh sửa bài viết / trang và chọn chế độ sửa là Text để xem bài viết / trang dưới dạng code. Sau đó, bạn thêm một đoạn code như sau vào mỗi ảnh để đặt tên class cho ảnh của bạn nhé:
- Solid: …
- Gradient: `
Ví dụ :
Như vậy là mình đã xong rồi đó!
Lời cuối
Việc thêm overlay vào hình ảnh sẽ giúp bài viết hoặc trang của bạn có những hình ảnh ấn tượng và đẹp mắt hơn cho người đọc ngay từ cái nhìn tiên phong. Thao tác rất đơn thuần nhưng hiệu suất cao lại cao, nên không tội gì bỏ lỡ phải không những bạn !Ngoài ra, cũng có nhiều cách khác nữa để giúp website của bạn lôi cuốn và mê hoặc hơn như thể thêm những slider, banner dạng popup, video background, … nữa đấy. Bạn hoàn toàn có thể phối hợp những loại để tạo hiệu ứng tốt nhất nhé. Chúc những bạn thành công xuất sắc !
Source: https://expgg.vn
Category: Thông tin
