워드프레스 무료 테마 Phlox로 웹사이트 만들기 3편 - 새로운 섹션을 추가하여 원하는 사이트 만들기

워드프레스 Pholx 무료 테마를 설치하고 기본적인 페이지를 수정하면서 웹사이트를 만드는 방법에 대해서 지난 1편과 2편 블로그 간단히 소개를 했었다. 지난 두 편의 블로그에서 설명했듯이, 무료 테마를 설치해서 가능하면 해당 테마의 페이지를 원하는 텍스트와 이미지로 수정해서 작업을 하는 방법을 기준으로 웹사이트를 제작하는 방법을 소개했다. 이번 편에서는 기본적인 페이지 레이아웃에 추가로 원하는 구조를 삽입하는 방법에 대해서 설명하고자 한다. 

 

워드프레스 테마를 다운로드하여서 데모 버전을 설치한 후 원하는 내용과 구조가 모두 있다면 좋겠지만, 간혹 중간중간 원하는 항목을 넣어야 하는 상황이 생기기도 한다. Phlox 테마는 Elementor라는 에디터를 사용하기에, 이번 편은 Elementor라는 에디터를 사용해서 새로운 내용을 삽입하는 방법을 다루어 보겠다. 

 

홈 페이지 상단 헤더 밑부분에 새로운 항목 추가하기

신규 섹션 추가하기

지난번 2편에 이어서 작업 중이던 메인 홈 페이지의 상단 헤더 바로 밑에 신규 항목을 추가해보자.  우선 아래 이미지에서 보이는 빨간 박스에 있는 + 표시를 눌러준다. 그럼 바로 아래 섹션과 그 위의 섹션 사이에 새로운 section이 생성된다. 

새로운 섹션 추가 방법

여기서 조금 알고 넘어가면 좋은 점으로 우측에 있는 Navigator 박스에서 보이듯이 각 섹션이 그 안에 들어가는 구성 요소들을 포함하고 있는 것을 확인할 수 있다. 새로운 섹션을 추가한다는 것은 마찬가지로, 해당 섹션 안에 원하는 요소들을 하나하나 집어넣어 원하는 모습으로 만들어가는 것이 새로운 항목을 추가하는 방법이다. 이번 신규 섹션 추가 연습에서는 헤딩 텍스트로 어필할 문구를 넣고, 그 밑으로 작은 텍스트로 부가 설명을 넣어보고자 한다. 아래 방법을 참고하자

섹션 레이아웃 선택

화면 분할 정하기

원하는 부분에 섹션을 추가하는 + 버튼을 누른 후에는, 그 섹션에 대한 구성을 편성할 수 있는 레이아웃 선택 창이 보인다. 이번 예시에서는 정가운데에 큰 텍스트와 그 밑으로 짧은 문구를 넣을 것이기에 나는 섹션을 분할하지 않고 크게 하나로 사용하는 것으로 선택을 한다. 만약 정가운데 텍스트를 놓는 게 아닌 다른 구상이 있다면 위에 이미지에 보이는 분할 화면 구성을 만들고자 하는 레이아웃으로 잘 선택하고 분할된 박스에 원하는 구성 요소를 넣어가면 된다. 

 

섹션 안에 inner section 추가

섹션 레이아웃이 선택되면 이제 해당 섹션 안에 원하는 구성 요소를 좌측 element 항목에서 선택해서 넣어주면 된다. 바로 구성 요소를 넣기 전에 개인적으로는 inner section을 하나 더 삽입하여 작업을 하는 편인데, inner section을 하나 더 추가함으로써 나중에 inner section안에 들어있는 구성요소를 통으로 복사 붙여 넣기 할 시에도 편하고, 문제가 생길 시에는 전체 섹션을 지우고 처음부터 수정할 필요 없이 해당 inner section만 제거하거나 수정하면 되기에 작업이 편리하다. 이 부분은 여기서 이렇게 설명해도 사실 직접 만들어 보면서 해보지 않으면 어떤 이야기인지 잘 이해가 안 될 수 있다. 나중에 inner section이 있으므로 작업이 편하게 진행되는 부분이 발생하면 그때 추가적으로 설명을 하면 이해가 될 것이다. 여러 이유에서 보험 차원으로 inner section을 넣어 작업하는 것을 추천한다. 

 

innser section 100%  width 만들기

