Elementor를 사용하여 완전 맞춤형 웹사이트 바닥글을 만드는 방법

Elementor를 사용하여 완전 맞춤형 웹사이트 바닥글을 만드는 방법

코드 한 줄도 건드리지 않고 자신만의 웹사이트 바닥글을 만들고 맞춤설정하는 방법이 궁금하신가요? 

동화처럼 들리죠? 그런데… 이번에는 그 이야기가 현실이 됩니다! ✨

가장 인기 있는 페이지 빌더인 Elementor를 사용하면 눈에 띄는 바닥글을 만들 수 있는 완전한 유연성을 얻을 수 있습니다. 

처럼 웹 방문자 수 66% 실제로 스크롤 없이 볼 수 있는 부분 아래로 이동하려면 바닥글 섹션이 사용자와 상호작용해야 합니다. 그렇지 않으면 눈 깜짝할 사이에 엄청난 양의 고객을 잃게 될 것입니다.

하지만 아직 편집증에 빠지지 마세요! 이 글에서는 Elementor를 사용하여 귀하의 웹사이트에 맞는 완전 맞춤형 웹사이트 바닥글을 만드는 효과적인 방법을 보여드리겠습니다! 🙌

그럼, 들어가 보겠습니다! 

바닥글이 중요한 이유는 무엇입니까?

알고 계시나요? 약 16% 정도의 사업 쉽게 탐색할 수 있는 바닥글을 추가하면 되나요?

엄청난 사용자 참여 외에도 SEO에도 매우 효과적입니다. 내부 연결 구조를 개선하여 이전보다 탐색이 더 원활해졌습니다.

다행스럽게도 사이트 전체 링크 또는 상용구 링크와 같은 내부 링크가 포함된 눈길을 끄는 바닥글을 추가하기만 하면 이러한 모든 기능을 즐길 수 있습니다.

그런데 바닥글에는 링크만 포함되어 있나요? 🤔

안돼… ❗

당신은 당신을 추가할 수 있습니다 제품 데모, 구독 버튼 또는 문의 양식 도! 따라서 귀하의 고객은 귀하의 웹사이트를 쉽게 검색할 수 있을 뿐만 아니라 귀하의 제품에 대한 명확한 개념을 얻을 수도 있습니다.

꽤 인상적이죠?

기다리다! 특히 당신을 위한 또 다른 보너스 사실이 있습니다!

폴더 아래에 모든 기능을 추가하는 것 외에도 눈길을 끄는 CTA 버튼! 따라서 사용자는 깊은 인상을 받고 실제 고객으로 전환될 것입니다.

둘 모두에게 윈윈(win-win) 상황이 되는 거죠, 그렇죠?

바닥글 섹션을 만드는 방법과 Elementor를 사용하여 방문자의 경험을 향상함으로써 브랜드에 어떻게 도움이 될 수 있는지 알아보세요.

웹사이트 바닥글에 추가해야 할 사항

좋은 웹사이트 바닥글 디자인의 주요 요소는 다음과 같습니다. 나는 귀하가 직접 만들고 맞춤 설정할 수 있는 모든 섹션을 다루려고 노력할 것입니다. 

  1. 심벌 마크
  2. 회사 정보 
  3. 연락처
  4. 항해
  5. 지원하다
  6. 저작권, 서비스 약관, 개인 정보 보호 정책
  7. 소셜 미디어 아이콘
  8. 행동을 요구하다
참고: 웹사이트 바닥글 디자인을 너무 과하게 디자인하지 말고 최대한 단순하게 유지하세요.

Elementor로 사용자 정의 바닥글을 만드는 데 필요한 것

이 튜토리얼 블로그를 따르려면 두 가지가 필요합니다.–>

그리고 끝났습니다!

Elementor와 ElementsKit을 사용해야 하는 이유 

많은 코드와 그 모든 것으로 인해 웹 페이지를 디자인하는 데 문제가 있는 경우. 걱정 마! 가장 강력한 페이지 빌더 Elementor가 여기 있습니다! 

웹사이트 바닥글을 끌어서 놓기 방식으로 완벽하게 제어할 수 있습니다. 현재 바닥글의 모양이 마음에 들지 않으면 Elementor가 최선의 선택입니다. 

Elementor에는 웹사이트를 쉽게 사용자 정의할 수 있는 유용한 추가 기능이 포함되어 있습니다. ElementsKit은 강력한 바닥글 작성기, 85개 이상의 위젯 및 기성 바닥글 레이아웃을 통해 디자인을 향상시켜 가장 인기가 높습니다. 

