Hướng dẫn cách sử dụng cover edior năm 2024
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é. Show Overlay là gì?Như bạ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ự khác biệt đá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 bắt mắt và thu hút hơn so với bình 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 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 có thể thêm một ảnh mới hoàn toà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ễ thực hiện 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à thực hiện theo các bước sau đây. Bước 1: Thêm một ảnh mới sử dụng block CoverClick 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 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 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ì các 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 có thể:
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 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 giản phải không?. Bây giờ chúng ta hãy chuyển sang tùy chọn màu gradient Lớp phủ màu dạng GradientMàu gradient là sự pha trộn của ít nhất hai loại màu với nhau. Hay nói một cách đơn giản, màu của lớp phủ này sẽ dần dần thay đổi từ màu đầu tiên sang màu thứ hai được chọn (và cứ tiếp 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 có thể thấy, lớp phủ bao gồm 3 điểm chính (control points). Mỗi điểm sẽ là một màu đơn và bạn hoàn toàn có thể di chuyển vị trí của các điểm này để thay đổi các 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 thay đổi gì cả. Nếu không thì bạn có thể điều chỉnh bằng cách di chuyển các đ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ẽ cũng cần một chút cảm quan tốt về màu sắc và cách phối màu sao cho phù hợp. 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 ảnhNế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 { }
.background-gradient::before { # 0693e3,9b51e0);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
opacity: .5;
|