엘리멘터 : 플렉스박스 컨테이너?

Elementor : Flexbox Container

엘리멘터(elementor)를 새로 설치한 후 '내부섹션' 위젯이 없어진 것을 알게되었을 때 얼마나 당황스러웠는지....

대신 처음보는 컨테이너라는 것이 있었지만.........도무지 익숙해지지 않았다.(아니..사용할 엄두가 나지 않았다. 플렉스박스를 사용하면 사이트 제작의 진도가 나가지 않았고 처음부터 막혔기 때문이다.) 한동안 엘리멘터를 새로 설치한 후에 바로 플렉스박스 컨터이너( flexbox container)를 비활성(img1) 한 채로 사용하곤 했다.

img1

검색해보니 엘리멘터에 플렉스박스 컨테이너가 추가된 것이 2년이 다 되어간다. 2022년 3월 22일 elementor 3.6.0버전 부터였는데...이 기능을 끄고 사용하는 것이 편했다.

엘리멘터를 이용해서 내가 구상한대로 화면을 하나하나를 만들어 나가는데에 전혀 어려움이 없었는데, 컨테이너가 등장한 이후로는 이게 불가능했다. 그나마 다행인 것은...2년이 지난 지금의 엘리멘터(3.19.0)도 여전히 예전 방식을 지원한다는 것이다. 며칠전.......

어느 블로그의 '익숙해지면 편하다'는 글을 읽고서 용기(?)를 내어 어제 하루종일 플렉스박스를 이용해서 작업을 해봤다. 기존에 만들어 놓은 사이트를 플렉스박스를 이용해서 그대로 구현해본 것이다. 한두가지 해결이 안될것 같은 문제들도  있었지만 결국엔 말끔히 정리되었다. 뭔가 개운한 느낌! 그렇다고 손에 익은 것은 아니지만.....

내가 작업하는 사이트의 핵심 뼈대는 대충 아래와 같다.

1. 페이지 전체의 배경이미지나 배경 오버레이 삽입

페이지 전체에 배경이미지를 넣는 경우에는....하나의 섹션에 배경 이미지를 넣은 후 그 섹션 안에 열과 행을 나눠서 모든 요소들을 집어 넣는 방식으로 페이지 하나를 완성한다. 테마에 따라서 다르겠지만 투명헤더를 사용한다면 헤더를 제외한 나머지를 하나의 섹션으로 만들어서 배경이미지를 넣는다. (물론 배경이미지를 안쓰는 경우도 있다.) 이 자체만으로는 컨테이너와 별 상관없는 작업일 수 있지만..꼭 그런것 만은 아니다. 나름의 해결책은 찾았다.

2. 특정 항목(특정 섹션)의 칼럼 반전기능(반응형)

이게 가장 커다란 문제점 중의 하나였다. 아래(img2)와 같이 화면을 구성하였을 때 pc에서는 아무런 문제가 없다.

img2

별다른 설정을 하지 않은채로 위의 페이지를 모바일에서 본다면 아래(img3)와 같이 나온다.

img3

위의(img3) 예에서 모바일에서 (img2)의 두 번째 줄도 첫 번째 줄처럼 디스플레이 되는 순서가 (이미지-제목2-상세내용2)로 보이게 하려면 기존(섹션방식)에는 해당섹션을 선택한 후 '고급'의 '반응형' 메뉴에서 "칼럼 반전"기능을 이용했다. 하지만 컨테이너 방식에서는 "칼럼 반전"기능이 사라져있다. 아래(img4)와 같이...

img4

이것을 해결할 방법을 찾는데에 시간이 많이 소요되었다. 해당 컨테이너를 선택한 다음 '컨테이너 편집'의 '레이아웃'을 보면 '항목'에 '방향'이라는 메뉴가 있다. 아래그림(img5) 참조.

img5

