11월 29, 2024
엘리멘터 섹션과 컬럼 반응형 워드프레스 홈페이지 만들기의 시작
워드프레스 홈페이지를 운영 목적에 맞게, 그리고 반응형으로 만들기 위해서는 엘리멘터 섹션과 컬럼 레이 아웃을 이해하고 자유롭게 변형할 수 있어야 합니다. 이것은 데스크탑과 모바일에서 폰트나 이미지를 원하는 데로 디자인하기 위해 사이트 구조를 설정하는 것에 관한 이야기입니다.
반응형 홈페이지 디자인, 엘리멘터 섹션과 컬럼 이해하기
무엇이든 원리에 대한 이해가 뒷받침되지않는다면 창의적인 활동이 어렵습니다. 엘리멘터 빌더도 역시 마찬가지며 특히 오늘 다루는 섹션과 컬럼 디자인은 일정한 원칙이 존재하는 영역이 아니기 때문에 더욱 그렇습니다.
따라서 초기에는 영상 강의를 보면서 따라 하는 게 좋지만 기본기가 갖춰지면 다양한 레이 아웃을 엘리멘터 섹션과 컬럼이란 요소를 활용해서 창의적인 디자인을 만들어 볼 수 있어야 합니다.
엘리멘터 빌더를 처음 접하게 되면서 만지는 요소이기 때문에 많은 분들이 이것을 잘 다루는 것이 얼마나 중요하고 PC와 MOBILE 그리고 TABLET에서 새롭게 설정하는 부분에 별도로 신경을 쓰지 않는 것 같습니다.
이것이 똑같은 디자인으로 보이는 웹사이트가 시장에 많은 이유이기도 합니다.
강조하지만 워드프레스 홈페이지 만들기 과정에서 엘리멘터 섹션과 컬럼 자체를 완벽히 이해하지 못하면 반응형 웹사이트 구축이 어렵습니다.
다만 방법은 한 가지만 있는 게 아니란 걸 엘리멘터를 다루다 보면 자연스럽게 알 수 있고, 이를 이해했을 때, 여러분은 남과 다른 특별한 디자인을 구현할 수 있게 될 것입니다.
엘리멘터 페이지 빌더 초기 설정 변경하기
엘리멘터 섹션과 컬럼 디자인에 앞서 초기 설정된 값을 변경해야 합니다.
과거와 달리 최신 엘리멘터 버전에서는 세부 섹션 위젯이 사라지고 플렉스박스 컨테이너가 생겼습니다. 물론 엘리멘터에서 더 나은 기능이라 생각하고 업데이트 했지만 우리는 불편한 걸 사용할 필요가 없습니다.
따라서 엘리멘터 설정 영역에서 그리드 컨테이너를 비활성화 하는 게 가장 먼저 해야 할 일입니다. 방법은 워드프레스 어드민 페이지에서 엘리멘터 – 설정 – 특징으로 이동한 뒤에 “플렉스박스 컨테이너 설정 비활성화”로 변경해 주면 됩니다
웹사이트 그리드 폭(섹션 설정)은 일관성이 있어야 합니다.
다음은 사이트 전체 레이 아웃을 결정하는 것입니다. 사전 계획에 따라 섹션을 전체 넓이로 할 것인지 지정 넓이로 할 것인지를 선택하는 일입니다. 본래 웹사이트 디자인을 시작하기 전 세 가지를 결정해야 하는데, 그중에서도 사이트 전체 사이즈를 가장 먼저 선택합니다.
이게 결정되어야 메뉴와 로고가 들어가는 헤더 부분에 폭도 결정해서 테마 사용자 정의하기를 통해 디자인할 수 있고 세부 페이지들도 일관성 있는 그리드 값을 유지하며 디자인해 가는 것입니다.
추천하고 싶은 사이트 폭은 전체 넓이가 아니라면 1400PX 그리드에 좌우 마진을 100PX로 잡으면 콘텐츠 구역이 1200PX로 디자인 될 것입니다.
동영상에선 전체 폭으로 웹사이트를 설정한 뒤 엘리멘터 섹션을 설정하고 있습니다.
엘리멘터 섹션과 컬럼 디자인 영상 확인하기.
이렇게 두 가지 초기 설정이 끝났으면 이제 엘리멘터 페이지 빌더 섹션과 컬럼 설정을 시작하는데, 일반적으로 이때부터가 웹사이트 디자인을 시작하는 단계입니다.
물론 사이트 폭을 결정한 뒤에도 워드프레스 홈페이지 만들기를 시작하기 전 웹사이트 컬러(브랜드 컬러)와 보조 컬러, 텍스트 컬러와 버튼 컬러 등 결정해야 할 부분은 많지만, 이 부분은 추후 톤앤매너 원칙을 설명하며 다시 포스팅을 준비해 보겠습니다.
여기까지 엘리멘터 빌더로 반응형 워드프레스 홈페이지 만들기를 처음 시작하는 분들이 꼭 알아야 할 요소를 정리해 드렸고, 이제 이 내용을 기억하고 실제 엘리멘터 빌더를 사용해 웹사이트 레이 아웃을 반응형으로 구축하는 방법을 영상으로 확인해 보시기 바랍니다.
준비한 영상이 도움이 되길 바라며, 이번 포스팅이 엘리멘터 빌더를 이해하는 시작이 되었기를 바랍니다.
Related posts
11월 27, 2024
10월 27, 2024
10월 23, 2024
