WordPress에서 이미지 배경을 설정하는 방법

WordPress에서 이미지 배경을 설정하는 방법
다른 요소가 포함된 홈페이지용 워드프레스 배경 이미지입니다.

WordPress에 배경 이미지를 추가하는 방법은 더 많습니다. 테마 코드 변경으로 기본에서 고급까지. 그러나 코딩 및 디자인 지식이 없는 웹 사이트 관리자에게 이상적인 사용자 친화적인 도구를 소개하게 되어 기쁩니다. Citadela Pro 플러그인 웹 사이트 사용자 지정을 위한 많은 기능과 설정이 함께 제공됩니다.

Citadela Pro 플러그인의 강력한 블록, 설정 및 기능을 무료로 사용해 보세요. 모든 프리미엄 기능이 포함된 7일 평가판을 제공합니다. WordPress 페이지, 게시물 및 사용자 지정 게시물 유형에 배경 이미지를 추가할 수 있는 완벽한 도구를 탐색할 수 있습니다.

클러스터는 배경 이미지를 추가할 수 있는 워드프레스의 구텐베르그 블록입니다. 다기능 요소를 사용하면 배경 WordPress를 기본값에서 변경할 수 있습니다. 배경 이미지를 추가할 수 있을 뿐만 아니라 다른 블록과 결합할 수도 있습니다. 다양한 변형과 다양성을 얻을 수 있습니다.

와 결합 페이지 제목 블록, 당신은 쉽게 멋진 웹사이트를 얻을 수 있습니다. 더 많은 구텐베르크 블록을 추가하고 WordPress에서 배경 이미지를 사용자 지정할 수 있습니다. 또한 재사용 가능한 블록과 같은 블록 세트를 저장하고 웹 사이트의 아무 곳에나 테마를 추가할 수 있습니다. 따라서 배경 WordPress 웹 사이트를 한 번에 변경할 수 있습니다.

Gutenberg 블록을 사용하여 WordPress에 배경 이미지를 추가하는 방법

지금 시작하세요

위험 부담 없는 평가판으로 지금 시작하십시오. 신용 카드가 필요하지 않습니다.

클러스터 블록을 통한 워드프레스 배경 이미지

워드프레스 구텐베르크 배경 이미지용 블록 – 클러스터 블록을 위해 만든 편리한 블록을 소개합니다. 그것은 우리 자신의 블록 그룹의 일부입니다. Citadela Pro 플러그인에는 아름다운 웹사이트를 만드는 데 도움이 되는 많은 기능이 있습니다. 모든 AitThemes 사용자 지정 블록은 다음에서 사용할 수 있습니다. Citadela Pro 플러그인.

읽어주세요 클러스터 블록 설명서 세부 설정을 위해.

클러스터 블록을 사용하면 여러 블록을 하나로 그룹화할 수 있습니다. 전체 클러스터링된 그룹을 하나의 블록처럼 효율적으로 작업할 수 있습니다. 클러스터 너비는 전체 페이지 너비로 설정할 수 있습니다. 즉, 다양한 블록을 추가할 수 있는 초대형 공간이 있습니다.

다음과 같은 경우 클러스터가 전체 너비로 확장되지 않습니다.

  • 활성 사이드바가 있습니다.
  • 클러스터의 공간을 제한하는 열을 사용하는 경우

핵심 WordPress 블록 중 일부는 콘텐츠 너비에만 정렬할 수 있기 때문에 클러스터 블록은 웹 사이트 구축에 더 큰 가변성을 제공합니다. 훌륭한 기능은 WordPress에 배경 이미지를 설정하거나 색상을 변경하거나 배경 이미지 오버레이를 설정할 수 있다는 것입니다. 따라서 웹사이트 디자인에 맞게 배경을 구성할 수 있습니다.

이 기사에서는 다음을 보여줍니다.

클러스터 블록 추가 방법

클러스터 블록은 프리미엄 블록이며 설치하고 활성화하는 경우에만 사용할 수 있습니다. Citadela 블록 플러그인. 플러그인을 설치하면 클러스터 블록이 WordPress 블록 편집기에 자동으로 추가되며 즉시 작업을 시작할 수 있습니다.

클러스터 블록은 게시물과 페이지 모두에 추가할 수 있습니다. 상단 표시줄이나 에디터 데스크탑의 아무 곳에서나 "+" 기호를 클릭하기만 하면 됩니다. 그런 다음 클러스터 블록을 검색하십시오.

"+"를 클릭하여 WordPress 편집기에 클러스터 블록을 추가합니다.
"+"를 클릭하여 클러스터 블록 추가