방향 옆에 있는 작은 모니터(?)같은 아이콘이 '데스크탑'에서의 화면설정이다. 아이콘을 클릭하면 세로로 '데스크탑, 타블릿, 모바일' 아이콘이 보인다. 선택한 컨네이너가 기본 데스크탑에서, 그리고 타블릿이나 모바일에서 어떻게 보이는지 일종의 미리보기인 셈이다. 여기서 모바일을 선택한 후 그 우측에 있는 화살표를 각 방향별로 선택할 때 마다 모바일에서 어떻게 보이는지 확인할 수 있다. 순서를 좌우나 상하로 변경해서 모바일이나 타블릿에서만 해당 컨테이너의 위젯을 상하반전이나 좌우반전 시킬 수 있다. 아래(img6)와 같다.

img6

위의 img6과 같이 데스크탑, 테블릿,모바일에서 각기 다른 방향으로 화면에 출력되게 변경할 수 있었다. 그 아래에 컨텐츠나 아이템을 정렬하는 설정도 있는데 아직까지는 필요성을 느끼지 못했지만 한가할 때(?) 이것저것 만져볼 생각이다.

기존 섹션방식에서 하나의 섹션 내부에 있는 두 개 이상의 컬럼을 모바일이나 태블릿에서 반전시켜서 보여주던 기능이 컨테이너 방식에서는 이렇게 바뀌었다.

그나마 반응형 작업에서 데스크탑, 태블릿, 모바일에서 특정 컨테이너(기존의 섹션)을 보이거나 감추는 기능은 살아있다. img4 에서와 같이.

3. 섹션 내부에 섹션 넣기(다중섹션, 다중 컨테이너)

이게 좀 익숙해 지지가 않는다. 단지 기존의 섹션이 컨테이너로 대체되었다고 생각하면 된다. 하나의 섹션에 다섯 개의 컬럼을 넣고 모바일에서도 다섯 개의 컬럼이 한 줄에 표시되도록 해야 한다면 각각의 컬럼의 폭을 픽셀이 아닌 전체화면의 비율로 20%로 설정하면 줄바뀜은 일어나지 않는다.

섹션 방식에서는 하나의 섹션안에 여러개의 내부섹션을 두어서 첫 번째 섹션은 3열2행, 두 번째 섹션은 1열3행, 세 번째 섹션은 4행4열 식으로 만들고 최종적으로 맨 처음 만든 하나의 섹션에 배경이미지를 넣으면 모두 적용되는 방식으로 만들었었다. 

컨네이너 방식에서는 첫 번째 컨테이너는 3행2열, 두 번째 컨테이너는 1열3행, 세 번째 컨테이너는 4행4열 식으로 만든 후에 최종적으로 나누지 않은 하나의 컨터이너를 만들고 여기에 기존에 만들었던 컨테이너를 순서대로 집어 넣으면 같은 효과를 볼 수 있다. 위의 1번 페이지 전체의 배경이미지나 배경 오버레이를 설정할 때에 이런식으로 작업을 진행했다.

시간이 지나면 익숙해지려나.....

---

p.s. 2024-04-13

엘리멘터와 워드프레스의 업데이트가 최근들어서 자주 일어나더니...뭔가가 바뀌기 시작했다. 일전에는 내부섹션 방식으로 작업한 것을 플렉스박스 환경에서 오픈하면 내용이 보이지 않았는데...지금은...플렉스박스와 내부섹션이 모두 공존하는 페이지를 만들 수 있다...분명 두어달 전만해도 불가능한 일이었다. 그리고 내부섹션을 플렉스박스로 변환해주는 기능이 보인다. 이게 원래부터 되던건데...내가 뒤늦게 발견한 것인지, 업데이트 후에 새로 추가된 기능인지는 모르겠다. 엘리멘터나 워드프레스의 릴리스노트를 보면 알 수 있을지는 모르겠지만...언제부터, 어떤 버전부터 활성화 된 것인지는 중요하지 않다. 플렉스 박스에 익숙해지고 나니.....엘리멘터가 더더욱 쓸만해 보인다...