사용자팁 게시판

[엘리멘터 편집] PC와 모바일 모드 변경하여 수정하는 방법

유용한팁
작성자
관리자
작성일
2024-06-11 12:01
조회
454

홈페이지의 컨덴츠(이미지+문구) 수정시 기본적으로 PC모드에서 작업이 이루어 집니다.
아래의 내용은 기본적으로 '엘리먼트 편집'에서 이루어지는 과정입니다.

아래는 PC모드의 편집화면입니다.

27nA4HA6Hw+FwOBwOh8Ph+CEA8P8D85CEXSpMfy8AAAAASUVORK5CYII=

상기화면에서 

KOBpqOHqK6+jDaaBFEh5+81DisNg9ZeTlkZWWTrfzSU4kUbyZMBLBvwExIqIEQn41ei48YvYQt2piTFFeHCG5rr4nOjk45FktpZiQd9lhuuGSuYukIlcq2+oUX2LBlO41dw+SUT6cgLRq9Xhew8H76ezpoaO8hNiGJaK2Do3WNmERRhdr7RDFFU1ZSxpQpFerkkfX7qllww1UkS4WNTM5TVwVSVm4KjYihoKSC1LgwKbNQyStlDjUrSmRVOmOReESx4hEp60yGkJSeRp5cZxHPR1k0NiHMQ7dVUiJKtb27V6xEHHliTOzNO3junb0sWL6MRL2Dg82jLL9guoRvNqzuKCZNmyKeaQKFRUVEi2esLEdvNY8wYvaQfwrFpXP04w4zkpyUrE6qqXEOsW3nbo51jlBWkCXy9qEBV4Kg+h1v0hNRzqTcGDas3U5Gdgw7tu3DoY8gURTw5k2bpBwhMcrHhm17GNVFkyOyGRXi4fDuzTQMaakoLyNOZ8Mensk5ouzDo2JI1AzyyiuvsnHLZrbvPcac5StIFcUZKvKu4BOvvKe9ke2Hu4lhCG18Bv5RqygvlxjZVFoVp6ShBmeIkZKqWeQn6AiNjBNjnPwFKi74f1gslgl4OVfUAAAAAElFTkSuQmCC

이 문구의 부분을 모바일에서 본다면 글씨가 커서 2줄로 나올 가능성이 높습니다.
따라서 이러한 부분들은 모바일에서 별도로 조정을 해주면 좋습니다.

이럴경우 왼쪽 하단에 보시면

ZoKIeaBRuhDQvrFfFWmX3ciqHTTuhZebQqSNat65+VFFozIj742rCjlgaGxtVCkL22WdHTcvKas4ATfPVJj9fhj9vZqKrYxeYmSlvP9RQBgqFQljXihaZKsxqCjVCCGm+gP8HwDZvDxs3G6kAAAAASUVORK5CYII=

이 부분이 있으며,

AgMa6g9bBNvxXs0+tFhlmwOMie5EEkuRJILkeRCJLkQSS6UZDLp+guGYhiG+yXz+bz7JUulksslgW9TgGrVmgJTuQAAAABJRU5ErkJggg==

아이콘이 반응형 모드 아이콘인데 클릭하면 상단 중앙에 아래의 아이콘이 뜹니다.

h8+olN7ho+XMnXzXBhY+m0F879ql0Hr9CGduPIHeH9KPePo0wn4ZtrKyiPS5W1iSYbv0xq5hJBKQ0Z+Vn19HYuaVjLrL1YF5A7sQWF9Cah9QLFdloMTYgmDQh9Z3d99XlPbzoie4Db5mJ2FVUCotO+YxmasDI+erB8Z9MFLFwEgVL5GkiisYqWJgpIqBkSoGRqoYGKliYKSKgZEqBkaqGBip8pimyZ18UuPJ5XIMjJQA3wCQ0fJfPrH5VwAAAABJRU5ErkJggg==

이중에서 모바일 기기를 선택하면 화면이 모바일용으로 레이아웃이 구성됩니다.
엘리멘터 최신버전의 경우 반응형 아이콘 모드를 찾지않아도 상단 중앙에 디바이스가 고정으로 표시되고 있으니 참고하시면 됩니다.

[추가내용]
상기처럼 왼쪽하단에 반응형 아이콘이 없는경우가 있을 수 있는데 이는 엘리먼트 플러그인의 업데이트에 따라 최신 버전의 경우 별도의 전환모드 없이 바로 상단 중앙에 디바이스 변경모드가 rBAoYIUn5cAKgQJWCBSwQqCAFQIFjIT4ArT5MRhMKYSLAAAAAElFTkSuQmCC 바로 보이게 되니 모바일모드 선택하고 작업을 진행하시면 되십니다.