Elementor Text Over Image: 25+ 호버 효과 (무료 위젯 튜토리얼)

Elementor 에서 이미지 위에 텍스트를 추가하는 것은 2 분 작업처럼 들립니다. 그런 다음 기본 위젯으로 시도하고 음수 여백,절대 위치 지정 및 모바일에서 깨지는 배경 이미지에 쌓인 Heading 위젯과 씨름하게됩니다. 더 빠른 방법이 있습니다. 무료 마스터 애드온의 이미지 호버 효과 위젯 어떤 이미지 위에 제목과 설명을 넣고 30 개의 호버 애니메이션 중 하나로 공개하며 그 중 8 개는 무료입니다. CSS 는 절대 건드리지 않습니다.

이 튜토리얼에서는 처음부터 Elementor 텍스트 over 이미지 섹션을 설정합니다: 이미지를 업로드하고,드롭다운에서 호버 효과를 선택하고,오버레이 스타일을 지정하고,누군가가 클릭하면 어떻게 되는지 결정합니다. 아래의 모든 스크린샷은 Elementor 편집기에서 바로 제공되므로 클릭 한 번으로 따라갈 수 있습니다.

이 가이드에서 다루는 내용:

• 이미지 위에 텍스트에 위젯이 필요한 이유
• 이미지 호버 효과 위젯을 한눈에 살펴보세요
• 이미지 위에 텍스트를 추가하는 방법(단계별)
• 오버레이 스타일링: 색상, 불투명도, 모양
• 제목과 설명의 타이포그래피입니다
• 클릭 동작: 팝업을 열거나 이미지를 연결합니다
• 텍스트를 읽을 수 있게 유지하는 디자인 팁
• 이미지 효과를 위한 기타 마스터 애드온 위젯
• 무료 vs Pro: 실제로 필요한 것
• 자주 묻는 질문

이미지 위에 텍스트에 위젯이 필요한 이유(CSS 해킹 아님)

Elementor 자신의 문서가 제안합니다 이미지 위에 텍스트를 위한 두 가지 해결 방법: 이미지를 섹션 배경으로 설정하고 안쪽에 Heading 위젯을 놓거나,음수 여백으로 위쪽으로 헤딩을 푸시합니다. 둘 다 정적 캡션에 대해 작동합니다. 둘 다 호버 공개,애니메이션 오버레이 또는 클릭 동작을 제공하지 않으며,네거티브 여백 트릭은 태블릿 및 모바일 중단점에서 무너지는 경향이 있습니다.

전용 위젯은 한 곳에서 그 모든 것을 해결합니다:

• 호버 공개가 내장되어 있습니다. 방문자가 마우스를 올릴 때까지 이미지는 깨끗하게 유지된 다음 제목과 설명이 애니메이션으로 표시됩니다.
• 하나의 설정 패널. 이미지, 텍스트, 오버레이 색상 및 타이포그래피는 세 개의 위젯이 아닌 단일 위젯에 있습니다.
• 기본적으로 반응형. 오버레이는 이미지와 함께 확장되므로 작은 화면에서는 아무 것도 제자리에서 벗어나지 않습니다.
• 작업을 클릭합니다. 전체 이미지는 링크 또는 팝업을 열 수 있습니다. 포트폴리오 그리드 및 서비스 카드는 이에 따라 다릅니다.

이것이 텍스트 오버 이미지 레이아웃이 모든 곳에 표시되는 이유입니다: 프로젝트 이름을 표시하는 포트폴리오 타일, 호버에 약력을 표시하는 팀 카드, 블로그 카테고리 배너 및 캡션이 디자인을 어지럽히는 갤러리 그리드.

이미지 호버 효과 위젯을 한눈에 살펴보세요

이미지 호버 효과 master Addons 무료 버전의 배송, a 80+ 위젯 및 확장 기능 라이브러리 30,000 + 활성 워드 프레스 사이트에서 실행. 여기에 당신이이 하나의 위젯에서 얻을 무엇이다:

