코드 한 줄도 건드리지 않고 자신만의 웹사이트 바닥글을 만들고 맞춤설정하는 방법이 궁금하신가요?
동화처럼 들리죠? 그런데… 이번에는 그 이야기가 현실이 됩니다! ✨
가장 인기 있는 페이지 빌더인 Elementor를 사용하면 눈에 띄는 바닥글을 만들 수 있는 완전한 유연성을 얻을 수 있습니다.
처럼 웹 방문자 수 66% 실제로 스크롤 없이 볼 수 있는 부분 아래로 이동하려면 바닥글 섹션이 사용자와 상호작용해야 합니다. 그렇지 않으면 눈 깜짝할 사이에 엄청난 양의 고객을 잃게 될 것입니다.
하지만 아직 편집증에 빠지지 마세요! 이 글에서는 Elementor를 사용하여 귀하의 웹사이트에 맞는 완전 맞춤형 웹사이트 바닥글을 만드는 효과적인 방법을 보여드리겠습니다! 🙌
그럼, 들어가 보겠습니다!
알고 계시나요? 약 16% 정도의 사업 쉽게 탐색할 수 있는 바닥글을 추가하면 되나요?
엄청난 사용자 참여 외에도 SEO에도 매우 효과적입니다. 내부 연결 구조를 개선하여 이전보다 탐색이 더 원활해졌습니다.
다행스럽게도 사이트 전체 링크 또는 상용구 링크와 같은 내부 링크가 포함된 눈길을 끄는 바닥글을 추가하기만 하면 이러한 모든 기능을 즐길 수 있습니다.
그런데 바닥글에는 링크만 포함되어 있나요? 🤔
안돼… ❗
당신은 당신을 추가할 수 있습니다 제품 데모, 구독 버튼 또는 문의 양식 도! 따라서 귀하의 고객은 귀하의 웹사이트를 쉽게 검색할 수 있을 뿐만 아니라 귀하의 제품에 대한 명확한 개념을 얻을 수도 있습니다.
꽤 인상적이죠?
기다리다! 특히 당신을 위한 또 다른 보너스 사실이 있습니다!
폴더 아래에 모든 기능을 추가하는 것 외에도 눈길을 끄는 CTA 버튼! 따라서 사용자는 깊은 인상을 받고 실제 고객으로 전환될 것입니다.
둘 모두에게 윈윈(win-win) 상황이 되는 거죠, 그렇죠?
바닥글 섹션을 만드는 방법과 Elementor를 사용하여 방문자의 경험을 향상함으로써 브랜드에 어떻게 도움이 될 수 있는지 알아보세요.
좋은 웹사이트 바닥글 디자인의 주요 요소는 다음과 같습니다. 나는 귀하가 직접 만들고 맞춤 설정할 수 있는 모든 섹션을 다루려고 노력할 것입니다.
- 심벌 마크
- 회사 정보
- 연락처
- 항해
- 지원하다
- 저작권, 서비스 약관, 개인 정보 보호 정책
- 소셜 미디어 아이콘
- 행동을 요구하다
참고: 웹사이트 바닥글 디자인을 너무 과하게 디자인하지 말고 최대한 단순하게 유지하세요. |
이 튜토리얼 블로그를 따르려면 두 가지가 필요합니다.–>
그리고 끝났습니다!
Elementor와 ElementsKit을 사용해야 하는 이유
많은 코드와 그 모든 것으로 인해 웹 페이지를 디자인하는 데 문제가 있는 경우. 걱정 마! 가장 강력한 페이지 빌더 Elementor가 여기 있습니다!
웹사이트 바닥글을 끌어서 놓기 방식으로 완벽하게 제어할 수 있습니다. 현재 바닥글의 모양이 마음에 들지 않으면 Elementor가 최선의 선택입니다.
Elementor에는 웹사이트를 쉽게 사용자 정의할 수 있는 유용한 추가 기능이 포함되어 있습니다. ElementsKit은 강력한 바닥글 작성기, 85개 이상의 위젯 및 기성 바닥글 레이아웃을 통해 디자인을 향상시켜 가장 인기가 높습니다.
이 튜토리얼에서는 ElementsKit을 사용하여 아름다운 사용자 정의 Elementor 바닥글을 만드는 방법을 알게 될 것입니다!
이제 시작하겠습니다.
이 섹션에서는 몇 단계만으로 웹사이트에 대한 사용자 대화형 바닥글을 사용자 정의하거나 생성하는 방법을 보여 드리겠습니다.
먼저 Elementor를 사용하여 완전 맞춤형 웹사이트 바닥글을 만들려면 웹사이트 관리 대시보드 패널에 로그인하세요.
- 로 이동 ElementsKit → 내 템플릿
- 딸깍 하는 소리 새로운 걸 더하다.
옵션이 포함된 팝업 상자가 열립니다.
- 그런 다음 팝업 상자에 다음을 입력하십시오. 제목. 예: 맞춤 바닥글
- 유형 선택 → 보행인
- 조건 선택 → 전체 사이트
- 토글 활성화 옵션
- 딸깍 하는 소리 “Elementor로 편집”
편집기 페이지가 열리고 여기에서 바닥글 섹션의 모양을 구성하게 됩니다.
웹사이트 바닥글 작성을 처음부터 시작하거나 이전에 만든 바닥글 중 하나를 시작점으로 선택할 수 있습니다.
- 웹사이트의 바닥글을 디자인하려면 선택된 아이콘-> 로 이동 바닥글 탭
- 다음을 클릭하세요. 삽입 버튼 추가하면 완료됩니다!
단계->4: 일반 레이아웃 설정
이 설정에서 레이아웃 유형 맞춤 바닥글을 만들고 싶습니다.
- 기본 사용자 정의 버튼을 클릭하세요: 바닥글 부분의 사이드바에서 레이아웃 섹션을 편집합니다.
- 섹션 늘이기 활성화: JS를 사용하여 섹션을 페이지의 전체 너비로 늘립니다.
- 콘텐츠 너비 설정: 드롭다운에서 콘텐츠 너비(박스형) 또는 전체 너비를 선택합니다. 또한 간단히 드래그하여 제어할 수도 있습니다.
- 열 간격 선택: 좁게, 확장, 넓게, 넓게를 선택하세요.
- 높이 조정: 화면에 맞춤 또는 최소 높이를 선택하세요.
- 수직 정렬을 선택합니다: 상단, 중간, 하단, 사이 공간, 주변 공간, 균등한 공간을 선택합니다.
- 과다: 기본값으로 유지하거나 숨김
- HTML 태그 선택: 드롭다운에서 선택
단계->5: 로고 추가
검색 엔진 가시성을 높이려면 제품 웹사이트 바닥글에 회사를 연결해야 합니다. 이 경우 회사 로고를 클릭하면 사용자가 홈 페이지로 돌아갑니다. 그리고 간단한 단계만으로 매우 쉽게 로고를 추가할 수 있습니다.
- 다음을 클릭하세요. 로고 이미지→ 쉽게 이미지를 업로드하거나 미디어 파일에서 선택하세요.
- 쉽게 선택하세요. 이미지 크기 드롭다운에서
- 다음을 선택하세요. 조정 왼쪽, 중앙 또는 오른쪽
- 어떤 유형이든 추가할 수 있습니다. 이미지 캡션 첨부 파일 캡션이나 맞춤 캡션 등
- 다음을 선택하세요. 링크 유형 미디어 파일 또는 맞춤 URL. 리디렉션 URL을 제공할 수 있습니다.
단계->6: 회사 설명 추가 또는 편집
이제 웹사이트 바닥글은 중요한 정보를 표시하는 장소입니다. 회사에 대한 간단한 개요를 쉽게 추가할 수 있습니다.
- 이 설정에서는 다음을 수행할 수 있습니다. 추가 또는 편집 모든 유형의 텍스트
- 드롭캡 활성화 콘텐츠 시작 부분에 더 눈길을 끄는 큰 글자를 표시합니다.
알고 계셨나요? 72%의 웹사이트는 소셜 미디어 아이콘을 사용합니다. Elementor로 완전한 맞춤형 웹사이트 바닥글을 만들려면?
Twitter, Facebook, Instagram과 같은 최신 게시물을 표시하는 위젯을 추가하면 사용자가 연결을 유지하는 데 도움이 됩니다.
소셜 미디어 아이콘을 맞춤 설정하고 하단 아이콘에 소셜 공유 링크를 추가하세요. 당신은 →
- 소셜 아이콘을 편집하려면 소셜 위젯을 클릭하세요.
- 스타일 선택: 아이콘, 텍스트 또는 둘 다
- 정렬 위치 선택 왼쪽, 중앙 또는 오른쪽
- 다음을 클릭하세요. 페이스북 콘텐츠 확장하다
- 아이콘 추가: 라이브러리에서 아이콘 업로드
- 추가/수정 상표
- 제공하다 소셜 링크
- 아이콘 사용자 정의 일반 및 호버 모두에 대해
- 추가하다 배경색
- 추가하다 테두리 유형: 실선, 이중선, 점선, 점선, 홈
- 선택하다 텍스트 그림자: 흐림, 수평, 수직
- 선택하다 상자 그림자: 수평, 수직, 흐림, 확산
- 선택하다 위치: 개요 또는 삽입
8단계: 저작권 포함
귀하의 저작권 정보는 모든 바닥글의 필수 요소입니다. 이는 표절로부터 웹사이트를 보호하는 가장 좋은 방법이기 때문입니다.
- 콘텐츠를 쉽게 추가하거나 편집할 수 있습니다.
- 드롭다운에서 HTML 태그를 선택하세요.
단계->8: 연락처 정보 제목 사용자 정의
웹 디자인 표준에 따르면, 연락처 정보 바닥글의 오른쪽이나 중앙에 있어야 합니다. 그러나 몇 가지 단계만 거치면 쉽게 사용자 정의할 수 있습니다.
- 추가/수정 연락처 제목 텍스트를 여기에 입력하세요.
- 제공하다 링크 리디렉션
- 선택하다 크기, HTML 태그 드롭다운에서
- 다음을 선택하세요. 조정 왼쪽, 가운데, 오른쪽 또는 양쪽 맞춤
9단계: 회사 위치 추가
회사의 위치는 다음과 같은 일에 큰 도움이 됩니다. 지역 SEO. 회사 주소를 추가하는 과정은 다음과 같습니다→
- 레이아웃 선택: 기본 또는 인라인
- 회사 위치 추가 또는 편집
- 리디렉션 링크를 사용하여 아이콘 라이브러리에서 아이콘을 업로드하세요.
더 알아보기 - WordPress 사이트에 Google 지도를 추가하는 방법(가장 쉬운 방법) 🎉
10단계: CTA 위치 버튼
ㅏ 연구에 따르면 모든 마케팅 페이지에서 클릭 유도 문구를 스크롤 없이 볼 수 있는 부분에 배치하기 위한 최선의 옵션입니다. 회사 위치를 표시하기 위한 CTA 버튼을 추가하는 과정을 따르세요→
- 상표: 버튼 텍스트 추가 또는 편집
- URL: 리디렉션 URL 링크 제공
- 할 수 있게 하다 그만큼 아이콘 추가 제공하기 위해 버튼 아이콘
- 다음에서 버튼 아이콘을 업로드하세요. 아이콘 라이브러리 아니면 다음에서 업로드할 수 있습니다. 나만의 도서관
- 아이콘 위치 선택: 텍스트 앞 또는 텍스트 뒤
- 제공하다 클래스 이름 또는 ID
단계->11: 전화번호 및 이메일 사용자 정의
사이트에 연락처를 추가하면 SEO를 개선하는 데 도움이 됩니다. 방문자가 간단히 탭하여 전화할 수 있도록 연락처 번호를 클릭할 수 있도록 하세요. 이제 전화번호와 이메일을 수정하겠습니다.
- 레이아웃 선택: 기본 또는 인라인
- 회사 전화번호 및 이메일 추가 또는 편집
- 리디렉션 링크가 포함된 아이콘 업로드
비즈니스용 이메일 목록을 늘리는 방법 – 입증된 방법 🚀
단계->12: 리디렉션 링크가 포함된 페이지 목록 표시
또 다른 일반적인 바닥글 구성 요소는 페이지 링크입니다. 개인 정보 보호 정책, 이용 약관 등의 페이지 목록을 추가하세요. 웹사이트의 정책, 정보, 규칙 및 규정 등의 페이지 세부정보를 간단히 표시하세요. 방법을 확인해 보세요→
- 레이아웃 선택
- 텍스트 추가 또는 편집
- 자막 추가 또는 편집
- 토글을 활성화하여 아이콘 표시
- 업로드 아이콘
- 아이콘 색상 선택
- 아이콘 위치 선택
- 페이지 목록을 표시하려는 페이지를 검색하세요.
- 라벨 표시 활성화
- 라벨 추가 또는 수정
- 배경색, 타이포그래피, 패딩, 정렬, 반경 사용자 정의
WordPress 웹사이트용 사용자 정의 헤더를 생성하려면 이 블로그를 확인하세요. Elementor를 사용하여 사용자 정의 헤더를 디자인하는 방법
웹사이트 바닥글은 다음과 같은 관련 소셜 미디어 피드를 삽입할 수 있는 완벽한 섹션이 될 수 있습니다. 인스타그램 피드. 어떤 기능을 사용자 정의할 수 있는지 살펴보겠습니다→
- 레이아웃 설정에서 => 그리드 스타일 목록, 그리드 또는 벽돌을 선택하세요
- 열 그리드 선택 1,2,3 또는 4는 그림을 표시하기 위해 선택하려는 열 수를 의미합니다.
- 피드 스타일을 활성화하여 인스타그램 피드 효과 제공
- 표시하려는 게시물 수의 개수 값을 제공하세요.
- 게시물에 대한 사용자의 댓글과 반응을 표시하려면 댓글 상자를 활성화하세요.
- 사진의 매력적인 캡션을 표시하려면 캡션 표시를 활성화하십시오.
- 팔로우 버튼을 활성화하여 팔로우 버튼을 추가하고 다음 페이지의 인스타그램 링크를 제공하세요.
- 버튼 텍스트 팔로우: 버튼 텍스트 사용자 정의
- 팔로우 링크: 팔로우 링크를 제공합니다.
- 정렬: 버튼을 표시하려는 버튼 위치(왼쪽, 오른쪽 또는 가운데)를 선택합니다.
전문가의 팁: 자동 재생 기능을 사용하면 방문자가 흥미를 잃을 수 있으므로 사용하면 안 됩니다. |
- 여기에 가장 중요한 부분이 있습니다. 바닥글을 디자인한 후 "업데이트 버튼"을 클릭하세요.
- 이 섹션의 기본은 클릭하는 것입니다. "시사". 그리고 그게 다야! 마지막으로 바닥글 부분이 준비되었습니다.
예에에에에!!! 🥳
마무리
바닥글에 관한 모든 것입니다!
우리는 이 Elementor 튜토리얼 블로그에서 Elementor를 사용하여 표시할 바닥글을 효과적으로 만드는 방법과 사이트에서 바닥글의 중요성을 배웠다고 믿습니다.
이제 쉽게 할 수 있기를 바랍니다. ElementsKit Elementor 애드온을 사용하여 완전한 맞춤형 웹 사이트 바닥글을 만드세요.
하지만 궁금한 점이 있으면 아래에 댓글을 남겨주세요. 우리는 당신을 돕고 싶습니다.
답글쓰기