How to design a landing page on WordPress – Elegant Themes Divi

안녕하세요 오늘 자습서에 오신 것을 환영합니다

여기로 스크롤하면 WordPress에서 방문 페이지를 만드는 방법을 보여 드리겠습니다 몇 가지 애니메이션이 있다는 것을 알게 될 것이므로 거기에서 볼 수 있습니다 확대하면 더 아래로 스크롤 할 때 이미지가 표시됩니다 또한 이러한 애니메이션이 최신 기능으로 가능 해졌습니다 Divi에 추가 된 것은 무엇입니까? 이제 내가 여기서 다루는 또 다른 사항은 포토샵에서 약간의 작업을해야한다는 것입니다

이 신발을 배경과 분리하면 나도 그걸 보여줄거야 따라서 WordPress의 새로운 브랜드이고 아직 웹 사이트를 디자인하지 않은 경우 페이지 디자인을 시작하기 전에 그리고 당신은 당신의 호스팅이 없습니다 너에게 몇 가지 제안이있어 모션 호스팅에서 나의 제휴사 링크를 통해 귀하의 호스팅을 구입하는 경우 귀하에게 내 코스 2 개를 제공 할 것입니다 절대적으로 무료 첫 번째 코스는 워드 프레스 코스입니다 WordPress에 대해 알아야 할 모든 것을 기본적으로 가르쳐 줍니까? 두 번째 코스는 Divi입니다

청사진 코스가 이제는이 코스에서 멋진 디자인을하기 위해 필요한 모든 것을 보여줍니다 웹 사이트와 실제로이 교육을받을 수있는 세 번째 방법은 구매하는 것입니다 Divi 내 제휴사 링크를 사용하면 실제 구매할 수 있습니다 내 제휴사 링크를 사용하여 Divi 회원 가입을하고 영수증 번호를 알려 주시면 해당 코스에 대한 액세스 권한을 부여하겠습니다 자,이 다이렉트 방문 페이지를 어떻게 구축했는지 보여 드리겠습니다

우선 Pixabay라는 웹 사이트에 가서 시작했는데 pixabay는 로열티가없는 웹 사이트입니다 당신은이 모든 이미지를 절대적으로 무료로 사용할 수 있습니다 그게 바로 좋은 점입니다 그래서 여기에 왔습니다 그리고 여기에서 신발을 찾았습니다

이것들은 나의 결과 였고 이것은 우리가 최종 디자인에서 볼 수있는 것처럼 내가 선택한 신발입니다 좋아, 이제 그 이미지를 다운로드 할 때 그것은 흰색 배경으로 제공됩니다 그래서 포토샵에 가서 그 배경을 지워야 만합니다 이것이 제가 여러분에게 보여줄 것입니다

그래서 포토샵을 열고 바로 여기 내 이미지가 있습니다 흰색 배경으로 볼 수 있습니다 그래서 우리는 그 흰색 배경을 제거해야합니다 그래서 당신이 실제로하고 싶은 것입니다 이것을 더 크게 만들자

그러면 당신이하고 싶은 것은이 이미지를 먼저 복제하는 것이다 그래서 여기를 클릭하면 커맨드 J를 누르게됩니다 커맨드 J 그냥 복사하거나이 이미지의 복사본을 만들면됩니다 PC를 사용하고 있다면 그것은 제이 Ok 그래서 Mac에서 명령 J PC입니다

이 이미지가 여기 있습니다 네가하고 싶은 것은 여기 와서 바로이 아이콘을 클릭하십시오 이제이 아이콘을 사용하면 이미지를 선택할 수 있습니다 지금 필요하지 않은 이미지 부분을 선택하십시오 거친 선택이 될 것입니다

그래서 나는 단지 주위를 끌고 당신이 이것을 볼 수 있는지 모르겠지만 내가 이것을 선택하면 그것은 정말로 흰색 배경 선택 사실 내가 할 일은 확대해서 실제로 무슨 일이 벌어지는 지 볼 수 있습니다 하지만이 행진하는 개미들이 여기있는 하얀 지역을 꽤 많이 선택하고 있음을 알 수 있습니다 여기서 무슨 일이 일어나고있는거야? 흰색 영역이 있습니다 이 신발을 선택해야합니다 그래서 나는 그 선택을 역으로하는 데 사용할 수있는 아주 좋은 지름길을 가지고 있습니다

