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

Trong khi làm việc với Elementor , bạn sẽ nhận thấy rằng việc tùy chỉnh vị trí các phần và cột của mình 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 dài để lấp đầy” đáp ứng. Nếu không có sự căn chỉnh này, các thành phần của cột có độ cao khác nhau sẽ không điều chỉnh được trên màn hình.

• Tại sao chúng ta cần phải căn chỉnh?
• Cột hoặc phần hoạt động như thế nào đối với Thiết kế đáp ứng?
• Làm cách nào để căn chỉnh các phần và cột Elementor?
• Để khắc phục sự cố về độ rộng đáp ứng, hãy sử dụng tính năng ẩn tràn
• Chăm sóc định vị
• Đơn vị tương đối
• Kiểm soát độ sâu của từng phần tử bằng Z-Index
• Thủ thuật về chức năng trùng lặp
• Bù đắp
• Quy tắc vàng
• Phần kết luận

Tại sao chúng ta cần phải căn chỉnh?

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ó có thể ở dạng hình ảnh, văn bản và xếp hạng. Để có một cái nhìn tổng thể, nên có sự đồng nhất về hình thức nội dung. Nó không nên chỉ được ném vào đó- đổ đi- chỉ vì mục đích đó.

Với sự căn chỉnh tốt, bạn có thể làm cho trang web trông gọn gàng và sang trọng hơn - để nó trông không bị lộn xộn. Với tùy chọn căn chỉnh, bạn có thể điều chỉnh một số tiện ích có kích thước khác nhau cạnh nhau trong cùng một cột.

Cột hoặc phần hoạt động như thế nào đối với Thiết kế đáp ứng?

Elementor 2.5 cho phép bạn tùy chỉnh vị trí thiết kế và nội dung của mình. Với tính năng định vị tùy chỉnh 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 thực sự không thể làm điều đó ngoài một phần nhất định. Các tiện ích này có liên quan đến cột chứa chúng. Đ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 tính năng định vị tùy chỉnh, bạn có thể kéo và thả tiện ích từ cột bên phải vào cột giữa hoặc theo cách bạn muốn.

Nhưng làm như vậy sẽ chỉ mang lại lợi ích cho khách truy cập trên máy tính để bàn vì nó có vẻ ổn đối với họ. Tuy nhiên, nó sẽ gây ra sự cố nếu trang web được truy cập từ thiết bị di động vì Elementor xếp 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ể gặp phải tình trạng cả ba cột 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.

Mặc dù, bạn có thể điều chỉnh chế độ xem trên thiết bị di động một cách thông minh bằng cài đặt ẩn nhưng không có gì đảm bảo rằng phần lớn mọi người có thể tìm thấy nó. Vậy tại sao lại khiến người dùng thất vọng? Làm cho thiết kế đáp ứng và thích ứng là giải pháp phù hợp. Để nó không bị hỏng ở bất cứ đâu.

Đối với vấn đề đó, bạn cần chú ý đến mối quan hệ của tiện ích với cột bên trong.

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

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

• Căn dọc: bạn có thể chọn cài đặt cho các tiện ích theo sau. Nhưng có một điều bạn phải lưu ý là nội dung trong một cột không thể căn chỉnh theo 3 tùy chọn dọc cột đầu tiên tức là trên cùng, giữa và dưới cùng.
• Đứng đầu
• Ở giữa
• Đáy

Đối với vấn đề đó, có ^* ba tùy chọn mới giúp việc căn chỉnh nội dung theo ý thích của bạn thực sự thuận tiện.

• ^*Khoảng cách giữa – đặt khoảng cách giữa các vật dụng ở đầu và cuối ở cạnh cột. Các vật dụng có khoảng cách đều nhau, tức là có khoảng cách bằng nhau giữa chúng.
• ^*Không gian xung quanh – khoảng cách giữa các vật dụng 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 vật dụng.
• ^*Không gian đồng đều – khoảng cách giữa các vật dụng là đồng nhất – giữa, trước và sau chúng bằng nhau.

• Căn chỉnh theo chiều 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 tiện ích nội tuyến nằm trong cùng một hàng theo chiều ngang. Bạn có thể căn chỉnh nội dung của các cột theo chiều ngang bằng cách sử dụng các tùy chọn sau:
• Bắt đầu- căn chỉnh tất cả các biểu tượng sang trái
• Center: đặt các biểu tượng vào giữa cột
• End đặt tất cả các biểu tượng ở bên phải
• Khoảng cách giữa – khoảng cách giữa các vật dụng ở đầu và cuối ở cạnh cột. Các vật dụng có khoảng 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 vật dụng 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 vật dụng
• Không gian đồng đều – khoảng cách giữa các vật dụng đồng đều – giữa, trước và sau chúng bằng nhau

