#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 페이지
> https://oks-dev.tk/minimalgrid/about/
2. Contact 페이지 만들기
문의 접수용 페이지를 위해 'Contact'라는 이름으로 페이지를 하나 추가합니다. About 페이지와 비슷한 구조로 콘텐츠들을 나열한 다음, 페이지의 배경색은 #5492c9로 설정했습니다.
메일 문의를 접수받을 수 있는 폼도 화면 요소들 중에 포함이 돼 있습니다.(기본적인 메일 폼은 따로 플러그인 추가 필요 없음) 'Contact Form'요소를 넣고, 필요한 필드를 구성합니다. 메일 문의를 받을 메일 주소와, 발송 성공 후 메시지, 버튼 텍스트 및 스타일도 지정 가능합니다.
폼의 'Input' 필드 스타일은 테마 옵션에서 공통적으로 설정이 가능합니다. 참고 템플릿의 디자인대로 공간, 글자색, 필드의 보더색 등을 평소 상태, 입력 시의 상태로 나누어 스타일을 지정할 수 있습니다.
Contact 페이지
> https://oks-dev.tk/minimalgrid/contact/
3. 페이지를 메뉴에 연결
이제 모든 페이지들이 준비가 됐습니다. 임시로 커스텀 링크(#)로 등록했던 메뉴들을 실제 페이지로 구성을 하면 기본적인 사이트의 구조가 완성됩니다.
여기까지,
세로형 헤더(화면의 50%)가 있는 사진이 주가 되고, 대표색을 지정하여 표시할 수 있는 심플한 디자인의 포트폴리오 사이트 만들기를 진행해 봤습니다.
워드프레스 CMS를 활용하면 반복되는 콘텐츠의 부가 정보는 커스텀 필드로 따로 입력 및 관리를 할 수도 있고, 쌓인 콘텐츠들은 원하는 디자인이나 아이디어대로 불러다 표시할 수 있습니다. 여기에 잘 만들어진 테마만 있으면 작업이 조금 더 쉬워질 수 있습니다.
끝.