시프트 커맨드 I 좋아, shift 명령을 누르면 나는 그 선택을 뒤집을 수있다 그래서 지금 내가하고 싶은 것은 이것을 선택했다 여기를 클릭하여 선택 및 마스크를 클릭하면 한 번 클릭 할 것입니다 여기에서 실제로 다른 모드로 이동할 수 있습니다 선택이 어떻게 선택되었는지 볼 수 있도록 도와 드리겠습니다

나는 오버레이 방법을 선택할 수 있습니다 그렇지 않으면 우리가 실제로 볼 수 없기 때문에 정말 맛있는 개미를 선택할 수 있습니다 좋아, 그럼 우리가 사용할 수있어 레이어 및 우리는이 흑백을 내가 지금 일반적으로 사용하는 것을 사용할 수 있습니다 이 검은 색으로 지금 내가 이것을 선택하는 이유는 편집하고있는 객체를 거의 볼 수 있기 때문입니다

한때 배경으로 아주 분명합니다 그렇게 선택되었습니다 괜찮아 좋은 이제 우리는 지금하고 싶은 것은 조정하는 것입니다

이 설정은 여기에 있으므로 불투명도가 있으므로 반경도 지금 있습니다 이 방법은 배경을 어둡게 또는 더 밝게 만들기 때문에 불투명도를 만지지는 않습니다 좋아, 그럼 네 이미지가 너무 어둡다면 지금 조정할 수 있니? 반경에 들어가 봅시다 여기에서 당신이하고 싶은 것은 당신이 당신의 올바른 선택을 할 때까지이 조정을 가지고 놀 것입니다 그래서 나는 부드럽게하기 위해 여기에 올 것이고, 나의 선택이 매끄럽다는 것을 확실히 할 것이다

그래서 12는 괜찮다 나도 이걸 기뻐할거야 나는 그것을 아마 1 개의 화소에 남겨 둘 것이다 그리고 당신이 그것을 과장한다면 당신은 실제로 어떤 차이를 볼 수 있습니다 그것은 여기서 다시 그렇게 만들고 있습니다

어쩌면 그걸두고 갈께 20 % 그리고 나도 교대 전환을 할거야, 좋아 그래서 너는 마이너스 20에 대해 너에게 우위를 바꿀거야 이제이 설정은 작업중인 이미지 유형에 따라 달라질 수 있습니다 자신이 선택한 방식에 만족할 때까지 이들과 함께 놀 필요가 있습니다

괜찮아 여기 여기에 와서 색상을 오염 제거하고 그때 출력물이 레이어 마스크가있는 새 레이어에 있는지 확인해야합니다 지금은 모든 설정이 완료되어 OK를 클릭 할 것입니다 바로 지금 우리의 이미지가 이제 투명 한 배경 여기에서이 레이어를 비활성화 할 것이므로 여기에서 무슨 일이 일어나는지 명확하게 볼 수 있습니다

그래서 나는 그것을 무력화 시켰고 이제 당신은 그것을 볼 수 있습니다 그것은 투명한 배경에 있고 단지 그것을 볼 수 없다는 것을 증명하기 위해서입니다 배경을 추가 할 것입니다 여기에 배경이 추가 될 것입니다 그냥이 이미지 아래로 당겨

지금 투명 배경에있는 것을 볼 수 있습니다 실제로 몇 가지 항목이 있습니다 내가 여기서 조정할 필요가있는 것은이 끈을 볼 수있다 그들은 정말 좋아 보이지 않으므로,이 아이콘을 클릭하면됩니다

주변에 검은 색이있다 이것은 레이어 마스크이므로 원하는 작업은 다음과 같습니다 브러시 도구를 선택하려면 브러시 도구를 지금 선택하십시오 B 버튼 만 누르면됩니다 좋아

사촌 B 브러시 도구를 제공하고 브러시를 더 크게 만들고 싶다면 오른쪽 대괄호 키를 누르기 만하면됩니다 그것과 그것으로 만드는 것은 그것을 더 크게 만들고 그냥 그림을 그리기 시작합니다 실제로 삭제 또는 이것을 지우기 여기 야, 알았어, 난 그냥 왼쪽 브래킷 키를 눌러 브러시를 약간 작게 만들거야 그런 다음 계속 그림을 그리십시오

