Trang web Wix từ Scratch - Thư viện lưới

• Có Thể 12, 2024

Trong hướng dẫn này, chúng tôi sẽ thêm một bộ sưu tập vào trang web Wix mà chúng tôi đã tạo từ một mẫu trống. Bắt đầu từ đầu là một cách tuyệt vời để tìm hiểu những điều cơ bản.

Không giống như các mẫu Wix không thể thay thế cho nhau, bạn có thể chuyển đổi các loại thư viện để có giao diện mới bất cứ lúc nào. Có rất nhiều loại phòng trưng bày, từ lưới Masonry đến Honeycomb. Mỗi phòng trưng bày có những tính năng riêng. Chúng ta hãy xem bộ sưu tập Grid (dọc) cơ bản.

1. Nhấp vào biểu tượng Plus trong menu bên trái và chọn Thư viện từ danh sách.
   
   
2. Di chuột qua từng hình thu nhỏ của bộ sưu tập để xem bản xem trước và mô tả.
   
   
3. Bây giờ, kéo thư viện Grid vào trang.
   
   
4. Sử dụng Handles Resize để thay đổi kích thước lưới theo ý muốn. Tôi thay đổi kích thước lưới thành chiều rộng 980 trang.
   
   Tại thời điểm này bộ sưu tập có một số hình ảnh giữ chỗ. Hãy giữ chúng ngay bây giờ và làm việc tùy chỉnh các cài đặt thư viện cho nhu cầu của chúng tôi.
   
   Cài đặt thư viện lưới
   
   Chia tỷ lệ hình ảnh - Bạn có tùy chọn cho hình ảnh của mình được cắt hoặc thu nhỏ để phù hợp với khung hình. Cài đặt Autocrop sẽ tự động cắt hình ảnh cho vừa với khung và tùy chọn Fit sẽ thay đổi kích thước hình ảnh cho vừa với khung.
   
   Khi được nhấp - Bạn có ba tùy chọn cho những gì xảy ra khi nhấp vào hình ảnh bộ sưu tập. Một lựa chọn cho không có gì xảy ra. Thứ hai là để hình ảnh mở khi bật lên. Thứ ba là mở một liên kết. Hầu hết thời gian, cửa sổ bật lên là một lựa chọn tốt vì hình ảnh được hiển thị ở kích thước lớn hơn. Nhưng nếu bạn muốn gửi khách truy cập đến một trang khác, hãy sử dụng tùy chọn A Link Opens.
   
   
5. Chọn Thư viện và nhấp vào biểu tượng Cài đặt trong menu bật lên.
   
   
6. Trong cửa sổ Cài đặt lưới, tìm phần Cách thực hiện hình ảnh. Chọn Autocrop hoặc Fit.
   
   
7. Trong phần Khi nhấp vào, đặt một trong ba tùy chọn.
   
   Thiết kế phòng trưng bày
   
   Như đã đề cập ở trên, bạn có thể chuyển đổi thiết kế thư viện bất cứ lúc nào. Nhưng hãy tiếp tục bằng cách tùy chỉnh thiết kế lưới của chúng tôi. Đối với thiết kế lưới, chúng ta có thể tùy chỉnh đường viền, góc, bóng và văn bản.
   
   
8. Với bộ sưu tập vẫn được chọn, nhấp vào biểu tượng Thiết kế (cọ vẽ).
   
   
9. Đối với cài đặt Border, chúng ta có thể thay đổi màu sắc, độ mờ và độ rộng của đường viền. Hãy giữ cài đặt mặc định của chiều rộng được đặt thành 0 và do đó không có viền.
   
   
10. Corner Radius - Nhấp vào biểu tượng cho Corner Radius và đặt bán kính góc trên cùng bên trái theo ý muốn. Vì biểu tượng liên kết cho biết ba góc còn lại sẽ cập nhật để khớp.
    
    
11. Bóng - Chọn biểu tượng Bóng. Để thêm bóng đổ, nhấp vào chuyển đổi Bật bóng và đặt Góc, Khoảng cách, Kích thước, Làm mờ và Màu / Độ mờ cho bóng.
    
    
12. Văn bản - Nhấp vào biểu tượng T để đặt các tùy chọn cho cài đặt Tiêu đề, Mô tả và Văn bản khác. Hãy thay đổi văn bản từ mặc định sang chủ đề văn bản Đoạn 1 của chúng tôi. Lặp lại cho văn bản Mô tả.
    
    Cài đặt Giao diện
    
    Đối với thiết kế thư viện Lưới, chúng tôi có thể kiểm soát số lượng cột và hàng cho hình thu nhỏ. Chúng tôi cũng có thể kiểm soát khoảng cách giữa các hình thu nhỏ và cách văn bản được hiển thị trên hình ảnh.
    
    
13. Với thư viện vẫn được chọn, nhấp vào biểu tượng Bố cục từ menu bật lên.
    
    
14. Sử dụng thanh trượt để đặt số lượng cột và hàng. Thêm nhiều cột và hàng sẽ dẫn đến hình ảnh thu nhỏ nhỏ hơn trong lưới.
    
    
15. Bạn có thể sử dụng thanh trượt Khoảng cách để tăng lượng pixel giữa các hình thu nhỏ. Thêm nhiều không gian hơn sẽ làm giảm kích thước của hình thu nhỏ.
    
    
16. Dưới thanh trượt là phần căn chỉnh văn bản. Bạn có tùy chọn cho văn bản hiển thị bên trái, bên phải hoặc giữa.
    
    

Ảnh chụp màn hình được sử dụng bởi sự cho phép của Wix.com, Inc.