• 30 개의 명명 된 호버 효과,각각 다른 공개 애니메이션. 8 개는 무료 (릴리,새디, 록시,부바, 로미오,레일라, 허니 및 오스카) 이며,치코, 말리,루비 및 다른 19 개는 프로가 필요합니다
• 선택 가능한 HTML 태그(H1~H6)가 있는 제목 필드로 오버레이 텍스트가 SEO 수정을 유지할 수 있습니다
• 짧은 지지선에 대한 설명 필드입니다
• 배경색, 이미지 불투명도 및 호버 불투명도 컨트롤을 오버레이합니다
• 테두리 반경, 패딩 (Pro), 상자 그림자, 제목과 설명을 위한 별도의 타이포그래피
• 세 가지 클릭 동작: 아무것도 없음, 링크 팔로우 또는 팝업 열기 (팝업 콘텐츠는 Pro 필요)

위젯, 8가지 무료 효과, 텍스트 필드 및 링크 클릭은 모두 Pro 라이센스 없이 작동합니다. 전체 설정 참조를 원하는 경우 이미지 호버 효과 문서 모든 컨트롤을 다룹니다.

Elementor에서 이미지 위에 텍스트를 추가하는 방법(단계별)

1 단계: 마스터 애드온 설치

WordPress 대시보드에서 다음으로 이동하세요 플러그인 > 새로 추가 그리고 “마스터 애드온”을 검색합니다. 설치하고 활성화하십시오 wordpress.org 에서 무료 플러그인. 무엇이든 당신을 넘어뜨린다면, 설치 가이드 그것을 통해 산책. 당신은 Elementor 활성도 필요하지만 무료 버전은 충분합니다.

2단계: 이미지 호버 효과 위젯을 페이지로 드래그합니다

Elementor 로 아무 페이지나 열고 위젯 패널에서 “이미지 호버 효과”를 검색합니다. Advanced Image,Image Hotspot,Image Comparison 과 같은 다른 MA 배지 위젯 중에서 해당 페이지를 섹션으로 드래그합니다.

3단계: 이미지를 업로드하세요

콘텐츠 탭은 다음으로 열립니다 효과 및 이미지 섹션. 클릭하다 이미지 업로드 그리고 미디어 라이브러리에서 무언가를 골라보세요. 두 가지 설정이 바로 아래에 있습니다:

• 이미지 크기 렌더링된 치수를 제어합니다. 기본값은 대부분의 레이아웃에서 작동합니다.
• 이미지 해상도 어떤 워드 프레스 생성 된 크기를로드 선택합니다. “전체”가장 날카로운 결과를 제공합니다. 이 타일의 여덟 또는 열이있는 페이지에서,대신 “대형”로 드롭; 아무도 그리드 크기에서 차이를보고 페이지가 눈에 띄게 빠르게로드됩니다.

4단계: 호버 효과를 선택하세요

여기 재미있는 부분이 있습니다. Open the 호버 효과 드롭 다운과 당신은 명명 된 효과의 전체 목록을 얻을: 릴리,새디, 록시,부바, 로미오,Layla, 꿀,오스카, 말리,루비, 마일로,덱스터, 사라,조, 치코,줄리아, 골리앗,헤라, 윈스턴,셀레나, 테리,피비, 아폴로,키라, 스티브,모세, 재즈,밍, 렉시,듀크. 처음 여덟 무료이며,나머지는 무료 플러그인에 프로 레이블을 수행.

각 이름은 오버레이 애니메이션과 텍스트 공개가 서로 다른 조합입니다. Sadie 는 아래에서 위로 그라데이션을 밀어 올립니다. Marley 는 밑줄로 제목을 넣습니다. Chico 는 이미지를 약간 확대하고 텍스트를 얇은 테두리로 프레임화합니다. 편집기 미리보기는 실시간으로 업데이트되므로 몇 가지를 클릭하고 이미지 위로 마우스를 가져가면 테스트할 수 있습니다. 여기 호버 중간에 Chico (Pro 효과) 가 있습니다:

빠른 그룹화 당신이 그들 모두를 통해 클릭을 저장:

• 미묘한 페이드: 릴리, 새디, 레일라, 조이. 포트폴리오에 대한 좋은 기본 선택.
• 방향성 슬라이드: 여보, 오스카, 로미오, 사라. 텍스트가 가장자리에서 밀려납니다.
• 줌 및 스케일: 치코, 부바, 마일로, 줄리아. 이미지가 움직여서 시선을 사로잡습니다.
• 장난스럽고 대담한: 말리, 루비, 덱스터, 골리앗, 아폴로. 더 강한 모션, 창조적 인 사이트에 가장 적합합니다.

5단계: 제목을 추가하세요

