Cách căn chỉnh các phần và cột của Elementor

Khi làm việc với Elementor , bạn sẽ nhận thấy việc tùy chỉnh vị trí các phần và cột hơi phức tạp. Bạn cần căn chỉnh các cột và phần theo chiều dọc và chiều ngang để đạt được bố cục "kéo giãn để lấp đầy" có khả năng thích ứng. Nếu không căn chỉnh như vậy, các phần tử trong các cột có chiều cao khác nhau sẽ không tự điều chỉnh trên màn hình.

• Tại sao chúng ta cần phải thống nhất?
• Các cột hoặc phần hoạt động như thế nào trong thiết kế đáp ứng (Responsive Design)?
• Làm thế nào để căn chỉnh các phần và cột trong Elementor?
• Để khắc phục sự cố về chiều rộng đáp ứng, hãy sử dụng thuộc tính `overflow: hidden`
• Chú trọng đến việc định vị
• Đơn vị tương đối
• Kiểm soát độ sâu của từng phần tử bằng chỉ số Z
• Mẹo xử lý chức năng trùng lặp
• Bù trừ
• Quy tắc vàng
• Phần kết luận

Tại sao chúng ta cần phải thống nhất?

Trong mỗi cột hoặc phần, nội dung có thể thuộc các danh mục khác nhau. Nội dung có thể ở dạng hình ảnh, văn bản và xếp hạng. Để tạo giao diện gọn gàng, nên đảm bảo tính đồng nhất về hình thức nội dung. Không nên chỉ đơn giản là nhồi nhét nội dung một cách tùy tiện.

Với cách bố trí hợp lý, bạn có thể làm cho trang web trông gọn gàng và trang nhã hơn, tránh cảm giác rối mắt. Tùy chọn căn chỉnh cho phép bạn sắp xếp nhiều widget có kích thước khác nhau cạnh nhau trong cùng một cột.

Các cột hoặc phần hoạt động như thế nào trong thiết kế đáp ứng (Responsive Design)?

Elementor 2.5 cho phép bạn tùy chỉnh vị trí thiết kế và nội dung. Với tính năng tùy chỉnh vị trí mới, bạn có thể di chuyển các widget đến bất kỳ vị trí nào. Tuy nhiên, bạn không thể làm điều đó vượt ra ngoài một phần nhất định. Các widget này được định vị tương đối so với cột mà chúng nằm bên trong. Điều này có thể gây ra vấn đề về khả năng đáp ứng của thiết kế.

Giả sử bạn có bố cục ba cột. Với sự trợ giúp của định vị tùy chỉnh, bạn có thể kéo và thả một widget từ cột bên phải vào cột giữa, hoặc bất kỳ vị trí nào bạn muốn.

Nhưng làm như vậy chỉ có lợi cho người dùng máy tính để bàn vì giao diện sẽ trông ổn đối với họ. Tuy nhiên, nó sẽ gây ra vấn đề nếu truy cập trang web từ thiết bị di động vì Elementor xếp chồng các cột theo chiều dọc trên thiết bị di động.

Vì vậy, thay vì có ba cột cạnh nhau, bạn có thể thấy cả ba cột được xếp chồng lên nhau. Phần tử sẽ không còn xuất hiện ở cột giữa như trên máy tính để bàn nữa.

Mặc dù bạn có thể tinh chỉnh giao diện di động một cách thông minh bằng một cài đặt ẩn, nhưng không có gì đảm bảo rằng đa số người dùng có thể tìm thấy nó. Vậy tại sao lại làm người dùng khó chịu? Thiết kế đáp ứng và thích ứng là giải pháp đúng đắn. Như vậy sẽ không bị lỗi ở bất cứ đâu.

Về vấn đề đó, bạn cần chú ý đến mối quan hệ giữa tiện ích và cột chứa nó.

Làm thế nào để căn chỉnh các phần và cột trong Elementor?

Đối với mỗi phần/cột, hãy vào phần bố cục và thiết lập các tùy chọn căn chỉnh sau theo yêu cầu của bạn:

• Căn chỉnh dọc: Bạn có thể chọn cài đặt cho các widget từ những tùy chọn sau. Tuy nhiên, bạn cần lưu ý rằng nội dung trong một cột không thể được căn chỉnh theo ba tùy chọn căn chỉnh dọc đầu tiên, tức là trên cùng, giữa và dưới cùng.
• Đứng đầu
• Ở giữa
• Đáy