이제는 시간이 많이 걸리기 때문에 이것을 완벽하게 만들지는 않을 것입니다 이 튜토리얼이 너무 길어지는 것을 원치 않는다 이 분야에서 여기서도 해보 죠 바로 거기 그리고 가능한 한 최대한 많이 노력하고 유지하십시오 좋아, 훌륭해

그렇게 할거야 이제 할 일은 오렌지 배경을 선택 취소하는 것입니다 이제이 이미지를 저장하려면이 이미지를 저장해야합니다 shift alt 키를 눌러야합니다 명령 S 설탕 지금 당장 우리는 지금이 안전 장치를 가지고 있습니다

네가 PC를 사용한다면 그 명령을 다시 내 보자 Ctrl 키를 누릅니다 그러면이 대화 상자가 나타납니다 좋아, 이제 우리가 이걸 가지고 와서 네가 여기 와서 Png-24, P a와 ba Png-24를 선택하면이 투명 배경을 얻을 수 있습니다 이렇게하면 그냥 설정 가서 이미지를 저장하십시오

좋아, 그럼 한번 저장해 우리는 이제 DV에 들어갈 준비가되었습니다 좋아요 이미 이미지를 저장했기 때문에 이걸 취소하고 DV로 뛰어 들자

좋아요, 그래서이 페이지를 처음부터 만들려고합니다 그래서 저는 워드 프레스 관리 대시 보드에 로그인 할 것입니다 좋아, 그래서 나는 로그인 할거야 여기에 페이지로 가서 새로운 추가를 클릭하십시오 그럼이 페이지 방문이라고하겠습니다

Divi builder를 클릭하면 곧바로 비주얼 빌더에 곧바로 갈 것입니다 우리는 비주얼 빌더에 있습니다 그래서 우리가 먼저 할 일입니다 추가 하시겠습니까? 한 행으로이 플러스 버튼을 여기에서 클릭 할 것입니다 우리는 이미지를 추가 할 것이라고 덧붙일 것이다

내가 언급 한대로 이미지 클릭 업로드를 클릭 할 것입니다 미디어 라이브러리에 이미지가 이미 설치되어 있습니다 여기 신발 이미지를 클릭하기 만하면됩니다 이미지 업로드를 클릭하십시오 우리는 바로 그 이미지를 가지고 있습니다

그리고 나는 앞으로 나아갈 것이고 다음으로 우리는 전체 너비를 더할 필요가 있습니다 섹션과 그 전체 너비에서 그것은 전체 너비 헤더해야합니다 맞아 여기서해야 할 일은 레이아웃을 클릭하여 디자인하고 전체 화면으로 설정되어 있는지 확인하기 위해 여기에 올 필요가 있습니다 알았어 나는 구할거야

이제 전체 화면 이미지를위한 공간이 생겼습니다 이 톱니 바퀴 아이콘을 클릭하면 다음 단계는 배경 이미지를 추가하는 것입니다 그래서 저는 배경을 클릭 할 것입니다 그리고 나서이 세 번째 탭에 바로 접근해야합니다 이미지를 추가해야합니다

이 플러스 버튼을 클릭하고 이것은 우리가 추가해야 할 이미지이며 pixabay에서도이 이미지를 얻었습니다 나는 이미지 업로드를 클릭 할 것이고,이 이미지가 전체를 덮을 것임을 알게 될 것이다 섹션 좋아요 그럼 저장하고 저장 한 다음이 이미지를 상단으로 드래그합니다 그래서 나는 그걸 꼭대기까지 끌어 올릴거야

이제 우리 신발이 여기 있습니다 이제 우리가해야 할 일은 행 설정에 들어가서 부정적인 여백을 추가하는 것입니다 행 설정을 클릭합니다 고급 탭 사용자 정의 CSS 기본 요소를 클릭하십시오 그래서 우리는 남겨진 여백 인 CSS 코드를 입력해야합니다

