미디어 필드는 마스터 애드온으로 구축된 사용자 지정 위젯에 이미지 선택기를 추가합니다 위젯 빌더. 편집자는 미디어 라이브러리에서 이미지를 선택하거나 Elementor 에서 새 이미지를 업로드하고 템플릿은 URL,ID 또는 대체 텍스트를 인쇄합니다. 프로필 사진,로고, 영웅 이미지,제품 샷 및 기타 단일 이미지 슬롯에 사용합니다.
미디어는 무료 버전의 위젯 빌더에서 사용할 수 있는 필드 중 하나입니다. 무료 플러그인에는 제한된 위젯 빌더가 포함되어 있으며 전체 필드 세트가 함께 제공됩니다 마스터 애드온 프로.
미디어 분야가 하는 일 #
- 이미지 선택 버튼과 함께 Elementor의 이미지 상자를 위젯 패널에 추가합니다.
- 이미지를 선택하면 편집자가 파일을 업로드하거나 미디어 라이브러리에서 파일을 선택하거나 URL에서 파일을 삽입하는 WordPress 미디어 창이 열립니다.
- 필드는 이미지의
url,id그리고alt텍스트와 템플릿은 필요한 것을 인쇄합니다. - HTML 탭과 CSS 탭에서 예를 들어 배경 이미지로 작동합니다.
아직 위젯을 구축하지 않았다면, 을 읽어보세요 위젯 빌더 개요 첫번째.
시작하기 전에 #
- Elementor가 설치되어 활성화된 WordPress입니다.
- Elementor 용 마스터 애드온이 설치되고 활성화되었습니다. The 설치 가이드 설정을 다룹니다.
- 위젯 빌더에서 열린 위젯. 이 가이드의 예는 미디어 필드가 명명된 “프로필 카드” 위젯입니다
profile_photo그리고 이름에 대한 텍스트 필드입니다.
Media 필드를 추가하는 방법 #
- 로 이동 마스터 애드온 > 위젯 빌더 그리고 위젯을 엽니다.
- 에 콘텐츠 탭, 예를 들어 섹션을 추가 “프로필”.
- 유형
media왼쪽의 필드 검색 상자에. - 드래그 미디어 섹션으로. 그 설정은 왼쪽 사이드 바에서 열립니다.
미디어 필드 옵션 설명 #
- 라벨 는 Elementor 의 이미지 상자 위의 텍스트,예를 들어 “프로필 사진”입니다.
- 이름 는 필드의 고유 ID이며 토큰의 시작입니다, 그래서
profile_photo제공합니다{{ profile_photo.url }}. 문자, 숫자, 밑줄만 표시됩니다. - 설명 elementor 의 이미지 상자 아래에 나타납니다.
- 미디어 유형 이미지 (기본값), 비디오,오디오, PDF,SVG, 스프레드시트,문서, 프레젠테이션 및 아카이브를 나열합니다. 테스트에서 이 설정은 Elementor 에 도달하지 않았습니다. 비디오로 설정된 필드는 여전히 일반 이미지 선택기로 표시되었으므로 미디어 필드를 이미지 필드로 처리합니다.
기본 이미지 설정이 없으므로 편집자가 이미지를 선택할 때까지 위젯의 새 복사본이 이미지 없이 시작됩니다. 다른 필드에서와 마찬가지로 아래쪽의 공통 설정도 작동합니다.
템플릿에 이미지를 인쇄하세요 #
필드는 여러 값을 보유 하 고, 당신은 점으로 각각을 인쇄:
{{ profile_photo.url }}는 이미지 파일 URL.{{ profile_photo }}자체에서 동일한 URL을 인쇄합니다.{{ profile_photo.id }}는 이미지의 미디어 라이브러리 ID입니다.{{ profile_photo.alt }}편집자가 이미지를 선택할 때 미디어 라이브러리에 있던 대체 텍스트입니다.
감싸다 <img> 체크에 태그를 지정하여 필드가 비어 있는 동안에는 아무것도 인쇄되지 않습니다:
{% if profile_photo.url %}
<img class="profile-photo" src="{{ profile_photo.url }}" alt="{{ profile_photo.alt }}">
{% endif %}
토큰은 예를 들어 배경 이미지의 경우 CSS 탭에서도 작동합니다:
.profile-card {
background-image: url('{{ profile_photo }}');
}이미지 스타일이 적용되지 않으면 선택기를 더 구체적으로 만드십시오. Elementor 는 위젯 내부의 이미지에 대한 자체 규칙을 가지고 있으며 테스트에서 .profile-photo 혼자서는 그들에게 승리하지 못했지만, 한편 .profile-card .profile-photo 했다.
클릭 설정 저장 다 끝났을 때.
Elementor 에서 미디어 컨트롤 사용 #
페이지에 위젯을 추가하거나,페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다. 이미지 상자에 현재 이미지가 표시됩니다. 위로 마우스를 가져가서 클릭합니다 이미지를 선택하세요 변경하려면, 또는 휴지통 아이콘을 사용하여 지우십시오.
미디어 삽입 창이 열립니다. 아래에 파일 업로드 파일 업로드아래 하나를 선택하세요 미디어 라이브러리또는 사용합니다 URL 에서 삽입니다. 오른쪽의 세부사항 패널은 이미지의 Alt Text 를 보여 주는데,그것이 바로 {{ profile_photo.alt }} 인쇄합니다. 클릭하기 전에 거기에 입력하세요 선택.
일반적인 사용 사례 #
- 프로필 사진 및 팀원 카드.
- 머리글, 바닥글 및 클라이언트 목록의 로고.
- 영웅 및 배너 이미지
<img>태그 또는 CSS 배경. - 카드 내부의 제품 또는 기능 이미지.
미디어 분야와 협력하기 위한 팁 #
- 항상 지켜라
<img>태그를 지정하세요{% if profile_photo.url %}그래서 빈 필드는 깨진 이미지를 남기지 않습니다. - 인쇄
{{ profile_photo.alt }}alt 속성에서 이미지를 선택하기 전에 미디어 라이브러리에 alt 텍스트를 추가합니다. - 사용
object-fit: cover다양한 모양의 이미지가 정렬되어야 할 때 고정된 너비와 높이로. - 이미지 규칙에 다음과 같은 두 가지 클래스를 부여합니다
.profile-card .profile-photo, 그래서 Elementor 자신의 이미지 스타일은 그들을 무시하지 않습니다. - 여러 이미지의 경우 다음을 사용하십시오 갤러리 분야. 아이콘이나 SVG 기호의 경우 다음을 사용하십시오 아이콘 필드.
자주 묻는 질문 #
Media 필드는 무료 버전에서 사용할 수 있습니까?
예. 미디어는 무료 버전의 위젯 빌더에서 사용할 수 있는 필드 중 하나입니다. 위젯 빌더 필드의 전체 세트는 Master Addons Pro 와 함께 제공됩니다.
{{ profile_photo }}는 무엇을 인쇄합니까?
이미지 URL. 과 같습니다 {{ profile_photo.url }}. 사용 .id 첨부 ID의 경우 .alt 대체 텍스트의 경우.
대체 텍스트가 비어 있는 이유는 무엇입니까?
필드는 이미지가 선택한 미디어 라이브러리에 있는 대체 텍스트를 복사합니다. 미디어 삽입 창에서 대체 텍스트를 추가한 다음 이미지를 다시 선택합니다.
동영상이나 PDF에 미디어 필드를 사용할 수 있습니까?
안정적이지 않음 테스트에서 미디어 유형 설정은 이미지 선택기를 유지하는 Elementor 컨트롤을 변경하지 않았습니다. 다른 파일에 대한 링크는 URL 필드를 사용하십시오.
왜 CSS는 이미지 크기를 변경하지 않습니까?
Elementor 는 위젯 내부의 이미지에 자체 스타일을 적용합니다. 와 같은 보다 구체적인 선택기를 사용합니다 .profile-card .profile-photo너비, 높이 및 경계 반경에 대해.
감싸는 #
미디어 필드를 추가하고 인쇄합니다 {{ field_name.url }} 그리고 {{ field_name.alt }} 내부 {% if %} 확인하고 이미지 스타일에 특정 선택기를 지정합니다. 그런 다음 편집자는 Elementor 에서 바로 이미지를 선택하거나 업로드합니다. 이미지와 함께 사용할 링크를 보려면 a 를 추가합니다 URL 필드, 그리고 확인 가격 각 계획에 포함된 내용입니다.
