요소와 함께 WordPress에서 상단 막대를 추가하는 방법

상단 막대는 WordPress에서 중요한 메시지, 프로모션 및 Call to CAPTION을 강조하는 효과적인 방법을 제공합니다. 사용자의 탐색 경험을 방해하지 않고 방문자의 관심을 끌기 위해 웹 페이지 상단에 위치합니다.

잘 디자인 된 상단 막대는 방문자의 관심을 끌면서 뉴스 레터에 가입하고 제한된 시간 제안을 잡고 새로운 콘텐츠 탐색과 같은 행동으로 안내 할 수 있으므로 전환을 크게 향상시킬 수 있습니다. 사용자를 방해하지 않고 지속적인 알림으로 작동합니다.

WordPress에 상단 막대를 추가하는 것은 Elementor와 매우 간단합니다. 이 기사에서는 요소와 함께 WordPress에서 상단 막대를 추가하는 방법에 대한 단계별 안내서를 다룹니다. 끝까지 우리와 함께있어.

상단 막대는 무엇입니까?

상단 막대는 메인 헤더 위의 웹 사이트 상단에 표시되는 좁은 수평 섹션입니다. 팝업 또는 배너와 달리 연락처 세부 정보, 링크 설명, 중요한 공지 사항, 프로모션 제안 및 메시지를 전시하는 데 사용됩니다. 색상, 글꼴 및 브랜드 별 버튼과 같은 광범위한 사용자 정의로 사용자 참여를 향상시킬 수 있습니다.

상단 막대가 항상 웹 사이트 상단 24/7에 표시되는 것은 아닙니다. 대신, 홍보 목적으로 캠페인 기간 동안 나타납니다. 사용 사례에 따라 다른 이름으로 정의됩니다. 다음 섹션에서 논의하겠습니다. 계속 읽으십시오.

웹 사이트에서 호출 된 최상위 바는 무엇입니까?

1 분 전에 말했듯이, 웹 사이트의 최상위 막대는 목적과 기능에 따라 다른 이름으로 정의됩니다. 아래에 나열된 상단 막대에 사용 된 몇 가지 일반적인 용어를 살펴보십시오.

• 공지 사항 - 공지, 이벤트 알림 및 중요한 업데이트를 공유하는 데 사용됩니다.

• 알림 표시 줄- 제한된 시간 제안, 시스템 유지 보수 뉴스 및 긴급 메시지를 표시합니다.

• 프로모션 바 - 특별 프로모션, 독점 할인 및 판매를 늘리기위한 캠페인을 강조합니다.

• 정보 표시 줄 - 연락처 번호, 쇼핑 세부 정보, 지역 주소 및 업무 시간을 전시합니다.

• 스티커 바 - 사용자가 게시물과 페이지를 스크롤하는 경우에도 웹 사이트 상단에 고정되어 있습니다.

• 플로팅 바 - 게시물과 페이지를 스크롤하여 눈에 띄는 존재를 보장 할 때 이동합니다.

요소와 함께 WordPress에서 상단 막대를 추가하는 방법

이론적 인 부분은 끝났습니다. 이제이 섹션의 튜토리얼 부분을 다루며 요소를 사용하여 WordPress에서 상단 막대를 추가하는 방법에 대한 단계별 안내서를 설명합니다.

전제 조건 : Elementor 또는 Happyaddons를 설치하십시오

전체 웹 사이트에서 최상위 막대를 만들려면 프리미엄 기능인 Elementor 테마 빌더에 액세스해야합니다. 플러그인의 프리미엄 버전을 사용하려면 무료 옵션을 찾고 있으려면 HappyAddons 플러그인을 사용해야합니다.

HappyAddons는 실제로 요소에서 일반적으로 프리미엄 인 많은 무료 기능을 갖춘 Elementor 플러그인의 애드온입니다. 예를 들어, HappyAddons에는 테마 빌더가 있으며 요소와 매우 유사하지만 무료로 사용할 수 있습니다.

따라서이 섹션에서는 HappyAddons 플러그인을 사용하여 튜토리얼을 설명합니다. 사이트에 다음 플러그인을 설치하고 활성화하십시오.

• 요소
• Happyaddons

사이트에 설치 및 활성화되면 아래 설명 된 자습서를 시작하십시오. 아래 이미지에서 볼 수있는 것과 같은 WordPress에서 상단 막대를 만드는 방법을 보여 드리겠습니다.

1 단계 1 : HappyAddons 테마 빌더로 이동하십시오

HappyAddons> 테마 빌더 로 이동하십시오. Elementor 플러그인과 마찬가지로 HappyAddons 플러그인의 테마 빌더로 헤더, 바닥 글, 블로그 게시물 템플릿 및 아카이브 페이지를 만들 수 있습니다.

단계 2 : 헤더 섹션으로 이동하십시오

상단 막대가 웹 헤더 상단에 표시되면 헤더 섹션에서 사용자 정의해야합니다. 따라서 Elementor 옵션을 사용하여 헤더를 엽니 다.

Elementor에서 Canvas 컨텐츠를 만드는 방법을 알아보십시오.

단계 03 : 헤더 위에 새 컨테이너를 추가하십시오

헤더에 커서를 호버링하면 플러스 (+) 아이콘이 표시됩니다. 이 아이콘을 클릭하면 위의 헤더에 새 컨테이너를 추가 할 수 있습니다. 그것을하십시오.

04 단계 : 상단 막대를 사용자 정의하고 컨텐츠를 추가하십시오.

상단 막대의 배경에 대조적 인 색상을 추가해야합니다. 이렇게하려면 컨테이너에서 6 개의 음반 아이콘을 클릭하십시오> 스타일 탭으로 이동> 색상 옵션 찾기> 색상 선택.

