4 cách thêm box shadow vào WordPress

3 tháng ago, Hướng dẫn WordPress, 1 Views
4 cách thêm box shadow vào WordPress

Giới thiệu về Box Shadow trong WordPress

Box shadow là một hiệu ứng hình ảnh giúp tạo ra chiều sâu và điểm nhấn cho các phần tử trên trang web của bạn. Nó thêm một bóng mờ xung quanh một phần tử HTML, làm cho nó trông như đang nổi lên khỏi nền. Trong WordPress, bạn có thể thêm box shadow vào nhiều loại phần tử khác nhau, chẳng hạn như hộp, nút, hình ảnh và đoạn văn. Việc sử dụng box shadow một cách hợp lý có thể cải thiện đáng kể trải nghiệm người dùng (UX) và thiết kế tổng thể của trang web.

Bài viết này sẽ hướng dẫn bạn 4 cách đơn giản và hiệu quả để thêm box shadow vào trang web WordPress của bạn, từ việc sử dụng CSS tùy chỉnh đến các plugin chuyên dụng.

1. Thêm Box Shadow bằng CSS tùy chỉnh

Đây là phương pháp linh hoạt nhất, cho phép bạn kiểm soát hoàn toàn các thuộc tính của box shadow. Bạn có thể thêm CSS tùy chỉnh vào WordPress thông qua trình tùy biến giao diện (Theme Customizer) hoặc chỉnh sửa trực tiếp trong tệp CSS của theme (nếu bạn có quyền truy cập).

Bước 1: Xác định phần tử cần thêm box shadow

Đầu tiên, bạn cần xác định phần tử HTML mà bạn muốn thêm box shadow. Sử dụng công cụ Developer Tools của trình duyệt (thường bằng cách nhấn F12 hoặc chuột phải và chọn “Inspect”) để tìm selector CSS của phần tử đó. Ví dụ:

<div class="my-box">
  Nội dung của hộp
</div>

Trong ví dụ này, selector CSS của phần tử là .my-box.

Bước 2: Thêm CSS tùy chỉnh vào WordPress

Có hai cách chính để thêm CSS tùy chỉnh:

  • Thông qua trình tùy biến giao diện (Theme Customizer): Truy cập Appearance > Customize > Additional CSS. Đây là cách an toàn nhất vì các thay đổi của bạn sẽ không bị mất khi bạn cập nhật theme.
  • Chỉnh sửa trực tiếp tệp CSS của theme: Truy cập Appearance > Theme Editor và tìm tệp style.css. Lưu ý: Cách này không được khuyến khích vì các thay đổi của bạn có thể bị mất khi bạn cập nhật theme. Hãy tạo một theme con (child theme) để an toàn hơn.

Bước 3: Thêm thuộc tính box-shadow

Trong trình chỉnh sửa CSS, thêm selector CSS của phần tử bạn muốn chỉnh sửa và thuộc tính box-shadow. Cú pháp cơ bản của thuộc tính box-shadow là:

box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color;

Ví dụ:

.my-box {
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
}

Giải thích các giá trị:

  • horizontal-offset: Độ lệch ngang của bóng (giá trị dương đẩy bóng sang phải, giá trị âm đẩy bóng sang trái).
  • vertical-offset: Độ lệch dọc của bóng (giá trị dương đẩy bóng xuống dưới, giá trị âm đẩy bóng lên trên).
  • blur-radius: Độ mờ của bóng.
  • spread-radius: Độ lan rộng của bóng.
  • color: Màu của bóng (sử dụng các định dạng màu như hex, rgba, hsl).

2. Sử dụng Plugin Box Shadow

Nếu bạn không quen thuộc với CSS hoặc muốn một giải pháp đơn giản hơn, bạn có thể sử dụng các plugin WordPress để thêm box shadow. Có rất nhiều plugin miễn phí và trả phí có sẵn trên WordPress.org. Một số plugin phổ biến bao gồm:

  • Box Shadow CSS Generator: Plugin đơn giản để tạo code CSS box shadow, sau đó bạn có thể sao chép và dán vào CSS tùy chỉnh của mình.
  • Ultimate Addons for Elementor/Beaver Builder: Nếu bạn sử dụng Elementor hoặc Beaver Builder, các addon này cung cấp các widget với các tùy chọn box shadow nâng cao.

