WordPress에 이미지 상자를 추가하는 방법: 3가지 간단한 단계 

WordPress 페이지를 시각적으로 돋보이게 만들고 싶으십니까? 그런 다음 이미지 상자가 비밀 요소입니다.

WordPress의 이미지 상자를 사용하면 제품을 선보이고, 팀 구성원을 강조하거나, 주요 기능에 고객의 관심을 끌 수 있습니다. 

그리고 당신의 추측이 맞았습니다!

이번 글에서는 다음과 같은 내용을 설명하겠습니다. WordPress에 이미지 상자를 추가하는 방법에 대한 3단계 가이드.

의 시작하자!

WordPress의 이미지 상자란 무엇입니까? 

이미지 상자는 웹페이지나 게시물 내에 이미지를 표시하도록 설계된 그래픽 요소 또는 컨테이너입니다. 결합할 수 있습니다. 텍스트와 링크 사진을 사용하여 매력적이고 시각적으로 매력적인 방식으로 정보를 제공합니다. WordPress 웹사이트의 전반적인 디자인과 사용자 경험을 향상시키는 데도 도움이 됩니다.

이미지 상자는 일반적으로 웹페이지에서 다음과 같은 섹션을 만드는 데 사용됩니다.

• 주요 기능이나 서비스 강조
• 블로그 게시물이나 포트폴리오 소개
• 이미지 표시 및 제품 갤러리
• 팀원들을 소개합니다 
• 사용후기 등을 표시합니다.

WordPress 이미지 상자의 주요 구성 요소

• 영상: 주로 제품, 서비스, 팀 구성원 또는 관련 개념을 보여주는 주요 시각적 요소입니다.
• 제목: 이미지와 그에 수반되는 텍스트의 본질을 포착하는 짧고 설명적인 제목입니다.
• 텍스트: 맥락과 세부정보를 제공하기 위한 간략한 설명 또는 정보 조각입니다.
• 버튼/링크: 사용자를 관련 페이지, 제품 또는 기타 리소스로 안내하는 클릭 가능한 버튼 또는 링크입니다.

WordPress에 이미지 상자를 추가하는 방법: 3단계 가이드 

이미지 상자는 WordPress 페이지를 시각적으로 놀라운 걸작으로 바꿔줍니다. 또한 청중을 사로잡고 지속적인 인상을 남깁니다.

WordPress에서 이미지 상자를 만드는 방법을 살펴보겠습니다. 간단한 3단계:

1단계: 필요한 플러그인 설치 및 활성화

WordPress 사이트에 이미지 상자를 추가하려면 Liquid Code 또는 Elementor 플러그인을 사용할 수 있습니다. 그럴 때는 플러그인을 사용하는 것이 코딩 지식 없이도 이미지 박스를 생성하고 추가하는 편리한 방법입니다. 

따라서, 당신은 갈 수 있습니다 올인원 Elementor 애드온 — ElementsKit. 이 놀라운 플러그인은 WordPress 웹사이트에 이미지를 추가할 수 있는 광범위한 기능과 준비된 템플릿을 제공합니다. 또한 이미지 상자 디자인과 ElementsKit 이미지 상자의 모든 요소는 완전히 사용자 정의할 수 있습니다.

ElementsKit 이미지 상자 플러그인을 설치하려면 WordPress 대시보드로 이동하세요.

• 로 이동 플러그인 ➡ 새로 추가 
• 검색 “엘리먼츠킷” 
• 클릭 "지금 설치"
• 또는 다운로드하여 업로드하세요. 압축 파일
• 플러그인이 설치되면 활성화하세요.

2단계: WordPress 사이트에 이미지 상자 추가

WordPress 이미지 상자 플러그인(예: ElementsKit)을 설치하고 활성화한 후 해당 기능을 활용할 수 있습니다. 미리 디자인된 템플릿. 이러한 템플릿은 단 한 번의 클릭으로 쉽게 사용할 수 있습니다. 또한 요구 사항에 따라 요소를 추가/제거할 수 있습니다. 

WordPress에 이미지를 추가하는 방법을 살펴보겠습니다. ElementsKit 이미지 상자: 

• 새 페이지/게시물을 만들거나 기존 페이지/게시물을 엽니다. 
• Elementor로 열기 
• 다음을 클릭하세요. "ElementsKit" 아이콘 

• 다음으로, 다음에서 이미지 상자 위젯을 선택해야 합니다. ElementsKit 위젯 카테고리 
• 클릭 “이미지 박스”

