Landing Page на WordPress с плагином Elementor PRO. Реалити-шоу по пошаговому созданию лендинга

안녕, 친구들! 내 이름은 알렉산더 야 WPlovers 채널에 있습니다

여기서 우리는 WordPress에 대해 이야기합니다 사랑과 평범한 언어로 이 비디오에서는 길고 장시간의 비디오 WordPress를 사용하여 방문 페이지에서 어떻게하는지 보여 드리겠습니다 Elementor라고 불리는 플러그인 Elementor에 관해 2 비디오를 촬영했습니다 첫 번째 리뷰에 헌신했다 자유로운 특징 및 두번째 롤러 유료 기능 검토에 전념했다

이 비디오가 보이지 않으면 당신은이 비디오에서 아주 어려울 것입니다 내가 어떻게 그리고 어떻게하는지 이해하기 그러므로 그들은 비디오가 이해할 것을 본다 Elementor에 이미 익숙하다면 프로세스에 참여하는 것을 환영합니다 그 과정을 관찰하다 형식이 만들어지기 때문에? 첫째, 이미 방문 페이지를 준비했습니다

자아와 나는 단지 다시 쓸 것이다 새로운 착륙을 개조하다 네, 조금은 고문 할거예요 두 번이나 똑같은 일을 다시 할테니까 구독자를위한 모든 것을 제공합니다

그래서 당신은 아이디어를 가지고 있습니다 Elementor를 사용하여 WordPress로 착륙시키는 법 내 말은, 내가 여기서 캐 내려고 볼거야 새로운 페이지 방문하기 기본적으로, 나는 그것을 조용한 모드에서 할 것이다 그러나 때때로, 나는 당신의 코멘트를 줄 것이다

어떻게 그리고 어떻게해야하는지 편안하게 앉으세요 과정이 길기 때문에 커피를 준비하십시오 나와 함께 할 수있어 무료 버전을 열고 Elementor를 사용해보십시오 나는 유료 버전에서 할거야

내가 그것을 샀기 때문에, 그것에 링크도, 묘사에있을 것이다 그다지 비용은 들지 않지만 당신을 대신 할 것입니다 다른 디자이너들 그리고 그것은 귀하의 사이트에 모두있을 것입니다 너는 착륙을 조종하여 그것을 할조차 수있다 이렇게 전체 사이트로 http : //your_sitecom/your_landing-page 너무 느린 경우 내가하는 말, 내가하는 일, 의견 너는 할 수있다

YouTube에 속도 추가 즉, 125, 또는 15를 입력하면 괜찮아요 인식 나는 의도적으로 속도를 높이 지 않을 것입니다 필요에 따라 속도를 제어 할 수 있습니다 잘

하자 코멘트가 있습니다 내가하는 첫 번째 작업 – 새 페이지를 추가합니다 나는 이것을 "착륙 테스트"라고 부른다 나는 여기에서 선택한다 Elementor canvas 즉, Elementor가 내 테마에서 제거합니다 머리글과 바닥 글 즉, 머리말과 꼬리말 따라서, 나는 깨끗한 슬레이트를 가질 것이다

게시하는 것이 가장 좋습니다 그 후에, 나는«요소로 편집»을 누릅니다 Elementor를 사용하여 편집하려면 내 테마가 설치 되었기 때문에 기본 배경 회색 나는 흰색이 필요해 설정, 페이지 설정으로 이동해야합니다 우리가 이미 설치 한 Elementor Canvas 여기를 클릭하여 배경을 선택해야합니다

흰색 배경이 즉시 변경됨 그리고 세계적인 글꼴 내가 원하는대로 이미 선택했다 필요한 글꼴을 선택하십시오 Google 글꼴에서로드 원하는 글꼴 물론 선택의 폭이 크지는 않습니다 우리가 원하는만큼, 그럼에도 불구하고 간호사의 폰트 모든 우리는 작업 공간을 완성했습니다

우리가 시작한다 마이크를 끄고 음악을 켜십시오 시간 만 내 의견을 수시로합니다 어떤 순간에 나는 나는 너의 관심을 끌고 싶다 잘 행복하게 보러 가라

