미디어

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 미디어 분야 사용자 정의 위젯을 WordPress 미디어 라이브러리에 연결합니다. 필드를 드롭하면 Elementor 에서 위젯을 편집하는 모든 사람이 익숙한 이미지 선택기를 얻습니다: 클릭,픽 또는 업로드,완료. 마스터 애드온 내부 위젯 빌더는, 영웅 이미지, 아바타, 로고, 그리고 위젯이 필요로하는 다른 모든 단일 이미지 슬롯 뒤에 필드입니다.

모든 Widget Builder 필드와 마찬가지로 Media도 지원합니다 조건 패널 가시성을 위해. 그것의 토큰은 를 통해 렌더링합니다 나뭇가지 구문 템플릿 엔진파일 URL을 자동으로 인쇄하는 것입니다 <img src="{{ photo }}"> 그냥 작동합니다. 두 가이드 모두 세부 사항을 다룹니다.

텍스트 필드와 달리 Media 필드의 값은 하나의 문자열이 아닙니다. 파일의 값을 전달하는 배열입니다 url, id, alt그리고 더,그리고 당신의 템플렛은 점 표기로 각 조각을 도달합니다. 1 개의 친절한 단축키가 있습니다: 분야를 직접 인쇄하는 것은 당신에게 URL 를 줍니다. 그리고 첫날부터 구축 가치가 있는 1 개의 습관은,an 로 마크업을 지키고 있습니다 {% if %} 그래서 빈 필드는 깨진 이미지를 남기지 않습니다.

미디어 분야가 하는 일 #

• WordPress 미디어 라이브러리를 엽니다 elementor 패널에서 기존 파일을 업로드하거나 선택합니다.
• 선택 항목을 배열로 저장합니다 와 함께 url, id, 그리고 alt 그 열쇠들 중.
• 직접 토큰에 URL을 인쇄합니다: {{ hero_image }} 파일 URL 을 바로가기로 출력합니다.
• 각 속성을 점 표기법으로 노출합니다: {{ hero_image.url }}, {{ hero_image.id }}, {{ hero_image.alt }}.
• 미디어 유형별로 라이브러리를 필터링할 수 있습니다, 이미지, 비디오 또는 오디오이며 동적 값을 지원합니다.

위젯을 처음 구축했다면 다음부터 시작하세요 위젯 빌더 개요 첫번째.

시작하기 전에 #

• 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
• Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
• Widget Builder 편집기에서 열리는 사용자 정의 위젯입니다. 우리의 예는 이름이 지정된 단일 미디어 필드가 있는 레스토랑 영웅 위젯입니다 hero_image 그게 배너를 채운다.

Media 필드를 추가하는 방법 #

Widget Builder 편집기에서 다음을 찾으세요 미디어 왼쪽 패널의 필드를 다른 미디어 필드와 그룹화합니다.

아래의 섹션으로 드래그하세요 콘텐츠 탭; 이미지는 CSS 배경으로 끝날 때에도 콘텐츠입니다. 일단 착륙하면 필드의 옵션이 왼쪽에 열립니다.

미디어 필드 옵션 설명 #

• 라벨: elementor의 선택기 위에 표시된 텍스트, 예를 들어 “Hero Image”입니다.
• 이름: 예를 들어 필드, 문자, 숫자 및 밑줄에 대한 고유 식별자입니다 hero_image.
• 기본값: URL과 ID 쌍으로 시작하는 파일이므로 위젯이 이미 완료된 것으로 보이는 페이지에 삭제됩니다.
• 미디어 유형: 라이브러리가 제공하는 것, 이미지, 비디오 또는 오디오를 필터링하여 편집자가 mp3를 img 태그에 연결하지 못하도록 합니다.
• 동적: 값이 고정된 픽이 아닌 동적 소스에서 나오도록 합니다.
• 설명, 라벨 표시, 분리기: 표준 표시 설정과 다른 컨트롤에 특정 값이 있는 경우에만 필드를 표시하는 조건이 추가됩니다.

미디어 필드를 템플릿에 연결합니다 #

값은 배열이고,템플릿 규칙은 그로부터 따릅니다. direct 토큰은 가장 일반적인 필요를 위한 바로가기입니다:

<img src="{{ hero_image }}">