이 튜토리얼에서는 ElementsKit을 사용하여 아름다운 사용자 정의 Elementor 바닥글을 만드는 방법을 알게 될 것입니다! 

이제 시작하겠습니다.

Elementor를 사용하여 완전 맞춤형 웹사이트 바닥글을 만드는 방법

이 섹션에서는 몇 단계만으로 웹사이트에 대한 사용자 대화형 바닥글을 사용자 정의하거나 생성하는 방법을 보여 드리겠습니다.

단계->1: 바닥글 추가

먼저 Elementor를 사용하여 완전 맞춤형 웹사이트 바닥글을 만들려면 웹사이트 관리 대시보드 패널에 로그인하세요. 

  • 로 이동 ElementsKit 내 템플릿 
  • 딸깍 하는 소리 새로운 걸 더하다

옵션이 포함된 팝업 상자가 열립니다.

단계->1: 바닥글 추가

단계->2: 바닥글 옵션 선택

  • 그런 다음 팝업 상자에 다음을 입력하십시오. 제목. 예: 맞춤 바닥글
  • 유형 선택 → 보행인
  • 조건 선택 → 전체 사이트
  • 토글 활성화 옵션 
  • 딸깍 하는 소리 “Elementor로 편집”

편집기 페이지가 열리고 여기에서 바닥글 섹션의 모양을 구성하게 됩니다.

단계->2: 바닥글 옵션 선택

3단계: 웹 바닥글 디자인 선택

웹사이트 바닥글 작성을 처음부터 시작하거나 이전에 만든 바닥글 중 하나를 시작점으로 선택할 수 있습니다.

  • 웹사이트의 바닥글을 디자인하려면 선택된 아이콘-> 로 이동 바닥글 탭
  • 다음을 클릭하세요. 삽입 버튼 추가하면 완료됩니다! 
단계->3: 바닥글 디자인 선택

단계->4: 일반 레이아웃 설정

이 설정에서 레이아웃 유형 맞춤 바닥글을 만들고 싶습니다.

  • 기본 사용자 정의 버튼을 클릭하세요: 바닥글 부분의 사이드바에서 레이아웃 섹션을 편집합니다.
  • 섹션 늘이기 활성화: JS를 사용하여 섹션을 페이지의 전체 너비로 늘립니다.
  • 콘텐츠 너비 설정: 드롭다운에서 콘텐츠 너비(박스형) 또는 전체 너비를 선택합니다. 또한 간단히 드래그하여 제어할 수도 있습니다. 
  • 열 간격 선택: 좁게, 확장, 넓게, 넓게를 선택하세요.
  • 높이 조정: 화면에 맞춤 또는 최소 높이를 선택하세요.
  • 수직 정렬을 선택합니다: 상단, 중간, 하단, 사이 공간, 주변 공간, 균등한 공간을 선택합니다.
  • 과다: 기본값으로 유지하거나 숨김 
  • HTML 태그 선택: 드롭다운에서 선택
단계->4: 일반 레이아웃 설정

검색 엔진 가시성을 높이려면 제품 웹사이트 바닥글에 회사를 연결해야 합니다. 이 경우 회사 로고를 클릭하면 사용자가 홈 페이지로 돌아갑니다. 그리고 간단한 단계만으로 매우 쉽게 로고를 추가할 수 있습니다. 

  • 다음을 클릭하세요. 로고 이미지→ 쉽게 이미지를 업로드하거나 미디어 파일에서 선택하세요.
  • 쉽게 선택하세요. 이미지 크기 드롭다운에서
  • 다음을 선택하세요. 조정 왼쪽, 중앙 또는 오른쪽
  • 어떤 유형이든 추가할 수 있습니다. 이미지 캡션 첨부 파일 캡션이나 맞춤 캡션 등
  • 다음을 선택하세요. 링크 유형 미디어 파일 또는 맞춤 URL. 리디렉션 URL을 제공할 수 있습니다. 
단계->5: 로고 추가

단계->6: 회사 설명 추가 또는 편집

이제 웹사이트 바닥글은 중요한 정보를 표시하는 장소입니다. 회사에 대한 간단한 개요를 쉽게 추가할 수 있습니다. 

  • 이 설정에서는 다음을 수행할 수 있습니다. 추가 또는 편집 모든 유형의 텍스트 
  • 드롭캡 활성화 콘텐츠 시작 부분에 더 눈길을 끄는 큰 글자를 표시합니다. 
