워드프레스 엘리멘터: 내부 섹션 위젯이 표시되지 않는 경우 (플렉스박스 컨테이너 vs. 섹션)

네이버 카페를 통해 엘리멘터에서 내부 섹션 위젯이 사라졌다는 질문이 간혹 올라옵니다. 기존에는 섹션을 추가하는 방식이었지만, 엘리멘터 3.6 버전부터 Flexbox Container(플렉스박스 컨테이너)가 도입되었습니다. 플렉스박스 컨테이너를 비활성화하고 기존의 섹션을 사용할 수 있지만, 플렉스박스 컨테이너에 익숙해지면 기존보다 수월하게 레이아웃 작업이 가능하게 될 것입니다.

워드프레스 엘리멘터: 내부 섹션 위젯이 사라졌습니다

오랫동안 엘리멘터를 사용하였다면 섹션 안에 내부 섹션을 추가하는 방식에 익숙해져 있을 것입니다.

하지만 다음 그림과 같이 "내부 섹션" 위젯이 표시되지 않고, 대신 레이아웃 부분에 "컨테이너" 위젯이 표시될 수 있습니다.

Elementor 3.6에서 플렉스박스 컨테이너가 도입되었습니다.

플렉스박스 컨테이너 구조와 섹션-컬럼 구조 차이점

	플렉스박스 컨테이너 구조	섹션-컬럼 구조
페이지에 추가하는 방법	에디터에서 '+' 기호를 클릭하거나 컨테이너 위젯을 그래그하여 에디터에 추가	'+' 기호를 클릭하여 에디터에 섹션 추가
위젯 위치	컨테이너 내부에 직접 추가	섹션 내의 컬럼에 추가
위젯 너비	기본적으로 인라인(Inline)	기본적으로 전체 폭(Full width)
중첩(Nesting)	무제한 중첩	하나의 내부 섹션
위젯 방향	Column, Row, Column Reverse, Row Reverse	컬럼 또는 인라인 위치
반응형 디자인	각 기기에 맞게 위젯 또는 컨테이너의 순서를 커스텀 가능	컬럼 역전 또는 섹션 복제
정렬	Flex-Start, Flex-Center, Flex-End	Left, Center, Right
하이퍼링크 설정	컨테이너를 감싸서 하이퍼링크 설정	위젯에 하이퍼링크 설정. 섹션이나 컬럼에는 불가

플렉스박스 컨테이너를 이용하는 경우 컨테이너 내부에 컨테이너를 추가하여 원하는 대로 레이아웃을 만들 수 있습니다.

"+" 기호를 클릭하여 컨테이너를 추가하는 경우 방향을 지정할 수 있고, 컨테이너 편집에서 방향 등 각종 설정을 변경할 수 있습니다.

위의 그림은 가로 방향으로 3개의 항목이 외부 컨테이너에 포함되어 있습니다.

아래 그림에서는 외부 컨테이너 안에 추가된 컨테이너를 보여줍니다. 세 개의 컨테이너가 추가되어 있으면 방향은 위에서 아래 방향(세로)으로 되어 있습니다.

여러 개의 위젯이나 컨테이너를 추가하는 경우 모바일에서 너비를 지정하거나 방향을 지정하여 모바일에 최적화할 수 있습니다.

실제로 만져보면 쉽게 적응이 가능할 것입니다.

플렉스박스 컨테이너 활성화/비활성화

엘림네터 설정에서 플렉스박스 컨테이너 사용 여부를 설정할 수 있습니다.

워드프레스 관리자 페이지 » 엘리멘터 » 설정 » 특징 탭을 클릭합니다.

참고로 한국어 버전에서는 "특징"이라는 용어가 사용되었지만, 보다 적합한 번역은 "기능"입니다. 영어 버전에서는 Features라는 용어가 사용되었습니다. Features는 특징이라는 의미도 있지만, IT에서는 보통 "기능"으로 번역됩니다.

MS 용어 검색.

아래로 스크롤하여 플렉스박스 컨테이너 옵션을 활성화 또는 비활성화할 수 있습니다.

가급적 활성화하여 플렉스박스 컨테이너를 사용하는 것이 좋은 것 같습니다. 

참고

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교

https://avada.tistory.com/3046

해외웹호스팅: 클라우드웨이즈 vs. 블루호스트 vs. 카페24 비교 (Cloudways vs. Bluehost vs. Cafe24)

https://avada.tistory.com/2335

워드프레스 GeneratePress 테마 라이선스 (+요금제)