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 sẽ hơi phức tạp. Bạn cần căn chỉnh các cột và các phần theo chiều dọc và chiều ngang để đạt được bố cục “căng để lấp đầy” đáp ứng. Nếu không có sự liên kết này, các phần tử của cột có độ cao khác nhau sẽ không thể điều chỉnh trên màn hình.
- Tại sao chúng ta cần phải căn chỉnh?
- Làm thế nào để các cột hoặc các phần làm việc cho một 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ố chiều rộng đáp ứng Sử dụng ẩn tràn
- Chăm sóc vị trí
- Đơn vị tương đối
- Kiểm soát độ sâu của từng yếu tố bằng chỉ số Z
- Thủ thuật về chức năng trùng lặp
- Bù đắp
- Nguyên 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ể, chúng tôi khuyên bạn nên có sự đồng nhất về hình thức nội dung. Nó không nên được ném ở đó- vứt đi- chỉ vì cái quái gì đó.
Với sự liên kết 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 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 con có kích thước khác nhau bên cạnh nhau trong cùng một cột.
Làm thế nào để các cột hoặc các phần làm việc cho một 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 không thể thực sự làm điều đó ngoài một phần nhất định. Các widget này có liên quan đến cột mà chúng ở 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 tiện ích từ cột bên phải vào cột trung tâm hoặc theo cách bạn thích.
Nhưng làm như vậy sẽ chỉ có lợi cho khách truy cập máy tính để bàn vì nó sẽ ổn 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 do 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ể trải nghiệm cả ba cột được xếp chồng lên nhau. Phần tử sẽ không còn xuất hiện trong cột giữa như trên máy tính để bàn.
Mặc dù, bạn có thể điều chỉnh một cách thông minh chế độ xem trên thiết bị di động với một 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. Vì vậy, nó không sụp đổ bất cứ nơi nào.
Đố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 đặt vào phần bố trí 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 một điều bạn phải ghi nhớ là nội dung trong một cột không thể được căn chỉnh với các tùy chọn dọc ba cột đầu tiên, tức là trên cùng, giữa và dưới cùng.
- Hàng đầu
- Ở giữa
- Dưới cùng
Đối với vấn đề đó, có * ba tùy chọn mới giúp điều 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 trắng giữa các vật dụng ở đầu và cuối ở cạnh cột. Các vật dụng được cách đều nhau, tức là có khoảng cách bằng nhau giữa chúng.
- *Không gian xung quanh - không gian giữa các vật dụng bằng nhau và các cạnh bằng một nửa kích thước của không gian giữa các vật dụng.
- *Không gian đồng đều - không gian giữa các vật dụng là đồng nhất - nó bằng nhau giữa, trước và sau chúng.
- 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 con 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 bên trái
- Center: đặt các biểu tượng vào giữa cột
- Kết thúc 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 tiện ích con ở phần đầu và phần cuối ở cạnh cột. Các widget được cách đều nhau tức là có khoảng cách bằng nhau giữa chúng
- Không gian xung quanh - không gian giữa các tiện ích bằng nhau và các cạnh bằng một nửa kích thước của không gian giữa các tiện ích
- Không gian đồng đều - không gian giữa các vật dụng là đồng nhất - nó bằng nhau giữa, trước và sau chúng
Để khắc phục sự cố chiều rộng đáp ứng Sử dụng ẩn tràn
Khi nói đến sự xuất hiện của một trang web trên thiết bị di động, có nhiều khả năng bạn có thể gặp phải một vấn đề trong đó một tiện ích với định vị tùy chỉnh tràn qua chiều rộng của một cột.
Điều này gây ra một tình huống thực sự khó chịu cho khách truy cập di động, nơi họ có thể cuộn theo chiều ngang. Và đây không phải là thứ bạn muốn cho trang web của bạn. Điều này có thể được khắc phục bằng cách:
Cài đặt bố cục> Đặt tùy chọn Overflow Ẩn
Bằng cách này, diện tích vượt quá sẽ bị cắt và không cần cuộn theo chiều ngang
Chăm sóc vị trí
Bạn cũng cần phải chăm sóc các vị trí của 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.
Vị trí tuyệt đối là vị trí của phần tử so với phần hoặc cột mà bạn đang ở 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 trong tầm nhìn 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 bạn 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 phần tử. Để định vị tuyệt đối, bạn nên sử dụng các đơn vị tương đối vì nó sẽ giúp 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 phần tử 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 đáp ứng cho các kích thước màn hình khác nhau.
Kiểm soát độ sâu của từng yếu tố bằng chỉ số Z
Nếu bạn định sử dụng định vị 'tuyệt đối' hoặc 'cố định' cho các widget, sẽ có rất nhiều trường hợp trong đó hai hoặc nhiều widget có thể chồng chéo lên nhau, tức là chúng được xếp chồng lên nhau "trên cùng". 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à cho phép bạn chọn widget 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ó định vị tùy chỉnh, thì có thể nhấp chuột phải không hoạt động.
Nhưng, kìa. Đo không phải sự thật. Chức năng trùng lặ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ó cùng một vị trí tùy chỉnh chính xác, 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ử khác (tạo ấn tượng rằng không có bản sao nào được tạo.).
Nói một cách dễ hiểu, nếu bạn tạo một cột thành công, 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ì tính năng 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 nhân bản để 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, thì cột đó sẽ chồng lên cột cũ. Bạn có thể bị nhầm lẫn. Nhưng đừng lo lắng, bạn có thể chỉ cần kéo nó và sau đó sử dụng nó trong thiết kế trang web của bạn.
Bù đắp
Có những trường hợp bạn cần thiết lập hiệu ứng cho nội dung trang web của mình. Với Elementor, bạn có thể dễ dàng thiết lập độ lệch. Vì vậy, nếu bạn đặt độ lệch 500px từ bên trái, thì không gian sẽ được để lại xung quanh nội dung dựa trên đầu vào của bạn. Tương tự, bạn cũng có thể đặt offset ở phía bên phải. Một phương pháp hay là đặt cả độ lệch trái và 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 thiết lập hiệu ứng cho nội dung trang web của mình. Với Elementor, bạn có thể dễ dàng thiết lập độ lệch. Vì vậy, nếu bạn đặt độ lệch 500px từ bên trái, thì không gian sẽ được để lại xung quanh nội dung dựa trên đầu vào của bạn. Tương tự, bạn cũng có thể đặt offset ở phía bên phải. Một phương pháp hay là đặt cả độ lệch trái và 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.
Nguyên 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 đị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ẽ dẫn đến thiết kế đáp ứng tốt hơn. Sự thay đổi 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. "Tương đối", chúng tôi có nghĩa là thay đổi các đơn vị 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 trình tạo 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ừ điện thoại di động hoặc máy tính bảng. Với sự trợ giúp của căn chỉnh phần và cột, bạn có thể làm cho trang web của mình hoàn hảo một cách thực sự dễ dàng.
Bạn tìm thấy những tùy chọn này ở đâu? Họ không tồn tại. Cái này có dành cho Elementor cao cấp không? Nếu vậy, bạn nên đề cập đến nó trong bài viết của mình để mọi người không lãng phí thời gian của họ khi đọc qua nó.
Hola,
Estoy maquetando con Elementor Pro.
Các biểu ngữ Quiero poner dos, una pegado a la izquierda y otro pegado a la derecha de la pantalla. Para ello he creado: - biểu ngữ una seccion para cada.
- un encabezado con una frase, a la cual he puesto de fondo una imagen.
Una de ella deberia ir pegada a la derecha de la pantalla (margen izquierda 0 Tưởng tượng). Algun consejo? Muchas gracias!
Xin chào, điều đầu tiên tôi xem xét sẽ là cài đặt căn chỉnh theo chiều dọc cột được mô tả trong phần đầu tiên của bài đăng này.
Chúc mừng,
Buongiorno, tutto chiaro, grazie!
Ma mi stavo domandando se è ridibile inserire tre giànhe (con tre pulsanti una sotto l'altro) nella stessa colina. Cerco di spiegarmi meglio: vorrei dividere una sezione in do colonne.
In quella di sinistra metterei la foto di una cover, e nella colana di sinistra vorrei mettere tre pulsanti (una sopra l'altro), equidistanti e centrati rispetto alla cola di sinistra, che rimandano ai tre modelli di smartphone per i Qual è disponibile la bìa trong foto. Sto cercando ovunque, ma non trovo nulla che indichi che si rida.
Sono aperta a tutti i suggerimenti
Grazie
Scusate, ho appena capito đến giá vé (l'ho capito per errore). Scusate il xáo trộn e grazie lo stesso
Xin chào, OK tuyệt, chắc chắn điều đó là có thể, bạn thậm chí có thể căn giữa nội dung theo chiều dọc trong mỗi cột
Yo tengo un problemma con la alineación que không có dung môi logro. El Contenido se queda a un lado, la imagen, titulo y texto. No logro centrarlo (solo hay una columna pero es como si la mitad o más no se pudieran usar, ni poner otro cuadro de texto) No me había pasado nunca y no se que más probar. Ha sido al editar para tamaño móvil, se ha quedado así a un lado todo cuando cambio a escritorio! Alguien sabe que puede ser? He probado todo lo que pone en el artículo y parece que nada funciona 🤗
Xin chào, tôi nghĩ bạn phải bắt đầu bằng cách kiểm tra tất cả các căn chỉnh của mình trong các phần, sau đó là các cột rồi đến khối nội dung. Cũng có thể CSS của chủ đề của bạn đóng một vai trò trong sự liên kết này.
chúc mừng!
je m'arrache les cheveux car je n'arrive pas à aligner 3 colones à l'horizontale.
Sur le brouillon elles paraissent toutes parfaitement alignées, mais lorsque je prévisualise les modifs, les colines se retrouvent toutesosystemriquées et de différentes tailles (Largeurs et hauteur) sur le côté gauche de l'écran. je voudrais qu'elles fassent toutes la même taille et qu'elles soient parfaitement aligner. Nhận xét công bằng?
Chào,
Có phải vấn đề căn chỉnh đang xuất hiện trên đầu các cột không?
Hola, tengo instalado elementor pro pero cuando agrego una nueva sección no aparecen las opciones de alineación ngang y alineación dọc.
Hay que instalar un tonico adicional? Gracias
Xin chào, bạn có phiên bản Elementor miễn phí hay Pro không? Đó có thể là vấn đề.
Hola, tengo la version pro de elementor y no figura ninguna de las opciones que indicas, que puede ser?
Xin chào, những tùy chọn nào từ Elementor pro không được hiển thị?
ê,
ich habe im footer verschiedene widget. das oberste ist immer eine tiêu đề, darunter stichpunkte. da ich nicht zwei unerschiedliche textarten in einen kasten schreiben kann (h4 und p) muss ich das in 2 section machen. wo kann ich nun den trừu tượng và der wordpress phần zueinander verringern? es ist zwischen der headline und dem text einfach zu viel platz.
danke für eure hilfe
Xin chào, có một số tùy chọn để kiểm duyệt khoảng cách giữa các văn bản: nó có thể là phần, cột hoặc widget lề hoặc phần đệm HOẶC nó có thể là tùy chọn phông chữ như chiều cao dòng.
Xin chúc mừng.
l'ajustement de la taille des colines avec la souris est bloqué, không thể de modifier leur taille. Bình luận puis je solutionner ce problème. Merci d'avance.
Xin chào, bằng cách nhấp vào góc trên bên phải của cột, sau đó bạn có thể chỉnh sửa kích thước trong cài đặt Elementor.
Bonjour je souhaite créer un tableau de 4 lignes et 3 colournes, et souhaite fusionner les 4 case de la première colonne pour y insérer une image… Un idée?
Merci!
Xin chào, không thể hợp nhất các ô, bạn cần tạo một dòng và sao chép nội dung của mình vào đó
Bonjour Tristan,
Avant tout, merci pour le temps que vous consacrez à nous (qui nous arrachons les cheveux… sur des coquilles qui… 🙂)
Voilà, je sais qu'il est could de superposer des éléments Horizontaux / verticaux sur Elementor.
Mais, không thể de retrouver la thao '. Et…. je m'arrache les cheveux du đảo chính. Mon besoin (pour Correre à notre maquette): Une section Gloale dans laquelle mon fond est une vidéo en liên tục, et par tráng miệng, j'ai trois lignes de textes qui viennent se superposer (dont une qui aura du code pour une giảng en quay tiếp tục. Mais ça, c'est autre đã chọn).
C'est l'alignement qui me pose souci. Không có ...?
Je désespère… Merciiiii
Xin chào, đối với những gì bạn cần làm, tôi sẽ sử dụng nền video trong phần Elementor chính, sau đó thêm phần bên trong với các cột và văn bản
Bonsoir,
Est-il could de modifier la position des éléments d'une page?
J'ai un menu déroulant qui passe sous les éléments en dehors de son bloc… Nhận xét người yêu cầu aux autres blocs d'être en arrière? Merci d'avance!
Xin chào, vâng, điều đó là có thể nhưng bạn cần sử dụng CSS tùy chỉnh. Trong Elementor, bạn có thể chọn {z-index: 100}