X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 타이포그래피 분야 사용자 정의 위젯에 정확히 동일한 타이포그래피 패널을 제공합니다 Elementor의 핵심 위젯 사용: Google 글꼴이 포함된 글꼴 패밀리, 크기, 무게, 변환, 스타일, 장식, 줄 높이, 문자 간격 및 단어 간격, 모두 장치당 응답 마스터 애드온 내부 위젯 빌더를 사용하면 필드를 한 번 추가하고 CSS 선택기를 가리키며 Elementor에서 위젯을 편집하는 사람은 코드를 건드리지 않고도 텍스트 스타일을 변경할 수 있습니다.
모든 Widget Builder 컨트롤과 마찬가지로 Typography도 지원합니다 조건를,그래서 당신은 주문 작풍 토글이 켜질 때까지 숨겨지을 수 있습니다. 건축업자를 통해 토큰 산출은 를 통해서 달립니다 나뭇가지 구문 템플릿 엔진; 두 가이드 모두 세부 사항과 제한 사항을 다루고 있습니다.
텍스트나 색상 필드와 달리 타이포그래피 필드는 CSS 에서 단축 코드를 사용하지 않습니다. 필드에 제어하는 선택기를 알려주면 Elementor 가 타이포그래피 스타일을 해당 선택기에 자체적으로 작성합니다. 하나의 필드,하나의 선택기가 완료되었습니다.
타이포그래피 필드가 하는 일 #
타이포그래피 필드는 위젯의 옵션 패널에서 Elementor 의 타이포그래피 그룹 컨트롤을 렌더링합니다. 누군가가 위젯을 선택하고 필드 레이블 옆에 있는 연필 아이콘을 클릭하면 텍스트 컨트롤의 전체 세트와 함께 팝오버가 열립니다:
- 글꼴 패밀리: 시스템 글꼴, Google 글꼴 및 사이트에 등록된 사용자 정의 글꼴로 검색 가능한 드롭다운입니다.
- 글꼴 크기: px,em, rem,vw 유닛이 포함된 슬라이더 및 입력으로,장치별로 반응합니다.
- 글꼴 무게: 100~900에 일반 및 굵게 표시합니다.
- 변형, 스타일 및 장식: 대문자와 소문자, 이탤릭체와 경사체, 밑줄과 선 관통형.
- 줄 높이, 문자 간격 및 단어 간격: 각각은 자체 응답 입력을 가지고 있습니다.
지구본 아이콘도 거기에 있으므로 위젯은 사이트의 아이콘을 따라갈 수 있습니다 글로벌 글꼴 일회성 스타일 대신 사전 설정. 이것은 다른 위젯 빌더 필드와 동일한 패턴을 따릅니다: 필드를 삭제하고 이름을 지정하고 연결하십시오. 한 가지 차이점은 단축 코드 대신 선택기를 통해 연결하는 방법입니다. 위젯을 처음 구축하는 경우 다음으로 시작하십시오 위젯 빌더 개요 첫번째.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
- Widget Builder 편집기에서 열리는 사용자 정의 위젯입니다. 우리의 예는 다음과 같은 레스토랑 영웅 위젯입니다
<h1 class="bfh-title">제목과 a<p class="bfh-lede">HTML의 소개 단락입니다.
타이포그래피 필드를 추가하는 방법 #
Widget Builder 편집기에서 찾을 때까지 왼쪽의 필드 패널을 스크롤합니다 타이포그래피 다른 스타일 그룹 필드와 함께 나열된 필드입니다.
타이포그래피 필드를 아래 섹션으로 드래그합니다 콘텐츠, 스타일, 또는 고급 탭. 스타일은 어디든 작동하지만 자연스러운 본거지입니다. 일단 착지하면 필드의 옵션이 왼쪽에 열립니다.
타이포그래피 필드 옵션을 설명했습니다 #
타이포그래피 필드를 선택하여 설정을 엽니다.
- 라벨: elementor 에서 컨트롤 옆에 표시된 텍스트,기본적으로 “타이포그래피”. 하나의 위젯에 여러 개의 타이포그래피 필드가 있는 경우 “타이틀 타이포그래피” 및 “버튼 타이포그래피”와 같은 이름을 사용합니다.
- 이름: 필드의 고유 식별자입니다. 예를 들어 문자,숫자 및 밑줄만 포함해야 합니다
title_typography. - 설명: 컨트롤 아래에 표시된 선택적 도우미 텍스트입니다.
- 선택기: 타이포그래피 스타일이 적용되는 CSS 선택기. 다음 섹션에서 다루는 현장 작업을 만드는 하나의 설정입니다.
- 기본값: 선택적으로 필드를 Elementor 의 Global Fonts 사전 설정 — Primary,Secondary, Text,또는 Accent 중 하나에 연결합니다. 그런 다음 위젯은 해당 사전 설정이 적용된 상태로 시작하고 사이트의 전역 글꼴이 변경되면 그 뒤에 옵니다.
- 라벨 표시 그리고 분리기: 표준 디스플레이가 전환되고 다른 컨트롤에 특정 값이 있는 경우에만 필드를 표시하기 위한 조건이 더 아래로 표시됩니다.
필드를 선택기로 가리킵니다 #
다른 분야에 익숙해지면 사람들을 넘어뜨리는 부분은 다음과 같습니다: 타이포그래피 필드에는 없습니다 {{shortcode}} 당신의 CSS 를 위해. 타이포그래피 값은 속성의 전체 묶음이며,단일 값이 아니므로 하나의 CSS 선언으로 인쇄할 수 없습니다. 대신,당신은 를 채웁니다 선택기 옵션과 Elementor가 당신을 위해 스타일을 생성합니다.
영웅의 인트로 단락의 경우 선택자는: 입니다
{{WRAPPER}} .bfh-lede
{{WRAPPER}}는 위젯의 자체 컨테이너를 의미하므로 스타일은 이제까지이 위젯을 치고 페이지의 나머지 부분으로 누출되지 않습니다. 항상 그것으로 선택기를 시작하십시오..bfh-lede컨트롤이 스타일을 지정해야 하는 위젯 HTML 내부의 요소입니다.- 하나의 컨트롤로 여러 요소를 구동하려면 선택기를 쉼표로 구분하고 각각 고유한 기능을 제공합니다
{{WRAPPER}}:{{WRAPPER}} .bfh-title, {{WRAPPER}} .bfh-lede.
선택기를 비워 두면 필드는 위젯의 모든 텍스트 조각을 한 번에 스타일링하는 위젯의 전체 컨테이너로 돌아갑니다. 일반적으로 원하는 것보다 더 많은 것입니다. 선택기를 설정한 다음 을 클릭합니다 설정 저장.
CSS 탭의 스타일시트가 위젯의 시작 모양으로 계속 작동합니다. 무엇이든 font-family 또는 font-size 사용자가 패널에서 무언가를 선택할 때까지 거기에 쓴 내용이 그대로 유지됩니다; 그런 다음 컨트롤의 값이 이를 재정의합니다.
Elementor에서 타이포그래피 컨트롤을 사용하세요 #
Elementor 의 페이지에 사용자 지정 위젯을 추가하거나 페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다. 위젯을 선택하면 설정한 레이블,Global Fonts 의 글로브 아이콘 및 사용자 지정 값의 연필 아이콘이 포함된 패널에 타이포그래피 컨트롤이 나타납니다.
글꼴 패밀리와 크기를 선택하세요 #
연필 아이콘을 클릭하여 타이포그래피 팝오버를 엽니다. The 가족 드롭다운은 입력할 때 시스템 글꼴과 전체 Google 글꼴 라이브러리를 검색합니다. 그 아래, 크기 px, em, rem 또는 vw의 값을 가지며 장치 아이콘을 사용하면 중단점당 다른 크기를 설정할 수 있습니다. — 96px 데스크톱 헤드라인은 동일한 컨트롤에서 휴대폰의 경우 48px로 떨어질 수 있습니다.
무게, 간격, 그리고 나머지를 설정합니다 #
동일한 팝오버가 유지됩니다 무게, 변환, 스타일, 장식, 라인 높이, 문자 간격, 그리고 단어 간격. 모든 변경 사항은 미리보기에 표시되므로 문자 간격을 아래로 당기면서 제목이 조이는 것을 볼 수 있습니다. 아무것도 변경되지 않는 것 같으면 선택기가 실제로 위젯 HTML의 요소와 일치하는지 확인하십시오; 클래스 이름의 오타가 자동으로 실패합니다.
또는 사이트의 Global Fonts 를 팔로우하세요 #
대신 지구본 아이콘을 클릭하고 기본,보조, 텍스트 또는 악센트를 선택합니다. 이제 위젯의 텍스트가 해당 전역 사전 설정을 따르고 재설계가 사이트의 글꼴을 바꿀 때 이 위젯은 아무도 건드리지 않고 따라옵니다. 필드에 기본값을 설정하면 위젯이 페이지에 처음 삭제될 때 이 링크가 이미 활성화됩니다.
예제에서 제목은 98px의 스크립트 면으로 바뀌고 Google 글꼴 목록에서 바로 선택되며 미리보기는 글꼴이 로드되는 순간을 다시 그립니다.
일반적인 사용 사례 #
- 영웅 및 배너 위젯의 제목 모든 사이트가 자체 디스플레이 글꼴을 원하는 곳.
- 버튼 그 필요 사이트의 기존 버튼 타이포그래피와 일치.
- 카드 제목 및 발췌 각각 별도의 필드가 있으므로 제목과 본문 텍스트가 독립적으로 확장됩니다.
- 추천 및 견적 위젯 인용문은 이탤릭체 세리프를 사용하고 속성은 본문 글꼴에 유지됩니다.
- 클라이언트 대면 위젯 편집자가 CSS를 열지 않고도 텍스트 스타일을 자유롭게 변경해야 하는 경우.
타이포그래피 분야 작업 팁 #
- 선택기 옵션은 전체 연결입니다. CSS에 붙여넣을 타이포그래피 단축 코드가 없습니다. — 선택기를 설정하고 Elementor가 스타일을 쓰도록 하세요.
- 항상 선택기를 다음으로 시작합니다
{{WRAPPER}}. 그것 없이 스타일은 단지 당신의 위젯이 아니라 페이지의 모든 경기에 적용 됩니다.쉼표로 구분 된 목록에서 모든 부분은 자신의 필요 합니다{{WRAPPER}}. - 기본 스타일을 CSS 탭에 보관하십시오. 그것들은 새로운 드롭에서 위젯이 어떻게 보이는지입니다; 컨트롤은 사용자가 실제로 변경하는 것만 재정의합니다.
- 텍스트 역할당 하나의 필드. 제목 필드, 본문 필드 및 버튼 필드는 편집자에게 깔끔한 제어 기능을 제공합니다. 전체 위젯을 가리키는 하나의 필드는 모든 것을 단일 스타일로 평평하게 만듭니다.
- 클라이언트 사이트에 대해 전역 글꼴 기본값을 사용합니다. 필드를 기본 또는 보조에 연결하면 첫날부터 사이트의 디자인 시스템과 보조를 맞춰 사용자 정의 위젯을 유지합니다.
자주 묻는 질문 #
마스터 애드온 위젯 빌더의 타이포그래피 필드는 무엇입니까?
타이포그래피 필드는 사용자 정의 위젯에 Elementor 의 전체 타이포그래피 그룹 컨트롤을 추가합니다: Google 글꼴이 포함된 글꼴 모음,반응형 크기,무게, 변환,스타일, 장식,줄 높이,문자 간격 및 단어 간격을 가리키며 CSS 선택기를 가리키고 Elementor 는 선택한 스타일을 해당 선택기에 적용합니다.
CSS 탭의 타이포그래피 단축 코드는 어디에 있습니까?
없습니다. 타이포그래피는 많은 CSS 속성의 그룹이므로 단일을 통해 인쇄할 수 없습니다 {{token}} 텍스트나 색상 필드가 하는 방식. 필드의 선택기 옵션은 단축 코드를 대체합니다: 다음과 같이 설정합니다 {{WRAPPER}} .my-title 그리고 스타일은 당신을 위해 생성됩니다.
선택자에서 {{WRAPPER}}는 무엇을 의미합니까?
위젯의 자체 컨테이너 요소에 대한 자리 표시자입니다. 선택기를 다음으로 시작합니다 {{WRAPPER}} 타이포그래피의 범위를 이 위젯으로만 지정합니다. 빼고 선택기가 페이지의 모든 곳에서 일치하므로 실수로 다른 위젯의 스타일을 변경할 수 있습니다.
하나의 타이포그래피 필드가 두 개 이상의 요소를 스타일링할 수 있습니까?
예. 선택자를 쉼표로 구분하고 각각으로 시작합니다 {{WRAPPER}}예를 들어 {{WRAPPER}} .card-title, {{WRAPPER}} .card-link. 그러면 두 요소 모두 동일한 제어를 따릅니다.
내 타이포그래피 컨트롤이 전체 위젯을 스타일링하는 이유는 무엇입니까?
Selector 옵션이 비어 있으므로 필드가 위젯의 외부 컨테이너로 다시 떨어졌습니다. 원하는 요소만 대상으로 하는 선택기를 채우고 Elementor 편집기를 저장하고 다시 로드합니다.
CSS 탭에 작성한 글꼴 스타일이 여전히 중요합니까?
예. 누군가가 Elementor 에서 컨트롤을 변경할 때까지 위젯의 기본 모양과 쇼입니다. 사용자가 타이포그래피 패널에서 선택한 다음 스타일시트 값보다 우선 순위를 갖습니다.
감싸는 #
위젯 빌더 타이포그래피 필드는 사용자 지정 위젯의 모든 요소에 Google 글꼴, 반응형 크기 및 전역 사전 설정과 함께 Elementor의 자체 위젯에서 이미 알고 있는 패널을 편집자에게 전달합니다. 필드의 이름을 지정하고 선택기를 다음으로 설정합니다 {{WRAPPER}} 게다가 요소의 클래스,그리고 모든 글꼴 결정이 스타일시트에서 패널로 이동합니다. pair it with the 국경 필드 그리고 the 텍스트 필드 콘텐츠와 스타일을 한 곳에서 다루는 위젯 패널을 구축하려면 나머지 부분을 살펴보세요 마스터 애드온 위젯 및 확장, 그리고 보세요 가격 페이지 각 계획에 포함된 내용입니다.
