이 소개를 정말 짧게 유지할 것입니다.
이 기사에서 논의 할 내용은 다음과 같습니다:
- 배경 이미지는 무엇입니까
- 시차 배경을 가진 것은 무엇입니까?
- 워드 프레스 웹 사이트에 배경 이미지를 추가하는 방법
- 워드 프레스에서 이미지 크기에 접근하는 방법
준비,꾸준한? 가자!
배경 이미지 란 무엇입니까?
배경 이미지는 웹 사이트,이메일 등의 요소 배경에 적용되는 이미지입니다. 영웅 이미지가 웹 사이트 또는 이메일의 주요 초점이지만 배경 이미지는 더 미묘합니다. 그들은 다른 웹 사이트 요소를 두 번째 레이어로 지원합니다:행동 촉구,다른 이미지,사이트의 다양한 섹션 등
이케아
이케아 홈페이지 홈페이지에서 배경 이미지를 사용하여 감동적인 이야기를 선보인다. 이야기의 제목과 범주는 이미지의 상단에 배치됩니다. 그것은 실제 이미지의 불투명도를 감소 시키도록 사용 그라데이션 오버레이가있다. 이 방법은 텍스트를 더 볼 수 있도록하는 데 도움이,뿐만 아니라 그것은 디자인의 일관성을 생성,그래서 어떤 색상이 다른 것보다 더 눈에 띄는 없습니다. 이케아 웹 사이트 배경 이미지
러빙 빈센트
내가 가장 좋아하는 영화 중 하나,이 하나.
배경 이미지는 빈센트 반 고흐와 영화 뒤에 이야기를 제시 회전 목마 뒤에 누워. 배경 이미지는 이야기에 힘을 실어주고 강한 감정을 전달하는 것 같습니다.
무성한
무성한 웹 사이트가 어떻게 보이는지 너무 좋아합니다.
이제 배경 이미지는 이 뉴스레터 가입 페이지 예제와 같이 패턴이나 모양을 사용할 수 있습니다. 이러한 패턴은 잠재적으로 둔한 것을 쾌활한 것으로 변형시킵니다.
시차 배경 이미지
당신은 대영 박물관 웹 사이트를 보면,당신은 자신의 페이지에 걸쳐 이미지가 있다는 것을 알 수 있습니다,그 배경에 누워 왜 전경 내용이 아래로 스크롤합니다. 이러한 시차 배경 이미지입니다.
시차 스크롤은 올바르게 통합 된 경우 웹 사이트에 화려한 효과를 추가 관리하는 웹 디자인 트렌드 중 하나입니다.
당신은 또한 워드 프레스에서 이러한 효과를 얻을 수 있습니다,어떻게 조금 나중에 보여 드리겠습니다.
워드 프레스 웹 사이트에 배경 이미지를 추가하는 방법
워드 프레스 웹 사이트에 배경 이미지를 추가하는 세 가지 방법이 있습니다. 확인해볼까요?
-
워드 프레스 테마 사용자 정의를 통해 배경 이미지를 추가
가장 인기있는 워드 프레스 테마는이 옵션을 사용할 수 있습니다. 이 예제의 목적을 위해 콜리 브리 테마를 사용하겠습니다. 다른 테마는 콜리 브리 테마와 유사하게 작동합니다.
선택한 테마가 기능을 지원하지 않는 경우 방법 2 및 3 으로 건너 뜁니다.
이제,외관->워드 프레스 대시 보드에서 사용자 정의로 향하고하여 시작하자. 오른쪽에,당신의 웹 사이트의 실시간 미리보기가있는 동안 왼쪽에 당신은 테마의 사용자 정의 편집 옵션을 볼 수 있습니다.
테마는 배경 이미지를 배치 할 수 있습니다:
- 행
- 열
- 블록(전체 웹 사이트 섹션:내 정보,포트폴리오,팀,연락처 등)
- 구성 요소(제목,캐 러셀,가격 테이블,캐 러셀 등)
이 작업을 수행 할 수있는 방법은 당신이 당신의 배경 이미지를 필요로 상관없이 동일합니다.
의 당신이 당신의 서비스 웹 사이트 블록에 배경 이미지를 추가 할 가정 해 봅시다. 섹션을 선택하여 시작합니다. 왼쪽에는 아래와 같이 구성된 메뉴에서 편집 옵션이 표시됩니다:
- 레이아웃
- 스타일
- 고급
스타일->배경 유형으로 이동합니다.
“이미지”를 선택합니다. 이제 자신의 이미지로 바꿀 수 있는 이미지가 표시됩니다. 
이미지를 클릭하면 당신은 당신이 워드 프레스 미디어 갤러리에서 이미지를 선택할 수있는 화면에 메시지가 표시됩니다,또는 당신은 다른 이미지를 업로드 할 수 있습니다.
이미 눈치 챘을 수도 있듯이 비디오를 배경으로 추가 할 수도 있습니다.
그리고,시차 효과에 대한 토글 옵션도 있습니다!
이제이 배경 이미지 변경을 수행하는 또 다른 바로 가기가 있습니다. 오른쪽에서 블록을 선택하면 설정 아이콘이 표시됩니다. 그것을 클릭하고 당신은 몇 가지 편집 옵션을 볼 수 있습니다.
“배경 변경”을 선택하면 위에서 설명한 대로”스타일”으로 이동합니다.
이 모든 사람들이었습니다. 아주 쉽게,맞죠?
이제 테마에 배경 이미지 옵션이 없으면 워드프레스 기본 편집기에서 이 작업을 수행할 수 있는 방법이 있습니다.
-
워드 프레스 블록을 사용하여 배경 이미지 추가
워드 프레스 대시 보드에서”페이지”를 통해 머리. 이제 원하는 페이지 아래에서”편집”을 선택하십시오. 아래 그림과 같이 당신은 인터페이스를 볼 수 있습니다.
기본 워드프레스 편집기는 블록 기반이며,이는 각 웹 사이트 섹션이 블록으로 구성되어 있음을 의미합니다. 이 블록은 인터페이스에 표시되는 모든”+”기호에서 액세스 할 수 있습니다. 의 왼쪽 상단에있는 하나를 클릭 할 수 있습니다.
이제”커버”블록을 선택합니다. 당신은 당신의 페이지에 바로 표시를 볼 수 있습니다.
컴퓨터에 로컬로 저장된 이미지를 업로드하거나 미디어 라이브러리의 기존 이미지 중에서 선택할 수 있습니다.
미디어 라이브러리에서 이미지를 선택했습니다. 이제 텍스트를 추가 할 수 있습니다. 편집 옵션은 여기에서 매우 제한됩니다.
커버를 선택하면 당신은 당신이 당신의 이미지를 정렬하거나 전체 블록을 복제 할 수 있습니다 위에 보여주는 메뉴를 볼 수 있습니다. 당신은 다른 디자인에 다시 사용되는,재사용 하나로 블록을 저장할 수 있습니다.
이제 화면 오른쪽에 몇 가지 추가 편집 옵션이 있습니다.
미디어 설정 내에서 고정 배경 옵션을 토글하면 시차 효과가 활성화됩니다.
토글이 꺼져있을 때,당신은 초점을 조정할 수 있습니다.
배경 이미지의 초점 조정 이 초점 조정은 너비와 높이를 고려하여 백분율 기준으로도 수행 할 수 있습니다.
다음으로 오버레이를 추가할 수 있습니다. 당신은 색상과 불투명도를 선택할 수 있습니다.
의 색상과 불투명도를 조정하면 완료됩니다.
-
워드 프레스 플러그인을 통해 배경 이미지 추가
여기에 배경 이미지 플러그인으로 태그 일부 워드 프레스 플러그인입니다. 지금까지 가장 많이 설치되고 최고의 리뷰를 가지고 있기 때문에 간단한 전체 화면 배경 이미지 플러그인으로 조금 플레이 할 것입니다.
지금,여기에 워드 프레스 플러그인을 설치하는 방법에 대한 튜토리얼입니다.
이 플러그인을 사용하면 브라우저로 이미지가 자동으로 조정되므로 브라우저 크기에 관계없이 이미지가 항상 화면을 채 웁니다.
당신이 할 일은 외관으로 이동합니다->전체 화면 배경 이미지. 여기에서 이미지를 선택합니다.
당신이”저장 옵션”을 누르면,당신은 배경없이 사이트의 모든 섹션,배경으로이 이미지를 받게됩니다 것을 볼 수 있습니다.
자,이 무료 버전에서 무슨 일이 일어나고 있는지입니다. 그것은 아주 기본적이고 전혀 유연하지 않습니다. 유료 플랜에는 다음과 같은 추가 옵션이 제공됩니다:
- 무제한 배경 이미지
- 포스트/페이지 별 배경 이미지
- 페이지에 페이드 전환 여러 이미지
그리고,우리는 완료,당신은 당신이 당신의 워드 프레스 사이트에 배경 이미지를 추가하는 데 사용할 수있는 3 가지 방법을 발견했습니다.
우리가 하루 호출 할 수 있습니다 전에 당신이 알고 싶은 한 가지 더있다.
이미지 크기
사이트에 이미지를 업로드하기 전에 크기에주의하십시오. 나는 우리 모두가 메가 픽셀을 보면 알고 있지만,웹에,캐치가있다. 고해상도 이미지는 로딩 시간에 영향을 주어 사이트를 해칠 수 있습니다. 장기적으로,여분의 로딩 두 번째는 당신에게 웹 사이트 방문자 및 변환을 잃을 수 있습니다. 나이 속도가 중요한 순위 요인 이기 때문에,더구나,너는 뜻깊게 수색 엔진안에 평가하는 너의 기회를 줄일 것이다.
반면에 너무 작은 이미지를 사용하면 사용자 경험도 저하될 수 있습니다. 그래서 우리는 끝을 맞출 필요가 있습니다.
이 작업을 수행하는 한 가지 방법은 적절한 선명도를 보장하면서 이미지의 크기를 조정하는 데 도움이 될 수 있습니다 외부 응용 프로그램을 사용하는 것입니다.
그러나 워드 프레스에서,당신은 쉽게…
여기 콜리 브리에서 우리는 스무 쉬 팬입니다. 스무 쉬 및 품질에 눈에 보이는 드롭없이 이미지를 압축 할 수 있습니다.
프로 버전에서,그것은 또한 이미지를 변환 WebP,차세대 이미지 형식으로 압축 할 수있는 이미지 파일 크기가 35%,명백한 품질의 손실이다.
그리고 그 랩입니다,여러분!
이 문서를 좋아하고,당신은 워드 프레스 웹 사이트를 디자인하는 방법에 대한 자세한 내용을 보려면,콜리 브리의 유튜브 채널에 가입해야합니다 트위터와 페이스 북에서 우리를 따라!!