How to Easily Create Landing Pages in WordPress: No Developer or Paid Subscription Service Required

[음악] 방문 페이지는 전환을 목적으로 고유하게 디자인 된 방문 페이지입니다 방문자

이제 디자이너로서, 당신은 자신과 같은 페이지를 설계 할 수있는 능력 이상입니다 하지만 그들을 지어서 빨리 살리시겠습니까? 글쎄, 그 중 하나는 웹 개발자가, 누가 그 또는 그녀가 다음에 무료로 할거야, 또는 유료 구독 서비스 하지만 문제는 비 코더 (non-coder) 라 할지라도 이러한 방문 페이지를 빠르게 만들 수 있습니다 여러 프로젝트에서조차도 반복해서 롤아웃하십시오 개발자가 필요없고 유료 서비스가 필요 없습니다

내 이름은 Dave Foy 야 들어가서 보여 줄게 방문 페이지는 방문자를 리드 또는 판매로 전환하도록 설계되었습니다 그들은 종종 리드 마그넷 인 오퍼의 이점을 판매합니다 단지 이메일 주소 대신 무료로 제공된다는 의미입니다

이제 그들은 일반적으로 클라이언트의 웹 사이트 테마의 나머지 부분과는 다른 디자인입니다 종종 로고가없고, 탐색도없고, 다른 레이아웃이 있습니다 아이디어는 모든 산만 함을 제거하고 방문자를 데리고 오는 데 100 % 집중하는 것입니다 하나의 행동 이제는 개발자를 고용하여 빌드 할 수 있지만 개발자가 기다리는 경우가 종종 있습니다

속도는 실제로 착륙 페이지가있는 본질입니다 고객이 가능한 빨리 제안을 테스트하려고 할 때를 알 수 있습니다 LeadPages, ClickFunnels 또는 Instapage와 같은 월간 가입 서비스를 이용할 수 있습니다 이러한 서비스를 통해 코드 지식없이 방문 페이지를 만들 수 있습니다 기본적으로 비 기술자를 위해 드래그 앤 드롭하십시오

하지만 핵심 기능은 근본적으로 멋지게 디자인 된 방문 페이지를 만들고, 리드하고 전자 메일 공급자에게 보내십시오 디자이너로서, 필자는 비용 부담이 크다고 말할 수 있습니다 자신 만의 제품을 만들면 전체 디자인 컨트롤을 유지할 수 있습니다 원하는대로 정확하게 디자인 할 수 있습니다 여기 내 방문 페이지 세 가지 예가 있습니다

우리가 말하는거야 첫 번째 방법은 여기에 빌드하는 방법을 보여 드리겠습니다 그것은 리드 자석, 전자 메일 주소 대신 교환 해주는 공짜 물건입니다 이 페이지는 빌드하는데 약 10 분이 걸렸습니다 그리고 제가 여러분에게 보여줄 방법으로, 그것을 템플릿으로 저장할 수 있기 때문에 사용할 수 있습니다

한 번 클릭으로 여러 번 가져올 수 있습니다 여기에 이메일 주소 캡처를위한 팝업이 있습니다 두 번째 방문 페이지는 웹 세미나 등록을위한 것입니다 하지만 완전히 다른 종류의 방문 페이지입니다 그리고 세 번째는 대안의 리드 자석 방문 페이지입니다

약 5 분 당신이 나의 정확한 템플렛을 원하는 경우에,이 정확한 템플렛은 당신의 자신의 프로젝트로 수입하고, 여기에 잠시 들러서 잠시 동안 그걸 어떻게 얻을 수 있는지 알려 드리겠습니다 이 페이지를 디자인 할 때 영감을 얻고 싶다면 Google에서 '방문 페이지 예시'를 검색하면됩니다 여기에 우리가 사용할 도구가 있습니다 각 동영상에 대한 설명에 링크를 통해 확인할 수 있습니다

첫 번째는 WordPress입니다 원하는 WordPress 테마를 사용할 수 있습니다 이제는 GeneratePress를 사용하고 100 % 권장합니다 내가 왜 그렇게 생각하는지 쓴 기사에 대한 설명에 링크가 있습니다 비 코더 디자이너를위한 최고의 테마

그러나 실제로이 목적을 위해 모든 주제가 할 것입니다 Elementor 페이지 빌더 플러그인이 필요합니다 무료이며, 무료로 얻을 수있는 것은 어쨌든 놀라운 것입니다 이 튜토리얼에서는 유료 'Pro'버전의 몇 가지 기능을 사용하지만 어쨌든 두 기능 모두 무료 대안 우리는 팝업에 무료 Popup Maker를 사용할 것이고, 우리는 화려한 Zapier를 사용할 것입니다