배열 값을 인쇄하면 해당 값이 직접 출력됩니다 url 키, 그래서 이것은 파일 URL을 렌더링합니다 명시적 양식은 동일한 작업을 수행하며 형제 옆에 더 명확하게 읽습니다:

<img src="{{ hero_image.url }}" alt="{{ hero_image.alt }}">
<!-- {{ hero_image.id }} holds the attachment ID -->

이제 깔끔한 위젯과 깨진 아이콘 위젯을 구분하는 습관: 빈 가드. 아무것도 선택되지 않은 미디어 필드는 빈 속성을 렌더링합니다 <img src=""> 깨진 이미지로 표시됩니다. 마크업 감싸기:

{% if hero_image.url %}
<img src="{{ hero_image.url }}" alt="{{ hero_image.alt }}">
{% endif %}

필드는 CSS 탭에서도 작동합니다. 배경 슬롯은 한 줄입니다:

.hero-banner {
  background-image: url('{{ hero_image }}');
}

손대지 않은 채 통과하는 대체 텍스트를 조심하세요. {{ hero_image.alt }} 미디어 라이브러리가 보유한 모든 것을 인쇄하고 라이브러리는 빈 alt 필드가있는 이미지로 가득합니다. 가드는 속성을 현재 상태로 유지하지만 텍스트를 발명 할 수 없습니다. 클라이언트를 위해 구축 된 위젯은 편집자에게 라이브러리의 alt 텍스트를 채우라고 말하는 메모를받을 자격이 있습니다.

Elementor 에서 미디어 컨트롤 사용 #

사용자 정의 위젯을 Elementor 의 페이지에 추가하고,페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다. 미디어 필드는 레이블 아래에 Elementor 의 표준 이미지 선택기 상자로 렌더링합니다.

상자를 클릭하면 WordPress 미디어 라이브러리가 열리고 설정한 미디어 유형으로 필터링됩니다. 파일을 선택하거나 업로드하고 확인하고 미리보기가 선택 항목이 도착하는 순간 업데이트됩니다.

나중에 이미지를 교환하는 것은 동일한 클릭입니다. 제거하면 값이 비워지며,이는 정확히 귀하의 경우입니다 {% if %} 가드 커버.

일반적인 사용 사례 #

• 영웅 및 배너 이미지img 태그 또는 CSS 배경으로 사용됩니다.
• 아바타와 헤드샷 추천 및 팀 위젯.
• 로고스 머리글, 바닥글 및 클라이언트 스트립 위젯.
• 카드 섬네일 각 위젯 인스턴스에 하나의 이미지가 있는 경우.
• 장식 섹션 배경 통과시키다 background-image CSS 탭에서.

미디어 분야와 협력하기 위한 팁 #

• 항상 함께 지키십시오 {% if hero_image.url %}. 설정되지 않은 필드는 빈 src와 깨진 이미지 아이콘을 렌더링합니다.
• 대체를 인쇄합니다. alt="{{ hero_image.alt }}" 비용이 들지 않으며 라이브러리의 대체 텍스트를 마크업에 전달합니다.
• CSS 배경에 직접 토큰을 사용합니다. url('{{ hero_image }}') CSS 탭을 읽을 수 있게 유지합니다.
• 기본 이미지 설정. 실제 사진과 함께 페이지에 떨어지는 위젯은 그 자체로 판매; 회색 자리 표시자는 그렇지 않습니다.
• 미디어 유형으로 필터링합니다. 슬롯이 이미지라면 그렇게 말하세요. 그러면 라이브러리에서는 비디오를 제공하지 않습니다.
• 바로가기는 url 전용이라는 것을 기억하세요. URL 이외의 모든 속성에는 점 표기법이 필요합니다; 에 대한 바로 가기가 없습니다 id 또는 alt.

자주 묻는 질문 #

감싸는 #

위젯 빌더 미디어 필드는 단일 이미지 워크호스입니다. 패널의 라이브러리 선택기,템플릿의 URL 바로가기,에 대한 점 표기법 id 그리고 alt, 그리고 an {% if %} 위젯과 깨진 이미지 아이콘 사이에 서 있는 경비원. 하나의 이미지가 많아지면 위로 이동합니다 갤러리 분야 그리고 그것의 루프. 나머지 부분을 탐색하십시오 마스터 애드온 위젯 및 확장, 그리고 보세요 가격 페이지 각 계획에 포함된 내용입니다.