Elementor를 사용하여 투명한 헤더를 만드는 방법은 무엇입니까?

게시 됨: 2022-03-01

투명한 헤더는 사이트의 모양을 개선하는 좋은 방법이 될 수 있습니다. 그것은 귀하의 웹사이트 디자인을 눈에 띄게 만들고 사이트 방문자에게 보다 상호작용적으로 보이게 합니다.

그러나 프로그래밍 언어를 몰라도 Elementor를 사용하여 WordPress에서 투명한 헤더를 만들 수 있습니까? 대답은 예입니다! 당신은 확실히 할 수 있습니다. 이 기사에서는 Elementor 투명 헤더를 쉽게 만드는 지침을 보여줍니다.

목차
[보이기][숨기기]
  1. 투명 헤더 사용의 장점
    1. 긴 웹 페이지에 탁월
    2. 실행 가능한 웹 사이트에 가장 적합
    3. 사이트 탐색 기능 향상
  2. Elementor Pro를 사용하여 투명한 헤더를 만드는 방법은 무엇입니까?
    1. Elementor Pro 플러그인 설치 및 활성화
    2. 사이트 메뉴 만들기
    3. Elementor Pro를 사용하여 일반 헤더 만들기
    4. Elementor Pro를 사용하여 투명 스티커 헤더 만들기
  3. Elementor를 사용하여 무료로 투명한 헤더를 만드는 방법은 무엇입니까?
    1. Elementor 플러그인용 Elementor 및 필수 애드온 설치 및 활성화
    2. 사이트 메뉴 만들기
    3. Elementor용 필수 애드온을 사용하여 투명한 고정 헤더 만들기
  4. Woostify 사용자를 위한 투명한 헤더를 만드는 방법은 무엇입니까?
  5. 마지막 단어

투명 헤더 사용의 장점

elementor-transparent-header-1

매력적인 Elementor 투명 헤더를 쉽게 만들 수 있습니다. 그러나 원하는 경우 방문자가 페이지 콘텐츠를 스크롤할 때 한 단계 더 나아가 문제를 수정할 수 있습니다. 다음은 장점입니다.

긴 웹 페이지에 탁월

투명 스티커 헤더를 사용하는 것은 방문자가 즐거운 경험을 할 수 있도록 하는 세련되고 빠른 방법입니다.

웹사이트가 보다 사용자 친화적인 탐색 시스템을 갖도록 도울 수 있습니다. 사이트 콘텐츠가 매우 긴 경우 이 이점이 매우 유용합니다.

실행 가능한 웹 사이트에 가장 적합

투명한 고정 헤더는 소매 또는 전자 상거래 사이트와 같은 실행 가능한 웹 사이트에서 가장 잘 작동합니다. 방문자가 페이지 콘텐츠에 있는 동안 특정 작업을 수행하기를 원하기 때문입니다.

웹 사이트를 탐색하는 동안 헤더가 아름답게 표시되면 방문자가 탐색하기가 더 편리합니다.

또한 헤더가 투명하기 때문에 콘텐츠의 가독성이 떨어지지 않습니다. 따라서 투명한 헤더를 추가하면 사이트의 이탈률을 줄이고 방문자를 효율적으로 안내하는 데 도움이 될 수 있습니다.

사이트 탐색 기능 향상

사이트에 투명한 고정 헤더를 사용하면 방문자가 즉각적인 조치를 취할 수 있습니다. 특정 옵션을 검색할 때 시간을 절약할 수 있습니다.

그리고 홈페이지 곳곳에 브랜드 로고를 넣는 대신 투명한 스티커 헤더에 우아하게 표시할 수 있습니다.

Elementor Pro를 사용하여 투명한 헤더를 만드는 방법은 무엇입니까?

이제 Elementor Pro를 사용하여 투명 헤더를 만들고 사용자 지정하는 방법을 알아보겠습니다.

Elementor Pro 플러그인 설치 및 활성화

사이트에 아직 Elementor Pro가 없으면 설치하고 활성화해야 합니다.

  1. WordPress 대시보드에서 플러그인 > 새로 추가 로 이동합니다.
elementor-transparent-header-2
  1. 'Elementor'를 입력하여 플러그인을 찾습니다. 그러면 Elementor Website Builder가 옵션으로 나열됩니다.
  2. 지금 설치 버튼과 활성화 버튼을 각각 클릭합니다.
  3. Elementor Pro를 성공적으로 구매한 후 my.elementor.com으로 이동합니다.
  4. 구매 후 이메일로 받은 정보로 로그인합니다.
  5. 다음으로 프로필 페이지로 이동합니다. 오른쪽 상단 모서리에 있는 플러그인 다운로드 버튼을 클릭하여 .zip 파일을 컴퓨터에 다운로드합니다.