이 모든 것을이 모든 이메일 서비스에 연결하는 타사 서비스 Elementor가 원하는 이메일 주소로 가입을 보내도록 할 수는 있지만, 아마 전용 전자 우편 매매 서비스에 이것을 연결하고 싶다 이제이 동영상에서 리드 자석 유형 방문 페이지를 만드는 방법을 보여 드리겠습니다 하지만 나중에 나에게도 보너스 비디오 튜토리얼을 얻는 방법을 보여줄 것입니다 하나는 원할 경우 다른 인기있는 이메일 가입 방법을 만드는 방법을 보여줍니다

소위 내용 향상 실제로 내 사이트에 게시하는 모든 게시물에 콘텐츠 업그레이드 방법을 사용하고 그것은 정말 잘 작동합니다 그래서 주위에 놀아 라 그러면 나는 그것을 당신에게 줄 것이다 다음은 프로세스의 개요입니다

먼저 Elementor 페이지 빌더를 사용하여 방문 페이지를 만듭니다 그런 다음 가입 양식을 추가하겠습니다 그런 다음 전자 메일 공급자에게 양식을 전달해야합니다 마지막으로, 그 안에 폼이있는 팝업을 만드는 방법을 보여 드리겠습니다 그래서 저는 WordPress에 새로운 페이지를 만들었습니다

나는 그저 상당히 매력적인 제목을주었습니다 제목은 검색 결과와 같이 표시되며 사람들이 페이지를 공유 할 때 표시됩니다 소셜 미디어도 마찬가지입니다 실제로이 페이지를 초안으로 저장 한 다음 여기에서 미리 보았습니다 그리고 기본적으로 당신은 꽤 많은 혼란을 보게됩니다

이것은 내 사이트의 헤더입니다 특수 효과 유형과 사이트 제목이있는 것은 내 사이트의 꼬리말입니다 이것은 매우 표준적인 기본값이므로 GeneratePress 테마를 사용하고 있습니다 우리는 방문 페이지를 위해 모든 것을 없애기를 원합니다 빈 캔버스가 필요합니다

GeneratePress에서는 원하는 요소를 거의 사용하지 않도록 설정할 수 있습니다 나는 우승을 차지할 수있다, 나는이 박스들을 똑딱 거리면서 타이틀을 없앨 수있다 하지만 실제로 어떤 테마를 사용하는지는 중요하지 않습니다 우리가 할 일은, 'Edit Elementor'를 클릭하기 만하면됩니다 Elementor가 있어야합니다

물론 플러그인이 설치되어 있습니다 여기에 새로운 기능이 있습니다 상단의 메뉴를 클릭 한 다음 '페이지 설정'으로 이동하십시오 여기에서 실제로 Elementor Canvas라는 Elementor 템플릿을 설정할 수 있습니다 'Elementor Canvas'를 선택하면 완전히 비어있는 페이지가 나타납니다

그래서 우리는 완전히 공백 인 출발점을 얻었습니다 그래서 우리가 제일 먼저하고 싶은 것은 상단을 가로 지르는 스트립을 만드는 것입니다 그래서 나는 새로운 섹션을 추가 할 것이고 그것은 단지 하나의 컬럼 섹션이 될 것입니다 Elementor의 섹션, 섹션, 특히 여기에 캔버스 템플릿이있는 경우 섹션은 페이지의 전체 너비에 걸쳐 확장됩니다 줄곧 왼쪽과 오른쪽

여기에이 효과가 나타납니다 여기서 섹션을 클릭하면 '스타일'과 '배경'으로 이동하면됩니다 이미 내 색 팔레트에 들어있는 배경색을 고를거야 그러면 섹션 자체가 펼쳐질 수 있습니다 이것이 전체 효과를 얻는 방법입니다

그리고 여기에 기둥이 있습니다 '레이아웃'섹션으로 이동하면 콘텐츠의 너비를 박스로 설정했습니다 따라서이 열은 내 Elementor 설정에서 설정 한 내용 너비로 유지됩니다 기본 설정 패널 너는 그것을 너비로 설정하기를 원한다면 그럴 수있다 가장자리 자체에 있지만 열이 박스가되기를 원합니다

