인포박스
짧은 관심의 세계에서 정보를 제시하는 방법은 모든 차이를 만듭니다. 일반 텍스트 블록은 건너 뜁니다; 디자인 된 Info Box 가 읽혀집니다. 마스터 애드온 Info Box Element 는 컴팩트하고 강력한 콘텐츠 모듈을 만드는 데 도움이됩니다. 전문적인 스타일 사전 설정으로 시작한 다음 아이콘이나 이미지,강력한 제목 및 명확한 설명을 추가합니다. 모든 레이어를 독립적으로 스타일 지정 – 배경,테두리, 텍스트 및 호버 효과 – 서비스 하이라이트,기능 설명자 또는 페이지에 앉아있는 것이 아니라 CTA 를 만들기 위해 작동합니다.
미리 만들어진 스타일 사전 설정 및 레이아웃
크리에이티브 블록을 이기고 시간을 절약하세요. 조화로운 레이아웃과 시각적 스타일을 즉시 적용하는 10 개의 독특한 스타일 사전 설정 (변형 1 부터 10 까지) 중에서 선택하세요. 간단한 아이콘 왼쪽 디자인,중앙 카드 또는 현대적인 배너 스타일 상자가 필요하다면,시작점이 있습니다. 이 사전 설정은 기본 구조와 스타일을 처리하므로 콘텐츠와 미세 조정에 집중할 수 있어 첫 번째 클릭부터 세련된 모습을 보장합니다.
- 10+ 기성품 디자인: 즉각적인 시각적 구조를 위해 “변형 1,”“변형 9,” 등과 같은 사전 설정을 적용합니다.
- 레이아웃 다양성: 아이콘/이미지 배치 (상단, 왼쪽, 오른쪽) 및 콘텐츠 흐름에 대해 다른 배열을 가져옵니다.
- 디자인 일관성: 사이트 전체의 모든 정보 상자가 응집력 있고 전문적인 기반을 공유하도록 보장합니다.
타이포그래피 및 텍스트 제어
텍스트의 모양을 정밀하게 제어합니다. 제목과 설명을 독립적으로 스타일링합니다. 각각에 대해 타이포그래피 (글꼴,크기, 무게), 색상 및 정렬을 설정합니다. 일반 및 호버 상태에 대해 서로 다른 텍스트 색상을 정의할 수도 있어 응집력 있는 대화형 환경을 만들 수 있습니다. 텍스트 블록 주위에 패딩을 조정하여 호흡 공간을 만들고 메시지가 설득력 있는 만큼 읽기 쉽도록 합니다.
- 별도의 텍스트 스타일 지정: 제목과 설명에 고유한 타이포그래피와 색상을 적용합니다.
- 대화형 텍스트 색상: 사용자가 전체 정보 상자 위로 마우스를 가져가면 텍스트 색상을 변경합니다.
- 정렬 옵션: 레이아웃과 사전 설정에 맞게 텍스트를 왼쪽, 가운데 또는 오른쪽으로 정렬합니다.
호버 상태를 사용한 고급 스타일링
컨테이너를 디자인의 핵심 부분으로 만듭니다. 배경 (색상,그라데이션 또는 이미지) 과 전체 테두리 컨트롤 (유형,너비, 색상,반경) 로 일반 스타일을 스타일링합니다. 완벽한 간격을 위해 패딩과 여백을 적절하게 제어한 다음 별도의 일반 상태와 호버 상태를 스타일링하여 생동감을 불어넣습니다. 사용자가 상호 작용할 때 배경 색상,테두리를 변경하거나 호버 애니메이션을 적용하기도 합니다. 이렇게 하면 정적 상자가 매력적인 대화형 요소로 변환됩니다.
- 이중 상태 배경: 일반 상태와 호버 상태에 대해 서로 다른 배경 색상이나 이미지를 설정합니다.
- 완벽한 테두리 제어: 모든 면의 테두리 유형, 너비, 색상 및 반경을 디자인합니다.
- 대화형 피드백: 호버 애니메이션 효과(페이드, 푸시, 성장 등)를 사용하여 사용자 상호 작용에 보상합니다.
Infobox에 대해 자주 묻는 질문
이 정보 상자의 가장 일반적인 용도는 무엇입니까?
믿을 수 없을 정도로 다재다능합니다. 가장 많이 사용되는 것은 다음과 같습니다: 서비스/기능 쇼케이스 (아이콘 + 제목 + 간단한 설명), 팀원 프로필 (이미지 + 이름 + 역할), 연락처 (아이콘 + “전화” + 번호), 프로모션 CTA (아이콘 + 매력적인 제목 + 제공 링크).
제목뿐만 아니라 전체 상자를 페이지에 연결할 수 있나요?
기본적으로 제목에만 링크를 추가할 수 있습니다. 하지만 두려워하지 마세요. 래퍼 링크를 활성화하면 전체 정보 상자에 링크를 추가할 수 있습니다.
아이콘을 사용해야 하나요, 이미지를 사용해야 하나요?
아이콘은 상징적이고 단순한 컨셉 (“설정”을 위한 장비, “연락처”를 위한 전화기) 에 가장 적합합니다. 완벽하게 확장되고 가볍습니다. 브랜드 인지도를 위해 특정 로고,사람의 얼굴 또는 제품 사진을 보여줘야 할 때 이미지를 사용하십시오.
호버 효과가 필요한가요?
필요하지는 않지만 적극 권장됩니다. 미묘한 호버 효과 (배경 색상 변경 또는 그림자 등) 는 사용자에게 귀중한 시각적 피드백을 제공하여 요소가 상호 작용적임을 나타냅니다. 사이트의 전문적이고 세련된 느낌을 크게 향상시킵니다.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