Để khắc phục sự cố về độ rộng đáp ứng, hãy sử dụng tính năng ẩn tràn

Khi nói đến giao diện của một trang web trên thiết bị di động, khả năng cao là bạn có thể gặp phải sự cố khi tiện ích có vị trí tùy chỉnh vượt quá chiều rộng của cột.  

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

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

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

Chăm sóc định vị

Bạn cũng cần quan tâm đến việc định vị các cột. Bạn có thể đặt định vị tùy chỉnh với Elementor 2.5 - tuyệt đối và cố định.

Định vị tuyệt đối là vị trí của phần tử so với phần hoặc cột mà bạn ở 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 phần thì phần đó sẽ không di chuyển dọc theo cửa sổ của khách truy cập.

Vị trí cố định khác với vị trí tuyệt đối vì nó cho phép phần/phần tử cố định theo quan điểm của khách truy cập. Vì vậy, nếu người dùng cuộn qua trang, phần tử sẽ ở đó.

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

Khi thiết kế trang web của mình, bạn sẽ thấy rằng có nhiều cách để bạn có thể định vị các thành phần. Để định vị tuyệt đối, bạn nên sử dụng các đơn vị tương đối vì nó sẽ làm cho thiết kế đáp ứng có nhiều chức năng hơn khi 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, do đó cho phép các thành phần hoặc phần tự thay đổi kích thước và thiết kế đáp ứng tốt hơn. Nếu bạn chọn sử dụng pixel thì bạn cần tạo nhiều phần phản hồi 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 Z-Index

Nếu bạn định sử dụng vị trí 'tuyệt đối' hoặc 'cố định' cho các tiện ích, sẽ có rất nhiều trường hợp hai hoặc nhiều tiện ích có thể 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ỉ mục Z thông thường. Điều này sẽ cho phép bạn kiểm soát độ sâu và cho phép bạn chọn những vật dụng nào xuất hiện ở nền trước.

Thủ thuật về chức năng trùng lặp

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

Nhưng, chờ đã. Đo không phải sự thật. Chức năng sao chép đã hoạt động hoàn toàn tốt và đã sao chép phần tử. Chỉ là vì mỗi phần tử có vị trí tùy chỉnh giống hệt nhau nên phần tử trùng lặp được xếp chồng CHÍNH XÁC lên trên phần tử kia (tạo ấn tượng rằng không có bản sao nào được tạo.).

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 vị trí tùy chỉnh. Nếu đúng như vậy thì việc sao chép sẽ không hoạt động với tùy chọn nhấp chuột phải. Tuy nhiên, bạn có thể sử dụng chức năng trùng lặp để khắc phục hạn chế và sao chép cột.

Kéo 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 yếu tố đều có rất nhiều ở đó. Ngoài ra, khi bạn sao chép một cột, nó sẽ xếp chồng lên cột cũ. Bạn có thể bị nhầm lẫn. Nhưng đừng lo lắng, bạn chỉ cần kéo nó và sử dụng nó trong thiết kế trang web của mình.

Bù đắp

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

Có những trường hợp bạn cần đặt chênh lệch cho nội dung trang web của mình. Với Elementor, bạn có thể dễ dàng đặt offset. Vì vậy, nếu bạn đặt độ lệch 500px từ bên trái thì khoảng trống sẽ được chừa lại xung quanh nội dung dựa trên thông tin đầu vào của bạn. Tương tự, bạn cũng có thể đặt offset ở phía bên phải. Đó là một cách tốt để đặt cả phần bù bên trái và bên phải ở một giá trị tương tự vì nội dung sẽ được căn chỉnh chính xác 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 các đơn vị tương đối. Điều này là do việc định vị tuyệt đối có thể khó khăn khi trang web được truy cập từ một nền tảng khác. Sử dụng các đơn vị tương đối để thiết kế các phần của bạn sẽ mang lại thiết kế phản hồi nhanh hơn. Sự thay đổi về chiều rộng có thể được xử lý hoàn hảo với sự trợ giúp của các đơn vị tương đối. Theo "tương đối", chúng tôi muốn nói đến các đơn vị khác nhau như phần trăm hoặc chiều rộng chế độ xem (VW), thay vì cố định các đơn vị như pixel.

Phần kết luận

Elementor là một công cụ xây dựng trang web siêu thân thiện với người dùng. Đôi khi, nó có thể đặt ra những thách thức trong việc hiển thị trang web nếu trang web được 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 tính năng căn chỉnh phần và cột, bạn có thể làm cho trang web của mình trở nên hoàn hảo một cách thực sự dễ dàng.