따라서 섹션은 전체 너비이지만 열은 박스형입니다 다음으로하고 싶은 일은 내 로고 이미지입니다 나는이 로고를 원한다고 결정했다 이것은 제가 원했던 로고입니다 그냥 그 미디어를 넣으십시오

그러면 그 로고를 왼쪽으로 정렬하고 싶습니다 어쨌든 전체 크기의 이미지를 갖습니다 그래서 그 아래에 약간의 텍스트를 추가하고 싶습니다 나는 실제로 'Heading'위젯을 여기에서 사용하기 때문에 그냥 끌어다 놓습니다 그리고 내 태그 라인 '도움이 아닌 코더 그래픽 디자이너는 더 나은 웹 사이트를 구축'

이제 기본 텍스트 색상이 검은 색이기 때문에 볼 수 없다는 것을 알게 될 것입니다 많이 그리고 이것은 검은 배경이다 이제 우리는 머리글에서 스타일로 가서 텍스트 색상 만 변경하면됩니다 스타일의, 괜찮아요 당신이 할 수있는 그게 아무 문제가 아니지만 내가 실제로 마치 내가이 스트립의 모든 텍스트가 필요한 곳이 있다면 기본적으로 흰색이되도록 재정의 할 수 있습니다 실제로 섹션 자체에 설정을 지정하는 것을 선호합니다

가능한 경우 스타일링을 최대한 높게 설정하십시오 따라서 각 위젯보다는 섹션에서 설정하십시오 여기서 '스타일'로 이동하십시오이 스타일은 타이포그래피이며, 제목 색상을 흰색으로 설정합니다 이제 기본적으로 꽤 큽니다

나는 이것을 실제로 H2로 삼기를 원하지 않는다 단지 표준 단락으로 원한다 단락으로 변경하면이 부분에 약간의 타이포그래피가 변경됩니다 게다가 맞춰 보자, 14

여기서 화살표 키를 사용하면 위아래로 이동할 수 있으므로 여기에 그대로 두겠습니다 우리는 그것을 조정할 수, 우리는 색상을 변경할 수 있습니다 두 위젯 사이에 헤더와 헤더 사이에 미안하다는 것을 알 수 있습니다 이미지와 제목, 우리는 여기에 차이가 있습니다 실제로는 20 픽셀입니다

엘리멘터는 기본적으로 도움이되도록 노력하고 일종의 표준적이고 일관된 간격을 지정합니다 귀하의 위젯 사이 그러나 지금은 실제로 이것들을 조금 더 가깝게 선호합니다 이제 이것을 처리하는 다양한 방법이 있습니다 이번에는 로고 이미지의 '고급'탭으로 이동합니다

같은 여백을 추가하고 싶지 않으므로 여백 값의 연결을 해제하겠습니다 위쪽, 오른쪽, 아래쪽 및 왼쪽 그래서 그것들을 연결 해제 할 것입니다 그리고 내가 할 일은 부정적인 마진입니다 마진에 마이너스 수치

당신은 내가 그것을 옮길 수있는 긍정적 인 마진을 두지 만 네거티브를 사용한다면 마진을 좀 높여야 겠어 그래서 제가 제안 할 것은 Elementor에서 무엇을한다면 당신은 빨리 그리고 나서 그것을 저장하는 것입니다 실제로 다른 페이지의 이전 페이지를 다른 탭에서 열어서 새로 고칩니다 그 그리고 우리는 그 순간에 괜찮습니다

내 생각에 우리는 위아래로 약간의 패딩으로 할 수 있다고 생각합니다 그래서 섹션으로 가서 섹션의 '고급'설정에 대해 살펴 보겠습니다 이제 다시 위와 아래 패딩을 사용하지 않기 때문에이 값들의 연결을 해제해야합니다 오른쪽과 왼쪽에도 추가해야합니다 나는 그 사람들이 똑같이 지내길 바란다

이제 30 개의 맨 아래 30 개를 추가합시다 그건 괜찮을거야 빨리 저장하십시오 이제 내가하는 것처럼 실제로 전환 탭을 유지할 필요가 없습니다 실제로 작은 패널을 가지고있어 미리보기를 빠르게 할 수 있습니다

엘리멘터의 편집 화면에서 보시는 내용이 때로는 정확하지 않을 수도 있습니다 라이브 페이지 바로 가기도 있습니다 Mac에서는 CMD + P입니다 그리고 나는 그것이 PC에서 CTRL + P가 될 것이라고 기대한다

