엘리멘터 빌더 섹션 컬럼 자유 자제로 설정한다면?
엘리멘터 페이지 빌더로 워드프레스 웹사이트를 디자인하기 위해서 가장 먼저 알아야 할 것은 역시 섹션과 컬럼에 대한 이해입니다. 오늘은 엘리멘터 빌더 섹션 그리고 컬럼이 무엇이고 어떻게 사용하고 활용 방식은 무엇인지 전달해 드리도록 하겠습니다.
엘리멘터 플러그인 관련 영상 자료는 새로 네이버 카페를 열었습니다. 본 포스팅이 인사이트 제공을 위한 설명이라면 영상 자료는 실제 사용법을 알려드리는 것으로 준비했으니 항상 포스팅을 읽어 본 후에 개념을 가지고 영상을 확인한다면 도움이 될 거로 생각합니다.
엘리멘터 빌더 섹션 앤드 컬럼
섹션과 컬럼만 이해하면 반응형은 끝!
엘리멘터 빌더가 코딩을 모르는 사람에게 도움이 된다는 것은 실제 섹션과 컬럼을 통해 모든 레이 아웃을 구축할 수 있기 때문입니다. 엘리멘터 빌더 섹션 자체를 이해하는 게 어려운 일은 아니지만 상황에 따라 원하는 레이 아웃으로 만들 수 있어야 웹디자인이 가능합니다.
섹션과 컬럼이란 하나의 페이지를 구성할 때 가장 기본이 되는 단위인데요, 섹션이 가장 큰 단위이고 다음이 컬럼 그리고 내부 섹션과 내부 컬럼으로 페이지는 구성됩니다.
앞에 본 이미지와 같은 구조는 기본적인 레이 아웃으로 하나의 섹션에는 다수의 컬럼을 만들 수 있고, 그 컬럼 안내 내부 섹션을 넣고 또다시 내부 컬럼을 여러 개 만들 수 있죠.
하지만 일반적으로 워드프레스 블로그나 홈페이지를 디자인하는 경우 평균 1개에서 3개까지 만들고 각각의 위젯을 설치하게 됩니다.
사실 엘리멘터 빌더 섹션 조정은 절대 어려운 일이 아니기 때문에 처음에 배울 때 기본 공식처럼 적용하는 좌우 픽셀(px)만 기억하기를 바랍니다.
엘리멘터 섹션 만들기 기초 세팅
페이지에서 섹션을 만들 때 빈 페이지에서 “새 섹션 추가” 버튼을 클릭하면 12개의 구조나 나타납니다. 기본적으로 하나의 컬럼 보다는 2개의 컬럼을 선택해서 디자인을 시작하는 게 좋습니다.
그 이유는 폭이 너무 넓다 보면 사이즈 감각이 떨어지고 폰트를 구성할 때 전체 섹션을 이용하는 일은 거의 없기 때문이죠, 또한 모바일 반응형을 연습하는 과정에서도 투 컬럼을 통해 상하 패딩(간격)까지 조절하는 것도 연습할 수 있습니다.
그럼, 기초 세팅을 위해서 섹션 편집기 오른쪽 끝에 있는 “고급”란에서 외부 여백과 내부 패딩값을 알려 드릴 테니 적용해 보시기 바랍니다. 앞서 이야기한 것처럼 포스팅은 이론적인 이유와 필요한 세팅 값을 참고하시고 적용은 실제 영상을 참고하세요
엘리멘터 빌더 섹션 패딩 설정값, 섹션 레이아웃 넓이 1,500px 기준
- (PC) 좌, 우 간격 – 100px
(MOBILE) 좌, 우 간격 – 15px
(TABLET) 좌, 우 간격 – 20px - 상, 하 간격 – 없음
엘리멘터 빌더 컬럼 편집하기
컬럼은 기본 세팅 값이 없습니다. 디자인에 따라 응용해야 하는 요소이고, PC 버전에서 컬럼은 기본적으로 가로로 배열되지만 모바일에선 세로로 배열됩니다.
이와 같은 특성 때문에 모바일 화면에서 가로 배열 투 컬럼을 구성해야 할 경우엔 모바일 화면으로 변경한 상태에서 엘리멘터 컬럼 편집기 레이 아웃 컬럼 너비를 50%로 설정합니다.
다른 컬럼도 마찬가지로 50%로 설정해 주면 두 개의 컬럼이 가로 배열로 다음과 같은 형태로 구성됩니다.
이처럼 간단하게 페이지 구성(레이 아웃)을 변경할 수 있으며, 다음 시간에 준비할 세부 섹션을 배치하는 곳이 바로 컬럼입니다.
섹션과 함께 컬럼 또한 워드프레스 페이지나 글 페이지를 디자인할 때 가장 먼저 세팅해야 하는 요소인데, 컬럼 패딩이나 외부 여백을 설정해야 할 경우는 모바일 화면에서 이미지를 전체 화면 크기로 확대할 필요가 있을 때만 사용합니다.
이 내용과 관련된 실제 구동 방식도 카페에 등록된 영상을 통해 직접 확인할 수 있습니다.
섹션과 컬럼 이해와 활용이 디자인 능력입니다.
구조만 알면 다음은 알아서 척척
필자가 워드프레스를 처음 알게 된 후부터 지금까지 엘리멘터 빌더를 쭉 사용한 이유는 바로 엘리멘터 빌더 섹션 활용으로 어떤 레이 아웃도 가능하다는 걸 느꼈기 때문입니다. 즉 섹션과 컬럼만 완전히 이해하고 자유자재로 활용할 수 있게 된다면 다음은 너무나 쉽습니다.
특히 위젯을 넣고 컬럼 패딩을 조절해서 상하좌우 간격을 조절한 배경 안에 타이틀과 텍스트를 배열하는 능력에 따라 디자인 실력이 가늠된다고 저는 믿습니다.
따라서 포스팅이나 영상을 본 후에도 다양한 방식으로 섹션과 컬럼을 만들고 조절해서 창의적이고 균형 잡힌 레이 아웃을 구축하는 연습은 늘 계속해야 합니다.
오늘은 엘리멘터 빌더 섹션 그리고 컬럼 첫 강의로 간격을 조절하고 모바일에서 컬럼을 배열하는 방법을 소개해 드렸습니다.
앞서 알려드린 섹션 초기 세팅 값은 PC나 모바일 태블릿에서 어떤 와이드 폭에 적용해도 적당한 패딩 간격이니 그대로 사용하는 게 좋습니다. 오늘 준비한 내용은 여기까지입니다.
2024.01.29
에디터 – 민서인
