거의 모든 페이지는 짧은 헤드라인과 텍스트 한 줄의 아이콘을 페어링하는 작은 카드 한 줄이 필요하게 됩니다. 기능,서비스, 단계,연락처 세부 정보,모두 동일한 모양. The 정보 상자 위젯 인 Elementor용 마스터 애드온 해당 카드를 빌드합니다. 아이콘이나 이미지를 선택하고 제목과 설명을 입력하고 4 개의 기성 레이아웃 중 하나를 선택하고 Elementor 패널에서 모든 부분을 스타일링합니다.
아이콘, 제목, 문장이 사이트의 많은 섹션을 다루기 때문에 지속적으로 도달하게 되는 위젯 중 하나입니다. 아래는 스타일 사전 설정부터 아이콘, 제목, 설명 컨트롤까지 모든 설정을 살펴보는 것입니다.
Info Box 위젯이 수행하는 작업 #
정보 상자는 제목과 짧은 설명 위에 아이콘이나 이미지를 쌓습니다. 4 가지 스타일 사전 설정은 동일한 콘텐츠가 채워진 카드,경계 카드 또는 깨끗한 중앙 블록처럼 보일 수 있음을 의미하며 여러 개를 나란히 정렬하여 기능 행을 만들 수 있습니다.
제목은 어디서나 링크할 수 있고,아이콘은 업로드된 이미지로 바꿀 수 있으며,카드는 자체 배경,테두리, 호버 애니메이션을 전달할 수 있습니다. 세 개의 탭이 있습니다: 아이콘,제목, 텍스트의 내용,색상 및 간격의 스타일,일반적인 Elementor 옵션의 고급.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
- 염두에 두고 있는 아이콘이나 업로드할 이미지, 제목 및 설명 텍스트.
Info Box 위젯을 추가하는 방법 #
Elementor 편집기에서 을 엽니다 요소 패널 및 검색 정보 상자또는 마스터 애드온 섹션으로 스크롤합니다. 페이지로 드래그하십시오. 샘플 아이콘, “정보 상자 제목” 및 자리 표시자 설명이 로드되므로 빈 카드 대신 작업 카드에서 시작합니다.
내용을 설정 #
열다 콘텐츠 탭. 그만큼 콘텐츠 섹션에는 카드가 보여주는 모든 것이 포함되어 있으며 대부분의 편집이 이루어지는 곳입니다.
- 스타일 사전 설정: 변형 하나부터 넷까지를 선택하세요. 각각은 아이콘, 제목, 설명을 다르게 배치합니다(자세한 내용은 아래 참조).
- 이미지 또는 아이콘: 없음, 아이콘 또는 이미지에 대한 3 방향 토글 아이콘 라이브러리를 사용하려면 아이콘을 선택하고, 직접 업로드하려면 이미지를 선택합니다.
- 아이콘: 아이콘이 선택되면 Font Awesome 라이브러리에서 아이콘을 선택하거나 SVG를 업로드하세요.
- 제목: 헤드라인 텍스트 옆에 AI 쓰기 옵션이 있습니다.
- 제목 URL: 제목을 모든 페이지 또는 외부 URL에 대한 링크로 바꿉니다.
- 설명: 제목 아래의 텍스트 한두 줄과 AI로 쓰기.
그 아래에서 당신은 다음을 찾을 것입니다 도움말 문서 링크와 a 래퍼 링크 전체 카드를 클릭 가능하게 만드는 옵션(Pro 기능)입니다.
스타일 사전설정을 선택합니다 #
4 개의 사전 설정은 콘텐츠를 건드리지 않고 전체 모양을 변경하므로,이들 사이를 전환하는 것이 섹션에 맞는 레이아웃을 찾는 빠른 방법입니다.
- 변형 1: 아이콘, 제목, 설명이 적층된 중앙 카드로, 종종 채워진 배경에 표시됩니다.
- 변형 2: 제목 위에 아이콘이 왼쪽으로 정렬된 테두리 카드입니다.
- 변형 3: 표제 위의 색칠된 사각형 블록에 아이콘이 설정된 카드입니다.
- 변형 4: 원형 배지 안에 아이콘이 있는 중앙 레이아웃입니다.
아이콘 대신 이미지를 사용하세요 #
사진이나 로고가 아이콘보다 더 잘 맞는 경우 설정합니다 이미지 또는 아이콘 에 이미지 그리고 미디어 라이브러리에서 파일을 선택합니다. 그런 다음 위젯은 아이콘 슬롯에 이미지를 표시하며,이는 파트너 로고,제품 축소판 또는 그림이 포함된 기능 카드에 잘 작동합니다. 다시 로 설정합니다 없음 텍스트 전용 상자를 원할 때.
상자를 스타일링하십시오 #
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 스타일 탭이 분할됩니다 일반 스타일, 아이콘 스타일, 제목, 설명, 그리고 패턴 (프로 옵션). 일반 스타일은 카드 컨테이너 자체를 제어합니다.
- 테두리 유형, 너비 및 색상: 카드 주변의 윤곽.
- 테두리 반경: 모서리를 둥글게.
- 패딩 및 여백: 상자 안쪽과 주위 간격.
- 배경: 단색 또는 이미지 중 일반 배경과 호버 배경을 설정합니다.
- 호버 애니메이션: 누군가가 카드를 맴돌 때 Bob 또는 Grow와 같은 내장 모션 효과를 추가하십시오.
아이콘, 제목, 설명 스타일링 #
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 제목 그리고 설명 섹션에서는 텍스트의 타이포그래피, 색상, 정렬 및 간격을 처리합니다. 각 섹션에는 고유한 일반 및 호버 상태가 있으므로 방문자가 카드를 이동할 때 카드가 이동할 수 있습니다.
배경 색상 및 이미지 옵션 #
일반 스타일로 돌아갑니다 배경 제어에는 솔리드가 필요합니다 색상 또는 an 이미지. 채워진 “회사 소개” 카드와 같이 흰색 텍스트가 있는 색조 배경은 한 상자를 일반 상자 행에서 눈에 띄게 만드는 쉬운 방법입니다.
페이지의 결과 #
아이콘,제목 및 설명을 제자리에 두고 게시 또는 미리 보기 및 상자가 렌더링됩니다. 다음은 기능 또는 서비스 섹션에 맞는 레이아웃 종류인 서로 다른 스타일 사전 설정에 각각 있는 세 개의 정보 상자로 구성된 행입니다.
일반적인 사용 사례 #
- 기능 하이라이트 영웅 아래 서너 열 행에 있습니다.
- 서비스 또는 오퍼링 각각 아이콘과 한 줄 요약이 있습니다.
- 작동 방법 단계 단계별로 번호가 매겨지거나 테마가 있는 아이콘이 있습니다.
- 연락처 세부정보 전화, 이메일, 주소를 링크된 상자로 좋아합니다.
- 정보 또는 팀 콜아웃 채워진 배경 사전 설정을 사용하여 눈에 띄게 만듭니다.
Info Box 위젯 작업 팁 #
- 설명을 짧게 유지하세요. 한두 줄이 가장 잘 읽히고 카드 한 줄도 균등하게 유지합니다.
- 행에 걸쳐 아이콘 크기를 일치시킵니다. 각 상자에 동일한 아이콘 크기를 설정하여 정렬하십시오. 카드가 잘 일치하지 않을 때 일반적으로 꺼지는 것입니다.
- 행당 하나의 사전 설정을 사용합니다. 같은 행에 미리 설정을 혼합하면 고르지 않게 보이는 경향이 있습니다; 하나를 강조 표시하려면 배경색을 대신 전환하세요.
- 제목이나 래퍼를 연결합니다. 제목 URL을 사용하여 유용한 곳으로 사람들을 보내거나 래퍼 링크를 사용하여 전체 카드를 클릭할 수 있도록 만드세요.
- 미묘한 호버 애니메이션을 추가합니다. 작은 Bob 또는 Grow on 호버 신호는 카드가 방해받지 않고 상호 작용한다는 신호입니다.
자주 묻는 질문 #
마스터 애드온의 정보 상자 위젯은 무엇입니까?
아이콘이나 이미지,제목, 짧은 설명을 하나의 스타일 카드로 결합한 Elementor 위젯입니다. 4 개의 스타일 사전 설정과 색상,간격, 호버 효과를 제어할 수 있으므로 패널에서 바로 기능 행,서비스 목록 및 콜아웃을 구축할 수 있습니다.
Info Box에는 몇 개의 스타일 사전 설정이 있습니까?
Four. Variation One to Four 는 아이콘,제목, 설명을 각각 다르게 배열합니다. 가운데 채워진 카드부터 사각형 또는 원형 배지에 아이콘이 있는 테두리 레이아웃까지. 콘텐츠를 다시 실행하지 않고 스타일 사전 설정 드롭다운에서 전환합니다.
아이콘 대신 이미지를 사용할 수 있나요?
예. 콘텐츠 탭에서 이미지 또는 아이콘을 이미지로 설정하고 미디어 라이브러리에서 파일을 선택합니다. 위젯은 아이콘 대신 이미지를 표시하며,로고, 제품 샷 또는 그림이 포함된 카드에 잘 작동합니다. 텍스트 전용 상자의 경우 없음을 선택합니다.
정보 상자를 클릭 가능하게 만들 수 있나요?
제목을 콘텐츠 탭의 제목 URL 필드와 연결할 수 있습니다. 전체 카드를 클릭 가능하게 만들려면 Pro 기능인 래퍼 링크 옵션을 사용하십시오. 두 가지 모두 방문자가 상자를 탭하여 다른 페이지 또는 섹션에 도달하도록 합니다.
정보 상자에 호버 효과를 추가할 수 있나요?
예. 일반 스타일에는 Bob 및 Grow 와 같은 효과가 내장된 Hover Animation 드롭다운이 있으며,Icon, Title 및 Description 섹션에는 각각 색상 및 배경에 대한 자체 Hover 상태가 있습니다. 함께 누군가가 카드를 넘길 때 카드가 반응하도록 합니다.
감싸는 #
Info Box 위젯은 아이콘,제목 및 문장을 모든 섹션에서 반복할 수 있는 깨끗한 카드로 바꿉니다. 사전 설정을 선택하고 아이콘 또는 이미지를 선택한 다음 텍스트와 링크를 추가한 다음 상자에 스타일을 지정하여 페이지와 관련된 레이아웃 도구를 참조하십시오 플립박스 위젯 그리고 the 팀원 위젯, 전체를 찾아보세요 마스터 애드온 위젯 및 확장, 그리고 확인해 보세요 가격 페이지 각 계획에 포함된 내용입니다.