그게 내게 너무 심한 패딩이야 그래서 그걸로 바꿀거야 그곳에 다시 똑같아 다시 봐 괜찮아 보인다

내가 네게 구하기를 요구하는 이유, 또는 구원을 몇 번이고 다시 당신이 아무것도 바꾸는 이유는 Elementor에서 메뉴를 다시 클릭하면 수정 내역을 얻었습니다 그래서 우리는 여기서 모든 것을 볼 수 있습니다 모든 다른 버전들 우리가 가진이 페이지의 좋아, 우리는 지금까지 그 비트를 얻었다 내가 또한 제안하는 것은 당신이이 모습을 확인하는 습관을 갖게된다는 것입니다 모바일처럼

새 섹션을 추가 할 때마다 모바일에서 확인하십시오 정말 쉽습니다 반응 형 모드를 클릭하십시오 지금은 데스크탑입니다 하지만 태블릿보기를 클릭하면 태블릿보기가 나타납니다

나에게는 이미 명백한 문제가있다 태블릿을 중심으로하고 싶습니다 모바일을 중심으로하고 싶습니다 따라서 여기에있는 내용 탭으로 돌아 가면 우리는 '정렬'이 왼쪽, 가운데, 오른쪽 및 양쪽 맞춤을 가지고 있음을 볼 수 있습니다

현재이 모바일 아이콘은 강조 표시되어 있으므로 실제로 모바일에 있습니다 우리가 잠깐 데스크톱으로 돌아 간다면 데스크톱에서는 괜찮아 보입니다 이것을 클릭하면 이제 다른 두 개의 아이콘이 나타납니다 Tablet을 클릭하십시오 이제 태블릿을 사용하여 이제 태블릿을 가운데로 변경할 수 있습니다

타블렛에서 이제 센터 될 것입니다 이제 Elementor가 작동하는 방식은 응답 설정의 스타일 설정, 데스크톱이나 태블릿에서 더 큰 화면으로 설정하는 스타일 설정, 그들은 또한 더 작은 스크린에 이르기까지 캐스케이드 (cascade)의 일종이다 따라서 태블릿에서 센터를 설정하면 지금 모바일로 이동하면 모바일에도 집중됩니다 데스크톱에서 설정 한 모든 항목은 태블릿 및 모바일에 저장됩니다 태블릿에 설정된 항목도 휴대 기기에 표시됩니다

좋아, 다음 패널을 보자 그래서 다음 패널에서 다시 새로운 섹션을 추가하고 싶습니다 이제 이것을 위해서 나는 2 개의 기둥이 필요하다는 것을 압니다 그래서 괜찮습니다 여기에 새로운 섹션이 있습니다

2 열이 있고 디자인에 배경색도 있었으니 가볼 게요 'Style'> 'Background'로 바꾸면 아주 미묘한 회색처럼 보일 것입니다 그리고 그것을 저장하십시오 나는 내가해야할 일이 이미 필요하다는 것을 알기 때문에 내가 지금 할 일은 이미 약간의 패딩을 넣었다고 생각한다 여기서는이 섹션의 패딩을 연결 해제하겠습니다

이번에는 조금 더 가자 따라서 상단 30 개, 하단 30 개 이제 우리는 여기에서 어떤 내용을 드래그해야합니다 그래서 나는 내 머리글을 드래그 할 것입니다 이것을 페이지의 첫 번째 제목이기 때문에 H1로 변경하십시오

Elementor의 아름다움은 어쨌든 기본 텍스트를 얻는 것입니다 따라서 실제 사본을 넣을 라운드가 없다면, 작업 '텍스트 에디터'로 돌아와 거기에 텍스트를 넣으십시오 그리고 마지막으로 할 일은 저의 이미지를 거기에 떨어 뜨리는 것입니다 그래서 이걸이 두 번째 열로 끌고 올거야

나는 이것을 사용하는 이미지를 찾을 것입니다 그리고 나서해야 할 다른 일은이 시점에서 실제로 제 제목으로 복사하십시오 이제 내 눈을 조금 비좁은 것 같습니다 그것은 단지 작은 선도로 할 수 있습니다 그래서 우리가 다시 '스타일'로 돌아 가면

타이포그래피를 그려 보시면 여기에 줄 높이 설정이 있습니다 그래서 저는 화살표 키를 사용할 것입니다 원하는 경우 상자에 직접 입력 할 수 있지만 그때까지 조금 더 추가 할 것입니다 괜찮아 보이는 군 내 눈에는 괜찮아 보인다