클러스터 블록을 추가하는 두 번째 옵션은 "/"를 입력하고 그 뒤에 블록 이름을 입력하는 것입니다. 그러면 클러스터 블록을 사용할 준비가 된 것입니다.

슬래시 "/"로 클러스터 블록 추가
슬래시 "/"를 사용하여 클러스터 블록 추가

클러스터를 사용하여 블록 그룹화

클러스터 블록의 주요 기능은 여러 블록을 하나로 그룹화하는 것입니다. 어떻게 작동하는지 살펴보겠습니다. 페이지에 클러스터 블록을 삽입하면 자리 표시자가 즉시 표시됩니다. "여기에 더 많은 블록을 삽입하십시오". 클릭하면 사용 가능한 모든 블록 목록이 표시됩니다. 목록 상단의 검색창을 이용하여 요청한 블록을 검색할 수도 있습니다.

중첩된 블록을 선택하는 과정
중첩된 블록을 선택하고 삽입하는 과정

모든 중첩된 블록에는 모든 기본 옵션과 설정이 사용 가능합니다. 예를 들어 이미지 블록을 삽입하면 이미지를 업로드하거나 미디어 라이브러리에서 선택할 수 있습니다.

클러스터 블록을 사용하면 예를 들어 웹 사이트에서 눈길을 끄는 섹션을 만들어 최근 작업을 발표할 수 있습니다. 포트폴리오에서 이미지를 추가하고 그 아래에 배경 이미지를 설정합니다. 포트폴리오에 대한 멋진 링크를 만들었습니다.

클러스터 블록에 중첩된 이미지 블록
클러스터 블록의 도움으로 생성된 포트폴리오 웹사이트

클러스터 블록을 사용하여 매력적인 제품 프레젠테이션을 만들 수도 있습니다. 제품 이미지를 섹션 배경으로 설정하고 색상을 선택할 수 있습니다. 서비스 블록 Cluster 블록 내부에 중첩될 수도 있습니다.

클러스터 블록에 중첩된 서비스 블록
클러스터 블록의 서비스 블록을 사용하여 제품(및 해당 기능)을 보다 매력적인 방식으로 제시하십시오.

하나의 블록에 여러 블록

여러 중첩 블록을 클러스터에 추가하려는 경우 Columns 블록을 사용할 수 있습니다. 열 블록을 사용하면 여러 블록을 나란히 추가할 수 있습니다. 각 열은 이미지, 단락, 목록 또는 버튼과 같은 다른 콘텐츠 유형을 가질 수 있습니다.

클러스터 블록과 결합된 여러 열의 일반적인 예는 한 페이지 웹 사이트입니다.

클러스터 블록에 중첩된 열 블록
원페이지 웹사이트에서 클러스터 블록을 사용하는 방법

툴바의 기본 설정: 콘텐츠 정렬 옵션

기본적으로 클러스터 블록 너비는 콘텐츠 크기로 설정됩니다. 도구 모음에서 이 동작을 변경할 수 있습니다. 다음 옵션을 사용할 수 있습니다.

  • 콘텐츠 크기 – 기본 옵션인 클러스터 블록의 너비는 콘텐츠와 동일합니다.
  • 넓은 크기 – 클러스터 내부의 콘텐츠가 콘텐츠 너비보다 넓습니다.
  • 전체 너비 크기 – 이 경우 클러스터 너비는 브라우저 창의 좌우입니다.

이 설정은 현재 활성화된 테마가 지원하는 경우에만 클러스터 콘텐츠에 영향을 미친다는 점에 유의해야 합니다. 모든 중첩 블록은 해당 옵션의 가용성에 따라 구성할 수 있습니다.

Citadela WordPress 테마 및 플러그인 다운로드

위험 부담 없는 평가판으로 지금 시작하십시오. 신용 카드가 필요하지 않습니다.

제목 및 구분 기호 색상 설정

제목 색상 변경

WP 5.3부터 제목 블록을 통해 헤더 색상을 전환할 수 있습니다. 이것은 매우 유용한 기능입니다. 특히 어두운 레이아웃과 색 구성표가 있는 경우 기본 텍스트 색(검은색)을 밝은 색으로 변경하는 것이 좋습니다.

어두운 바탕에서 가시성에 문제를 일으킨 새로운 릴리스가 나올 때까지 제목 색상을 변경할 수 없었습니다. 그래서 제목이 워드프레스 배경 이미지나 추가한 사진과 섞이는 경우가 종종 있었습니다. 이제 올바른 제목 색상을 선택하여 사이트를 빛나게 할 수 있습니다.

