엘리멘터에서 진행 막대 만들고 조절하기

진행률 표시줄은 프로젝트나 목표의 진행 상황을 방문자에게 매력적으로 표시하는 웹 디자인의 효과적인 요소입니다. Elementor은 워드프레스를 위한 가장 인기 있는 페이지 빌더 플러그인 중 하나로, 진행률 표시줄을 웹사이트에 쉽게 통합할 수 있는 기회를 제공합니다. 이 안내서는 Elementor에서 진행률 표시줄을 만들고 사용자 정의하는 각 단계를 안내합니다.

주요 인사이트

• 진행률 표시줄은 진행과 목표를 시각적으로 보여줍니다.
• 제목, 값 및 색상을 개별적으로 조정할 수 있습니다.
• 내부 텍스트는 선택적으로 표시하거나 숨길 수 있습니다.
• 디자인에 맞게 표시줄을 조정하기 위해 다양한 스타일과 사용자 정의 옵션을 사용할 수 있습니다.

단계별 안내

우선 워드프레스 사이트를 열고 Elementor 편집기로 이동합니다. 거기서 새 요소를 추가하고 진행률 표시줄을 선택할 수 있습니다.

이제 진행률 표시줄 제목을 입력할 준비가 되었습니다. "매출 목표"와 같은 적절한 제목을 생각하면 방문자에게 그것이 무엇인지에 대한 첫 번째 신호를 제공합니다.

다음으로 목표나 성공 메시지를 설정해야합니다. 목표를 정확히 보여주려는 것과 무엇인가 고민하고 해당 필드에 작성합니다. 이 단계는 사용자가 진행률 표시를 이해하기 쉽게 돕습니다.

이제 진행률 표시줄의 색상을 정할 수 있습니다. 이것은 필수적이지는 않지만 디자인을 조정하기 위한 좋은 기회입니다. 웹사이트의 나머지 부분과 조화를 이루는 색조를 선택할 수 있습니다.

그런 다음 백분율을 조정할 수 있습니다. 여기서 진행 상황을 40%로 설정할 수 있습니다. 최댓값을 100%로, 최솟값을 0%로 설정할 수 있음을 기억하십시오. 이 피드백은 방문자가 신속하게 진행률을 파악하는 데 도움이됩니다.

백분율은 표시 또는 숨김 상태로 설정할 수 있습니다. 텍스트를 가릴 때 종종 더 매력적으로 보이며, 특히 깔끔한 디자인을 선호하는 경우에 유용합니다. 프로젝트에 가장 적합한 변형을 고민해보세요.

원한다면 백분율을 포함하는 내부 텍스트를 추가할 수도 있습니다. 이 기능은 즉각적인 진행을 나타내고자 하는 경우 특히 유용합니다. 내부 텍스트를 사용하지 않기로 결정하면 이곳에서도 숫자를 숨길 수 있습니다.

이제 진행률 표시줄의 스타일에 대해 얘기해봅시다. 바의 색상, 채우지 않은 부분의 배경색 및 높이를 개별적으로 조정할 수 있습니다. 채워진 영역에는 어두운 녹색을 선택하고 맑은 외관을 위해 배경색을 중립적으로 선택할 수 있습니다.

또한 진행률 표시줄의 모서리를 둥글게 만들어 더 매력적인 모양을 만들 수 있습니다. 진행이 100%에 이를 때까지 앞면만 둥글게 만들 수 있음을 유념해주세요.

내부 텍스트를 조정하려면 텍스트 색상과 서체를 변경할 수도 있습니다. 진행에 초점을 맞추기 위해 글꼴을 비활성화하는 선택도 할 수 있습니다.

마지막으로 제목의 텍스트 색상과 스타일을 조정할 수 있는 고급 설정으로 가봅시다. 제목이 두드러지도록 검은색 굵은 제목과 선택적 그림자를 사용할 수 있습니다.

지금 변경 사항을 저장하고 결과를 확인해보세요. 백분율을 표시하는 것이 의미 있는지 결정할 수 있습니다. 그렇지 않으면 진행률 표시줄은 여전히 매력적으로 표시됩니다.

이제 진행률 표시줄은 애니메이션 없이 설정된 값을 보여줍니다. 대신 진행이 즉시 시각화됩니다.

Elementor의 Pro 버전을 사용 중이라면 추가로 동적 속성을 사용할 수 있습니다. 이 기능은 외부 데이터나 데이터베이스 값을 기반으로 진행률 표시줄을 사용자 정의하는 데 특히 유용합니다.

요약

이 안내서에서는 Elementor에서 진행률 표시줄을 만들고 사용자 정의하는 방법을 배웠습니다. 제목과 진행을 설정하고, 색상을 선택하고 다양한 조정을 통해 매력적이고 효과적인 진행률 표시줄을 통합할 수 있습니다.