여기에도 텍스트 블록을 클릭 할 것입니다 그런 다음 페이지를 다시 저장하십시오 그런 다음 '미리보기'를 사용하여 그 모습을 확인하십시오 그것은 실제로 나에게 나쁘지 않게 보입니다 그리고 제가 여기서 할 수있는 유일한 것은 어쩌면 가져올 수도

우리가 할 수있는 두 가지 일이 있습니다 나는 우리가 이미지를 조금이라도 가져올 수 있다고 생각했다 원한다면 실제로 그렇게하는 법을 보여 드리겠습니다

우리가 여기있는 동안 보여 드리겠습니다 거기에 전체 이미지를 만들어 보겠습니다 '고급'으로 이동합니다 모든 여백을 연결 해제하십시오 그리고 음의 상단 여백을 추가 할 수 있습니다

음의 위쪽 여백을 추가하면 실제로 그런 효과가 나타납니다 그것이 우리가 할 수있는 한 가지입니다 나는 그걸 없애 버릴거야 여기서도 할 수있는 또 다른 사항은 '섹션'설정으로 갈 수 있다는 것입니다 따라서이 내용은이 섹션의 모든 내용에 적용됩니다

그리고이 콘텐츠 위치는 중간으로 변경할 수 있습니다 이제 모든 것이 정확히 중간에 놓입니다 이것은 중간에 있습니다 이것은 중간에 있습니다 그리고 우리가 그걸 보았다면 괜찮아 보입니다

그렇게 나쁘지는 않습니다 이제 다음 부분에서 우리가 흰색 섹션을 가지고 있지만 우리가 실제로 여기에있는 한 열에있는이 텍스트 블록을 얻었습니다 그 밑에 우리는 3 개의 기둥이 있고 실제로 그 밑에는 다른 기둥이 있습니다 단추가 가운데에 놓인 1 열 그래서 우리는 실제로 흰색 배경을 가진 하나의 섹션을 가지고 있습니다 흰색 배경 섹션에는 여러 행의 열이 서로 겹쳐져 있습니다

각 행에는 다른 수의 열이 있습니다 다시 '편집'화면으로 돌아가 보겠습니다 여기에서 '새 섹션 추가'를 클릭하면 실제로 한 행에 갇혀있는 것을 알 수 있습니다 선택한 열의 수만 있으면됩니다 하나의 열, 2 열, 3 열

하지만 방금 본 복잡한 레이아웃을 원한다면 어떨까요? 여기에 프로 팁이 있습니다 '새 섹션 추가'를 클릭하지 마십시오 대신 열 위젯을 여기로 드래그하십시오 이제 당신이 한 것은 실제로 부모 섹션, 즉 부모 섹션 흰색의 배경색이있는 것입니다 전체를 포함하는 섹션을 포함하는 섹션입니다

우리가 방금 본 다른 열의 행 그리고 그 안에는 기본적으로 2 개의 열을 포함하는 중첩 된 섹션이 있습니다 열 위젯은 시작하는 데 2 ​​개의 열을 제공합니다 음, 먼저 둘러싸는 부모 섹션에 흰색 배경을 추가해 보겠습니다 그리고 거기에 약간의 위쪽 및 아래쪽 패딩이 나타납니다

이제 열 위젯을이 상위 섹션으로 드래그하십시오 그러면 2 열의 다른 행이 생기므로 실제로는 3 열 행이됩니다 하지만 지금은 2로 설정합니다 그리고 한 번 더 해보 죠 열 위젯을 2 열의 다른 행으로 드래그합니다

그래서 그들은 모두 부모 섹션 안에 있습니다 지금 당연히 우리는 정확한 수를 얻기 위해 2 열로 각각 3 행을 원하지 않았습니다 각 행의 열은 여기에있는 열을 클릭하기 만하면됩니다 이제 첫 번째 행에 1 개의 열이 있습니다 그런 다음이 행의 열 머리글을 클릭하고 이번에는 열을 추가하십시오

이제이 행에 3 개의 열이 있습니다 그리고 마침내 첫 번째 행에 대해했던 것을 반복하십시오 열을 삭제하면됩니다 이제 우리는 우리의 콘텐츠를 추가 할 수 있습니다 먼저 '제목'과 '텍스트'를 드래그하십시오