elementor-transparent-header-3
  1. 사이트의 WordPress 대시보드에서 플러그인 > 새로 추가 를 클릭합니다. 그런 다음 왼쪽 상단 모서리에 있는 플러그인 업로드 버튼을 클릭합니다.
  2. 파일 선택 버튼을 클릭합니다. 방금 다운로드한 .zip 파일을 선택합니다. 그런 다음 활성화 를 클릭합니다.
  3. 사이트 대시보드 상단에 라이선스 키 활성화를 요청하는 알림이 표시됩니다.

사이트 메뉴 만들기

다음으로 아직 하지 않았다면 WordPress 대시보드를 사용하여 헤더 메뉴를 만들어야 합니다. 아래는 소개 가이드입니다.

  1. WordPress 대시보드에서 모양 > 메뉴 로 이동합니다.
elementor-transparent-header-4
  1. 메뉴 이름 텍스트 상자에 메뉴 이름을 입력합니다. 그런 다음 메뉴 만들기 버튼을 클릭합니다.
  2. 왼쪽 패널에 초점을 맞춥니다. 여기에서 사이트의 페이지, 게시물, 카테고리 및 사용자 정의 링크를 메뉴에 추가할 수 있습니다.
elementor-transparent-header-5
  1. 메뉴 항목을 드래그 앤 드롭하여 재정렬하거나 오른쪽 패널에 하위 메뉴를 만들 수 있습니다.
elementor-transparent-header-6
  1. 만족스러우면 메뉴 저장 버튼을 클릭하는 것을 잊지 마십시오.

Elementor Pro사용 하여 일반 헤더 만들기

  1. WordPress 대시보드에서 템플릿 > 새로 추가 로 이동합니다.
elementor-transparent-header-7
  1. 팝업 창이 나타납니다. 드롭다운 메뉴에서 Elementor 헤더 템플릿을 선택하고 템플릿 이름 지정 텍스트 상자에 이름 을 입력합니다. 그런 다음 CREATE TEMPLATE 버튼을 클릭합니다.
elementor-transparent-header-8
  1. Elementor 템플릿 갤러리가 팝업으로 나타납니다. 모든 Elementor 헤더 스타일을 탐색할 수 있습니다. 즐겨찾기를 선택했으면 커서를 해당 항목으로 이동한 다음 삽입 버튼을 클릭합니다. 당신은 또한 그들 모두를 미리 볼 수 있습니다.
elementor-transparent-header-9

Elementor Pro 를 사용하여 투명 스티커 헤더 만들기

  1. 이제 Elementor Pro를 사용하여 헤더를 투명하게 만들어야 합니다. 그렇게 하려면 머리글 위의 6개 점 버튼을 클릭합니다.
elementor-transparent-header-10
  1. '레이아웃' 섹션의 메뉴 드롭다운 메뉴에서 원하는 메뉴를 선택합니다.
elementor-transparent-header-11
  1. 스타일 탭으로 이동하여 헤더의 배경색과 투명 값을 변경합니다. '배경' 섹션에서 클래식 배경 유형(그림붓으로 표시)을 선택합니다.
elementor-transparent-header-12
  1. 색상 선택기 버튼을 클릭합니다. 그런 다음 원하는 색상과 투명 값을 선택합니다.
  2. 타이포그래피, 배경 오버레이, 테두리 및 구분선을 포함하여 헤더의 전체 모양을 추가로 변경할 수 있습니다. 자유롭게 실험해 보세요.
  3. 다음으로 고급 탭으로 이동합니다. 그런 다음 모션 효과 섹션으로 스크롤합니다. 스크롤 효과 옵션을 활성화합니다.
elementor-transparent-header-13
  1. 효과 기준 드롭다운 메뉴에서 전체 페이지 옵션을 선택합니다.
  2. 마지막으로 고정 드롭다운 메뉴에서 상단 옵션을 선택합니다.
  3. 만족스러우면 게시 버튼을 클릭하여 변경 사항을 적용하십시오.

결과는 아래와 유사할 것입니다.

elementor-transparent-header-14

Elementor를 사용하여 무료로 투명한 헤더를 만드는 방법은 무엇입니까?

예산이 부족하고 Elementor Pro에 돈을 쓰고 싶지 않다면 투명한 헤더를 생성하기 위해 다른 플러그인이 필요합니다.

이 기사에서는 Elementor 플러그인용 Essential Addons를 사용할 것입니다. 백만 명이 넘는 활성 사용자가 있는 가장 인기 있는 위젯 라이브러리입니다.

웹 사이트를 눈에 띄게 만들고 가능한 한 매력적으로 만들기 위해 많은 위젯을 무료로 받을 수 있습니다. 투명한 헤더를 만드는 데 프리미엄 버전이 필요하지 않습니다.

