Hướng dẫn sử dụng block Dropcap

Trong bài dịch vụ thiết kế website của freewebapp.net sẽ hướng dẫn cho các bạn cách sử dụng block Dropcap. Bạn hãy kham khảo mẫu thực hiện dưới đây để chúng ta cùng tiến hành tạo ra nó.

Mẫu thực hiện:

ó lẽ cần phải trải qua tuổi thanh xuân mới có thể hiểu được tuổi xuân là khoảng thời gian ta sống ích kỷ biết chừng nào. Có lúc nghĩ, sở dĩ tình yêu cần phải đi một vòng tròn lớn như vậy, phải trả một cái giá quá đắt như thế, là bởi vì nó đến không đúng thời điểm. Khi có được tình yêu, chúng ta thiếu đi trí tuệ. Đợi đến khi có đủ trí tuệ, chúng ta đã không còn sức lực để yêu một tình yêu thuần khiết nữa.

Hướng dẫn sử dụng block Dropcap

Bước 1: Thêm block Dropcap. Bằng cách nhấn vào dấu cộng ở một block row bất kỳ. Khi đó bảng Add Element hiện lên. Bạn chuyển qua tab massive và chọn vào block Dropcap.

Bước 2: Bảng Dropcap Setting mở ra. Bạn nhấn vào nút Preview & Load Preset trong mục Main Preset để chọn mẫu.

Trong bảng Presets Previews, bạn tiến hành nhấn vào một mẫu mình thích. Ở đây mình sẽ chọn vào mẫu 3.

Bước 3: Trở lại bảng cài đặt Dropcap, bạn lướt xuống mục Typography. Trong mục này có phần Letter, bạn tiến hành thay đổi chữ cái bên trong. Thành chữ cái đầu tiên trong văn bản của bạn.

Khi thay đổi chữ cái bên trong phần Letter xong. Bạn tiếp tục xuống dưới mục Background. Chỗ phần color bạn có thể tùy biến thay đổi màu sắc của nền chữ theo ý thích của bạn. Ở đây mình sẽ để màu background nguyên theo mẫu.

Bạn lướt xuống tiếp tới mục Padding. Tại đây bạn thay đổi lại một số thông tin sau: Top: 16; Bottom: 16; Left: 23; Right:23.