GemPages Builder 사용법 정리
쇼피파이 계정에 들어가서 왼쪽 메뉴창의 Apss를 누르게 되면 사용가능한 앱들이 나열되는데
이번에 정리할 앱은 GemPages를 정리해보려고 한다.
GemPages Builder
💡 가볍게 설명을 하자면 코드가 필요없이 웹페이지를 마우스 드래그와 클릭만으로 만들수 있게 하는 라이브러리라 생각하면 된다.
잼페이지를 누르게 되면 아래와 같은 레이아웃이 펼쳐지는데, 새로운 페이지를 작업하기 위해서 ‘Create new page’를 누른다.
그리고 오늘 내가 만들어볼 페이지는 사이트 내에 뉴스 및 포스트 같은 구역을 만들기 위함이기 때문에 Blog LIst를 눌러 새로운 페이지를 만든다.
페이지가 만들어 지면 왼쪽 메뉴에서 크게 두분류로 나뉘는데 Section과 Elements로 나뉘운다.
일단은 Section → Hero Section(현재 내가 만들고자 하는 레이아웃)에서 내가 만들고자 하는 레이아웃을 클릭한 다음 우측의 화이트 보드로 드래그해서 가져간다.
그렇다면 왼쪽의 메뉴창이 위의 그림과 같이 바뀔텐데, 내가 선택하고자 하는 레이아웃의 설정을 조절할 수 있는 메뉴로 변경이 된다.
Settings는 큰 맥락의 변경이라 생각하면 되고, Advanced는 padding, margin, border등 디테일한 변경을 위한 구역이라고 생각하면 된다.
내가 원하고자 하는 텍스트와 이미지들을 입력한 후에는 반응형을 수정해야 하는데 반응형은 더욱 간단하다.
크게는 PC, PAD, MO이렇게 세가지로 구분해 작업하면 될 것이다.
저 세가지의 버튼을 누르게 된다면 그 해당 사이즈에 맞게 레이아웃이 조정이 될것이다.
💡 여기서 주의해야할 점!!
윈도우의 왼쪽에 있는 CSS란만 건드려서 수정을 해야지 그 외의 셋팅으로 수정을 하게 된다면 반응형 때 다 무너진다… 조심하자
그 외 텍스트 사이즈 같은 것은 디테일하게 조정이 되질 않아서 나중에 쇼피파이 내부에서 css값을 주고 수정을 해야한다고 한다.
위와 같이 Advanced 구역에서 아래로 스크롤을 하게 되면 CSS class라는 항목이 나오는데,
클래스를 부여하고 싶은 텍스트를 클릭한 후에 클래스명을 기입해주면
해당 텍스트는 클래스를 부여받은채로 쇼피파이로 작업이 넘어간다.
💡 회사내에서는 fs40 (font-size = 40), fz20 (font-size = 20)이라는 클래스 명을 사용 중이니 이점을 기억해두자!
어느정도 마무리가 된 후에는 우측 상단에 Publish라는 버튼을 누르면 최종 완료가 된다.
사이트내 게시하기
위와 같이 Publish를 누르고 나면 Online Store → Blog posts에 내가 작업한 페이지들이 설정이 되어있다. 해당 포스트를 각각 눌러줘 들어가게 되면 체크해야할 건 하나뿐이다.
스크롤을 내리다 보면 아래와 같은 구역이 있는데 이곳에서 gempage의 고유 넘버를 맞추어 선택해주면 끝!!
내가 작업한 것들을 모두 이 작업을 마친다면 위와같이 웹사이트에 게시가 될 것이다.
여기서 수정해야할 것은 본래 사이트내에서 있는 폰트와 사이즈에 맞게 수정해주어야 하는데,
이점은 쇼피파이 내부에서 경로를 찾아서 폰트와 텍스트를 inherit처리 해주면된다.
💡 inherit을 해주는 이유
본래 기존에 작업을 했을 때, 폰트와 폰트사이즈는 이미 header.css, 즉 최상위에 설정을 해놓았기 때문에 경로를 찾아서, 후에 설정된 텍스트나 사이즈를 수정해주어야 한다.
쇼피파이 계정에 들어가서 왼쪽 메뉴창의 Apss를 누르게 되면 사용가능한 앱들이 나열되는데
이번에 정리할 앱은 GemPages를 정리해보려고 한다.