열다 향하고 섹션. 제목을 입력하고 다음을 선택하세요 HTML 태그. 이것은 보이는 것보다 더 중요합니다: 이미지가 서비스 그리드에 위치하면 H3 는 일반적으로 기본 H2 보다 페이지 계층 구조에 더 잘 맞습니다. 검색 엔진은이 태그를 페이지의 다른 제목처럼 읽습니다.

6단계: 설명을 작성합니다

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 설명 섹션은 호버의 제목 아래에 나타나는 작은 줄을 추가합니다. 하나 또는 두 개의 짧은 문장으로 유지하십시오. 긴 단락은 작은 이미지에서 잘리고 깨끗한 오버레이의 포인트를 물리칩니다.

오버레이 스타일링: 색상, 불투명도 및 모양

로 전환하십시오 스타일 탭. 그만큼 이미지 패널은 오버레이의 모양을 제어합니다:

• 배경 색상 호버에 나타나는 오버레이에 색조를 냅니다. 브랜드 팔레트에서 색상을 선택하십시오; 알파가 감소 된 #DD5555 와 같은 HEXA 값은 사진을 아래에 계속 표시합니다.
• 이미지 불투명도 휴식 상태를 설정합니다 호버 불투명도 오버레이가 나타날 때 이미지가 얼마나 어두워지는지 설정합니다. 둘 사이의 간격 (0.5 쉬고, 호버링 시 0.7 이라고 함) 은 공개가 고의적으로 느껴지도록 만듭니다.
• 이미지 필터 그리고 이미지 필터 호버링 분위기 전/후를 위해 그레이스케일이나 블러와 같은 CSS 필터를 추가합니다.

그 아래, 테두리 반경 전체 블록을 재형성합니다. 일치하는 값은 부드러운 둥근 모서리를 제공합니다; 비대칭 값 (100 상단 - 왼쪽,0 상단 - 오른쪽,100 하단 - 오른쪽,0 하단 - 왼쪽) 은 현대 기관 사이트의 많은에 볼 잎 모양을 만듭니다.

제목 및 설명의 타이포그래피

여전히 스타일 탭에 있습니다 제목 그리고 설명 패널은 각각 고유한 색상,타이포그래피 및 간격 컨트롤을 얻습니다. 글꼴 패밀리,크기, 무게,변환, 선 높이 및 문자 간격은 모두 여기에 있으며 설명을 위한 텍스트 그림자 옵션도 있습니다. 이미지가 밝은 경우 제목 색상을 어두운 값으로 전환하여 두 상태 모두에서 텍스트를 계속 읽을 수 있도록 합니다.

유지할 가치가있는 하나의 가독성 규칙: 텍스트와 그 뒤에있는 모든 것 사이의 명확한 대비를 목표로하십시오. 사진이 바쁜 경우 글꼴 무게만으로 싸우는 것이 아니라 이전 단계의 오버레이 색상과 불투명도에 기대십시오.

작업: 팝업을 열거나 전체 이미지를 연결합니다.를 클릭합니다

콘텐츠 탭으로 돌아갑니다 링크 또는 팝업? 컨트롤은 클릭이 무엇을 할지를 결정합니다. 작은 아이콘 토글 뒤에 세 가지 옵션이 있습니다: 없음,팝업, 외부 링크.

팝업 (Pro) 는 선택한 콘텐츠가 있는 오버레이 창을 엽니다. 콘텐츠 유형을 선택하고 WYSIWYG 편집기에서 직접 콘텐츠를 작성하거나 저장된 Elementor 템플릿을 로드합니다. 포트폴리오 그리드는 이를 지속적으로 사용합니다: 각 타일은 페이지를 떠나지 않고 사례 연구를 엽니다.

링크 전체 이미지를 클릭 가능한 카드로 바꿉니다. URL 을 링크 URL 필드에 붙여 넣으면 전체 호버 영역이 그곳을 가리키며,모바일에서 탭 대상에 대한 작은 텍스트 링크를 능가합니다.

이 위젯을 넘어 더 많은 팝업 패턴(종료 의도, 스크롤 트리거, 시간 제한 팝업)을 원하는 경우 방법을 참조하세요 elementor 에서 무료로 팝업을 추가하세요.

완성된 결과

미리보기를 누르고 이미지 위로 마우스를 가져가세요. 오버레이가 페이드 인되고,제목과 설명이 선택한 효과로 표시되며,커서는 클릭 동작에 신호를 보냅니다:

