Hôm nay, chúng ta sẽ khám phá thế giới thiết kế web, tập trung đặc biệt vào việc tạo hiệu ứng cuộn hình ảnh portfolio dài hấp dẫn bằng cách sử dụng Elementor trong WordPress. Nếu bạn đã sẵn sàng để thiết kế trang web của mình với một tính năng thu hút mắt, hãy tiếp tục theo dõi!”
[Cảnh mở đầu]
(Hiển thị đoạn phim về một trang web được thiết kế đẹp với một phần portfolio)
Được rồi, chúng ta bắt đầu nào. Tạo hiệu ứng cuộn hình ảnh portfolio dài là một cách tuyệt vời để trưng bày công việc của bạn một cách hấp dẫn. Với Elementor, quá trình này trở nên đơn giản và gây ấn tượng về mặt thị giác.
Cài đặt Elementor
Đầu tiên, hãy đảm bảo rằng bạn đã cài đặt và kích hoạt Elementor trên trang web WordPress của mình. Nếu chưa làm điều này, hãy vào phần Plugin, tìm kiếm Elementor, và nhấn ‘Cài đặt’ sau đó là ‘Kích hoạt’.”
Dưới đây là bài viết cách cài đặt plugin elementor.
Tiếp theo, tạo một trang mới hoặc chỉnh sửa trang hiện có. Khi đã ở trình chỉnh sửa Elementor, bạn sẽ có một bảng điều khiển trống để làm việc.
Thêm vùng chứa Portfolio
Nhấp vào nút ‘Thêm vùng chứa’ để chèn một phần mới. sau đó bạn thiết lập độ cao padding, margin của vùng chứa đó.”
Bây giờ, hãy thêm hình ảnh portfolio của bạn. Chỉ cần kéo và thả tiện ích ‘Hình ảnh’ vào vùng chứa.”
Thêm code css vào vùng chứa Hình ảnh
Trong các thiết lập của chứa, bạn hãy chọn vào tuỳ chỉnh css và thêm đoạn code css bên dưới để lên các hình ảnh portfolio của bạn. Bạn có thể điều chỉnh kích thước hình ảnh, khoảng cách và kiểu điều hướng để tạo ra một trải nghiệm cuộn mượt mà.”Người kể chuyện: “Để có được hiệu ứng cuộn dài, bật tùy chọn ‘Vòng lặp Vô Tận’. Điều này cho phép khách truy cập của bạn cuộn liên tục qua portfolio của bạn mà không bị gián đoạn.”
Và đây là kết quả! Với Elementor, việc tạo hiệu ứng cuộn hình ảnh portfolio dài và hấp dẫn trở nên dễ dàng và đầy ấn tượng. Đừng quên thử nghiệm với các kiểu và thiết lập khác nhau để portfolio của bạn nổi bật hơn.”
Phần Kết
Nếu bạn thấy hướng dẫn này hữu ích, hãy cho chúng tôi biết bằng cách nhấn nút thích và chia sẻ với những người thiết kế web khác. Đừng quên đăng ký trannguyenblog để không bỏ lỡ những nội dung thú vị tiếp theo. Hẹn gặp lại trong những bài blog khác nhau. Dưới đây là các đoạn css bạn thêm vào.
Hiding Overflow CSS
/*Image Overflow Hidden*/
selector{
height: 400px;
overflow-y: scroll !important;
overflow-x: hidden !important;
}
ScrollBar Color CSS
/*ScrollBar Design*/
selector::-webkit-scrollbar{
width: 4px;
background: #777777;
}
selector::-webkit-scrollbar-thumb{
background: red;
}