웹사이트에 사용되는 구분 기호의 새로운 색상

WP에 배경 이미지나 다른 유형의 콘텐츠를 추가할 때 웹사이트의 나머지 부분과 분리해야 하는 경우가 있습니다. 이를 위해 Separator라는 특수 블록을 사용할 수 있습니다. 구분 기호를 삽입하면 다음을 수행할 수 있습니다.

  • 특정 블록 분리
  • 전체 텍스트를 더 작은 섹션으로 분할
  • 중요한 부분 강조
  • 콘텐츠의 가독성 향상 보장
  • 웹 사이트 탐색 간소화

또한 이제 업데이트된 WordPress에서 구분선 색상을 변경할 수 있습니다. Colored Separator는 웹사이트 색 구성표를 완성하는 데 적합합니다.

그룹화된 블록 아래에 배경 이미지를 추가하는 방법

클러스터 블록의 진정한 힘은 그룹화된 블록 아래에 배경 이미지를 추가하고 배경색을 설정할 수 있다는 것입니다. WordPress 인스펙터 내에서 모든 것을 쉽게 구성할 수 있습니다. 어떻게 하는지 살펴보겠습니다.

  1. 배경 이미지를 클릭하고 "배경 이미지 표시" 기능을 활성화합니다.
  2. "이미지 선택"을 클릭합니다. 미디어 라이브러리가 열립니다. 기존 이미지를 선택하거나 라이브러리에 새 이미지를 업로드할 수 있습니다.
  3. 배경 이미지를 고정으로 설정할 수도 있습니다. 즉, 페이지를 스크롤하면 배경이 콘텐츠와 함께 이동하지 않고 위치가 고정됩니다.
  4. "Focal Point Picker"를 사용하여 표시할 배경 이미지 부분을 선택할 수도 있습니다. 백분율을 사용하여 이미지의 일부를 선택할 수도 있습니다.
그룹화된 블록 아래에 배경 이미지를 추가하는 방법
배경 이미지를 추가하는 방법에 대한 단계별 가이드

지금 시작하세요

위험 부담 없는 평가판으로 지금 시작하십시오. 신용 카드가 필요하지 않습니다.

배경 오버레이

클러스터의 고급 옵션 중 하나는 배경 이미지 오버레이입니다. 기본 색상 중 하나를 선택하거나 색상 선택기를 사용하여 사용자 지정 색상을 선택할 수 있습니다. 색상 불투명도를 설정할 수도 있습니다. 이러한 클러스터 블록 설정은 정말 매력적인 웹 사이트 프레젠테이션을 만드는 데 도움이 됩니다.

WordPress 배경 이미지 오버레이
배경 오버레이를 설정하고 불투명도를 변경하여 눈길을 끄는 디자인 만들기

코어에서 사용 가능한 새 그룹 블록

그룹 블록과 AitThemes 클러스터 블록의 차이점은 무엇입니까?

당사의 맞춤형 클러스터 블록은 그룹 블록보다 먼저 출시되었으며 더 복잡한 솔루션을 제공합니다. 그룹 블록을 사용하여 여러 블록을 그룹화할 수 있지만 여전히 기능이 제한되어 있습니다. 예를 들어 블록에서 색상 오버레이를 설정할 수 없습니다. 이미지 위가 아닌 주변에 있을 기본 배경색만 선택할 수 있습니다.

배경 이미지 편집은 클러스터 블록에서 식은 죽 먹기입니다.

WordPress 배경 이미지에 업로드하고 배경색과 배경색 오버레이를 설정할 수 있습니다(오버레이 불투명도도 사용자 정의할 수 있습니다!). 몇 분 밖에 걸리지 않습니다.

4 "How to set image background in WordPress"에 대한 생각

  1. 모든 웹 마스터를 도와주는 ait 테마 덕분에
    당신의 웹은 훌륭합니다

  2. 클러스터 블록을 사용하여 웹 사이트 방문자가 이미지 선택에서 배경 이미지와 오버레이 이미지를 선택하도록 할 수 있습니까?

    1. 안녕 존,

      Citadela 제품에 관심을 가져주셔서 감사합니다. 예, 배경을 설정하기 위해 다양한 옵션 중에서 선택할 수 있습니다. 자세한 정보는 https://www.ait-themes.club/citadela-doc/cluster-block/에서 확인할 수 있습니다.

      감사합니다!
      즐라트코
      AIT팀

댓글이 닫혔습니다.