나는 라인 길이에 너무 열중하지 않기 때문에 오른쪽 패딩의 덩어리를 추가 할 것이다 여기 텍스트 위젯에 데스크톱 크기 화면에서는 실제로 '태블릿'을 클릭하기 만하면됩니다 태블릿에서 패딩을 0으로 재설정합니다 앞서 설명한 것처럼 모바일은 태블릿 설정을 자동으로 가져옵니다

그리고 어쨌든 모바일에서 다른 무언가로 무효화 할 수 있습니다 이제 '제목'을 드래그하십시오 그리고이 표제는 H2 였고 이것들이 H2의 하위 표제라고 주장 할 수 있습니다 이들은 H3s가 될 것입니다 여기에있는 텍스트를 보면, 나는 여기의 제목 아래에있는 격차에 열중하지 않는다

따라서 우리의 부정적인 점을 이용하자 그 밑에있는 것들을 조금 더 가까이 당기려면 헤딩에 마진 트릭을하십시오 이것을 처리하는 다른 방법이 있지만이 비디오의 목적을 위해 가장 빠릅니다 이제 우리는 그 열을 복제하고 다시 복제 할 수 있습니다 그리고 실제로 우리는 다른 컬럼을 없앨 것입니다

우리는 단지 그것들을 삭제할 것입니다 그래서 우리는 거기에 3 개의 컬럼을 갖습니다 이제는이 특정 섹션의 텍스트를 변경하는 것을 건너 뛸 것입니다 지금 생각 이제 저장 한 다음 미리보기를 확인하여 모양이 어떻게 보이는지 봅시다

나는 그걸로 꽤 행복하다 이제 여기에 버튼이 없으며 헤더에도 없습니다 나는 잊지 않았다 잠시 후에 버튼을 보여 드리 겠지만, 지금은이 열을 빈 상태로두고 준비 할 것입니다 우리가 그것을 얻었을 때 그것을 위해

이제 우리는 가입 양식을 만들어야합니다 나는 개인적으로 팝업 양식을 선호한다 나는 그것이 더 깨끗하다고 ​​생각한다 그리고 나는 그것이 형식에 직접적으로 가지고있는 것보다 잘 개종한다고 생각한다 페이지도

그리고 어쨌든 모든 차가운 아이는 요즈음 팝업에있는 그들의 모양이있다 그래서 우리는 또한 할 것이다 하지만 어쨌든 먼저 양식을 작성해야하므로 지금 당장 페이지에 붙여 봅시다 만든 후에 템플릿으로 저장하여 파일에 팝업 Elementor Pro에서만 사용할 수있는 Elementor Forms 위젯을 사용하고 있습니다 Contact Form 7이나 Gravity Forms와 같은 것을 사용할 수 있습니다

팝업과 함께 가고 싶다면 팝업에 넣을 짧은 코드를 제공하는 모든 것 방법 먼저 양식 위젯을 드래그합니다 '이름'과 '이메일'은 나에게 가장 잘 맞지만 '이메일'입력란 만 원할 수도 있습니다 양식에 이름을 지정하십시오 메시지 필드를 삭제합니다

이 양식에는 메시지 필드가 필요 없습니다 이름 – 텍스트 필드로 두십시오 레이블과 자리 표시자를 '귀하의 이름'으로 변경합니다 '필수'로 설정하면 '아니오'로 설정됩니다 우리는 이름을 밝히지 않는 사람들을 막고 싶지 않습니다

이 필드의 열 너비는 100 %로 두겠습니다 그냥 그것이있는 열만큼 넓습니다 하지만 50 %로 설정할 수 있습니다 그리고 전자 메일 필드를 50 %로 설정하면 전자 메일 필드를 나란히 배치합니다 이메일은 '이메일'입력란으로 두십시오

'귀하의 이메일 주소'로 변경하십시오 레이블과 자리 표시 자에 있습니다 필수 이메일은 '예'입니다 입력 크기는 Medium이 좋다고 생각합니다 레이블, 우리는 이것을 숨길 것입니다

그것은 깔끔하게 보입니다 엘리멘터 (Elementor)는이 사실을 실제로 훌륭하게 처리합니다 따라서 페이지의 라벨을 볼 수는 없지만 실제로는 코드를 작성하여 양식에 잘 액세스 할 수 있도록하십시오 제출 버튼, 텍스트를 클릭하여 돋보이는 것으로 바꾸십시오 제안에

크기, 필드와 일치하도록 '보통'으로 설정합니다 정렬 우리는 정당화 된 것으로 설정하여 사용 가능한 전체 너비로 만듭니다 아이콘, 더 이상 신경 쓰지 않아 작은 화면에서 약간 이상하게 보일 수 있기 때문에 단추 이메일 및 옵션에서

