워드프레스 에디터 플러그인 가운데 엘리멘터(elementor)는 인기가 높다.
하지만 국내 환경에서 아임웹 등 다양한 솔루션들이 개발되어서 활용되고 있지만,
다양한 환경의 웹표준을 지켜주고, 무료 설치형으로 워드프레스는 단연 최고의 웹솔루션이다.
그가운데 최근 다양한 디바이스 스크린 사이즈를 위한 반응형에 최적화되고,
다양한 기능과 스킨, 템플릿 제공하는 엘리멘트는 매우 유용하다.
필자는 국내에는 아직 많은 후기가 없는 이 플러그인을 차례차례 포스팅을 하려고 한다.
그 가운데 오늘은 엘리멘터에서 웹을 제작할 때 모바일로 반응형이 되었을 때
PC 기준으로 2열 배치된 레이아웃을 그대로 모바일에서도 2열로 배치하는 방법을 알아보고자 한다.
이에 대한 구체적인 안내는 영문버전 여기서 확인이 가능하다.
위와같이 보통 elementor 에서 PC기준 2구조 레이아웃의 경우 모바일에서 불러낼 경우 아래와 같이상태가 된다.
물론 이러한 배치가 필요할 때가 있지만, 수가 많은 레이아웃의 경우 불필요한 스크롤이 생길 때가 많아서 이를 2열 또는 그 이상으로 배치할 필요가 있다.
그러한 경우 먼저 모바일 보기로 변경한다. 방법은 위와같이 PC그림의 아이콘을 눌러 핸드폰 모양으로 바꾸어 주면된다.
그러면 위와 같이 상하로 모바일 미리보기 화면이 나오며, 레이아웃 상하 중 위의 것의 좌측 상단의 레이아웃 아이콘을 누르면 "칼럼 편집"이란 항목이 나온다. 그것을 클릭한다.
그러면 상단에 컬럼 너비를 "%"를 설정해주는 곳이 있다. 이곳에 "50"을 작성하고, 다시 아래 레이아웃 칼럼편집으로 들어가 동일하게 아래의 레이아웃도 컬럼너비를 "50%"를 맞추어 준다.
그러면 위와 같이 각 비율을 50%로 자동 맞추게 된다. 3열, 4열 이렇게 변경할 경우에도 "%"를 수정해서 열에 표시될 갯수를 설정해 주면 간단하다.
알고보면 매우 쉬운 기능이지만, 필자는 이 기능을 잘 몰라서 삽질했던 기억이 있다. 워드프레스 엘리먼터로 웹사이트를 제작하는 분들에게 유용한 기록이 되었으면 한다.
댓글