[NEW] 웹 디자인의 인터랙티브 서클: 코딩 없이 Elementor에서 생성하는 방법
게시 됨: 2021-12-29텍스트가 많은 웹사이트는 보기에 좋지 않을 수 있습니다. 웹 사이트가 너무 많은 텍스트와 적은 시각적 구성 요소로 구성된 경우 Essential Addons의 대화형 원 을 사용하고 매력적인 원형 패턴으로 콘텐츠를 표시할 수 있습니다. 이 놀라운 위젯을 사용하여 최소한의 공간에 많은 콘텐츠를 표시하는 방법에 대해 자세히 알아보겠습니다.
![[NEW] 웹 디자인의 인터랙티브 서클: 코딩 없이 Elementor에서 생성하는 방법 1 Interactive circle](/uploads/article/3362/b127AGIAc85woExQ.jpeg)
웹사이트에 대화형 서클 위젯이 필요한 이유는 무엇입니까?
웹 디자이너에게 웹 사이트를 보다 인터랙티브하고 동시에 사용자의 입장에서 편리하게 만드는 것은 어려운 일입니다. 웹사이트에 텍스트 기반 콘텐츠가 많이 포함되어 있으면 올바른 방식으로 제공하기가 더 어려워집니다.
연구에 따르면 거의 38%의 사람들 이 매력적이지 않은 디자인 레이아웃이 있는 웹사이트의 참여를 중단합니다. 이 경우 웹사이트의 트래픽도 웹사이트 디자인에 따라 달라집니다. WordPress 웹 사이트에서 Essential Addons의 대화형 서클 위젯을 사용하여 텍스트 기반 콘텐츠를 효과적으로 디자인할 때 얻을 수 있는 모든 이점을 살펴보겠습니다.
웹사이트 콘텐츠의 애니메이션 프레젠테이션
웹사이트에 텍스트 기반 콘텐츠가 많이 포함되어 있어도 방문자를 끌어들이고 쉽게 확인할 수 있도록 매력적인 방식으로 제공할 수 있습니다. 웹사이트 자료를 표시하는 데 일반적으로 다른 패턴이 있으므로 약간의 움직임이 방문자의 관심을 끄는 데 도움이 될 수 있습니다. Essential Addons 의 Interactive Circle 위젯을 사용하면 애니메이션 패턴으로 텍스트 기반 콘텐츠를 선보이고 섹션을 더 매력적으로 보이게 할 수 있습니다.
![[NEW] 웹 디자인의 인터랙티브 서클: 코딩 없이 Elementor에서 생성하는 방법 2 Interactive Circle](/uploads/article/3362/UeKw9VefTWnUut87.gif)
귀하의 웹사이트를 위한 인터랙티브 및 반응형 디자인
반응형 디자인이 없으면 사용자가 검색 엔진에서 웹사이트를 찾거나 콘텐츠를 읽거나 웹사이트를 탐색하는 것이 어려울 수 있습니다. 레이아웃 결함, 이미지 불량, 텍스트가 너무 작거나 인포그래픽이 너무 많아 웹사이트가 어수선해 보이기 때문일 수 있습니다. 데스크탑이나 랩탑 컴퓨터를 사용하는 경우 모서리를 클릭하고 끌어 이 창의 크기를 조정할 수 있습니다.
Essential 애드온의 대화형 원형 위젯을 사용하면 웹사이트를 위한 동적 디자인을 더 쉽게 만들 수 있습니다 . 웹사이트 방문자가 웹사이트에 액세스하는 데 사용하는 장치의 종류에 관계없이 이 위젯을 사용하여 텍스트 기반 콘텐츠를 표시하면 디자인이 손상되지 않습니다.
![[NEW] 웹 디자인의 인터랙티브 서클: 코딩 없이 Elementor에서 생성하는 방법 3 Interactive Circle](/uploads/article/3362/FIiI4WFSzosHXGe8.gif)
아름다운 웹사이트를 만드는 인터랙티브 서클 위젯
이 위젯을 사용하여 텍스트 기반 콘텐츠를 매력적인 원형 동작으로 표시하여 웹사이트 사용자의 관심을 끌 수 있습니다. 예를 들어 콘텐츠 메뉴를 제공하려는 경우 대화형 서클을 사용하여 공간을 절약하면서 콘텐츠를 표시할 수 있습니다. 이런 식으로 간단한 텍스트 기반 콘텐츠가 더 매력적으로 보일 것입니다. Essential Addons 플러그인으로 Interactive Circle 위젯을 얼마나 쉽게 시작할 수 있는지 알아보겠습니다.
필수 애드온으로 인터랙티브 서클을 사용하는 데 필요한 것들
Elementor : Interactive Circle Widget을 사용하려면 먼저 Elementor를 설치하고 활성화해야 시작할 수 있습니다.
Elementor용 필수 애드온 : 'Interactive Circle' 위젯을 사용하려면 웹사이트에서 Elementor용 필수 애드온을 설치하고 활성화 해야 합니다 .
1단계: 필수 애드온 대화형 서클 위젯 활성화
Essential Addons 의 'Interactive Circle ' 위젯 을 사용하여 웹사이트를 보다 인터랙티브하고 매력적으로 만들어 봅시다 . 이 플러그인의 최신 버전을 사용하고 있는지 확인하기만 하면 됩니다.
Interactive Circle 위젯은 Elementor에서 활성화되어야 합니다. WordPress 대시보드의 Essential Addons Elements로 이동하여 ' Interactive Circle ' 위젯이 켜져 있는지 확인하세요. 변경 사항이 저장되었는지 확인하려면 ' 설정 저장 ' 버튼을 클릭하십시오.
![[NEW] 웹 디자인의 인터랙티브 서클: 코딩 없이 Elementor에서 생성하는 방법 4 Interactive Circle](/uploads/article/3362/XJSYMkrfykXadpql.gif)
Elementor 의 'Elements' 탭에서 ' Interactive Circle ' 위젯을 찾으 세요. 텍스트 기반 콘텐츠를 표시하려는 위치에 요소를 끌어다 놓습니다.
2단계: 콘텐츠 설정 사용자 지정 시작
이 위젯을 사용하면 기본 콘텐츠를 사용자 정의하고 자신의 콘텐츠를 추가할 수 있습니다. 일반 탭의 옵션에서 레이아웃을 설정할 수 있습니다. Interactive Circle 위젯은 미리 준비된 4개의 레이아웃 과 함께 제공됩니다 . 레이아웃을 사용해 보고 어떤 것이 텍스트 기반 콘텐츠에 가장 적합한지 확인하십시오.
![[NEW] 웹 디자인의 인터랙티브 서클: 코딩 없이 Elementor에서 생성하는 방법 6 Interactive Circle](/uploads/article/3362/A6lYDIEa3xPFkdyd.gif)
EA Interactive Circle 위젯의 버튼에 아이콘을 표시할지 아니면 텍스트를 표시할지 선택할 수도 있습니다. 아이콘과 텍스트를 숨기거나 표시하려면 '버튼' 설정에서 각각 ' 아이콘 표시 ' 및 ' 텍스트 표시' 옵션을 토글합니다. 이 위젯은 많은 사용자 정의에 매우 편리합니다. 옵션에서 선택하고 원하는 대로 원형 메뉴를 만들 수 있습니다.