미안 마진 상단 콜론 그것을 시도하자 – 400px 맞아요 그래서 당신은 우리의 이미지가 지금 방금 밀어 올려 졌음을 볼 수 있습니다 정확히 우리가 필요로하는 것이므로 지금 가서 우리가 이것을 분명히 볼 수 있도록 배경색을 추가하기 시작하겠습니다 여기서는이 섹션 설정을 클릭하여 배경을 클릭하겠습니다 배경색을 추가 할 것입니다

여기에서이 플러스 버튼을 클릭하고 검정색을 추가합시다 그리고 이제 그것을 저장하십시오 이제는 이것이 정말 정말 멋지게 보입니다 그래서 이것을 완벽하게 만들 수 있습니다 이걸로 영웅, 이미지 우리가해야 할 일은 영웅 이미지를 여기에 올리는 것입니다

이 기어 아이콘을 클릭하여 배경을 클릭 한 다음 이번에는 두 번째 탭에서는 그라디언트 그래서 첫 번째 색상은 검은 색이되고 두 번째 색상은 흰색이 될 것입니다 그래, 그라디언트 방향이 있어야 해 360 여기에서 이미지 인 세 번째 탭으로 이동 한 다음 여기 우리가 곱하기 위해 배경 이미지 블렌드를 설정해야합니다 이제 우리는 두 번째 섹션에있는 배경이 이제이 이미지에 혼합되어 있음을 알 수 있습니다

정말 멋집니다 지금 두 번째 탭에서 다시 여기로 들어가서 우리의 설정 그래서 우리는 여기서 시작 위치를 조정할 수 있으며 조금 더 내려 놓으면이 이미지를 더 많이 보여줄 수 있습니다 좋아요, 사실 우리는 그것을 대략 가져올 수 있습니다 34 맞아, 멋져 보이네

그래서 우리는 더 많은 이미지를 볼 수 있습니다 어느 것이 옳은가요? 계속해서 오른쪽으로 저장하면 클릭 유도 문안을 추가해야합니다 여기에서이 더하기 버튼을 클릭 할 예정이며, 클릭 유도 문안을 검색 할 예정입니다 이제 우리는 행동 강령을 추가 할 것입니다 나는 정말로 게으 르기 때문에 나는 보통 lorem 텍스트를 사용했다

그래서 거기에 들어가야 할 실제 텍스트를 타이핑하는 것을 좋아하지 않습니다 하지만 내가 할 수있는 일은 무료로이 레이아웃을 포기하고 있기 때문에 항상 들어가서 텍스트를 바꿀 수 있기 때문입니다 괜찮을 필요가있을 때 버튼 텍스트를 추가해야하는 것처럼 텍스트를 추가 할 것입니다 장바구니로 좋아요, 그런 다음 설명과 함께 여기에 텍스트를 추가해야합니다 복사하여이 영역에 붙여 넣으십시오

그런 다음 아래쪽에 링크를 추가해야합니다 나는 빈 링크를 추가 할 것입니다 그리고 나서 우리는 여기에 올 것입니다 필요한 배경이 없기 때문에 배경을 제거하고 배경을 제거하십시오 그래서 선택하겠습니다

아니, 이제 우리는 행동 강령에 투명한 배경 디자인에 가자 텍스트를 클릭하자 여기서해야 할 일은 모든 것이 중앙에 오도록하는 것이다 어떤 것이 좋은지, 그리고 지금 우리는 헤더 텍스트에 이르러 올 것입니다 어쩌면 약간 더 크게 만들자

36은 이제 할 것입니다 저는 방금 습관을 만들었습니다 내가 사용하고있는 Texe는 세 가지 장치 모두에서 잘 어울립니다 그래서 내가 여기서하는 일을 보여줄거야 나는 이걸 대담하고 대문자로 만들거야

맞아, 내가 평소에하는 일은 여기이 작은 아이콘으로 여기 와서 모든 것이 멋지게 보이는지 확인하는 것이다 여기 태블릿보기에서 볼 수 있습니다 내 텍스트가 아주 큽니다 나는 단지 30을 약간 줄인 다음 스마트 폰으로 줄 수 있습니다 확실히 한 줄에 넣고 싶습니다

그래서 이것을 줄이려고합니다 한 줄에 모두 표시 될 때까지 22 명이 괜찮습니다 알았으니 바탕 화면으로 돌아가 봅시다 그래서 그것은 좋게 보입니다 우리 몸 본문으로 다시 옮겨 가자