여기서 양식 제출 알림 이메일이 전송되는 위치를 설정합니다 당신은 우리가 올 전자 마케팅 제공자에게 보내야 할 것이지만, 지금 당신이 필요로하는 것만으로 이것들을 설정하십시오 곧 이메일 마케팅 서비스에 연결하는 방법을 설명하겠습니다 실제로 '페이지 URL'을 메타 데이터에 남겨 두는 것이 좋습니다 그렇게하면 알림 이메일을 보내면 양식을 보낸 페이지를 알 수 있습니다

사이트의 여러 페이지에서 귀하의 웹 사이트를 가져왔다면 편리합니다 리디렉션 대상 :이 URL은 사용자가 서명 한 후 '감사'페이지의 URL을 설정합니다 쪽으로 가서 사이트에 감사 페이지를 만들고 URL을 붙인 다음 붙여 넣기하십시오 여기

webhook URL, 이제 실제로 이것은 연결하는 측면에서 마술이 일어나는 곳입니다 양식을 고객의 이메일 마케팅 서비스에 제출하십시오 그러나 내가 말했듯이 우리는 그걸로 조금 돌아올거야 이제 스타일 탭으로 이동하십시오 버튼 색상을 좀 더 눈길을 끄는 듯이 바꿀 것입니다

타이포그래피도 터치 그 후 기본 페이지 레이아웃이 완료됩니다 방문 페이지의 마지막 섹션을 놓친 것입니다 이 동영상을 적절한 길이로 유지합니다 앞서 언급 한 것처럼이 양식을 MailChimp와 같은 고객의 이메일 제공 업체에 연결해야합니다

활성 캠페인 또는 물집 또는 ​​다른 서비스 누군가가 양식을 채울 때 세부 정보가 해당 서비스로 전달됩니다 자동으로 이제 내가 당신에게 권하고 싶은 것은 Chris Moore의 사이트 인 'Fire Up Your 온라인 비즈니스 ' 그는 무료 튜토리얼 비디오를 통해 얼마나 쉽게 연결되는지 보여줍니다 Zapier를 사용하는 이메일 마케팅 서비스까지 엘리멘 타스의 양식

좋아, 마지막 비트 우리는 이제 팝업이 일어나도록해야합니다 나는 이것을 위해 무료 Popup Maker 플러그인을 사용할 것이다 이미 플러그인을 설치했습니다 설명에 링크가 있거나 WordPress 관리자 패널에 링크가 있습니다

'플러그인 추가'로 이동 한 후 검색하십시오 첫 번째 작업은 팝업 자체를 만듭니다 그건 Popup Maker와 'Add Popup'에 있습니다 팝업 이름은 참고 용일뿐입니다 여기에 팝업 제목을 입력하십시오

이것은 팝업 자체에 헤드 라인으로 나타납니다 테마 – '라이트 박스'가 마음에 들어요 이 페이지에는 다른 스타일이 많이 나와 있지만 게임을 할 수있게 해 줄 것입니다 그들 자신과 팝업 인트로 텍스트 필드는 제안을 잠시 반복하는 곳입니다

이 시점에서 팝업을 게시 해 봅시다 우리는 여전히 폼을 추가하여 폼을 템플릿으로 저장해야합니다 해당 템플릿에 대한 단축 코드를 가져 와서 팝업 자체에 배치하십시오 이제 가자 양식을 저장하려면 우리가 작성한 양식이있는 Elementor 페이지로 다시 건너 뜁니다

일찍이 서식을 템플릿으로 저장하고 실제로는 특별한 종류의 템플릿입니다 우리는 양식 위젯 자체를 저장하고 있으며 실제로 우리가 할 수있는 전역 위젯을 저장하고 있습니다 아무 데나 저장하십시오 그 위에 마우스를 올려 놓습니다

'저장'아이콘을 클릭하십시오 이름을 지정하십시오 글로벌 위젯은 Pro 버전의 또 다른 기능입니다 Elementor 무료 버전에서는 전체 섹션을 템플릿으로 저장할 수 있지만이 목적은 여기에 있습니다

깨끗하지는 않습니다 무료 버전을 계속 사용하려면 템플릿을 직접 만들 수 있습니다 WordPress 관리자 패널 'Elementor> My Library'로 이동하면 새 템플릿을 만들 수 있습니다 그리고 그 템플릿은 하나의 섹션을 포함 할 수 있습니다

