WordPress 테마에 시차 효과를 추가하는 방법

최근 독자 중 한 명이 WordPress 테마에 시차 효과를 추가하는 방법을 물었습니다. 시차 효과는 배경 이미지가 전경 콘텐츠보다 느리게 스크롤되는 웹 디자인 트렌드입니다. 이 기사에서는 WordPress 테마에 시차 효과를 쉽게 추가하는 방법을 보여줍니다..


모든 WordPress 테마에 시차 효과 추가

시차 효과는 무엇입니까?

시차 효과는 배경 요소가 전경 콘텐츠보다 느리게 스크롤되는 최신 웹 디자인 기술입니다. 이 효과는 배경 이미지에 깊이를 더해 대화식 느낌을줍니다..

시차 효과는 방문 페이지, 긴 형식의 콘텐츠, 판매 페이지 또는 비즈니스 웹 사이트의 홈페이지에서 사용할 수 있습니다. 긴 페이지에서 다른 섹션을 강조 표시하는 좋은 방법입니다.

많은 프리미엄 워드 프레스 테마는 홈페이지에 내장 된 시차 효과를 제공합니다. 대부분의 WordPress 페이지 빌더 플러그인에서도 시차 효과를 사용할 수 있습니다.

그러나 모든 테마에 시차 효과가 내장되어있는 것은 아니며 시차 효과에 대해서만 페이지 빌더를 사용하여 사용자 정의 페이지 레이아웃을 작성하지 않을 수도 있습니다..

WordPress 테마에 시차 배경 효과를 쉽게 추가하는 방법을 살펴 보겠습니다.

방법 1 : 플러그인을 사용하여 WordPress 테마에 시차 효과 추가

이 방법을 사용하면 워드 프레스 테마에 코드를 추가 할 필요가 없습니다. 대부분의 사용자에게 더 쉽고 권장됩니다.

가장 먼저해야 할 일은 Advanced WordPress Backgrounds 플러그인을 설치하고 활성화하는 것입니다. 자세한 내용은 워드 프레스 플러그인 설치 방법에 대한 단계별 가이드를 참조하십시오..

활성화되면 시차 효과를 추가 할 페이지 나 게시물을 편집해야합니다. 비주얼 편집기에서 새로운 ‘고급 워드 프레스 배경’버튼을 볼 수 있습니다.

워드 프레스 고급 배경 버튼

그것을 클릭하면 추가 할 배경에 대한 다른 설정을 변경할 수있는 팝업이 나타납니다.

먼저 이미지를 배경 유형으로 선택한 다음 ‘스트레치’옵션을 확인해야합니다.

시차 배경 설정

그런 다음 ‘이미지 선택’버튼을 클릭하여 사용하려는 이미지를 업로드하거나 선택해야합니다. 큰 이미지를 사용하고 있는지 확인하십시오. 그렇지 않으면 이미지가 픽셀로 나타납니다.

그런 다음 시차 유형을 선택하여 시차를 활성화해야합니다. 실험 할 수있는 다양한 스타일이 있습니다. 가장 일반적으로 사용되는 시차 효과는 스크롤입니다.

계속하려면 삽입 버튼을 클릭하십시오.

플러그인은 이제 WordPress 포스트 편집기 안에 단축 코드를 추가합니다. 다음과 같이 보일 것입니다 :

[nk_awb awb_type =”image”awb_stretch =”true”awb_image =”22 ″ awb_image_size =”full”awb_parallax =”scroll”awb_parallax_speed =”0.5 ″ awb_mouse_parallax =”true”awb_mouse_parallax_size =”30 ″ awb_mouse

귀하의 콘텐츠는 여기에

[/ nk_awb]

‘내 콘텐츠’를 자신의 콘텐츠로 교체 한 다음 페이지를 저장하십시오..

이제 웹 사이트를 방문하여 실제로 볼 수 있습니다.

시차 효과 미리보기

방법 2 : CSS를 사용하여 WordPress 테마에 시차 효과 추가

이 방법을 사용하려면 WordPress 테마의 작동 방식뿐만 아니라 HTML / CSS에 대한 공정한 이해가 필요합니다..

먼저 시차 효과에 사용할 이미지를 방문하여 WordPress 미디어 라이브러리에 업로드해야합니다. 미디어»새로 추가 페이지.

이미지를 업로드 한 후 WordPress 미디어 라이브러리에서 이미지를 편집하여 이미지 URL을 복사해야합니다..

이미지 URL 복사

그런 다음 시차 효과를 표시 할 페이지 또는 게시물에 다음 HTML을 추가해야합니다. 이 HTML을 WordPress 테마 또는 하위 테마에 추가 할 수도 있습니다..

당신의 내용은 여기에 간다…

다음으로 WordPress 테마에 다음 사용자 정의 CSS를 추가해야합니다..

.시차 {
배경 이미지 : url ("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
높이 : 100 %;
백그라운드 부착 : 고정;
배경 위치 : 중심;
배경 반복 : 반복 없음;
배경 크기 : 덮개;
왼쪽 여백 : -410px;
오른쪽 여백 : -410px;
}

.시차 내용 {
폭 : 50 %;
여백 : 0 자동;
색상 : #FFF;
패딩 탑 : 50px;
}

배경 이미지 URL을 자신의 배경 이미지로 바꾸는 것을 잊지 마십시오.

이제 변경 사항을 저장하고 웹 사이트를 방문하여 변경 사항을 확인할 수 있습니다..

CSS로 추가 된 시차 효과

참고 : 사이트 레이아웃에서 작동하도록 CSS를 조정해야 할 수도 있습니다..

이 기사가 WordPress 테마에 시차 효과를 쉽게 추가하는 방법을 배우는 데 도움이 되었기를 바랍니다. 가장 많이 사용되는 워드 프레스 팁, 요령 및 해킹 목록을 원할 수도 있습니다..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me