총 빌드 시간은 약 5 분입니다. 그리고 모든 선택은 위젯 설정에 있기 때문에,아무것도 다시 만들지 않고 다음 달에 효과를 바꾸거나 오버레이를 다시 색칠할 수 있습니다.

텍스트 오버 이미지를 읽을 수 있게 유지하는 디자인 팁

• 그리드당 하나의 효과. 6 타일 포트폴리오를 구축하면 모든 타일에 동일한 호버 효과를 부여합니다. 혼합 효과는 우연으로 읽혀집니다.
• 먼저 대비하세요. 흰색 텍스트에는 어두운 오버레이가 필요합니다; 어두운 텍스트에는 밝은 이미지나 밝은 오버레이 색조가 필요합니다.
• 짧은 설명. 열 단어 이하 오버레이는 티저, 단락이 아닙니다.
• 접촉에 시험. 전화기에서 첫 번째 탭은 오버레이를 드러내고 두 번째 탭은 클릭 동작을 실행하므로 작은 화면에서 공개된 상태가 완전해 보이는지 확인하세요.
• 국경 반경과 일치하십시오 페이지의 나머지 부분으로. 날카로운 모서리 카드 옆에 100px 잎 모양이 보입니다.

더 넓은 모션 디자인 지침을 보려면 다음 가이드를 참조하세요 Elementor 애니메이션 효과 호버링, 스크롤 및 입장 애니메이션이 각각 자리를 차지할 때 커버합니다 마스터 애드온 애니메이션 기능 페이지에서는 플러그인이 애니메이션으로 만들 수 있는 다른 기능을 보여줍니다.

이미지 효과를 위한 기타 마스터 애드온 위젯

이미지 호버 효과는 텍스트 공개에 적합한 도구이지만 몇 가지 형제 위젯이 이웃 사용 사례를 다룹니다:

• 고급 이미지 오버레이 텍스트 없이 단일 이미지에 3D 틸트,리본 및 배지를 추가합니다.
• 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 플립박스 위젯 공개 상태의 버튼이나 아이콘이 필요할 때 카드를 완전히 디자인된 뒷면으로 뒤집는 것이 좋습니다.
• 이미지 핫스팟 제품 콜아웃에 이상적인 대화형 툴팁 마커를 하나의 이미지의 특정 지점에 고정합니다.
• 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 이미지 회전목마 하나의 호버 타일이 충분하지 않을 때 다중 이미지 슬라이더를 처리합니다.
• 이미지 비교 두 가지 버전의 샷에 드래그 가능한 전후 슬라이더를 넣습니다.

무료 vs 프로: 실제로 필요한 것은 무엇입니까?

이미지 위의 기본 텍스트 섹션의 경우 무료 플러그인으로 충분합니다. 여기에는 위젯,8 개의 호버 효과 (Lily,Sadie, Roxy,Bubba, Romeo,Layla, Honey 및 Oscar), 제목 및 설명 필드,이미지 필터 및 링크 클릭이 포함됩니다. Pro 는 다른 22 개의 효과,팝업 콘텐츠,패딩 및 둥근 모서리 컨트롤을 잠금 해제합니다. 마스터 애드온 프로 더 넓은 프리미엄 위젯 세트,템플릿 키트,위젯 빌더와 같은 추가 기능을 추가하므로 한 섹션이 아닌 전체 사이트를 구축하면 살펴볼 가치가 있습니다. 시도하고 마음을 바꾸면 14 일 환불 보장이 있습니다.

보는 것을 선호합니까? Elementor: 에서 빠른 연습을 해보십시오

자주 묻는 질문

감싸는 중

Elementor text over image 섹션은 오른쪽 위젯으로 5 분이 소요됩니다: 이미지 호버 효과를 드롭하고,사진을 업로드하고,이름으로 효과를 선택하고,오버레이를 브랜드에 맞게 스타일 지정하고,반응하는 동작이 이미 처리되었으며,무료 버전은 이 가이드의 기본 사항을 다룹니다.

무료 플러그인을 잡고 나머지 플러그인을 찾아보세요 위젯 및 확장 라이브러리그리고 막히면 위젯 문서 모든 설정이 매핑되어 있습니다.

관련 읽기: Elementor 애니메이션 효과, elementor Flipbox 위젯, 그리고 elementor 에서 팝업 추가하기 무료.