brunch

매거진 IMPREZA 테마 활용

라이킷 8 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Nov 26. 2021

#5-4. 남은 페이지들 (About, Contact)

IMPREZA 테마로 포트폴리오 사이트 만들기

메뉴 중 추가해야 할 페이지 두 개가 남았습니다. > About, Contact

일반 페이지 구성 시에도 알아두면 좋은 정보가 있어 이번 글에서 한 번 소개해 보겠습니다.

1. About 페이지 만들기

About 페이지와 같이 회사 정보를 소개하는 화면을 구성할 때에는 크게 섹션(덩어리)을 나눠서 제작을 하면 편리합니다. 나머지는 섹션 내에서의 공간(주로 padding) 그리고 각 요소들(h태그들, 텍스트, 이미지) 간의 거리(주로 margin 또는 separator)를 고려해서 넣어주면 되겠습니다.

로우(섹션)를 페이지 빌더에 추가를 할 때에는 상하단의 공간만 우선 고려하면 됩니다. 콘텐츠의 넓이는 초반에 테마 옵션에서 최대 1100px로 지정을 해 뒀기 때문에 모든 콘텐츠는 1100px이라는 공간 내에서 있게 됩니다.

디자인을 보면 섹션과 섹션 사이에 옅은 줄(border)이 보이는데, 로우 편집을 열어 보면 섹션 아래쪽에 줄을 넣는 디자인 옵션이 있습니다. 마지막 섹션에는 배경색이 들어가 있습니다. 이 부분도 로우 편집에서 스타일 옵션으로 지정하면 되겠습니다. 요소에 들어갈 수 있는 css 스타일들에 대해서는 거의 모두 디자인 탭에 있다고 보시면 되겠습니다. (※ 디자인 탭은 css를 코드로 적는 것을 대신해 줍니다)

세 번째 섹션은 좌측에 긴 이미지와 오른쪽에 텍스트들이 있는 구조입니다. 오른쪽의 텍스트의 양이 변경이 되더라도 항상 가운데 위치를 하면 좋은데, 이건 로우 구조가 flexbox 스타일로 만들어져 있기 때문에 쉽게 적용이 가능합니다. 로우 편집 > 열 > 칼럼의 콘텐츠 포지션을 'center'로 지정해 주면 되겠습니다.

참고사이트에서는 이미지와 오른쪽 텍스트들이 서로 양쪽에서 스르륵 등장하는 효과를 줬는데요, 페이지 빌더를 보면 각 요소들 뿐 아니라, 칼럼, 로우의 편집 > 디자인 탭에 Animation을 적용할 수 있는 옵션이 있습니다. 저는 왼쪽 칼럼은 좌측에서, 오른쪽 칼럼은 우측에서 1.5초의 딜레이를 두고 등장하라고 지정을 해 줬습니다. (위쪽 섹션에서 3개의 칼럼에도 등장 효과를 넣었기 때문에 다 나온 뒤 나올 수 있도록 딜레이를 줌)

마지막 로우(섹션)에는 조직원 소개를 위한 이미지 3개가 나오고, 마우스를 올려보면 간단한 프로필과 sns 링크가 표시됩니다. 이건 Impreza 테마에서 이미 개발된 'person'이라는 화면 요소를 넣어서 적용했습니다.

> https://impreza.us-themes.com/elements/person/

이렇게 적용을 하고 나면 About 페이지가 완료됩니다.

> http://oks-together.hol.es/portfol/about/

2. Contact 페이지 만들기

사이트에 Contact 페이지를 만들어서, 주요 연락처, 주소, 영업시간, 문의 폼 등을 표시할 수 있습니다. 먼저 완성된 페이지의 구조를 보여 드립니다. 위쪽 타이틀과 설명 글이 나오는 건 방금 완성한 About 페이지와 동일합니다. 로우를 템플릿으로 복사해다가 텍스트를 수정하면 됩니다.

두 번째 섹션에서 왼쪽의 텍스트들은 스크롤 시 고정이 되어야 합니다. 칼럼의 편집에서 전에 포트폴리오의 텍스트가 고정이 되도록 한 것처럼 옵션을 선택해 줍니다.

이제 구글 맵을 넣을 차례인데요, 화면 요소 중에 'Map'이라는 것을 넣어주면 지도를 쉽게 넣을 수 있습니다. 단, 구글 지도를 사이트에 넣으려면 이 지도를 쓰기 위한 'Google Maps API Key'를 발급받아야 하는데, 이건 구글 검색만 해봐도 많은 정보들을 얻을 수 있어서 설명은 생략했습니다. 키를 발급받은 후 테마 옵션 > Adbanced에 키를 입력해 주면 Map 요소로 구글 맵을 표시 하도록 할 수 있습니다.

혹시 키 발급이 어렵다면 'OpenStreetMap'으로 대체해서 표시를 할 수도 있습니다.

이제 문의 폼만 남았네요. 디자인을 보면 테마에서 개발해 놓은 폼 요소로도 다 넣을 수 있는 필드들이라 페이지 빌더 요소로 문의 폼을 넣어 봤습니다. 폼에 있는 네 가지 필드의 입력 정보들은 메일의 내용으로 보내지게 되고 이때 받을 메일과 메일의 제목, 제대로 발송되면 표시될 메시지도 설정 가능합니다.