최근 독자 중 한 명이 WordPress 테마에 시차 효과를 추가하는 방법을 물었습니다.
시차 효과는 배경 이미지가 전경 콘텐츠보다 느리게 스크롤되는 요즘 웹에서 인기있는 추세입니다.
이 튜토리얼에서는 WordPress 테마에 시차 효과를 쉽게 추가하는 방법을 보여줍니다.
그러나 WordPress를 설치 한 적이 없다면 워드 프레스 블로그 7 단계를 설치하는 방법 et 어떻게 찾아 설치하고 블로그에 워드 프레스 테마를 활성화하려면
그러나 우리가 왜 여기로 돌아 왔는가.
시차 효과 란 무엇입니까?
시차 효과는 배경 요소가 전경 콘텐츠보다 더 느리게 스크롤되는 최신 웹 디자인 기술입니다. 이 효과는 배경 이미지에 깊이를 더하고 상호 작용하게 만듭니다.
우리의 발견 25 WordPress에 시차가있는 테마로 웹 사이트 만들기
시차 효과는 다음에 사용할 수 있습니다. 방문 페이지, 판매 페이지 또는 비즈니스 웹 사이트의 홈페이지입니다. 긴 페이지에서 다른 섹션을 강조 할 수있는 좋은 방법입니다.
많은 프리미엄 워드 프레스 테마 홈페이지에 내장 시차 효과가 있습니다. 대부분의 플러그인에서 시차 효과를 사용할 수도 있습니다. 워드프레스(WordPress) 페이지의 시각적 생성.
그러나 모든 WordPress 테마에 시차 효과가 내장되어있는 것은 아니며 시차 효과를 위해 시각적 페이지 생성자를 사용하지 않을 수도 있습니다.
WordPress 테마에 시차 효과를 쉽게 추가하는 방법을 살펴 보겠습니다.
방법 1 : 플러그인을 사용하여 WordPress 테마에 시차 효과 추가
이 방법은 WordPress 테마에 코드를 추가 할 필요가 없습니다. 대부분의 사용자에게 더 쉽고 권장됩니다.
가장 먼저 할 일은 플러그인을 설치하고 활성화하는 것입니다 고급 워드 프레스 배경. 자세한 내용은 WordPress 플러그인 설치 방법에 대한 단계별 가이드를 확인하세요..
플러그인을 활성화 한 후 시차 효과를 추가 할 페이지를 편집해야합니다. 새로운 버튼 "고급 워드 프레스 배경»비주얼 편집기 도구 모음에서.
클릭하면 추가하려는 다양한 배경 설정을 변경할 수있는 팝업 창이 나타납니다.
먼저 이미지를 배경으로 선택한 다음 " 긴장".
그런 다음 버튼을 클릭해야합니다 이미지 선택 사용하려는 이미지를 다운로드하거나 선택합니다. 큰 이미지를 사용하지 않으면 픽셀로 표시됩니다.
그 후, 당신은 효과를 활성화해야 시차 시차 효과 유형을 선택합니다. 실험 할 수있는 다양한 스타일이 있습니다. 사용되는 가장 일반적인 시차 효과는 스크롤입니다.
버튼을 클릭 끼워 넣다 계속합니다.
플러그인은 단축 코드 온 출판사. 다음과 같이 보일 것입니다 :
[Nk_awb의 awb_type = "이미지"awb_stretch = "true"를 awb_image = "22"awb_image_size = "전체"awb_parallax = "스크롤"awb_parallax_speed = "0.5"awb_mouse_parallax = "true"를 awb_mouse_parallax_size = "30"awb_mouse_parallax_speed = "10000"귀하의 콘텐츠를 여기에 [/ nk_awb]
"교체 이 내용 자신의 콘텐츠로 페이지를 저장하십시오.
웹 사이트를 방문하여 실제로 볼 수 있습니다.
방법 2 : CSS를 사용하여 WordPress 테마에 "Parallax"효과 추가
이 방법을 사용하려면 "HTML / CSS"에 대한 지식과 워드 프레스 테마 및 플러그인 작동 방식이 필요합니다.
먼저 ""를 방문하여 시차 효과에 사용할 이미지 인 WordPress 미디어 라이브러리에 업로드해야합니다. 미디어> 새로 추가 ".
발견하여 더 나아가십시오 워드 프레스 블로그에 미디어를 구성하는 방법
이미지를 업로드 한 후 WordPress 미디어 라이브러리에서 이미지를 편집하여 이미지의 URL을 복사해야합니다.
그런 다음 시차 효과를 표시하려는 페이지에 다음 HTML 코드를 추가해야합니다. 이 HTML 코드를 워드 프레스 테마 또는 자녀 테마.
div 클래스 = "parallax"> 여기에 귀하의 콘텐츠 ...
그런 다음 WordPress 테마에 다음과 같은 사용자 정의 CSS 코드를 추가해야합니다.
.parallax {배경 - 이미지 : 홈페이지 ( "http://example.com/wp-content/uploads/2017/08/my-background-image.jpg"); 신장 100 %; 배경-첨부 : 고정; 배경 위치 : 센터; 배경 - 반복 : 아니오 - 반복; 배경 크기 : 커버; 여백 왼쪽 : -410px; 마진 오른쪽 : -410px; } .parallax 함량 {폭 : 50의 %; 마진 : 0 자동; 색상 : #FFF; 패딩 탑 : 50px; }
배경 이미지의 URL을 자신의 이미지로 바꿔야합니다.
이제 변경 사항을 저장하고 웹 사이트를 방문 할 수 있습니다.
여기 있습니다! 이제 WordPress 웹 사이트에 시차 효과를 추가 할 수 있습니다.
테마와 프리미엄 워드 프레스 플러그인도 만나보세요
다른 WordPress 플러그인을 사용하여 현대적인 모양을 제공하고 블로그 또는 웹 사이트의 그립을 최적화 할 수 있습니다.
우리는 여기에 당신을 도울 수있는 프리미엄 WordPress 플러그인을 제공합니다.
1. WooCommerce 기부
고객이 지정한 금액으로 WooCommerce 웹 사이트에서이 확장 기부를 통해 수락하십시오. 그들은 원하는만큼 줄 수 있습니다. 각 기부금은 WooCommerce.
고객이 장바구니 페이지를 건너 뛰거나 기부하지 않고 바로 결제로 이동하면 기부 할 수 있도록 결제 페이지 위에 링크가 표시됩니다.
WooCommerce 기부를 사용하는 각 단계는 스크린 샷과 함께 문서에 설명되어 있습니다. 플러그인을 활성화하면 카트에서 "기부 추가"필드를 찾을 수 있습니다.
2. 더 많은 링크드 인
LinkedIn Plus는 블로그에 LinkedIn 프로필을 제공 할 수있는 WordPress 플러그인입니다. 또한 다중 저자 블로그에서도 작동합니다. 발행물, 페이지 또는 워드 프레스 위젯에 팔로우 및 공유 버튼을 추가합니다.
모든 LinkedIn 기능을 블로그에 추가하고 소비자와 함께 브랜드를 검증 할 수있는 좋은 방법입니다. 모양을 사용자 지정하고 설정을 구성하며 기타 고급 옵션을 활성화하여 잠재적 인 채용 담당자 또는 고용주에게 프로필을 홍보 할 수있는 기능을 제공합니다.
3. 한 YouTube
YouTubeR은 고유 한 WordPress 플러그인으로 웹 사이트에서 YouTube 동영상을 업로드하고 YouTube 동영상, 재생 목록 및 채널을 웹 사이트에 쉽게 삽입 할 수 있습니다.
이 플러그인을 사용하면 웹 사이트에서 뛰어난 비디오 갤러리를 만들 수 있습니다.
다른 기능은 다음과 같습니다. WordPress 웹 사이트, 통합에서 YouTube에 비디오를 쉽게 업로드 쉬운 동영상, 재생 목록 및 YouTube 채널을 웹 사이트로 연결하고 Visual Composer를 지원합니다. 재생 목록에서 무한 스크롤, 뛰어난 캐싱, 반응 형 레이아웃, 자세한 문서 등.
추천 자료
웹 사이트 구축 및 관리에 도움이되는 기타 권장 리소스에 대해 알아보십시오.
- WordPress에서 "디스크에 쓸 수 없음"오류를 수정하는 방법
- WordPress로 성공적인 블로거가되고 돈을 버는 방법
- 워드 프레스에 이메일로 기사를 게시하는 방법
- WordPress로 성공적인 블로거가되고 돈을 버는 방법
결론
그게 다야! 큰 도움이 되었기를 바랍니다. 주저하지 마십시오 좋아하는 소셜 네트워크에서 친구들과 공유.
그러나 귀하는 우리와 상담 할 수 있습니다. 능숙, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작.
제안이나 의견이 있으면 섹션에 남겨주세요 commentaires.
...
