최근 독자 중 한 명이 WordPress 테마에 시차 효과를 추가하는 방법을 물었습니다.
시차 효과는 배경 이미지가 전경 콘텐츠보다 느리게 스크롤되는 요즘 웹에서 인기있는 추세입니다.
이 튜토리얼에서는 WordPress 테마에 시차 효과를 쉽게 추가하는 방법을 보여줍니다.
그러나 WordPress를 설치 한 적이 없다면 워드 프레스 블로그 7 단계를 설치하는 방법 et 어떻게 찾아 설치하고 블로그에 워드 프레스 테마를 활성화하려면
그러나 우리가 왜 여기로 돌아 왔는가.
시차 효과 란 무엇입니까?
시차 효과는 배경 요소가 전경 콘텐츠보다 더 느리게 스크롤되는 최신 웹 디자인 기술입니다. 이 효과는 배경 이미지에 깊이를 더하고 상호 작용하게 만듭니다.
우리의 발견 25 WordPress에 시차가있는 테마로 웹 사이트 만들기
시차 효과는 다음에 사용할 수 있습니다. 방문 페이지, 판매 페이지 또는 비즈니스 웹 사이트의 홈페이지입니다. 긴 페이지에서 다른 섹션을 강조 할 수있는 좋은 방법입니다.
많은 프리미엄 워드 프레스 테마 홈페이지에 내장 시차 효과가 있습니다. 대부분의 플러그인에서 시차 효과를 사용할 수도 있습니다. 워드프레스(WordPress) 페이지의 시각적 생성.
그러나 모든 워드 프레스 테마 는 기본 제공 시차 효과를 제공하지 않으며 시차 효과만을 위해 시각적 페이지 빌더를 사용하고 싶지 않을 수 있습니다.
WordPress 테마에 시차 효과를 쉽게 추가하는 방법을 살펴 보겠습니다.
방법 1 : 플러그인을 사용하여 WordPress 테마에 시차 효과 추가
이 방법은 WordPress 테마에 코드를 추가 할 필요가 없습니다. 대부분의 사용자에게 더 쉽고 권장됩니다.
가장 먼저 할 일은 플러그인을 설치하고 활성화하는 것입니다 고급 워드 프레스 배경. 자세한 내용은 WordPress 플러그인 설치 방법에 대한 단계별 가이드를 확인하세요..
플러그인을 활성화 한 후 시차 효과를 추가 할 페이지를 편집해야합니다. 새로운 버튼 "고급 워드 프레스 배경»비주얼 편집기 도구 모음에서.
클릭하면 추가하려는 다양한 배경 설정을 변경할 수있는 팝업 창이 나타납니다.
먼저 이미지를 배경으로 선택한 다음 " Stretch".
그런 다음 버튼을 클릭해야합니다 이미지 선택 사용하려는 이미지를 다운로드하거나 선택합니다. 큰 이미지를 사용하지 않으면 픽셀로 표시됩니다.
그 후, 당신은 효과를 활성화해야 시차 시차 효과 유형을 선택합니다. 실험 할 수있는 다양한 스타일이 있습니다. 사용되는 가장 일반적인 시차 효과는 스크롤입니다.
버튼을 클릭 끼워 넣다 계속합니다.
플러그인은 단축 코드 온 출판사. 다음과 같이 보일 것입니다 :
[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 플러그인을 제공합니다.
1. WooCommerce 기부
고객이 지정한 금액으로 WooCommerce 웹 사이트에서이 확장 기부를 통해 수락하십시오. 그들은 원하는만큼 줄 수 있습니다. 각 기부금은 WooCommerce.
고객이 장바구니 페이지를 건너 뛰거나 기부하지 않고 바로 결제로 이동하면 기부 할 수 있도록 결제 페이지 위에 링크가 표시됩니다.
WooCommerce 기부를 사용하는 각 단계는 스크린 샷과 함께 문서에 설명되어 있습니다. 플러그인을 활성화하면 카트에서 "기부 추가"필드를 찾을 수 있습니다.
2. 더 많은 링크드 인
링크드인 플러스는 워드 프레스 플러그인 블로그에 LinkedIn 프로필을 표시할 수 있습니다. 다중 작성자 블로그에서도 작동합니다. WordPress 게시물, 페이지 또는 위젯에 팔로우 및 공유 버튼을 추가합니다.
모든 LinkedIn 기능을 블로그에 추가하고 소비자와 함께 브랜드를 검증 할 수있는 좋은 방법입니다. 모양을 사용자 지정하고 설정을 구성하며 기타 고급 옵션을 활성화하여 잠재적 인 채용 담당자 또는 고용주에게 프로필을 홍보 할 수있는 기능을 제공합니다.
3. 한 YouTube
YouTubeR은 워드 프레스 플러그인 웹사이트에서 YouTube로 비디오를 업로드하고 웹사이트에 YouTube 비디오, 재생 목록 및 채널을 쉽게 포함할 수 있는 고유한 플랫폼입니다.
이 플러그인을 사용하면 웹 사이트에서 뛰어난 비디오 갤러리를 만들 수 있습니다.
다른 기능은 다음과 같습니다. WordPress 웹 사이트, 통합에서 YouTube에 비디오를 쉽게 업로드 쉬운 동영상, 재생 목록 및 YouTube 채널을 웹 사이트로 연결하고 Visual Composer를 지원합니다. 재생 목록에서 무한 스크롤, 뛰어난 캐싱, 반응 형 레이아웃, 자세한 문서 등.
추천 자료
웹 사이트 구축 및 관리에 도움이되는 기타 권장 리소스에 대해 알아보십시오.
- WordPress에서 "디스크에 쓸 수 없음"오류를 수정하는 방법
- WordPress로 성공적인 블로거가되고 돈을 버는 방법
- 워드 프레스에 이메일로 기사를 게시하는 방법
- WordPress로 성공적인 블로거가되고 돈을 버는 방법
결론
그게 다야! 큰 도움이 되었기를 바랍니다. 주저하지 마십시오 좋아하는 소셜 네트워크에서 친구들과 공유.
그러나 귀하는 우리와 상담 할 수 있습니다. 능숙, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작.
제안이나 의견이 있으면 섹션에 남겨주세요 commentaires.
...