텍스트 편집기 위젯을 상단 막대 섹션에 추가하십시오. 이렇게하면 섹션에 텍스트 내용을 추가 할 수 있습니다.

오른쪽 사이드 바의 텍스트 편집기에서 상단 막대에 실시간으로 표시 될 원하는 텍스트 콘텐츠를 작성할 수 있습니다.

텍스트 편집기 섹션에서 아래 표시된 옵션에서 상단 막대에 추가 한 텍스트의 색상 과 대담함을 변경할 수 있습니다.

단어 사이에 공백을 추가 하고 특정 단어를 강조 할 수도 있습니다. 우리는이 튜토리얼을 위해 텍스트에 이것을 수행했습니다. 아래에서 볼 수 있습니다.

Happyaddons를 사용하면 상단 막대의 배경에 입자 효과를 추가 할 수 있습니다. 행복한 입자 효과는 작고 빛나는 입자가 웹 페이지에서 역동적으로 움직여 활기차고 매력적인 사용자 경험을 만드는 시각적 애니메이션 기술입니다.

이것을 추가하려면 스타일> 행복한 입자 효과 로 이동하십시오. 그런 다음 입자 배경을 활성화하기 위해 전환하십시오 .

다음으로 입자 스타일, 입자 색상, 불투명도, 입자 수, 입자 크기 및 이동 속도를 선택할 수 있습니다. 직접 할 수 있기를 바랍니다.

Happy Particle 기능이 어떻게 작동하는지 확인할 수 있도록 짧은 클립을 추가했습니다. 이것은 정말로 상단 막대를보기 좋게 만듭니다.

국경 섹션을 확장하십시오. 원하는대로 테두리 너비와 색상을 설정할 수 있습니다. 그러나 우리는 테두리를 추가하는 것이 최상위 막대에 중요하지 않다고 생각합니다. 따라서 피할 수 있습니다.

이제 모양 분배기 섹션을 확장하십시오. Shape Divider 옵션을 사용하면 섹션의 상단 또는 하단에 사용자 정의 가능 및 동적 모양을 추가 할 수 있습니다.

그러나이 옵션은 상단 막대에도 중요하지 않습니다. 따라서 피하는 것이 좋습니다. 그러나이 기능을 상단 막대에 추가하고 싶다고 생각되면 그렇게 할 수 있습니다.

다음은 Elementor와 함께 인포 그래픽 웹 페이지를 만드는 방법에 대한 안내서입니다.

단계 5 : 상단 막대의 고급 설정을 구성합니다

마지막으로 고급 탭 으로 오십시오. 여기에서 마진, 패드, 정렬, 순서, 위치, 위치, 높이, 모션 효과, 반응 형 등을 사용자 정의 할 수있는 다양한 옵션이 제공됩니다. 필요한 사용자 정의를 직접하십시오.

단계 06 : 장치 유형에서 상단 막대를 숨기십시오.

원하는 각 장치에서 상단 막대를 숨길 수 있습니다. 예를 들어 태블릿 장치의 상단 막대를 숨기고 싶습니다. 이렇게하려면 응답 섹션을 확장하십시오. 그런 다음 상단 막대를 숨길 장치 모드 옵션을 전환하십시오.

단계 7 : 최상위 막대 모바일 반응을 만듭니다

요소 패널의 바닥 글에서 응답 모드 옵션을 클릭하십시오 . 그런 다음 모바일 초상화 모드를 선택하십시오 .

최상위 막대 컨텐츠가 3 줄로 나타나고 데스크탑 모드에서 보는 방식과 달리 완벽하게 정렬되지 않음을 알 수 있습니다.

텍스트를 화면 크기에 적합하게 보이려면 모바일 인물 사진 모드를 유지하여 필요한 사용자 정의를 수행하십시오.

우리는 텍스트를 중앙에 정렬했습니다. 지금은 더 좋아 보이지 않습니까? 원하는 방식으로 더 사용자 정의 할 수 있습니다.

08 단계 : 변경 사항을 게시/업데이트합니다

모든 사용자 정의가 완료되면 요소 패널 하단의 게시/업데이트 버튼을 클릭하여 모든 변경 사항을 보존하십시오.

요소와 함께 WordPress에서 Lightbox를 만드는 방법을 살펴보십시오.

단계 9 : 웹 사이트의 상단 표시 줄을 미리 봅니다

이제 웹 사이트의 프론트 엔드로 오십시오. 상단 막대가 사이트 상단에 잘 표시되는 것을 볼 수 있습니다.

따라서 Elementor 플러그인을 사용하여 WordPress에서 상단 막대를 쉽게 만들 수 있습니다.

최종 생각

이 튜토리얼을 즐겼기를 바랍니다. 그러나 상단 막대에서 최선을 다하기 위해서는 신중하게 따라야 할 몇 가지 주요 사항이 있습니다. 웹 사이트의 브랜딩과 일치하는 깨끗하고 시각적으로 매력적인 디자인을 유지하는 데 중점을 둡니다. 가독성을 위해 대조적 인 색상을 선택하고 명확하고 간결한 텍스트를 사용하며 메시지를 잠재 고객과 관련하여 유지하십시오.

또한 모바일 응답 성을 최적화하여 상단 막대가 사용자 경험을 방해하지 않고 모든 장치에서 기능적으로 유지됩니다. 방문자를 압도 할 수 있으므로 너무 많은 정보로 상단 막대에 과부하를주지 마십시오. 애니메이션이나 효과를 사용하는 경우 전문성을 유지하기 위해 미묘하게 유지하십시오.

여전히 혼란이나 쿼리를 염두에두고 있다면 아래의 의견 상자를 통해 알려주십시오.