Elementor는 다양한 기본 폰트를 제공하지만 국내 한글 폰트가 거의 없기 때문에 커스텀 폰트를 추가하고자 할 때가 있습니다. 이 글에서는 Elementor에서 커스텀 폰트를 추가하는 방법을 단계별로 안내하겠습니다.
커스텀 폰트를 활성화하기 위해서는 Elementor Pro가 필요합니다. Free 기본 버전에는 추가 기능이 제공되지 않기 때문에 아래 링크를 통해 Pro 요금제에 가입할 수 있습니다.
커스텀 폰트를 추가하기위해서는 TTF, OTF, WOFF, WOFF2 등의 파일 형식이 필요합니다. 먼저 사용할 폰트 라이센스가 웹사이트에 사용될 수 있는지 확인 후 폰트 파일을 다운로드 합니다.
워드프레스 대시보드에서 Elementor > Custom Fonts로 이동하여 ADD NEW 버튼으로 폰트를 등록합니다.
준비된 폰트 파일을 각 형식별로 업로드합니다. WOFF와 WOFF2 파일은 특히 웹 최적화된 형식입니다. 각 파일에 대해 굵기(font-weight)와 스타일(italic 등)을 설정할 수 있습니다. 모든 파일을 업로드 하고 속성을 설정한 후 Publish 버튼을 눌러 저장합니다. 이제 커스텀 폰트를 Elementor Typography 설정에서 사용 가능합니다.
커스텀 폰트를 적용하려면 개별 페이지나 템플릿 편집창에서 Typography 설정에서 폰트를 선택하면 됩니다. 이보다 더 편리한 방법은 전역 글꼴을 통해 사이트 전체적으로 기본 폰트를 설정할 수 있습니다. 대시보드에서 Elementor > 사이트 설정 > 전역 글꼴로 이동하여 기본의 타이포그래피에서 커스텀 폰트명을 찾은 후 저장 합니다. 여기서 주의할 것은 폰트 외에 굵기, 선 높이와 같은 다른 속성은 기본 값으로 놔두어야 나중에 H태그 등 추가로 지정한 값이 페이지에 제대로 적용이 됩니다.
Elementor는 워드프레스 현재 가장 대중적으로 사용되는 강력한 페이지 빌더입니다. 때로는 기존 사이트의 Elementor 콘텐츠를 다른 사이트로 옮겨야 할 때가 있습니다. 이를 위해 섹션과 템플릿을 옮기는 가장 효과적인 두 가지 방법을 소개하겠습니다. 첫 번째 방법은 간단한 섹션 복사 및 붙여넣기이며, 두 번째 방법은 템플릿 내보내기 및 가져오기 키트를 사용하는 방법입니다.
Elementor 편집 모드에서 복사하려는 섹션에 마우스를 올리고 오른쪽 클릭하여 복사합니다. 정확한 지정을 위해. 구조창에서 해당 컨테이너를 클릭 복사합니다.
대상 사이트에서 원하는 페이지의 Elementor 편집 모드에서 원하는 위치에 마우스를 올리고 오른쪽 클릭 후 붙여넣기를 하면 되는데요. 같은 사이트 내 이동은 붙이기를, 다른 사이트로 이동은 다른 사이트에서 붙여넣기를 하면 됩니다.
옮길 수 있는 대상은 아래와 같습니다.
실사이트에서 라이브로 Elementor의 작업을 할 때 시스템 오류, 플러그인 충돌로 인하여 갑자기 전역 글꼴, 색상, 스타일을 포함한 기본 키트가 사라질 경우 종종 있습니다. 이럴 경우, 백업이 안되어 있거나, 백업을 해도 이 부분을 되돌릴 수 없다면 기존에 로컬에서 작업물이 있다면 이런식으로 빠르게 복구가 가능합니다.
Elementor 섹션과 템플릿을 다른 사이트로 옮기는 작업은 사이트 관리에서 자주 필요한 절차입니다. 섹션 복사 및 붙여넣기는 빠르고 간단한 이동에 적합하며, 템플릿 내보내기 및 가져오기 키트는 더 많은 콘텐츠와 전역 설정이 필요할 때 유용합니다.
Elementor Pro 버전과 무료 버전의 비교
Elementor 글꼴, 색상 바꾸기
Elementor 팝업 만들기
컨테이너에 링크를 추가하기 위해서는 일반적으로 추가 옵션에서 a 링크 태그를 적용합니다. 하지만 적용 후 Elementor css로 인하여 디자인이 틀어질 수가 있습니다. 이럴 때 래퍼링크를 통해 디자인 변경 없이 링크를 달 수 있습니다. 이 페이지에서는 래퍼 링크 적용하는 방법을 살펴보겠습니다.
엘레멘터 편집기에서 링크를 걸 컨테이너 요소를 선택한 후 편집창의 고급 탭에서 래퍼 링크를 찾아 활성화 후 URL을 입력합니다.
해당 기능을 사용하기 위해서는 별도의 플러그인이 필요합니다. 관리자 페이지에서 플러그인 > 새로추가 페이지에서 Essential Addons for Elementor를 검색하여 플러그인을 설치 및 활성화 하면 래퍼링크를 찾을 수 있습니다.
Elementor Pro 버전과 무료 버전의 비교
Elementor 글꼴 색상바꾸기
워드프레스에서 엘레멘터 빌더를 사용하여 팝업을 만들고 불러오는 방법을 단계별로 살펴보겠습니다. 참고로 이 기능을 위해서는 Elementor Pro 버전에서만 사용할 수 있습니다. 무료 버전에서는 기본적인 페이지 빌딩 기능만 사용할 수 있기 때문에 프로로 업그레이드 하여 사용하시는 것을 추천드립니다.
알림판에서 템플릿 > 새 템플릿을 추가를 클릭합니다.
템플릿 유형은 옵션에서 Popup으로 선택, 적당한 이름을 작성 후 템플릿 만들기
여러가지 템플릿이 나와 선택하거나 새롭게 디자인할 수 있습니다. 보통 지정된 디자인이 있기 때문에 엘레멘터 편집기를 사용하여 팝업의 내용을 제작할 수 있습니다. 텍스트, 이미지, 버튼 등을 추가할 수 있고, 편집기 상단 가운데의 세팅 아이콘을 선택하여 왼쪽 패널에서 Popup 설정을 변경합니다.
게시 후에 조건 탭에서 팝업을 표시할 특정 페이지나 섹션을 선택하거나 다양한 트리거 옵션을 설정할 수도 있습니다. 예를 들어 페이지 로드 시 트리거를 설정하면 해당 페이지 접근하면 팝업이 자동으로 표시 됩니다. 별도의 옵션 없이 저장 후에는 아래처럼 수동으로 팝업 불러오기를 할 수 있습니다.
팝업 표시를 위해 클릭할 버튼 또는 섹션을 선택 > 왼쪽 패널에서 링크 오른쪽 아이콘 선택 > Popup 선택
Popup을 클릭한 후 아래 설정 섹션에서 팝업 템플릿 이름을 검색하여 선택합니다. 이렇게 하면 엘레멘터 빌더로 팝업을 만들고 원하는 방식으로 불러올 수 있습니다.
Elementor 글꼴, 색상 바꾸기
Elementor Pro 버전과 무료 버전의 비교
Elementor는 인기 있는 노코드 페이지 빌더 플러그인으로 코드 개발 없이 웹사이트를 제작하도록 도와줍니다. 이 도구는 드래그 인 드롭 방식으로 웹 페이지의 요소를 배치하고 화면을 꾸밀 수 있습니다.
엘리멘터는 무료 버전과 프로 버전이 있는데 무료에서는 기본적인 웹사이트를 위한 최소한 기능의 위젯만 제공하기 때문에 원하는 사이트를 만들고자한다면 더 복잡하고 다양한 기능을 제공하는 프로 버전으로 업그레이드하는 것을 권장드립니다.
이 글에서는 엘레멘토 프로의 주요 기능과 프로 버전에서 제공하는 기능을 무료 버전과 비교하여 살펴보겠습니다.
| 위젯 기능 | 무료 버전에서 제공 | 프로 버전에서만 제공 |
|---|---|---|
| 텍스트 편집기 | O | |
| 이미지 | O | |
| 비디오 | O | |
| 버튼 | O | |
| 이미지 박스 | O | |
| 헤드라인 애니메이션 | O | |
| 아이콘 | O | |
| 아이콘 박스 | O | |
| 소셜 아이콘 | O | |
| 이미지 갤러리 | O | |
| 이미지 카루셀 | O | |
| 기본 갤러리 | O | |
| 구글 맵 | O | |
| 아코디언 | O | |
| 탭 | O | |
| 토글 | O | |
| 소셜 버튼 | O | |
| 알림 | O | |
| 프로그레스 바 | O | |
| 테스트 모듈 | O | |
| 비디오 플레이어 | O | |
| 카운터 | O | |
| 타이머 | O | |
| 폼 빌더 | O | |
| 포스트 네비게이션 | O | |
| 포스트 정보 | O | |
| 포트폴리오 | O | |
| 로그인 | O | |
| 애니메이션 헤드라인 | O | |
| 가격표 | O | |
| 카운트다운 | O | |
| 팝업 빌더 | O | |
| 메뉴 | O | |
| 우커머스 위젯 | O | |
| 다이나믹 태그 | O | |
| 테마 빌더 | O |
