Elementor로 웹페이지를 제작할 때, 웹페이지의 기본 구조를 파악하는 것은 매우 중요합니다. 이는 모든 페이지에 공통적으로 적용되는 구조입니다. 경우에 따라 특정 요구 사항에 맞춰 2~4가지 유형의 템플릿 페이지가 필요할 수 있습니다. 각 유형별로 구조를 신중하게 설계해야 합니다. 시간을 들여 꼼꼼하게 작업하면 기초를 탄탄히 다질 수 있고, 나중에 문제가 생겨 덧붙이는 작업을 피할 수 있습니다.
그러니까 페이지의 구조를 제대로 잡는다는 건, 페이지 제목을 정하는 걸 의미합니다. 페이지 제목이 필요할까요(대부분 필요하죠)? 부제목이나 하위 카테고리는요? 다운로드 섹션은요? 주요 콘텐츠 제목은 어떻게 할까요? 본문 내용은요?
각 요소를 살펴볼 때, 세 가지를 파악해야 합니다.
- 글자의 색깔은 무엇일까요?
- 텍스트의 글꼴 설정(크기, 굵기 등)은 어떻게 할 건가요?
- 데스크톱, 태블릿, 휴대폰 각각에 대해 설정을 조정해야 합니다(그렇지 않으면 데스크톱 설정이 휴대폰에서 이상하게 보일 것입니다). 요즘 대부분의 사람들이 휴대폰이나 태블릿으로 웹서핑을 한다는 사실을 잊지 마세요! 그러니 이 작업은 필수입니다. 물론 번거로운 작업이지만, 단 한 번만 하면 됩니다.
Elementor는 '전역 글꼴'과 '전역 색상'이라는 기능을 통해 이 작업을 더 쉽게 할 수 있도록 지원합니다. 예를 들어, 모든 페이지의 제목에 대한 전역 색상을 설정할 수 있습니다. 그런 다음 모든 페이지의 제목에 대한 전역 글꼴을 설정할 수 있습니다. 이 기능에는 두 가지 장점이 있습니다…
- 페이지 제목 등 모든 요소의 글꼴과 색상을 일일이 설정할 필요가 없습니다. 전역 글꼴과 색상 설정이 자동으로 적용됩니다.
- 나중에 모든 페이지의 제목 색상을 바꾸고 싶을 때, 사이트의 모든 웹페이지를 일일이 수정하는 대신 '전역 색상' 설정에서 변경하기만 하면 됩니다. 지금 보고 계신 이 사이트처럼 300페이지가 넘는 사이트가 있다고 상상해 보세요. 단 하나의 설정에서 모든 페이지의 색상을 변경할 수 있다면 얼마나 많은 시간을 절약할 수 있을지 생각해 보세요!
이 웹사이트의 설정은 다음과 같습니다. 전역 글꼴 및 전역 색상에 대해 더 자세히 알아보려면 YouTube에서 "Elementor 전역 글꼴 색상"을 검색해 보세요. 저는 나중에 참고하기 위해 이 페이지를 만들었는데, 여러분도 웹사이트에 비슷한 페이지를 만들어 두는 것이 좋을 수 있습니다.
DT = 데스크톱
TAB = 정제
PH = 전화
예를 들어 DT는 데스크톱을 의미합니다 . 37, 400, LS -2.5, 밑줄 = 글꼴 크기 37, 굵기 400 , 줄 간격 LS , 밑줄은 장식용입니다 . LH는 줄 높이, WS는 단어 간격입니다.
카테고리 예: 윤리
색상 #0097FD
글꼴: Courier Prime
DT : 27, 400, LS -2.5, 밑줄
TAB: 27, 400, LS -2.5, 밑줄
PH: 17, 400, LS -2.5, 밑줄
하위 범주 예: 지구 건강
색상 #F94A00
글꼴: 로보토
DT : 35,600
탭: 35, 600
PH: 25, 600
제목 예: 입문
색깔 # F94A00
글꼴: 로보토
DT : 35, 600, 밑줄
탭: 35, 600, 밑줄
PH: 23, 600, 밑줄
자막 예: 당신이 알고 싶은 모든 것
색상 #0097FD
글꼴: Courier Prime
DT: 17,400, LS -2.5
TAB: 17, 400, LS -2.5
PH: 14, 400, LS -2.5
다운로드
박스 색상 = #DDDDDD
테두리: 단색, 너비 1 1 1 1, 테두리 반경 5 5 5 5
텍스트 색상 #35C3FF
텍스트 글꼴: Lato
DT : 35,600
탭: 16, 500
PH: 16, 500
웹링크
색상 #24B72F
텍스트 글꼴 및 DT, TAB, PH 설정: 왼쪽의 다운로드와 동일합니다.
수영레인 바 & 텍스트
보라색 상자 색상 #610071
텍스트 색상: #FFFFFF
텍스트 글꼴: Ubuntu Condensed
DT : 35,600
탭: 27,600
PH: 20,600
본문 텍스트
색상 #333333
텍스트 글꼴: Lato, 15, 400, LH 24
텍스트는 이렇게 표시됩니다…
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit Tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit Tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit Tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit Tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elittellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.