Elementor에서 아이프레임 위젯을 만드는 방법 | 2가지 쉬운 방법

Iframe은 주로 웹사이트를 실행하는 동일한 HTML 구조의 일부입니다. 이를 통해 다른 웹사이트의 콘텐츠를 웹사이트에 추가하거나 삽입할 수 있습니다.

여러 가지 이유로 웹페이지에 iframe 위젯을 만들어야 할 수 있습니다. 여기에는 이미지, 동영상, 다른 웹페이지 등이 포함됩니다.

일반적으로 외부 소스에서 대상 항목을 빠르게 로드하고 사이트의 부하를 줄이는 것이 좋습니다.

임베드하는 방법은 Elementor에서 iframe 위젯을 만드는 두 가지 방법이 있습니다:

• 원시 쇼트코드 사용
• 엘렘엔터 아이프레임 플러그인 사용

이 블로그에서는 Elementor에서 iframe 위젯을 만드는 방법을 정확히 알려드립니다.

방법 1: 쇼트코드로 Elementor iframe 위젯 만들기

오픈소스 소프트웨어인 워드프레스의 일부인 Elementor에는 많은 통합 기능이 있습니다. 그중 하나가 바로 쇼트코드입니다. iframe과 같은 작업에도 단축 코드를 사용할 수 있습니다.

간단히 말해, 워드프레스 구텐베르크 편집기 또는 Elementor 편집기를 사용하여 페이지를 열고 단축 코드를 삽입하고 iframe을 불러올 수 있습니다. 파이처럼 쉽습니다!

페이지에서 HTML 편집기 블록을 가져와 위의 코드를 추가하기만 하면 됩니다. 이렇게 하면 원하는 콘텐츠/웹사이트를 400px 높이의 상자에 간단히 불러올 수 있습니다.

iframe 위젯을 만들면 콘텐츠의 모양을 사용자 지정하는 데 사용할 수 있는 몇 가지 속성이 있습니다.