단계->6: 회사 설명 추가 또는 편집

7단계: 소셜 공유 아이콘 추가

알고 계셨나요? 72%의 웹사이트는 소셜 미디어 아이콘을 사용합니다. Elementor로 완전한 맞춤형 웹사이트 바닥글을 만들려면?

Twitter, Facebook, Instagram과 같은 최신 게시물을 표시하는 위젯을 추가하면 사용자가 연결을 유지하는 데 도움이 됩니다. 

소셜 미디어 아이콘을 맞춤 설정하고 하단 아이콘에 소셜 공유 링크를 추가하세요. 당신은 →

  • 소셜 아이콘을 편집하려면 소셜 위젯을 클릭하세요. 
  • 스타일 선택: 아이콘, 텍스트 또는 둘 다
  • 정렬 위치 선택 왼쪽, 중앙 또는 오른쪽
  • 다음을 클릭하세요. 페이스북 콘텐츠 확장하다
  • 아이콘 추가: 라이브러리에서 아이콘 업로드
  • 추가/수정 상표
  • 제공하다 소셜 링크
  • 아이콘 사용자 정의 일반 및 호버 모두에 대해
  • 추가하다 배경색
  • 추가하다 테두리 유형: 실선, 이중선, 점선, 점선, 홈
  • 선택하다 텍스트 그림자: 흐림, 수평, 수직
  • 선택하다 상자 그림자: 수평, 수직, 흐림, 확산
  • 선택하다 위치: 개요 또는 삽입
7단계: 소셜 공유 아이콘 추가

8단계: 저작권 포함

귀하의 저작권 정보는 모든 바닥글의 필수 요소입니다. 이는 표절로부터 웹사이트를 보호하는 가장 좋은 방법이기 때문입니다. 

  • 콘텐츠를 쉽게 추가하거나 편집할 수 있습니다.
  • 드롭다운에서 HTML 태그를 선택하세요. 
8단계: 저작권 포함

단계->8: 연락처 정보 제목 사용자 정의

웹 디자인 표준에 따르면, 연락처 정보 바닥글의 오른쪽이나 중앙에 있어야 합니다. 그러나 몇 가지 단계만 거치면 쉽게 사용자 정의할 수 있습니다.

  • 추가/수정 연락처 제목 텍스트를 여기에 입력하세요.
  • 제공하다 링크 리디렉션
  • 선택하다 크기, HTML 태그 드롭다운에서
  • 다음을 선택하세요. 조정 왼쪽, 가운데, 오른쪽 또는 양쪽 맞춤
단계->8: 연락처 정보 제목 사용자 정의

9단계: 회사 위치 추가 

회사의 위치는 다음과 같은 일에 큰 도움이 됩니다. 지역 SEO. 회사 주소를 추가하는 과정은 다음과 같습니다→

  • 레이아웃 선택: 기본 또는 인라인
  • 회사 위치 추가 또는 편집 
  • 리디렉션 링크를 사용하여 아이콘 라이브러리에서 아이콘을 업로드하세요.
9단계: 회사 위치 추가 

더 알아보기 - WordPress 사이트에 Google 지도를 추가하는 방법(가장 쉬운 방법) 🎉

10단계: CTA 위치 버튼

연구에 따르면 모든 마케팅 페이지에서 클릭 유도 문구를 스크롤 없이 볼 수 있는 부분에 배치하기 위한 최선의 옵션입니다. 회사 위치를 표시하기 위한 CTA 버튼을 추가하는 과정을 따르세요→

  • 상표: 버튼 텍스트 추가 또는 편집
  • URL: 리디렉션 URL 링크 제공
  • 할 수 있게 하다 그만큼 아이콘 추가 제공하기 위해 버튼 아이콘
  • 다음에서 버튼 아이콘을 업로드하세요. 아이콘 라이브러리 아니면 다음에서 업로드할 수 있습니다. 나만의 도서관
  • 아이콘 위치 선택: 텍스트 앞 또는 텍스트 뒤
  • 제공하다 클래스 이름 또는 ID
10단계: CTA 위치 버튼

단계->11: 전화번호 및 이메일 사용자 정의