형태 그래서 이것이 다른 방법입니다하지만 Pro 버전을 사용하고 있다면 글로벌 위젯이라고 생각합니다 최선의 방법입니다 이제 Elementor와 My Library로갑니다

이제 Pro 버전을 사용하면 방금 만든 위젯의 단축 코드가 표시됩니다 여기에 저장되었습니다 프로가 없다면 AnyWhere Elementor라는 훌륭한 무료 플러그인이 있습니다 유사한 기능 다시 팝업으로 돌아가십시오

그 짧은 코드를 팝업 컨텐츠에 붙여 넣으십시오 그런데 여기서 조건 패널을 사용해야합니다 실제로 페이지가 아닌 다른 페이지에 나타나는 팝업 코드를 제한해야합니다 팝업을 사용하고 싶습니다 이렇게하지 않으면이 페이지가 표시되는 페이지를 제한하지 않으면이 코드가 특정 팝업, 실제로 소스 코드에있을 것입니다

페이지에 불필요한 가중치를 추가하는 사이트의 페이지 이제 '선택 조건', 선택된 페이지로 이동합니다 이 팝업을 사용하고있는 페이지의 이름을 입력하고 선택하십시오 그런 다음 팝업을 다시 업데이트해야합니다 이제는 그 형식의 팝업입니다 이제 실제 팝업이 방문 페이지 자체에서 발생하도록해야합니다

그래서 모든 팝업으로 돌아 가라 이제 CSS 클래스에서 첫 번째 비트를 복사해야합니다 그들은 당신에게 2 가지 중 하나를 선택할 수있게 해주 며 실제로 팝업 설정에서 더 많이 추가 할 수 있습니다 사용자 지정 트리거는 원하는 대상을 지정할 수 있지만 여기서는 필요하지 않습니다 거의 도착 페이지로 돌아갑니다 양식을 전역 위젯으로 저장했기 때문에 양식을 삭제할 수 있습니다

팝업에서 우리는 더 이상 여기에 페이지가 필요하지 않습니다 버튼 위젯에서 드래그하십시오 그러나이 버튼을 클릭했을 때 팝업이 나타나게하려면 스타일을 지정하십시오 버튼에 대한 고급 설정으로 이동해야합니다 CSS 클래스를 찾으십시오

그리고 지금하는 모든 팝업 페이지에서 복사 한 CSS 클래스에 붙여 넣기 만하면됩니다 페이지에서 테스트 해보기 숨 참 으세요 손가락과 다른 모든 것은 건넜다 그리고 양식이있는 팝업이 있어야합니다

그런데 앞으로이 양식을 편집하려면 글로벌 위젯이 실제로는 아닙니다 다른 템플릿과 달리 Elementor My Library 영역에서 편집 할 수 있습니다 하지만 당신이하는 일은 일시적으로 페이지에 다시 놓는 것뿐입니다 일단 편집했으면 페이지에서 다시 삭제하십시오 내가 말했듯이 라이브러리 템플릿을 대신 사용하면 문제가되지 않습니다

이것이 방문 페이지입니다 그것을위한 뒤의 방대한 두껍게 잘 했어! 이 방문 페이지를 여기 템플릿으로 저장하는 것을 잊지 마세요 가져 오기 만하면됩니다 미래에 어떤 프로젝트로든 반복해서 참여할 수 있습니다

시간 내 주셔서 감사 드리며 두 가지 무료 보너스를드립니다 첫 번째는 이전에 내가 보여준 3 Elementor 방문 페이지 템플릿입니다 자신의 프로젝트로 가져 오기 또한 콘텐츠 업그레이드 방법을 보여주는 보너스 비디오를 보내드립니다 이것은 가입 메커니즘이 별도의 블로그 게시물이 아닌 블로그 게시물에 직접있는 부분입니다

방문 페이지 이들은 정말 잘 변환하고 고객과 함께 테스트 가치가 있습니다 designbuildwebco/landing-pages/로 갑자기 나타납니다 보너스를 보낼 곳을 알려주는 상자가 있습니다

실제로 이는 실제 콘텐츠 업그레이드의 예입니다 이 비디오가 마음에 들면, 비디오처럼 댓글을 남기고 구독하기 만하면 좋을 것입니다 내 채널에 내 이메일 구독자는 내 최고의 모든 것을 얻습니다 그래서 designbuildweb

co에 가입하십시오 고맙습니다 [음악]