WordPress 편집기에서 버튼을 추가하는 방법 [튜토리얼]

워드프레스 버튼 블록이 중요한 이유는 무엇인가요?

웹사이트 탐색은 방문자와 고객에게 중요합니다. 한 하위 페이지에서 더 나아가도록 유도해야 합니다. 전체 쇼핑 과정을 안내해야 합니다. 그렇기 때문에 페이지 콘텐츠 내에 중요한 링크를 올바르게 삽입하는 것이 중요합니다.

기본적으로 두 가지 옵션이 있습니다. 표준 링크 또는 버튼을 사용합니다. 언제 먼저 사용할지, 나중에 사용할지에 대한 의견은 다양합니다. 한 페이지에 여러 가지 가능한 작업이 있는 것이 일반적입니다. 어떤 것이 기본이고 어떤 것이 보조인지 확인해야 합니다. 기본 작업에만 버튼을 사용하는 것이 좋습니다. 이렇게 하면 이 기본 동작의 가시성을 높일 수 있습니다. 방문자의 주의를 이 액션에 집중시킬 수 있습니다. 이를 콜투액션 버튼이라고 부를 수도 있습니다. 하나의 하위 페이지에 너무 많은 버튼을 만들지 마세요.

메인 버튼 기능은 무엇인가요?

• 방문자의 주의를 끌 수 있는 버튼 - 클릭 유도 문안
• 페이지 또는 게시물 콘텐츠를 분리하여 가독성을 높입니다.
• 페이지의 방향에 대한 도움말. 많은 방문자가 눈으로만 페이지를 스캔합니다.
• 하이퍼링크를 사용하여 방문자를 다른 페이지로 안내하기

버튼의 성공 여부를 결정하는 매개변수에는 여러 가지가 있습니다. 예를 들어 크기, 배치 또는 버튼 색상이 중요합니다. 표준 UI 및 UX 원칙을 따라야 합니다. 녹색은 구매와 같이 긍정적인 동작이 있는 버튼에 사용됩니다. 빨간색은 뉴스레터 구독 취소와 같이 부정적인 행동이 있는 버튼에 사용됩니다. 이러한 방식으로 올바르게 디자인된 버튼은 방문자의 행동에 직접적인 영향을 미칩니다.

워드프레스 페이지 또는 글에 버튼 추가하기

워드프레스 5 이전의 상황

워드프레스 블록 편집기가 개발되기 전에는 버튼을 추가하는 과정이 상당히 복잡했습니다. 이 기능은 워드프레스에 원래 없던 기능이었기 때문입니다. 페이지 빌더 또는 타사 플러그인이 포함된 테마를 사용할 수 있었습니다. 이 경우 단축코드로 버튼을 만들 수 있습니다.

이전 워드프레스 테마에서는 비주얼 에디터에서 단축코드를 사용하여 버튼을 추가할 수 있습니다. 쇼트코드 삽입 -> 버튼을 클릭하면 모달 창에서 다양한 설정을 지정할 수 있습니다. 텍스트, 텍스트 색상, 버튼 색상, URL, 정렬 등을 설정할 수 있습니다. 이러한 고급 설정 덕분에 프로그래밍 없이도 쉽고 빠르게 버튼을 추가할 수 있습니다.

워드프레스 편집기에서 버튼 블록을 사용하는 방법은 무엇인가요?

워드프레스 5 덕분에 두 번째 방법이 있습니다. 훨씬 쉽습니다. 워드프레스 비주얼 편집기는 유용한 블록을 많이 제공합니다. 웹사이트에 버튼을 만들려면 이제 편집기에서 워드프레스 버튼 블록을 사용할 수 있습니다.

워드프레스 편집기에서 버튼을 추가하는 방법 단계별 가이드

1. 먼저 버튼을 삽입할 위치를 결정해야 합니다.
2. 버튼 블록은 다양한 방법으로 추가할 수 있습니다:
- 상단 표시줄의 "+"를 클릭하거나 블록 편집기에서 버튼 블록을 선택하는 곳이면 어디든 클릭할 수 있습니다.