사이트에 연락처를 추가하면 SEO를 개선하는 데 도움이 됩니다. 방문자가 간단히 탭하여 전화할 수 있도록 연락처 번호를 클릭할 수 있도록 하세요. 이제 전화번호와 이메일을 수정하겠습니다.

  • 레이아웃 선택: 기본 또는 인라인
  • 회사 전화번호 및 이메일 추가 또는 편집
  • 리디렉션 링크가 포함된 아이콘 업로드
단계->11: 전화번호 및 이메일 사용자 정의

비즈니스용 이메일 목록을 늘리는 방법 – 입증된 방법 🚀

단계->12: 리디렉션 링크가 포함된 페이지 목록 표시

또 다른 일반적인 바닥글 구성 요소는 페이지 링크입니다. 개인 정보 보호 정책, 이용 약관 등의 페이지 목록을 추가하세요. 웹사이트의 정책, 정보, 규칙 및 규정 등의 페이지 세부정보를 간단히 표시하세요. 방법을 확인해 보세요→

  • 레이아웃 선택
  • 텍스트 추가 또는 편집
  • 자막 추가 또는 편집
  • 토글을 활성화하여 아이콘 표시
  • 업로드 아이콘
  • 아이콘 색상 선택
  • 아이콘 위치 선택
  • 페이지 목록을 표시하려는 페이지를 검색하세요.
  • 라벨 표시 활성화
  • 라벨 추가 또는 수정
  • 배경색, 타이포그래피, 패딩, 정렬, 반경 사용자 정의
단계->12: 리디렉션 링크가 포함된 페이지 목록 표시

WordPress 웹사이트용 사용자 정의 헤더를 생성하려면 이 블로그를 확인하세요. Elementor를 사용하여 사용자 정의 헤더를 디자인하는 방법

단계->13: 바닥글의 사용자 정의 Instagram 피드

웹사이트 바닥글은 다음과 같은 관련 소셜 미디어 피드를 삽입할 수 있는 완벽한 섹션이 될 수 있습니다. 인스타그램 피드. 어떤 기능을 사용자 정의할 수 있는지 살펴보겠습니다→

  • 레이아웃 설정에서 => 그리드 스타일 목록, 그리드 또는 벽돌을 선택하세요
  • 열 그리드 선택 1,2,3 또는 4는 그림을 표시하기 위해 선택하려는 열 수를 의미합니다.
  • 피드 스타일을 활성화하여 인스타그램 피드 효과 제공
  • 표시하려는 게시물 수의 개수 값을 제공하세요.
  • 게시물에 대한 사용자의 댓글과 반응을 표시하려면 댓글 상자를 활성화하세요.
  • 사진의 매력적인 캡션을 표시하려면 캡션 표시를 활성화하십시오.
  • 팔로우 버튼을 활성화하여 팔로우 버튼을 추가하고 다음 페이지의 인스타그램 링크를 제공하세요.
  • 버튼 텍스트 팔로우: 버튼 텍스트 사용자 정의
  • 팔로우 링크: 팔로우 링크를 제공합니다.
  • 정렬: 버튼을 표시하려는 버튼 위치(왼쪽, 오른쪽 또는 가운데)를 선택합니다.
전문가의 팁: 자동 재생 기능을 사용하면 방문자가 흥미를 잃을 수 있으므로 사용하면 안 됩니다. 
단계->14: 바닥글 게시

단계->14: 바닥글 게시

  • 여기에 가장 중요한 부분이 있습니다. 바닥글을 디자인한 후 "업데이트 버튼"을 클릭하세요. 

  • 이 섹션의 기본은 클릭하는 것입니다. "시사". 그리고 그게 다야! 마지막으로 바닥글 부분이 준비되었습니다. 

예에에에에!!! 🥳

마무리

바닥글에 관한 모든 것입니다! 

우리는 이 Elementor 튜토리얼 블로그에서 Elementor를 사용하여 표시할 바닥글을 효과적으로 만드는 방법과 사이트에서 바닥글의 중요성을 배웠다고 믿습니다. 

이제 쉽게 할 수 있기를 바랍니다. ElementsKit Elementor 애드온을 사용하여 완전한 맞춤형 웹 사이트 바닥글을 만드세요.

하지만 궁금한 점이 있으면 아래에 댓글을 남겨주세요. 우리는 당신을 돕고 싶습니다.


코멘트

답글쓰기

이메일은 표시되지 않습니다. 필수 필드는 *로그인이 됩니다