![[NEW] 웹 디자인의 인터랙티브 서클: 코딩 없이 Elementor에서 생성하는 방법 7 Interactive Circle](/uploads/article/3362/MJTc9P0s0CY7hZc1.gif)
이 위젯을 사용하는 가장 중요한 부분은 자신의 콘텐츠를 제공하고 필요에 따라 더 많은 순환 옵션을 추가할 수 있다는 것입니다. '콘텐츠' 설정 에서 EA Interactive Circle 위젯으로 표시할 항목 수를 추가할 수 있습니다 . 새 항목을 추가 하려면 ' + 항목 추가 ' 버튼을 클릭하기만 하면 됩니다. 같은 방법으로 설정에서 항목을 제거하거나 복사할 수 있습니다. 그러나 디자인을 위해 한 번에 최대 8개의 옵션만 추가할 수 있습니다. 그렇지 않으면 시퀀스가 깨집니다.
![[NEW] 웹 디자인의 인터랙티브 서클: 코딩 없이 Elementor에서 생성하는 방법 8 Interactive Circle](/uploads/article/3362/LVLt9W3WTPZWHcwQ.png)
'버튼 ', '컨텐츠 ', '스타일 '의 세 가지 탭이 있습니다 . 항목에 대한 아이콘을 추가하고 '버튼' 탭의 ' 짧은 제목 ' 입력 필드에서 제목을 편집할 수 있습니다. 마찬가지로 '콘텐츠' 탭에서 항목에 콘텐츠를 추가하고 '스타일' 탭 에서 항목에 배경색을 추가할 수 있습니다 .
' 추가 설정 ' 옵션에서 추가 설정 옵션을 받아 EA Interactive Circle 위젯을 보다 동적으로 만들 수 있습니다. ' 마우스 이벤트 ' 옵션 에서 '클릭' 과 '호버' 상호작용 중에서 선택할 수 있습니다 . 또한 ' 추가 설정 ' 옵션을 사용하여 세련되고 눈길을 끄는 애니메이션을 추가 할 수도 있습니다 . 아래 그림과 같이 선택할 수 있는 세 가지 애니메이션 스타일이 있습니다.
![[NEW] 웹 디자인의 인터랙티브 서클: 코딩 없이 Elementor에서 생성하는 방법 9 Interactive Circle](/uploads/article/3362/WWTev3o82M6LibVm.gif)
3단계: 대화형 텍스트 기반 콘텐츠 스타일 지정
EA Interactive Circle 위젯에는 다양한 스타일 옵션이 있습니다. 이 옵션은 모든 사람의 대화형 서클 측면에서 큰 차이를 만들 수 있습니다. 배경색, 텍스트 패턴 또는 색상, 원 너비, 패딩 또는 병합을 변경하여 모양을 변경할 수 있습니다.
![[NEW] 웹 디자인의 인터랙티브 서클: 코딩 없이 Elementor에서 생성하는 방법 10 Interactive Circle](/uploads/article/3362/577uwuYVXV6foC9p.gif)
' 항목 ' 설정에서 EA Interactive Circle의 각 항목에 대한 타이포그래피를 변경할 수 있습니다. 각 항목의 너비와 아이콘 크기도 조정할 수 있습니다. 배경색, 텍스트 색상, 아이콘 색상 및 기타 여러 가지를 변경할 수도 있습니다.
![[NEW] 웹 디자인의 인터랙티브 서클: 코딩 없이 Elementor에서 생성하는 방법 11 Interactive Circle](/uploads/article/3362/Ul7JQideYKcbNXzN.gif)
대화형 서클의 모양에 만족하면 이제 페이지를 게시할 수 있습니다. 이 주제에 대해 만든 Elementor 대화형 서클을 살펴보세요.
![[NEW] 웹 디자인의 인터랙티브 서클: 코딩 없이 Elementor에서 생성하는 방법 12 Interactive Circle](/uploads/article/3362/ajP3cjXs6LAzvRe9.gif)
보시다시피, Elementor용 Essential Addons를 사용하면 멋진 Interactive Circle을 만들고 웹 페이지를 매우 단순한 방식으로 더욱 매혹적인 방식으로 바꿀 수 있습니다.
마지막으로, 우리는 지속적인 개선의 가치를 굳게 믿습니다. 이를 염두에 두고 우리는 Elementor 업데이트를 위한 환상적인 새로운 Essential Addons 를 제공하기 위해 열심히 노력하고 있으므로 Elementor로 훨씬 더 나은 웹사이트 디자인 경험을 할 수 있습니다.
그래서, 당신은 무엇을 잃을 필요가 있습니까? 가능한 한 빨리 Essential Addons 5.0으로 업데이트하여 Interactive Circle 위젯을 포함한 모든 새로운 고급 위젯과 확장 기능을 활용하십시오.
직접 사용해 보고 질문이 있는 경우 지원 팀 에 문의하세요 . 최신 Elementor 애드온, 웹 디자인 튜토리얼, 팁 및 트릭 등에 대한 자세한 내용은 블로그를 구독 하거나 친근한 Facebook 커뮤니티 에 가입하세요.