• Src - 소스 링크. (https://) 사이트 보안 프로토콜의 차단을 피하기 위해 필요할 수 있습니다.
• 너비/높이 - 콘텐츠 크기 영역을 정의하는 픽셀 값입니다.
• 정렬 - 페이지 내 iframe 정렬을 정의합니다.
• 프레임 테두리 - 값이 1보다 크거나 같으면 iframe 주위에 테두리를 추가합니다. 값이 0이면 테두리를 표시하지 않습니다.
• 스크롤 - '예', '아니오', '자동'을 정의하여 iframe에서 콘텐츠 스크롤 허용 옵션을 설정합니다.

HTML 코드를 제외하고 iframe은 CSS 속성도 지원합니다. 따라서 더 많은 기능을 추가할 수 있습니다.

한 가지 기억해야 할 점은 모든 웹사이트가 iframe을 지원하는 것은 아니라는 점입니다. 즉, 웹사이트가 iframe을 거부할 수도 있고 그 반대의 경우도 마찬가지입니다.

메토스 2: 플러그인을 사용하여 Elementor에서 iframe 위젯 만들기

iframe을 만들기 위한 iFrame 위젯을 찾고 있다면 가장 좋은 옵션은 다음과 같습니다. Elementor 애드온-요소 팩. 이 플러그인은 전용 Elementor iframe용 위젯.

그리고 아이프레임 위젯 를 사용하면 외부 웹사이트, Google 지도, 암호화폐 통계 또는 앱을 Elementor 디자인에 바로 삽입할 수 있습니다. 다음의 간단한 단계를 따라 설정하세요.

1단계: Elementor에 아이프레임 위젯 삽입하기

1. 다음에서 페이지를 엽니다. Elementor 편집기.
2. 위젯 검색창에 다음을 입력합니다. "Iframe".
3. 위젯을 선택하고 Element Pack Pro 로고.
4. 페이지 섹션으로 끌어다 놓습니다.
5. 기본적으로 URL을 추가할 때까지 플레이스홀더가 표시됩니다.

2단계: URL 추가 및 iframe 레이아웃 구성하기

1. 다음으로 이동 콘텐츠 → 레이아웃.
2. 에서 콘텐츠 소스 URL 필드에 임베드하려는 링크를 붙여넣습니다.
   • 예시:
     • Google 지도 링크 → 위치를 표시합니다.
     • 암호화폐 통계 URL → 실시간 암호화폐 데이터를 표시합니다.
     • 웹사이트 URL → 전체 웹사이트를 표시합니다.
3. 레이아웃 옵션을 조정합니다:
   • 자동 높이 → 아이프레임 높이를 자동으로 조정합니다.
   • 아이프레임 높이 → 사용자 지정 고정 높이를 설정합니다.
   • 아이프레임 컨테이너 너비 → 컨테이너 너비를 조정합니다.
   • 응답률 → 너비 × 높이 비율을 유지합니다.
   • 정렬 → 아이프레임의 위치(왼쪽, 가운데, 오른쪽)를 지정합니다.

참고: 만약 Iframe 위젯이 Elementor에서 전체 화면을 점유하고 있습니다.의 높이/너비 또는 응답률 설정에 문제가 있는 경우가 많습니다. 이 문제를 해결하려면 자동 높이 를 클릭하고 사용자 정의 아이프레임 높이 (예: 400-600px)를 조정하고 아이프레임 컨테이너 너비 로 설정하는 대신 100%로 변경하세요. 또한 다음 사항도 확인하세요. 응답률 를 활성화하면 강제로 아이프레임이 늘어날 수 있습니다. 따라서 비활성화하거나 16:9와 같은 적절한 비율을 설정하세요.

4. 4. 구성 지연로드 설정 그리고 추가 설정 를 선택하면 더 나은 성능과 전체 화면/스크롤 막대 옵션을 사용할 수 있습니다. 그리고 다음을 활성화해야 합니다. 지연 로드 를 사용하면 더 빠른 로딩을 위해 여러 개의 아이프레임을 사용할 수 있습니다.

3단계: 디바이스 목업에 아이프레임 표시하기

1. 다음으로 이동 콘텐츠 → 아이프레임 디바이스.
2. 사용 아이프레임 장치 표시.
3. 미리 빌드된 디바이스 프레임 중에서 선택하세요: 크롬, 파이어폭스, 사파리, 엣지, 태블릿, 모바일 또는 사용자 지정.
4. 다음을 선택하는 경우 사용자 지정를 사용하여 사용자 지정 너비 × 높이를 적용하여 Notch추가 버튼을 클릭하거나 베젤.

4단계: iframe 사용자 지정 및 스타일 지정하기

1. 다음으로 이동 스타일 → 장치.
2. iframe 모양을 사용자 지정합니다:
   • 베젤 색상(색상1) → 외부 프레임 색상을 조정합니다.
   • 노치 색상(색상2) → 노치 스타일 색상을 변경합니다.
   • 버튼 스타일링 → 버튼 색상, 너비 및 오프셋 사용자 지정으로 이동합니다.
3. 모서리를 둥글게 처리하거나 프레임 두께를 조정하여 세련된 느낌을 연출하세요.

5단계: 미리보기 및 게시

1. Elementor의 반응형 모드 를 사용하여 여러 기기에서 iframe 모양을 확인할 수 있습니다.
2. 성능을 위해 높이, 너비 또는 지연 부하를 미세 조정합니다.
3. 모든 것이 완벽해 보이면 업데이트/게시.

팁: 일부 웹사이트에서는 아이프레임 임베딩을 차단합니다. 이 경우 해당 웹사이트의 공식 임베드 코드 또는 공유 링크를 사용하세요.

이 위젯을 사용하여 동영상, 오디오, 텍스트, 이미지, 웹사이트 등 다양한 유형의 콘텐츠를 추가할 수 있습니다.

이 동영상을 시청하여 Elementor에서 iframe 위젯을 올바르게 사용하는 방법을 알아보세요.

Element Pack의 iframe 위젯은 통합된 지연로드 기능을 제공합니다. 따라서 이 도구를 사용하여 웹사이트 성능을 개선할 수 있습니다. 이것을 확인하세요. 요소 팩 데모 페이지 를 예로 들 수 있습니다.

결론

널리 사용되는 기능인 IFrame을 위젯으로 만들어 보다 역동적이고 쉽게 사용할 수 있도록 했습니다.

보안 정책이 엄격한 웹사이트에서는 iframe을 통한 콘텐츠 삽입을 허용하지 않을 수 있습니다. 하지만 지원하는 웹사이트의 수는 더 많습니다. 따라서 웹 사이트에 다층 콘텐츠를 추가하기위한 빠른 솔루션입니다. 오늘 아이프레임 위젯을 만드는 방법을 배웠기를 바랍니다.

깨어 있어 주셔서 감사합니다!

관련 게시물:

• Elementor 페이지 빌더로 배경 동영상 추가하는 방법