노트 기본 메뉴 기능이 없다는 요소 우리가 WordPress에서 볼 수있는 메뉴의 그것은 아닙니다, 그래서 우리는 HTML이라고 불리는 위젯의 도움으로 그것을하고 있습니다 이 간단한 HTML 코드는 당신이 무엇인지 이해하지 못한다면 물론, 당신은 아주 어려울 것입니다 이 블록에서 우리가하는 일 우리는 이른바 목록 메뉴를 넣었습니다 우리는 참조 블록을 작성한다 즉, 앵커 링크 그것을 클릭하면 해당 블록으로 비틀어집니다

이제 추가 CSS 스타일을 사용하여 블록을 약간 다르게 살펴 보겠습니다 이봐, 우리가 그걸 등록 했어 메뉴 항목은 흰색으로 표시됩니다 약간 투명하지만, 마우스를 가져 가면 그들은 점차 나타날 것이다 흰색 불투명 한 색 그게 전부 일 것 같은데

물론, 약간의 손으로 모든 것을 할 필요가 있습니다 그러나 그것이 메뉴를 만드는 유일한 방법 인 한 그리고 당신은 버튼의 도움으로 만들 수 있습니다 그러나 나는이 해결책을 발견했다 녹색 버튼을 눌러야합니다 화면 하단 키 조합 또는 CTRL + S 누르기 당신의 일을 구하기 위해 모든 심연이 있을지 모른다

인터넷 연결을 끊으면 아무 일도 일어나지 않는다 따라서 CTRL + S를 자주 누르십시오 in Elementor는 비디오 이미지 오버랩에 중첩 될 수 있습니다 나는 속이고 투명하고 빈 그림 PNG를 만들었 어 그래서 나는 그것을 표시하지 않았고, 배경 나는 단지 아이콘 만 필요하기 때문에 그리고 이것은 이것에서 나온 것입니다

그건 아주 작은 트릭입니다 투명한 배경 대신에 그림을 넣을 수 있습니다 동영상을 다룰 예정입니다 아이콘을 클릭하면 내 같은 팝업 창에서 동영상을 팝업합니다 또는 그림이 사라집니다 대신 YouTube 나 Vimeo에서 동영상을 재생했습니다

버튼을 클릭 할 때 팝업 창이 뜹니다 이 블록의 각 항목에 대한 설명 텍스트 팝업 기능이 Elementor에 내장되어 있지 않습니다 그래서 옵션 인 플러그인으로 해결책을 찾았습니다 Popup Maker라는 그 이름이 화면에 나타납니다 당신이 그것을 설치하면, 당신은 이제 각 포인트에 대해 팝업이 생성됩니다

각 팝업에는 추가 설명 텍스트가 있습니다 이제 화면에 설명 텍스트가 팝업됩니다 팝업에서 추가 단축 코드를 삽입 할 수 있습니다 네가 볼 수 있듯이이 짧은 코드 엘리먼트를 가지고있다 이 텍스트는 팝업 창에 표시됩니다

지금 나는 우리 페이지에 팝업을 tethering 그래서 그녀를 열어 업데이트를 클릭하십시오 나는 더 자세한 내용을 밝히지 않겠다 대부분 나는 별도의 클립을 쓸 것이다 Elementor에서 팝업을 만드는 법 뉘앙스가 있기 때문에 보시다시피, 나는 아무것도 설명하지 않고 추가 수업을 처방합니다

이제 목표 – 어떻게 작동하는지 보여 주기만하면됩니다 버튼을 클릭하면 팝업 창의 내용이 나타납니다 작동 원리는 다음과 같습니다 적응 랜딩 얻기 모바일 장치 용 이를 위해 해당 아이콘을 클릭해야합니다 도구 모음의 오른쪽 하단 모서리에 플레이트를 선택하기 시작했다

이제 태블릿을 최적화하는 데 지출 할 것입니다 나중에 스마트 폰에서 그래서 시간이다 우리의 프로젝트 스마트 폰을 채택하십시오 스마트 폰 모드 전환 우리가 태블릿에서했던 것과 똑같은 일을합니다 보시다시피 메뉴 숨기기 고급 설정에서 편집됩니다

반응 형 – 올바른 스위치 이동 구분 기호와 버튼이 숨겨져 있습니다 메뉴에서도 같은 일을했다 태블릿과 스마트 폰에서 메뉴 만 사라집니다 스마트 폰에서만 구분되는 분리 기호 및 버튼 그것에주의 해주세요 무슨 칩에주의를 기울여주세요