위에 말한 것처럼 섹션 추가 후에 inner section을 추가하게 되면 두 개의 column이 기본적으로 들어가게 된다. 하지만 필자는 위에 말했던 것처럼 두 개로 분할되지 않은 하나의 통으로 만들어진 섹션에 정중앙에 heading text와 짧은 문구를 넣을 것이기에 위와 같이 둘로 섹션이 나눠지면 가운데로 원하는 텍스트를 배치할 수가 없다. 그럴 때 섹션을 분리되지 않게 하나의 통으로 유지하고, inner section도 하나로 유지할 수 있는 방법이 있다. inner section을 추가했을 때 자동으로 생성된 두 개의 column 중 하나의 column을 삭제해 주면 된다. 필자도 elementor 에디터를 처음 사용해보는데 inner section을 추가 시에 기본적으로 2개의 column이 자동 생성되어 들어가는 듯하다. 그럴 때 위에 이미지에 보이는 것처럼 자동 생성된 두 개의 column 중 하나의 column을 삭제해 주면 한 개의 column만 남으면서 정 가운데에 텍스트나 원하는 구성 요소를 위치시킬 수 있다. 

 

원하는 텍스트 추가

이제 어떤 방식으로 각각의 섹션에 내용이 추가되는지 조금은 이해가 될 것이다. 텍스트 추가를 위해 위의 navigator 박스를 확인하면 어떤 구성 요소들을 넣었는지 확인할 수 있다. 우선 Heading이라고 불리는 제목 텍스트 요소를 넣었다. Heading 은 제목 타이틀로, 일반적인 텍스트를 넣는 것보다 더 크고 눈에 띄는 텍스트를 넣을 수 있다. 일반 텍스트로 분류되지 않고 제목 텍스트로 웹에서 인지되는 요소이다. 좌측 elementor 요소 화면에서 Heading을 선택하여 드래그 앤 드롭으로 만들어둔 섹션의 column 부분에 넣어주면 된다. 그러면 좌측에 Heading 요소에 대해서 수정할 수 있는 화면이 나오고 거기에서 텍스트를 넣고, 중앙 정렬을 해주는 등 세부 작업을 진행할 수 있다. 

 

Heading 밑으로는 Spacer라는 요소를 넣어줬는데, 공간을 줘서 하단에 붙을 작은 텍스트와 구분을 해주는 역할을 한다. 사실 Heading 항목에서 Advance 탭을 선택해서 텍스트 하단으로  margin이나 padding으로 공간을 넣어줄 수 있는데, 개인적으로 spacer라는 요소를 넣어서 공간 분리하는 것을 추천한다. Spacer는 이미지와 텍스트 사이, 기타 요소와 요소 사이들에 넣어서 구분을 해주는 용도로 많이 사용된다. 다른 곳에 응용해서 사용해봐도 좋다. 

 

마지막으로 작게 들어갈 텍스트는 Text editor라는 요소를 선택해서 넣어줬다. Heading 항목과 비슷하게 원하는 텍스트를 넣고 중앙 정렬을 해줬다. Text editor는 기본적으로 일반 문서 텍스트 크기로 글자가 보인다. 물론 style탭이나 advanced 탭을 통해 조금 더 원하는 스타일로 수정해줄 수 있다.

 

최종적으로 수정해본 신규 섹션

디테일 수정하여 완료하기

각 요소를 직접 만져보고 작업해보면서 원하는 스타일로 신규 섹션을 만들어보자. 필자는 재충 위와 같이 섹션 배경에 이미지를 추가하고 Heading 텍스트와 작은 텍스트 사이를 줄이고, 섹션의 높낮이에 padding을 추가해서 최종적으로 위와 같은 섹션을 만들어 보았다. 우선 기본적으로 텍스트나 요소들의 자리를 잡아주고 각 요소 별로 style이나 advanced 탭을 잘 활용해서 원하는 모습으로 만들어 주면 된다. 

 

그럼 오늘은 신규 섹션을 추가하는 기본적인 방법을 배워보았다. 더 응용한다면 슬라이더로 화면이 넘어가는 섹션도 넣을 수 있고, 영상이 플레이되는 화면도 넣을 수 있다. 활용할 수 있는 방법은 다양하다. 나중에 조금씩 응용하여 신규 섹션을 만드는 방법을 설명하도록 하겠다.