Về vấn đề đó, có ^* ba tùy chọn mới giúp bạn dễ dàng căn chỉnh nội dung theo ý thích.

• ^*Khoảng cách giữa các widget – thiết lập khoảng cách giữa các widget ở đầu và cuối cột. Các widget được đặt cách đều nhau, tức là có khoảng cách bằng nhau giữa chúng.
• ^*Khoảng cách xung quanh – khoảng cách giữa các widget bằng nhau, và các cạnh có kích thước bằng một nửa khoảng cách giữa các widget.
• ^*Phân bố đều – khoảng cách giữa các widget là đồng đều, bằng nhau ở phía trước và phía sau chúng.

• Căn chỉnh ngang: với tùy chọn này, bạn có thể thực hiện định vị nội tuyến và căn chỉnh các widget nội tuyến nằm trên cùng một hàng theo chiều ngang. Bạn có thể căn chỉnh nội dung cột theo chiều ngang bằng các tùy chọn sau:
• Nút Bắt đầu - căn chỉnh tất cả các biểu tượng sang bên trái
• Trung tâm: đặt các biểu tượng vào giữa cột
• Kết thúc - đặt tất cả các biểu tượng sang bên phải
• Khoảng cách giữa các widget – khoảng cách giữa các widget ở đầu và cuối cột. Các widget được đặt cách đều nhau, tức là có khoảng cách bằng nhau giữa chúng
• Khoảng cách xung quanh – khoảng cách giữa các widget bằng nhau, và các cạnh có kích thước bằng một nửa khoảng cách giữa các widget
• Khoảng cách đều nhau – khoảng cách giữa các widget là đồng đều – khoảng cách này bằng nhau ở phía trước và phía sau chúng

Để khắc phục sự cố về chiều rộng đáp ứng, hãy sử dụng thuộc tính `overflow: hidden`

Khi nói đến giao diện website trên thiết bị di động, rất có thể bạn sẽ gặp phải vấn đề khi một widget có vị trí tùy chỉnh bị tràn ra khỏi chiều rộng của cột.  

Điều này gây ra tình trạng rất khó chịu cho người dùng truy cập bằng thiết bị di động, khi họ phải cuộn ngang. Và đây không phải là điều bạn mong muốn cho trang web của mình. Vấn đề này có thể được khắc phục bằng cách:

Cài đặt bố cục > Đặt tùy chọn Tràn thành Ẩn

Bằng cách này, phần nội dung vượt quá sẽ bị cắt bỏ, và không cần phải cuộn ngang nữa

Chú trọng đến việc định vị

Bạn cũng cần chú ý đến vị trí của các cột. Bạn có thể thiết lập vị trí tùy chỉnh với Elementor 2.5 — tuyệt đối và cố định.

Định vị tuyệt đối là việc xác định vị trí của một phần tử so với phần hoặc cột mà nó đang nằm bên trong. Vì vậy, nếu bạn sử dụng định vị tuyệt đối cho một phần tử hoặc một đoạn, thì đoạn đó sẽ không di chuyển theo cửa sổ của người truy cập.

Vị trí cố định khác với vị trí tuyệt đối ở chỗ nó cho phép phần/thành phần giữ nguyên vị trí so với tầm nhìn của người xem. Vì vậy, nếu người dùng cuộn trang, thành phần đó vẫn sẽ ở nguyên vị trí.

Đơn vị tương đối

Khi thiết kế trang web, bạn sẽ thấy có nhiều cách để định vị các phần tử. Đối với định vị tuyệt đối, nên sử dụng đơn vị tương đối vì nó sẽ giúp thiết kế đáp ứng hoạt động hiệu quả hơn trên các kích thước màn hình khác nhau.

Đơn vị tương đối tự điều chỉnh dựa trên chiều rộng và chiều cao tương đối của màn hình, cho phép các phần tử hoặc phần tử tự thay đổi kích thước và tạo ra thiết kế đáp ứng tốt hơn. Nếu bạn chọn sử dụng pixel, bạn cần tạo nhiều phần đáp ứng khác nhau cho các kích thước màn hình khác nhau.