Hướng dẫn sử dụng plugin Box Shadow CSS Generator (ví dụ)

  1. Cài đặt và kích hoạt plugin.
  2. Truy cập giao diện của plugin (thường nằm trong menu “Tools” hoặc “Settings”).
  3. Sử dụng các thanh trượt và hộp màu để điều chỉnh các thuộc tính của box shadow.
  4. Sao chép mã CSS được tạo ra.
  5. Dán mã CSS vào CSS tùy chỉnh của bạn (như đã mô tả trong phần 1).

3. Sử dụng Elementor Page Builder

Elementor là một page builder phổ biến cho WordPress, cho phép bạn tạo các trang và bố cục phức tạp một cách trực quan. Nó cũng cung cấp các tùy chọn tích hợp để thêm box shadow vào các phần tử.

Bước 1: Chỉnh sửa trang bằng Elementor

Mở trang hoặc bài viết bạn muốn chỉnh sửa bằng Elementor.

Bước 2: Chọn phần tử

Chọn phần tử bạn muốn thêm box shadow (ví dụ: một cột, một section, một nút, v.v.).

Bước 3: Truy cập tab Style

Trong bảng điều khiển bên trái, nhấp vào tab “Style”.

Bước 4: Tìm tùy chọn Box Shadow

Dưới tab “Style”, tìm tùy chọn “Box Shadow”. Nó có thể nằm trong một tab con như “Border” hoặc “Box”.

Bước 5: Tùy chỉnh Box Shadow

Sử dụng các tùy chọn có sẵn để điều chỉnh các thuộc tính của box shadow (độ lệch, độ mờ, độ lan rộng, màu sắc). Bạn có thể xem trước các thay đổi của mình trong thời gian thực.

4. Sử dụng Beaver Builder Page Builder

Beaver Builder là một page builder khác mạnh mẽ cho WordPress, cung cấp các tùy chọn tương tự như Elementor để thêm box shadow.

Bước 1: Chỉnh sửa trang bằng Beaver Builder

Mở trang hoặc bài viết bạn muốn chỉnh sửa bằng Beaver Builder.

Bước 2: Chọn phần tử

Chọn phần tử bạn muốn thêm box shadow (ví dụ: một module, một cột, một hàng, v.v.).

Bước 3: Mở cài đặt của phần tử

Nhấp vào biểu tượng bánh răng để mở cài đặt của phần tử.

Bước 4: Truy cập tab Style

Trong cửa sổ cài đặt, nhấp vào tab “Style”.

Bước 5: Tìm tùy chọn Box Shadow

Dưới tab “Style”, tìm tùy chọn “Box Shadow”. Nó có thể nằm trong một tab con như “Border” hoặc “Effects”.

Bước 6: Tùy chỉnh Box Shadow

Sử dụng các tùy chọn có sẵn để điều chỉnh các thuộc tính của box shadow (độ lệch, độ mờ, độ lan rộng, màu sắc). Bạn có thể xem trước các thay đổi của mình trong thời gian thực.

Lời khuyên khi sử dụng Box Shadow

Dưới đây là một số lời khuyên để sử dụng box shadow một cách hiệu quả:

  • Sử dụng box shadow một cách tinh tế: Tránh sử dụng box shadow quá đậm hoặc quá lớn, vì nó có thể làm cho trang web của bạn trông lộn xộn và khó đọc.
  • Đảm bảo khả năng tiếp cận: Chọn màu box shadow có độ tương phản đủ cao so với nền để người dùng dễ dàng nhìn thấy.
  • Kiểm tra trên nhiều thiết bị: Kiểm tra trang web của bạn trên nhiều thiết bị khác nhau (máy tính để bàn, máy tính bảng, điện thoại thông minh) để đảm bảo rằng box shadow hiển thị đúng cách.

Kết luận

Box shadow là một công cụ mạnh mẽ để cải thiện thiết kế trang web WordPress của bạn. Bằng cách sử dụng một trong những phương pháp được mô tả trong bài viết này, bạn có thể dễ dàng thêm box shadow vào các phần tử khác nhau và tạo ra một giao diện trực quan và hấp dẫn hơn. Hãy thử nghiệm với các thuộc tính khác nhau để tìm ra phong cách phù hợp nhất với trang web của bạn.

, , , ,

..