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

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

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

상기화면에서 

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

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

이 부분이 있으며,

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

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

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

모바일 모드로 전환하게 되면 상기와 같이 모바일처럼 화면비율이 맞춰서 나오게 됩니다.
이 상태에서 작업을 진행하시면 되십니다.

예를 들어 문장의 사이즈를 PC와 다르게 표현하고 싶다면 문장의 수정모드로 들어가시면

이렇게 나오고 '크기' 부분을 보면

이렇게 모바일 기기표시가 뜹니다.

이렇게 모바일기기가 표시된다면 현상태의 수정이 PC와 분리되어 적용되어진다는 의미로 보시면 됩니다.

그렇다면 아래의

이 부분도 PC와 별개의 설정이 적용된다는 의미입니다.

이렇게 문장들 뿐 아니라 위젯들간의 간격을 PC와 따로 조정이 가능하며, 레이아웃 구성도 별개로 하실 수 있습니다.

추가의 예로 PC에서는 노출되지만 모바일에서는 나오지 않게 하고싶거나 그 반대로 할때 섹션이나 컬럼, 또는 개별 위젯을 선택 하신 후 왼쪽 수정모드의

고급을 선택하신 후 하단에 있는

을 펼쳐보시면

이렇게 설정이 가능합니다.

이것을 응용한다면 PC용 섹션과 모바일용 섹션을 별개로 만들어서 각자의 레이아웃을 구성하실 수 있습니다.

참고로 실제 모바일기기와 100% 일치하는것은 아니기때문에 작업 후 꼭 모바일로 확인하여 주시면 됩니다.
수정 후 모바일에 수정결과가 보이지 않는다면 PC에서 같은 경로의 페이지로 들어가서 상단의 '캐시삭제'를 한번 해주시기 바랍니다.

이상입니다. 감사합니다^^