Elementor 플러그인용 Elementor 및 필수 애드온 설치 및 활성화

  1. WordPress 대시보드에서 플러그인 > 새로 추가 로 이동합니다.
elementor-transparent-header-15
  1. ' Elementor '를 입력하여 플러그인을 찾습니다. 그러면 옵션으로 나열된 Elementor 플러그인이 표시됩니다.
  2. '지금 설치' 버튼과 '활성화' 버튼을 각각 클릭합니다.
  3. Elementor 플러그인용 Essential Addons로 위의 과정을 반복하세요.

사이트 메뉴 만들기

우리는 이미 위에서 이것을 다루었습니다. 노하우는 스크롤을 올려주세요.

Elementor 용 필수 애드온을 사용 하여 투명한 고정 헤더 만들기

  1. 필수 추가 기능 > 요소 로 이동합니다. 여기에서 Simple Menu 위젯을 활성화합니다. SAVE SETTINGS 버튼을 클릭하는 것을 잊지 마십시오.
elementor-transparent-header-16
  1. Elementor로 새 페이지/게시물을 만들거나 기존 페이지/게시물을 엽니다.
  2. 왼쪽 하단 모서리에 있는 설정 버튼(톱니바퀴로 표시)을 클릭합니다. 페이지 레이아웃 드롭다운 메뉴에서 'Elementor Canvas'를 선택합니다. 이런 식으로 테마와 함께 제공되는 헤더를 제거할 수 있습니다.
elementor-transparent-header-17
  1. 아홉 사각형 아이콘을 클릭하여 위젯 메뉴로 돌아갑니다. 단순 메뉴 위젯을 검색합니다. 원하는 위치에 끌어다 놓습니다.
elementor-transparent-header-18
  1. 일반 섹션의 메뉴 선택 드롭다운 메뉴에서 원하는 메뉴를 선택합니다.
elementor-transparent-header-19
  1. 스타일 탭으로 이동하여 헤더의 배경색과 투명 값을 변경합니다.
elementor-transparent-header-20
  1. 배경 섹션에서 클래식 배경 유형(페인트로 표시됨)을 선택합니다.
  2. 색상 선택기 버튼을 클릭합니다. 그런 다음 원하는 색상과 투명 값을 선택합니다.
  3. 타이포그래피, 배경 오버레이, 테두리 및 구분선을 포함하여 헤더의 전체 모양을 추가로 변경할 수 있습니다. 자유롭게 실험해 보세요.
  4. 다음으로 고급 탭으로 이동합니다. 그런 다음 위치 지정 섹션으로 스크롤합니다. 위치 드롭다운 메뉴에서 고정 옵션을 선택합니다.
elementor-transparent-header-21
  1. 아홉 사각형 아이콘을 클릭하여 위젯 메뉴로 돌아갑니다. 스페이서 위젯을 검색합니다. Simple Menu 위젯 바로 아래에 끌어다 놓습니다.
elementor-transparent-header-22
  1. 스페이서 섹션에서 헤더의 높이와 일치하도록 공백 값을 조정합니다.
elementor-transparent-header-23
  1. 만족스러우면 게시 버튼을 클릭하여 변경 사항을 적용하십시오.

Woostify 사용자를 위한 투명한 헤더를 만드는 방법은 무엇입니까?

Woositfy 테마를 사용하는 경우 무료 버전이라도 몇 분 안에 전체 사이트에 아름답고 투명한 헤더를 빠르게 적용할 수 있습니다. 노하우를 알아보려면 아래 지침을 따르십시오.

  1. WordPress 대시보드에서 모양 > 사용자 정의 로 이동합니다.
elementor-transparent-header-24
  1. 그런 다음 레이아웃 > 헤더 투명 으로 이동합니다.
elementor-transparent-header-25
elementor-transparent-header-26
  1. 투명 헤더 활성화 토글을 켭니다.
elementor-transparent-header-27
  1. 새로운 일반디자인 탭에서 필요에 따라 새로운 투명 헤더를 사용자 정의할 수 있습니다. 예를 들어 404, 게시물 등과 같은 특정 페이지에서 활성화/비활성화할 수 있습니다.
elementor-transparent-header-28
elementor-transparent-header-29
  1. 결과가 만족스러우면 게시 버튼을 클릭하는 것을 잊지 마십시오.

마지막 단어

Elementor 투명 헤더를 만드는 것은 사용자가 사이트를 탐색하는 데 도움이 되는 세련된 접근 방식입니다.

우리가 만든 헤더는 완전히 반응합니다. 따라서 이 문제에 대해 크게 걱정할 필요가 없습니다. Woostify를 사용하는 사람들은 세 번째 방법으로 가야합니다. 아름다운 투명한 헤더를 만들고 싶을 때 가장 간단하고 빠른 방법이기도 합니다.