이 값을 약 18로 늘릴 것입니다 좋아 그럼 괜찮아 우리의 선 높이를 우리가 결정할 수 있다면 if 우리는 이것을 두 줄로 볼 수 있습니다 그래서 더 많은 텍스트를 추가해 보겠습니다

그러면 더 많은 텍스트를 복사하고 붙여 넣기 우리의 콘텐츠 영역 맞아, 내가 다시 여기 올거야, 우리가 추가 할거야, 맞아 괜찮아 이제 우리는 우리가 우리의 라인 높이는 정말 멋져 보이지 않습니다 그래서 여기에 디자인 탭으로 들어가서 본문 텍스트를 클릭하고 줄 높이를 더해 보겠습니다 좋아, 그럼 1

8 우리가 할 다음 일은 정말 멋지다 버튼을 약간 조정하고 정말 멋지게 보이게하려면 버튼에 대한 사용자 정의 스타일 사용 버튼에 사용자 정의 스타일 사용하기 위해 여기로 올 것입니다 조정을 위해 필요한 모든 기능을 활성화합니다 알았어 여기에 우리의 단추 텍스트 색으로와 보겠습니다

아직 색상을 언급하지는 않았지만 사용하고 있습니다 이것에 걸쳐 특정 색상 그래서 내가 할거야 내 모든 색상을 가지고 내 문서 사이에 다시 수신 거부됩니다 그래서 당신은 어떤 색을 볼 수 있습니다, 나는 내 텍스트 색을 위해 그렇게 사용하고 있습니다 나는 내 문서에 이리로 갈거야 이것은 내 텍스트 색상입니다 나는 그것을 복사 할 것이고, 우리 몸의 본문과 여기에 되돌아 가자

여기에 추가하여 시작하십시오 좋아, 내 몸짓 텍스트이고 이제는 추가 할 시간이야 버튼을 위해 4 개의 버튼이 있습니다 여기에서 내 색을 선택하겠습니다 버튼을 클릭하면 버튼 배경 색이됩니다

이것을 추가하여 시작하겠습니다 그럼 우리의 텍스트 색상, 나는 밝은 빨간색을 사용하려고합니다 그리고 우리는 이것으로부터 테두리 너비를 필요로하지 않습니다 국경 반경 I 3 명이 괜찮다고 생각하면, 여기에 올 테니, 대담하고 모두 대문자인지 확인하십시오 좋아, 지금 여기

우리는 또한 아이콘이 필요하다 버튼에 스타일을 약간 추가하면 아이콘이 표시됩니다 나는이 장바구니가 필요하다 그 아이콘이 항상 보여 지도록 할게요 그래서 당신이 볼 수있게되었습니다

마지막으로 버튼 호버 배경색을 다시 추가해야합니다 우리는 지금 작동하는 색상을 선택할 수 있습니다 이것은 미묘하고 정말 멋지다고 생각합니다 괜찮아? 나는 그걸로 행복하다 그래서 나는 지금 나아갈 것이다

오, 사실 저장하십시오 우리가해야 할 일이 더 있습니다 헤더 색상을 추가해야합니다 다시 여기로 들어가서 디자인에 가보자 텍스트 편집을 클릭하여 헤더 텍스트 색상을 찾습니다 나는 여기에 색칠을 붙여서 멋지게 보인다

이 색상을 추가하면이 색상으로 여기에 뭔가가 나타날 수 있습니다 그들은 꽤 많이있다 당신이 지금 우리가 가지고있는 신발을 가깝게 매치 시켜라 이것은 페이지에서 일관된 색상을 유지하는 데 사용할 수있는 디자인 기법 중 하나입니다 좋아, 그게 나에게 좋았어

계속해서 저장하고이 페이지에 더 많은 요소를 추가하여 우리가 다른 섹션을 추가 할 예정입니까? 여기에서이 더하기 버튼을 클릭하고 일반을 클릭하십시오 그러면 세 개의 섹션이 필요합니다 열과 열에서 이미지와 텍스트를 추가 할 예정이므로 이미지로 시작하겠습니다 내 이미지, URL을 클릭하십시오 이제이 이미지로 시작하겠습니다