Kiểm soát độ sâu của từng phần tử bằng chỉ số Z

Nếu bạn sử dụng định vị 'tuyệt đối' hoặc 'cố định' cho các widget, sẽ có nhiều trường hợp hai hoặc nhiều widget chồng lên nhau, tức là chúng được xếp chồng lên nhau. Bạn có thể tránh điều này bằng cách sử dụng cài đặt chỉ số Z thông thường. Điều này sẽ cho phép bạn kiểm soát độ sâu và chọn widget nào hiển thị ở phía trước.

Mẹo xử lý chức năng trùng lặp

Nếu bạn sử dụng chuột phải để sao chép một phần tử có vị trí tùy chỉnh, có thể thao tác nhấp chuột phải sẽ không thành công.

Nhưng, hãy xem. Điều đó không đúng. Chức năng sao chép đã hoạt động hoàn hảo và đã sao chép được phần tử. Chỉ là vì mỗi phần tử đều có cùng vị trí tùy chỉnh, nên phần tử được sao chép lại nằm CHÍNH XÁC trên phần tử kia (tạo ấn tượng rằng không có bản sao nào được tạo ra).

Nói một cách đơn giản, nếu bạn tạo thành công một cột, bạn có thể sao chép cột đó bất cứ khi nào cần. Ngoài ra, hãy đảm bảo rằng các cột bạn tạo không sử dụng định vị tùy chỉnh. Nếu có, thì chức năng sao chép bằng chuột phải sẽ không hoạt động. Tuy nhiên, bạn có thể sử dụng chức năng sao chép để khắc phục hạn chế này và sao chép cột.

Kéo nhẹ phần tử trên cùng một chút và nó sẽ hiển thị phần tử còn lại. Cả hai phần tử đều ở đó. Ngoài ra, khi bạn sao chép một cột, nó sẽ chồng lên cột cũ. Bạn có thể bị bối rối. Nhưng đừng lo lắng, bạn chỉ cần kéo nó và sử dụng trong thiết kế trang web của mình.

Bù trừ

Có những trường hợp bạn cần đặt khoảng cách (offset) cho nội dung trang web. Với Elementor, bạn có thể dễ dàng thiết lập khoảng cách này. Ví dụ, nếu bạn đặt khoảng cách 500px từ bên trái, thì sẽ có khoảng trống xung quanh nội dung dựa trên giá trị bạn nhập. Tương tự, bạn cũng có thể đặt khoảng cách ở phía bên phải. Nên đặt cả khoảng cách bên trái và bên phải có giá trị tương tự nhau để nội dung được căn chỉnh đúng cách trên màn hình.

Có những trường hợp bạn cần đặt khoảng cách (offset) cho nội dung trang web. Với Elementor, bạn có thể dễ dàng thiết lập khoảng cách này. Ví dụ, nếu bạn đặt khoảng cách 500px từ bên trái, thì sẽ có khoảng trống xung quanh nội dung dựa trên giá trị bạn nhập. Tương tự, bạn cũng có thể đặt khoảng cách ở phía bên phải. Nên đặt cả khoảng cách bên trái và bên phải có giá trị tương tự nhau để nội dung được căn chỉnh đúng cách trên màn hình.

Quy tắc vàng

Để có thiết kế đáp ứng tốt hơn, hãy sử dụng đơn vị tương đối. Điều này là do định vị tuyệt đối có thể phức tạp khi truy cập trang web từ một nền tảng khác. Sử dụng đơn vị tương đối để thiết kế các phần sẽ giúp tạo ra thiết kế đáp ứng tốt hơn. Sự thay đổi về chiều rộng có thể được xử lý hoàn hảo nhờ đơn vị tương đối. "Tương đối" ở đây có nghĩa là các đơn vị thay đổi như phần trăm hoặc chiều rộng hiển thị (VW), chứ không phải các đơn vị cố định như pixel.

Phần kết luận

Elementor là một trình tạo website cực kỳ thân thiện với người dùng. Tuy nhiên, đôi khi nó có thể gây khó khăn trong việc hiển thị website khi truy cập từ thiết bị di động hoặc máy tính bảng. Với sự trợ giúp của các phần và căn chỉnh cột, bạn có thể dễ dàng hoàn thiện website của mình.