• 여기에서 액세스할 수 있습니다. 11가지 무료, 8가지 프리미엄 디자인과 스타일 변형; 총 19개의 다양한 템플릿 WordPress 사이트에 이미지 상자를 추가하려면
• 당신은 볼 수 있습니다 모든 템플릿 미리보기 귀하의 웹사이트에 어울리는 디자인과 요소를 이해하기 위해
• 다음을 클릭하세요. 더하기 기호(+) 실시간 미리보기를 보시려면 

• 디자인을 마친 후 다음을 클릭하세요. "끼워 넣다"
• 귀하의 페이지/게시물에 추가됩니다 
• 이제 할 수 있습니다 추가/제거 또는 수정 이미지 상자의 내용, 스타일 및 기타 속성
• 모든 사용자 정의가 끝나면 다음을 클릭하십시오. "게시". 이미지 상자는 WordPress 웹사이트에 게시됩니다.

3단계: 스타일 및 설정 사용자 정의 

Elementor를 위한 훌륭한 추가 기능인 ElementsKit 사용자가 활용할 수 있으므로 완전히 사용자 정의 가능한 플러그인입니다. 85개 이상의 위젯 및 모듈. 다른 요소와 마찬가지로 이미지 상자 위젯도 필요에 따라 개인화됩니다. 

헤드라인과 본문 내용을 편집할 수 있습니다. 이번에도 이미지 스타일과 클릭 유도 문구 버튼을 변경할 수 있습니다. 게다가, 다양한 효과와 형식으로 이미지 상자의 스타일을 꾸밀 수 있습니다.

WordPress에서 이미지 상자를 사용자 정의하는 방법을 살펴보겠습니다. 

레이아웃 사용자 정의

ElementsKit의 미리 만들어진 이미지 상자 템플릿을 WordPress에 삽입한 후 레이아웃을 조정할 수 있습니다. 

• 이미지 상자 너비를 늘리거나 줄입니다.
• 열 간격을 좁음, 확장됨, 넓음, 사용자 정의 또는 간격 없음으로 설정
• 이미지 상자 높이 및 정렬 조정 
• 오버플로 기본값을 유지하거나 숨김 
• 머리글, 바닥글, 본문, 기사 등 HTML 태그를 활용합니다.

콘텐츠 맞춤화

WordPress의 이미지 상자에는 다음과 같은 다양한 요소에 대한 다양한 콘텐츠가 포함되어 있습니다. 제목, 이미지, 버튼등. 텍스트를 변경하고 해당 속성을 수정할 수 있습니다.

WordPress에서 ElementsKit 이미지 상자 콘텐츠를 사용자 정의하는 방법을 살펴보겠습니다. 

✨ 제목 

• 제목 및 부제 제목 변경 
• 제목과 함께 링크 삽입
• 시작/끝 위치로 테두리 숨기기/표시 
• 제목 설명 추가/표시 또는 숨기기 
• 다양한 스타일과 위치로 구분 기호 추가 

✨ 영상 

• 이미지를 바꾸거나 AI 생성 이미지 추가
• 전체, 중간, 대형, 사용자 정의 등 이미지 크기를 조정합니다.
• 콘텐츠 영역을 심플, 클래식, 섀도우 라인 등으로 설정
• 동일 높이 활성화/비활성화 
• 다른 리소스를 연결하려면 URL을 삽입하세요. 

✨ 바디 

• 제목 텍스트 추가/제거 또는 편집
• 제목 HTML 태그 수정
• 제목 정렬을 왼쪽, 오른쪽 또는 가운데로 조정 

✨ 버튼

• 활성화 또는 비활성화 크리에이티브 버튼
• 맞춤 버튼 라벨 텍스트 추가 
• 맞춤 URL 추가
• 아이콘 추가/제거 및 피스톤 설정 

스타일 사용자 정의 

레이아웃과 콘텐츠를 사용하면 스타일도 변경할 수 있습니다. 결과적으로 WordPress 사이트 사용자 인터페이스 및 기타 속성에 적합한 다양한 유형의 이미지 상자를 만들 수 있습니다. 

✨ 섀도우 라인 

• 왼쪽이나 오른쪽의 그림자 선을 선택하세요
• 필요에 따라 사용자 정의 너비 설정
• 그림자 배경 유형 및 색상 사용자 정의 
• 맞춤 배경 이미지 설정 

✨ 이미지 

• 사용자 정의 테두리 반경 및 패딩 추가 
• 이미지 불투명도를 보통 또는 호버 효과 

✨ 바디 

• border-radius를 사용하여 테두리 유형을 선택하세요.
• 사용자 정의 배경 이미지, 유형, 색상 설정 
• 상자 패딩 및 상자 그림자 색상 조정 
• 제목 타이포그래피, 색상 및 간격 조정

✨ 버튼 