이 이미지를 다시 준비하는 방법입니다 나는 Photoshop에 가서 그냥 멋지게 보일 것이라고 생각했던 신발 부분을 선택했다 그리고 그 세 이미지를 저장 했으니 까 그래서 내가이 이미지들을 여기 어떻게 얻었는지 알 겠어? 이미지를로드 할 것입니다 그래서 여기에서 볼 수 있습니다

나는 앞으로 가서 저축 할 것이고, 저는이 두 번 복제 할 것입니다 그리고 나머지 이미지를 여기에 추가하십시오 좋아, 이제 내가이 모든 것을 제자리에 놓았으므로이 이미지를 바꾸기 위해이 모듈의 설정에 들어갈 필요가있다 좋아, 그래서 이걸로 갈거야 그때 구하다 그리고 나서 내가 올 것이고 또한 마지막 이미지를 추가 할 것입니다

이 사진은 여기에 있습니다 좋아 사진을 업로드하십시오 지금까지는 괜찮아 보입니다 내가 가서 저장하고 그럼 당신이 원하는 경우이 단계를 추가 할 수 있습니다 당신의 배경색, 그래서 나는 여기에 배경으로 올거야 그리고 우리는 그것을 검은 색으로 만들어서 저장하게 만들거야

이제 텍스트 모듈을 추가 할 차례입니다 여기에서이 플러스 버튼을 클릭하겠습니다 과 내 텍스트 모듈을 검색 할 것입니다 여기에서는 텍스트를 클릭하여 디자인 한 다음 텍스트 색상을 추가하기 만 할 것입니다 그렇게 그런 다음 우리는 돌아가서 내용을 추가하여 lorem 텍스트를 클릭 할 것입니다

내 텍스트를 강조 표시하고 나는 다시 여기 와서 붙여 넣을거야 괜찮아 여기에 붙여 넣으려고합니다 그러면 이제 그걸 볼 수 있습니다 소요되는 시간은 너무 작아서 조금 더 크게 만들 것입니다

그래서 우리는 여기에 텍스트와 크기에 대해 설명 할 것입니다 나는 사실 그것을 약 16 개까지 올릴거야 어쩌면 16 개조차도 15 개를 의미 할 것입니다 그래, 선의 높이가 괜찮아 보이는군요 그것도 괜찮아 보이는군요

그래서 지금 나가서 저장할 것입니다 그래 나 다시 할께 나는 이것을 복제 할거야 몇 번이나 복사하여 붙여 넣기조차 할 수 있으므로 실제로 복사하고 붙여 넣기 만하면됩니다

그래서 ctrl C를 복사하는 Ctrl V를 사용하는 대신 PC에 붙여 넣기하면됩니다 Mac을 사용하고 있다면 Ctrl 키를 누르십시오 PC에 있다면 C입니다 계속 잘못하고있어 알았어

맥에서 명령을 내렸다면 PC를 사용하고 있다면 Ctrl-c를 누른 다음 control-v 또는 command-v를 붙이십시오 좋아요, 그래서 여기에 제 정보를 모두 붙여 넣었습니다 나는 그걸로 행복하다 좋습니다

다른 것을 추가합시다 이제 행에이 행이 있습니다 우리의 제목을 가질 텍스트 모듈, 그래서 나는 단지 텍스트를 클릭 할 것이고 우리는 우리의 표제를 추가 할 것이다 그래서 나는 디자인 클릭 텍스트에 다시 올거야 그리고 우리는 우리의 색깔을 곧바로 덧붙일 것입니다, 그래서 저는 여기에 색을 칠할 것입니다

그리고 나서 다시 텍스트로 돌아가서 제목을 다시 추가 할 것입니다 나는 로렌에 올거야 여기 선을 선택하면 우리의 표제로 작용할거야 나는 그것을 복사 할 것이고 나는 그것을 여기에 붙여 넣을 것이다 디자인 탭을 클릭하면 바로 여기에서 디자인을 변경할 수 있습니다

내 사이즈를 약 30에 추가 할거야 내가 중심에 있다고 확신 할거야 좋아, 굵은 글씨로 보이게하고 그 모습을 보자 모두 대문자로하겠습니다 그래서 우리가 모든 대문자를 만들면 우리는 이걸 더 작게 만들어야한다고 생각합니다

