Elementor은 당신의 워드프레스 웹사이트를 디자인하는 데 다양한 도구를 제공합니다. 그 중 하나는 아이콘입니다. 아이콘은 단순한 장식뿐만 아니라 기능적인 사용자 경험을 향상시키고 중요한 정보를 한눈에 전달하는 데 도움을 줄 수 있습니다. 여기에서 Elementor에서 아이콘을 사용하고 수정하는 방법을 배워보세요. 그렇게 함으로써 웹사이트를 더욱 향상시킬 수 있습니다.
중요한 포인트
- 아이콘은 예술적이거나 정보적인 기능을 모두 할 수 있는 다재다능한 요소입니다.
- 색상, 크기, 모양 및 애니메이션을 포함하여 아이콘을 개별적으로 수정할 수 있습니다.
- 링크 옵션을 통해 아이콘을 효과적으로 탐색에 활용할 수 있습니다.
단계별 안내
단계 1: 아이콘 추가하기
섹션에 아이콘을 추가하려면 아이콘 위젯을 페이지의 원하는 곳으로 끌어다 놓으세요. 일반적으로 별 아이콘이 미리 선택되어 표시됩니다.
단계 2: 아이콘 변경하기
기존 아이콘을 클릭하여 선택 창을 열 수 있습니다. 여기서 여러 가지 아이콘 중 선택할 수 있습니다. 예를 들어, 콘텐츠에 특정 주제를 할당하기 위해 택시 아이콘을 선택할 수 있습니다.
단계 3: 아이콘 유형 선택하기
Elementor에서는 일반 아이콘, 솔리드 아이콘 및 브랜드 아이콘 세 가지 유형의 아이콘을 제공합니다. 일반 아이콘은 주로 윤곽만 가지고 있고, 솔리드 아이콘은 완전히 채워져 있는 반면 브랜드 아이콘은 아마존이나 애플 로고와 같이 잘 알려진 로고에 해당합니다.
단계 4: 표시 설정 조정하기
아이콘의 표시 방법을 여러 가지 방식으로 조정할 수 있습니다 - "스택" (완전히 채워짐), "테두리" (윤곽), "기본값" (표시된 배경). 웹사이트의 미학에 가장 적합한 옵션을 선택하세요.
단계 5: 아이콘 크기와 모양 조정하기
아이콘의 모양도 중요한 요소입니다. 원형 또는 사각형 중 어느 것을 선택할지 결정할 수 있습니다. 원은 종종 조화롭다고 여겨지며, 사각형은 다른 그래픽적인 인상을 줍니다.
단계 6: 링크 설정하기
상호작용을 위해 링크를 추가할 수 있습니다. 예를 들어, 아이콘 클릭 시 방문자가 해당 아이콘을 클릭하여 홈페이지로 이동할 수 있도록 홈페이지 주소를 입력하세요.
단계 7: 스타일 조정하기
"스타일"에서 주요 및 보조 색상을 설정할 수 있습니다. 호버 시 효과를 위해 색상 전환 방법을 지정할 수도 있습니다. 예를 들어, 주요 색상을 빨강으로, 보조 색상을 검정으로 변경할 수 있습니다.
단계 8: 호버 효과 정의하기
사용자 경험을 향상시키기 위해 호버 요소에 애니메이션 효과를 추가할 수 있습니다. "Push" 또는 "Grow" 등의 옵션을 선택하여 원하는 효과를 지정하세요.
단계 9: 크기 및 간격 설정하기
아이콘의 크기는 조정할 수 있지만, 간격 또는 패딩이 내부 테두리와 아이콘 사이의 공간을 결정합니다. 원하는 균형을 찾기 위해 이러한 값을 조정해 보세요.
단계 10: 값 연결하기
다른 모서리에 대해 개별 설정을 하려면 값을 연결하거나 별도로 조정할 수 있습니다. 연결된 값은 모든 측면에 대한 변경 사항이 동시에 적용되도록 합니다.
단계 11: 고급 설정 확인하기
고급 설정에서 기본 설정과 동일한 옵션을 찾을 수 있습니다. 페이지 내에서 일관된 표시를 보장하기 위해 모든 항목이 올바르게 구성되어 있는지 확인하세요.
요약
요소를 추가하고 사용자 정의하는 기본 단계를 익힌 Elementor 아이콘을 사용하여 웹 사이트를 미적으로 매력적이고 기능적으로 만들 수 있습니다. 아이콘 선택부터 색상, 크기 및 링크 설정까지 – 이러한 기술을 사용하여 웹 페이지를 디자인할 수 있습니다.
