brunch

매거진 IMPREZA 테마 활용

라이킷 5 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Dec 28. 2022

#12-5. About, Contact 페이지 만들기

미니멀 디자인 워드프레스 포트폴리오 홈페이지

참고 템플릿에서 아직 구현하지 않은 페이지들을 확인해 보겠습니다.

About - 텍스트, 이미지, 공간, 구분선을 이용해서 화면이 구성돼 있습니다. 필요시 그 안에서 콘텐츠를 칼럼으로 나누어 표시도 합니다. 맨 아래는 Contact 페이지로 갈 수 있는 버튼 구조가 있습니다. (※ 각 포트폴리오의 맨 하단에도 같은 모양의 구조가 표시) 페이지의 배경색 → #c9d1b1

Contact - 텍스트, 칼럼, 링크들이 있고, 중간에는 메일로 문의를 받을 수 있는 폼(Form)이 있습니다. 페이지의 배경색 → #5492c9

1. About 페이지 만들기

페이지 포스트 타입으로 'About'이라는 이름의 페이지를 만듭니다.

페이지 빌더를 이용해서 각종 화면 요소들(텍스트, 이미지, 공간 등)을 추가합니다. 본문 텍스트, H1~H6까지의 폰트 스타일은 사이트 작업 초기 미리 설정을 해 주었기 때문에 어떤 태그인지만 선택하면 제목, 부제목, 일반글을 쉽게 표시할 수 있습니다.

페이지의 맨 아래에는 'Contact'로 갈 수 있는 버튼이 있는 구조가 표시되어야 하는데, 같은 구조가 포트폴리오의 맨 하단에도 표시 돼야 하므로 재 사용 가능한 블록으로 만들어서 한 곳에서 편집하면 좋습니다. 이때 섹션 안에 또 다른 섹션이 들어가면 미리 약속된 padding이나 margin이 적용돼 버리므로, 페이지에 연결될 블록의 섹션 태그는 표시되지 않도록 합니다. (Exclude Rows and Columns → Inside selected Reusable Block)

페이지의 배경색은 로우(섹션) 편집, 디자인 탭에서 따로 지정하면 되겠습니다.

About 페이지

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

2. Contact 페이지 만들기

문의 접수용 페이지를 위해 'Contact'라는 이름으로 페이지를 하나 추가합니다. About 페이지와 비슷한 구조로 콘텐츠들을 나열한 다음, 페이지의 배경색은 #5492c9로 설정했습니다.

메일 문의를 접수받을 수 있는 폼도 화면 요소들 중에 포함이 돼 있습니다.(기본적인 메일 폼은 따로 플러그인 추가 필요 없음) 'Contact Form'요소를 넣고, 필요한 필드를 구성합니다. 메일 문의를 받을 메일 주소와, 발송 성공 후 메시지, 버튼 텍스트 및 스타일도 지정 가능합니다.