그래서 우리는 22시에 그것을 남겨두고, 이제는 그것을 구할 것입니다 이제 이것을 이것을 꼭대기로 끌고 갈 것입니다 좋아요, 그래서 우리는 그대로두고 떠날 수 있습니다 또는 우리는 심지어 구분선을 추가 할 수 있습니다 그래서 디바이더를 추가하려면 이 버튼을 클릭하면 매우 간단하게 볼 수 있으며 여기서는 구분선을 검색해 보겠습니다 이제 쇼 디바이더를 클릭하여 설정을 확인하기 만하면됩니다 그러면 지금 볼 수 있습니다

나는 디자인에 클릭을 보여 주며 여기에 와서 색을 칠했다 그래서 이것은 다시 당신이 색으로 놀 수있는 곳입니다 그래서 이것을 시도하고 싶습니다 여기 스타일이 아주 멋집니다 당신은 무게를 만들 수 있습니다

니가 원하는 어떤 크기라도 알지만, 지금은 우리가 잘하는 것 같아 아마 세 명이나 될거야, 알았어, 그래서 나는 3시에 남겨두고 갈거야 변경 사항을 저장하고 여기에 행 설정으로 들어가 보겠습니다 따라서 행 설정에서 크기 조정을 클릭하여 디자인해야합니다 그런 다음 사용자 정의 크기를 선택해야합니다

그래서 우리는 여기에 와서 우리가 필요로하는 크기에 만족할 때까지 끌고 갈 것입니다 바트에서 20 시쯤에두고 갈거야 좋아, 그럼 우리가 다음에해야 할 일은 여기에있는 텍스트와 줄 사이의 간격이나 채우기를 조정하십시오 여기에서이 톱니 바퀴 아이콘을 클릭하여 디자인을 클릭 설정 띄어쓰기를 클릭하면 패딩 바닥이 20 정도를 시도해보아야합니다 20 룩스

그래, 괜찮아 보인다 우리가 여기에 올거야,이 격차가 너무 많기 때문에 우리는 여기에 올 것이다 행 세팅으로 넘어 가서 여백을 줄이면 여기에서 크기 조정을 할 것입니다 클릭 간격을 두었다가 우리를 위해 패딩 맨 0을 더해 보겠습니다

이제 조금 더 가깝고 훨씬 좋아 보입니다 좋아, 그럼 지금 나가서 저장하자 그래서 당신은 이미 우리 페이지가 정말 멋져 보이고 있음을 볼 수 있습니다 이제 애니메이션에 추가하여 애니메이션에 액세스하십시오 이 톱니 바퀴 아이콘을 클릭하고 그럼 우리가 디자인하러 갈거야

여기 바닥에 이것은 Divi의 최신 업데이트에 추가 된 추가 기능입니다 그래서 우리는 애니메이션을 클릭 할 것입니다 그리고 우리는 이것을 가지고 이것들을 가지고 놀 수 있습니다 괜찮아 질 필요가있어

따라서 확대를 클릭하면 애니메이션이 확대 될 수 있습니다 따라서 애니메이션 기간으로 여기 올 수 있습니다 과 원하는 경우 확장 할 수 있습니다 그래서 조금 더 섬세한 느낌을줍니다 그리고 강도도 조정할 수 있으므로 낮출 수 있습니다

그래서 저는 40 살 정도에서 살고 싶습니다 좋습니다 나는 지금 나가서 구할거야 좋아, 그럼 여기 저기로 가자 우리는 이것에 애니메이션을 추가 할 것입니다

행 설정으로 들어가 보겠습니다 디자인을 클릭하십시오 생기 과 이 애니메이션은 페이드 인 (fade in)을 클릭하기 만하면 페이드 인 (fade in)을 클릭하므로 여기에서 볼 수 있습니다 시간이 지체되어 이번에 퇴색했다 200 그리고 나서 나는 구하고 싶어

좋아요 그리고 마침내 우리는이 도로를 애니메이션으로 만들길 바랍니다 그래서이 행 설정을 클릭합니다 디자인 클릭 애니메이션을 클릭하십시오 하지만 이번엔 우리가 이걸 밀어 내야 해

알았어 우리가 여기에서 골라 낼거야 중심에 두는 대신 위로 올려야합니다 지금은 너무 공격적입니다 그래서 우리가 할 수있는 일은 애니메이션의 강도, 그래서 그것을 낮춰 봅시다