• 패딩 값 및 아이콘 글꼴 크기 사용자 정의 
• 버튼 텍스트 및 배경색 변경 
• 일반 또는 호버 속성 설정 
• 테두리 유형, 테두리 반경 및 상자 그림자 설정 

고급 사용자 정의 

ElementsKit 이미지 상자는 고급 사용자 정의 기능을 유연하게 사용할 수 있습니다. 이미지 상자를 더욱 우아하고 매력적으로 만드는 데 도움이 됩니다. 다양한 통합도 가능합니다 모션 효과 및 사용자 정의 코드 이미지 상자를 웹사이트의 특정 웹페이지와 일치시키려면

고급 설정에서 사용자 정의 옵션을 찾을 수 있습니다:

• 이미지 상자 레이아웃의 패딩, 여백, 너비, 위치 및 Z-색인을 수정합니다.
• 요소에 모션 효과를 추가합니다(예: 페이드 인, 페이드 아웃, 바운스 인, 확대, 왼쪽 슬라이드 등).
• PC, 탭, 모바일 등 디바이스에 따른 이미지 상자 반응성을 맞춤화 
• 다양한 장치에서 숨기거나 표시할 속성 및 속성 설정 
• 맞춤 CSS 포함 추가 기능 수정을 위해 

WordPress에 이미지 상자 추가의 장점

• 시각적 매력 강화: 매력적인 이미지 상자는 텍스트가 많은 콘텐츠를 분할합니다. 또한 페이지를 시각적으로 더욱 매력적으로 만들고 스캔하기 쉽게 만듭니다.
• 핵심 정보 강조: 중요한 메시지, 기능 또는 클릭 유도 문구를 강조할 수 있습니다.
• 사용자 참여 개선: WordPress의 이미지 상자 요소를 사용하면 시각적으로 매력적인 경험을 만들 수도 있습니다. 사용자가 콘텐츠에 관심을 갖고 탐색하도록 할 수 있습니다.
• 클릭률 향상: 명확한 클릭 유도 문구(CTA)가 포함된 이미지 상자는 사용자가 클릭하여 자세히 알아보도록 유도할 수 있습니다.
• 구조 정보: 콘텐츠를 논리적 섹션으로 구성하고 탐색을 통해 가독성을 높일 수 있습니다.

WordPress에 이미지 상자를 추가하는 5가지 팁 

WordPress 웹사이트에 이미지 상자를 추가하면 콘텐츠가 더욱 매력적이고 유익해집니다. 

탐험해보자 더욱 효율적이고 시선을 사로잡는 5가지 팁 사이트의 요소:

1. 이미지 크기 최적화

다음과 같은 도구를 사용하세요. 작은PNG 또는 품질 저하 없이 이미지 파일 크기를 줄이는 이미지 최적화 플러그인. 이로 인해 페이지 로딩 속도가 크게 향상됩니다.

2. 일관성 유지

일관된 스타일, 색상 팔레트, 비율을 갖춘 이미지를 사용하여 응집력 있는 시각적 경험을 만들어보세요. 또한 세련된 모양을 위해 이미지 상자가 페이지의 다른 요소와 정렬되어 있는지 확인하세요.

3. 설명적인 대체 텍스트 사용

각 이미지에 대해 설명적인 대체 텍스트를 제공하세요. 이는 화면 판독기가 시각 장애가 있는 사용자를 위해 이미지를 설명하는 데 도움이 되며 검색 엔진 가시성을 향상시킵니다.

4. 모바일 반응성을 고려하세요

다양한 화면 크기, 특히 모바일 장치에서 이미지 상자가 올바르게 표시되는지 확인하세요. 반응형 디자인 기술이나 플러그인을 사용하여 원활한 적응을 보장하세요.

5. 전략적으로 연결(해당되는 경우)

이미지 상자를 관련 콘텐츠나 랜딩 페이지에 연결하여 사용자를 안내하고 원하는 작업을 장려합니다.

알아두면 좋은 점 👉 ElementsKit을 사용하여 간단한 4단계로 Elementor 이미지 마스킹을 적용하는 방법

자주 묻는 질문

마무리하세요

WordPress 웹사이트를 이미지로 장식하려면 ElementsKit 이미지 상자보다 더 매력적이고 유익한 것은 없습니다.

여기에는 방법에 대한 단계별 가이드가 제공되어 있습니다. WordPress 사이트에 이미지 상자를 손쉽게 추가하세요. 또한, 우리는 ElementsKit Elementor 플러그인 다양한 이미지 상자 스타일과 레이아웃으로 더 많은 효과와 실험을 해보세요. 

이제 시각적 효과를 손쉽게 활용할 수 있습니다. 효율적으로 사용하여 콘텐츠를 더욱 돋보이게 만드세요! 🥳