brunch

매거진 IMPREZA 테마 활용

라이킷 9 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Dec 07. 2021

#6-4. About 페이지 (타이틀 섹션, 칼럼)

상점 소개 사이트 만들기

상점의 정보 그리고 재료 소개, 바로가기 버튼이 나오는 페이지를 만들 차례입니다.

1. 타이틀 섹션 만들기

페이지의 맨 위에는 나머지 페이지들에도 공통적으로 표시가 되는 타이틀 섹션이 위치합니다. 하나를 잘 만든 다음 로우를 템플릿 조각으로 만들어 활용하면 되겠습니다.

참고사이트의 디자인을 표현한 방식을 보면, 섹션이 화면 끝까지 펼쳐지는 구조이고, 양쪽 그리고 아래에는 바깥 공간 30px을 주고 있습니다. (main 탑 슬라이더와의 통일성을 위한 것으로 보임) 모바일에서는 마진 없이 섹션이 딱 붙게 표시가 됩니다.

pc와 모바일 화면 디자인에 맞게 '로우 편집 > 디자인'에서 spacing 수치들을 넣어줍니다.

로우 안에는 타이틀이 하나 들어있습니다.

참고사이트를 보면 페이지 로딩 후 로우의 등장 효과와 함께 타이틀이 흰 배경으로 덮였다가 다시 왼쪽부터 열리는 효과가 나옵니다. 구현을 하려면 로우(섹션)에 adnimation으로 fade 효과를 적용한 다음, 'start' 클래스가 추가가 되는 시점에 효과를 적용하면 되겠습니다.

우선 타이틀 표시를 위해 '텍스트' 화면 요소를 넣고, 글자는 미리 설정한 h2 태그 스타일로 나오도록 했습니다. 그리고 타이틀을 덮는 효과를 주기 위해 'page_title'이라는 클래스명을 추가했습니다.

이제 타이틀에 추가된 page_title 클래스를 이용해서 효과를 위한 css를 추가합니다. (각 페이지 상단에 나오는 구조이므로, 공통된 css를 적는 테마 옵션 > Custom Code에 적기) 참고로, 글자 뒤 기본 반투명 배경의 경우 transition으로 구현이 가능하지만, 흰 배경이 0 -> 100이 됐다가 100 -> 0으로 다시 상태가 변경이 되는 것은 animation으로만 구현이 될 수 있습니다.

(타이틀 섹션 완성)

2. 겹쳐진 화면 요소가 있는 섹션

콘텐츠 넓이를 꽉 채우는 이미지가 나온 후, 텍스트 박스가 위로 겹쳐져 있고, 또 그 아래에는 사진이 위로 겹쳐진 섹션입니다. image, text block, image 순서대로 화면 요소를 넣고, 디자인 설정에서 패딩과 마진 값을 디자인과 같이 넣어주면 겹치는 구조를 만들 수 있습니다.

3. 지그재그 칼럼 구조

재료 소개를 하면서 이미지의 위치가 서로 지그재그로 엇갈리면서, 사진의 열은 딱 맞춘 디자인입니다. 모바일 화면에서는 사진 + 텍스트의 순서로 바뀝니다.

페이지 편집 시 '안쪽 로우(inner row)' 형태로 3개를 넣었습니다. 그다음 이미지가 왼쪽에 있는 로우냐 아니면 오른쪽에 있는 로우냐를 구분하기 위해 이미지 방향에 따라 class명을 추가했습니다.

그다음 칼럼들이 1열로 늘어서는 시점인 900px까지에서는 줄 맞추기가 되도록 기본 패딩을 조정하면 되겠습니다. 페이지 빌더에 정의된 기본 패딩 값들을 수정하는 css를 페이지에 추가해주면 이제 사진의 끝선이 맞게 됩니다.

다음으로, 모바일에서는 지그재그로 구성돼 있는 이미지의 순서를 바꿔줘야 합니다. 참고로 이 로우 구조는 모두 flex 스타일이 적용이 돼 있는데요, flex의 특징 중 하나는 order라는 속성으로 안에 있는 요소들의 순서를 마음대로 바꿀 수가 있다는 겁니다. 그러니 '@media (max-width:899px)'에서는 순서를 바꿔주는 css를 추가하면 사진 + 텍스트의 구조로 모두 통일되게 나오도록 변경이 가능합니다.

좀 더 편리하게 적용을 할 수 있도록 이 방법을 Impreza 테마는 옵션화 해 놨고, 로우 편집에서 'Reverse order for column stacking'을 체크함으로써 간단하게 적용 가능합니다.

4. 베너 형태의 Big 버튼 만들기

같은 디자인의 버튼이 이후에 다른 페이지에서도 쓰이고 있습니다. 아예 규격화해서 만들어 놓으면 편리하겠지요. Theme Options > Button Styles에서 자주 쓰이는 버튼의 디자인을 미리 만들 수 있습니다.

저는 'Big Button'이라는 이름으로 버튼의 스타일들을 디자인에 맞게 세팅해서 저장했습니다. 여기서 만든 디자인은 페이지 편집 시 Button 요소를 넣을 때 '서식'으로 지정을 할 수 있게 됩니다. 디자인된 공간 설정이 있지만 무시하고 만약 가로로 끝까지 펼쳐지게 하려면 'Stretch to the full width'이라는 옵션이 있어서 체크해 주면 되겠습니다.