- 검색창을 사용하여 블록을 찾을 수도 있으며, "버튼"이라고만 입력하면 됩니다.

- "/"를 입력하면 사용 가능한 모든 블록에 액세스할 수 있습니다.

3. 생성된 버튼 블록을 추가로 구성할 수 있습니다.

버튼 텍스트 및 URL 주소 추가

워드프레스 블록 버튼이 생성되면 그 안에 텍스트를 입력할 수 있습니다. 클릭 유도 문안 버튼의 경우 명확한 메시지와 함께 짧은 텍스트를 사용하는 것이 좋습니다. 텍스트를 굵게, 이탤릭체 또는 밑줄로 설정할 수 있습니다. 이러한 모든 변경은 툴바를 클릭하여 수행할 수 있습니다. 버튼을 측면 또는 중앙에 정렬할 수도 있습니다.

버튼은 일반적으로 다른 페이지 또는 외부 웹사이트를 가리킵니다. 따라서 바로 아래에 URL 주소를 추가하는 입력란이 있습니다. URL을 추가할 때 텍스트를 선택할 필요가 없다는 장점이 있습니다.

버튼 색상 변경

새로운 편집기를 사용하면 몇 초 만에 워드프레스 버튼 블록을 수정할 수 있습니다. 오른쪽 사이드바에서 설정을 사용하면 됩니다. 버튼 배경색이나 버튼 내부의 텍스트 색상을 변경할 수 있습니다. 기본 사전 정의된 색상을 사용하거나 직접 선택할 수 있습니다. 모든 변경 사항은 색상 조합이 괜찮은지 바로 확인할 수 있습니다.

회색 배경과 흰색 텍스트 색상과 같이 잘못된 조합을 선택하면 워드프레스 블록 편집기에서 해당 버튼이 웹사이트에서 읽을 수 없다는 경고를 표시하는 기능이 있습니다.

나만의 버튼 스타일 찾기

버튼을 매우 빠르게 만들거나 변경하려면 준비된 스타일 중 하나를 사용하면 됩니다. 버튼은 둥근 모양, 테두리 모양, 직사각형 모양 등으로 변경할 수 있습니다. 웹사이트 스타일이나 디자인에 가장 잘 어울리는 것이 무엇인지 실험해 보세요.

사용자 정의 CSS가 포함된 편집 버튼

커스텀 CSS 클래스를 사용하면 더 많은 커스터마이징이 가능합니다. 이렇게 하면 워드프레스 편집기에서 원하는 대로 자신만의 CSS 스타일과 스타일 버튼을 추가할 수 있습니다.

보시다시피 버튼 단축 코드를 사용하는 것보다 훨씬 쉬운 방법이 있습니다. 워드프레스 버튼 블록은 워드프레스 블록 편집기와 호환되는 모든 테마에서 사용할 수 있습니다. 새로운 Citadela 워드프레스 테마에 대해 자세히 알아보세요. 워드프레스 블록 편집기를 위해 특별히 설계 및 개발되었습니다.

마지막에 추가 팁

워드프레스 버튼 블록과 버튼 성공 자체를 모니터링하는 것을 잊지 마세요. Google 애널리틱스를 사용하는 경우 고유 URL을 만들 수 있습니다. 방문자 클릭을 추적하려면 다음을 추가할 수 있습니다. Google UTM 매개변수. URL 빌더를 사용하여 URL을 생성할 수 있습니다. 매개 변수를 추가하면 방문 출처를 식별할 수 있습니다. 방문자가 어디에서 쇼핑 페이지를 방문했는지 알고 싶을 때 매우 유용합니다.

현재 워드프레스 버튼 블록의 가장 큰 문제점은 무엇인가요? 아래 댓글에서 논의해 보세요. 웹사이트에서 버튼을 사용한 경험을 공유해 주세요.