예, 그렇습니다 여기에 애니메이션 지연이 발생해야합니다 300 자 좋아, 이제 좋아 보이네 여기에서 더 많은 항목을 조정할 수 있습니다 애니메이션 커브가 당신을 편안하게 할 수 있습니다

여기 모든 종류의 것들을 할 수 있습니까? 그래서 이것들을 가지고 놀 수 있습니까? 이 애니메이션 설정을 구체적으로 살펴 보는 또 다른 튜토리얼을 만들 것입니다 그래서 그 세트를 통해 나는 지금 가서 변화를 저장할 것입니다 그래서 우리는 우리 페이지가 정말 멋져 보이고 있음을 볼 수 있습니다 나는이 페이지를 저장하고 지금 당장 최종 변경을 가할 것이다 나는 비주얼 빌더를 빠져 나갈거야

우리는 애니메이션을 테스트하고 잘 작동하는지 확인합니다 네 아름다운, 좋아, 이제 우리는이 모든 것을 제자리에 가지고있다 여기에 Divi 헤더 영역이 있음을 알 수 있습니다 그리고 바닥 글 영역도 있습니다 이제는 방문 페이지가 될 수있는 방문 페이지가 될 필요가없는 이러한 영역은 특정 메시지를 전달하고 그것이 방문 페이지 인 이유입니다

여기에서 편집 페이지를 클릭하겠습니다 여기에서 내가하고 싶은 것은 클릭 할 것입니다 템플릿이 빈 템플릿인지 확인하십시오 업데이트를 클릭하십시오 이제 페이지를 봅시다

이제는 페이지에 머리글이나 바닥 글이 없음을 알 수 있습니다 따라서이 페이지는 제품을 판매하는 경우 이상적입니다 그리고 그 제품은 승진 될 필요가 있습니다 그러면 당신이하는 일은 페이스 북의 광고 및 이 특정 페이지로 트래픽을 유도하고이 페이지에서 결과를 제공하는지 측정 할 수 있는지 확인하십시오 더 많은 사람들이 여기서 판매하는 품목을 구매하면 아름다운 방문 페이지가됩니다

하지만 이는 방문 페이지를 만드는 방법에 대한 아이디어를 제공합니다 최신 애니메이션을 포함하여 Divi와 내가 방금 본 모든 기능을 사용합니다 웹 사이트를 디자인하는 방법을 배우고 싶다면 최근에 추가 된 기능 당신은 Divi가 아주 아주 강력하다는 것을 알 수 있습니다 Devon WordPress의 조합이 놀랍습니다 실제로 내 자신의 경력을 쌓고 꽤 많이 Divi와 WordPress의 두 프로그램입니다

이전에 동영상에서 언급 한 웹 사이트 디자인 방법에 대해 알아보십시오 내 강의를 실제로들을 수 있습니다 아래의 설명 상자에 남겨두고있는 나의 제휴사 링크를 통해 귀하의 호스팅을 구입한다면 절대적으로 무료입니다 이제 이미 호스팅을 사용하고 있다면 문제가 없습니다 거기에 내 쇼 노트에있는 링크 할인 그러면 Divi 과정에 할인 혜택이 주어지며 엄청난 할인 혜택이 주어집니다

70 %이다 할인 이렇게 다만 쇼 주에있는 나의 연결에 아래에 가고 해당 링크를 클릭하여 이전에 제가 언급 한 코스를 지금 할인하십시오 Divi를 활용하고 놀라운 놀라운 웹 사이트를 구축 할 수 있도록하기 위해 알아야 할 모든 것 알았어 Divi에서 할 수있는 일의 스냅 샷입니다

당신은 절대적으로 놀라운 것들을 할 수 있습니다 이 채널에이 새로운 채널을 사용해 주셔서 감사합니다 구독하여 구독하십시오 새 동영상을 출시 할 때마다 알림을받으며 Divi University 통신으로 가서 메일 링리스트에 있는지 확인하십시오 라이브 교육이 있고 할인이있을 때 많은 미리 알림을 제공하므로 반드시 확인하십시오

당신은 그 목록에 있으므로 다음에 때까지 잃지 않을 것입니다 보고 주셔서 감사합니다 계속 설계하다