스마트 폰을위한 편집 모드에서 임의의 폭의 열을 설정할 수 있습니다 화면에서 개별 열 너비를 묻는 방법을 볼 수 있습니다 고급 설정에서 반응 형으로 이동하십시오 맞춤 – 임의의 너비 설정 그래서 우리는 너비를 제어 할 수 있습니다 적응 형 템플릿의 "오류" 그것이 2 열의 스마트 폰에서 객체를 표시 한 방법입니다

또한 그 점에 유의하십시오 모바일 장치에서 우리 모두는 긴 "샤프트" 열이 바뀌었을 때도 그렇게되었습니다 첫 번째 텍스트 및 그림 아래 모바일 장치의 고급 설정에있는 기능입니다 당신은 슬라이더를 클릭 할 수 있습니다 열이 반대로 바뀝니다

그래서 우리는 앞 좌석에 사진을 넣을 수 있습니다 우리의 예에서와 같이 우리는 그림 문자 – 그림 – 텍스트 또한 매우 편리하고 흥미로운 기능입니다 스마트 폰용 버전에서 나는 "불만을 가지고있다"라는 불쾌한 사건 수평 스크롤 이것은 일부 요소가 적응 형 메쉬를 벗어나 출현하기 때문에 나타납니다 나는 정확히 무엇이 요소인지 의심해 가장 쉬운 해결책을 찾았습니다 그것은 등록 할 특별한 코드이다

이제 내가 보여줄거야 내가 주문한 것과 정확히 일치한다 나는 일어난다 언론 섹션 – 귀하의 CSS 개체 선택기 삽입 CSS 속성을 할당합니다 owrflow : hidden 그래서 우리는 수평 스크롤을 제거합니다

이 코드를 복사해야합니다 주요 (부모) 섹션마다 CSS에 삽입됩니다 및 수평 스크롤 페이드 이 칩을 명심해라 다른 해결책이있을 수 있습니다 어쩌면 내가 어딘가에서 실수 했어 그러나 그것은 빠른 수정이다

검색 엔진이 코드를 봅니다 검색 엔진 중 하나에서보고, 나는 overglow를 스캔에 대한 정보를 발견했다 : 숨김 비슷한 상황이라면이 칩을 사용하십시오 우리가 방문한 방문 페이지입니다 당연히, 나는 그것을 주장하지 않는다 이상적인 방문 페이지입니다

알아 현재 몇 가지 중요한 블록이 없다는 것 사례 연구 (예 : 리뷰) 고객 사례 이것은 매우 강한 블록들입니다 그러나 그들이없는 한 나는 가짜를 조각하지 않을거야 항상 눈에 보이므로 속임수를 쓰고 싶지는 않습니다 나는 이미 안정적인 고객 지원을하고 있다고 말한다

안정적이고 일반 고객이 아직 사용자 리뷰가 없습니다 몇 가지 더 많은 블록을 할 수 있습니다 예를 들어, 블록 : 왜 우리가 그러나 그것이 진행되고있다 나는 당신이 달릴 필요가있는 그러한 모델의 후원자이다 그리고 수정하는 과정에서 당연히 WordPress에이 방문 페이지가 있습니다

"dokruchivat" 모든 웹 사이트 또는 방문 페이지가 완전한 도구가 아닙니다 이것은 당신이 달리고 끊임없이 발전하는 데 필요한 것입니다 불행히도, 우리의 기업가들은 이것을 이해하지 못합니다 다행히도, 우리 중 일부는이 사실을 알고 있습니다 내 일은 – 리얼리티 쇼를 보여주기 위해서 였어

기술적 측면에서 방문 페이지를 방문합니다 전문가를 판단하는 데 옳고 그름 나는 네가 너 자신을 위해 올바르게 할 것이라고 확신한다 나는 그것을 가지고 있으며, 나의 단점을 알고 있으며, 나는 많은 일을 알고있다 잘 나는 너에게 성공을 기원한다

긴 시선을 가져 주셔서 감사합니다 =) 좋아하는 인내심 흥미롭고 유용하다면 나를 좋아하게 해주세요 대단히 감사합니다 방문 페이지의 전환율이 높습니다 좋은 하루 되세요 안녕!