Elementor에서 이미지 상자를 창의적으로 디자인하세요

당신의 웹사이트를 조정하는 데에는 이미지 콘텐츠를 활용하는 것이 중요한 영향을 미칠 수 있습니다. Elementor의 Bilder-Box를 사용하면 이미지를 제목과 설명 텍스트와 함께 창의적으로 표현할 수 있습니다. 이 기능을 효율적으로 활용하기 위해 중요한 단계를 함께 살펴보도록 합시다.

주요 포인트

• 이미지 박스를 통해 이미지, 제목, 텍스트를 삽입할 수 있습니다.
• 미디어 라이브러리에서 이미지를 가져오거나 외부에서 업로드할 수 있습니다.
• 텍스트 포맷팅을 위해 HTML 요소를 사용할 수 있습니다.
• 글꼴 특성 및 호버 효과와 같은 이미지 디자인의 차이가 중요합니다.

단계별 안내

1. 이미지 박스 삽입

먼저 Elementor 편집기에서 이미지 박스를 추가해야 합니다. 새 탭에서 선택한 항목을 직접 끌어와 웹사이트의 원하는 위치에 놓으십시오. 이렇게 하면 이미지, 제목 및 설명 텍스트를 담을 수 있는 기본 레이아웃이 준비됩니다.

2. 이미지 선택

이제 이미지를 선택합니다. 미디어 라이브러리로 이동하거나 새로운 이미지를 업로드하세요. 이미지의 품질이 적절하고 최적화된 크기로 되어 있는지 확인하십시오. 웹사이트의 로드 시간에 영향을 미치지 않도록 이미지 크기가 200 MB보다 작아야 합니다.

3. 이미지 크기 설정

이미지 표시를 조정하려면 썸네일, 중간 크기, 큰 크기 또는 원본 크기 중에서 선택할 수 있습니다. 선택한 이미지가 웹사이트 전체 디자인과 어울릴 것을 확인하세요. 부적절한 이미지 형식으로 인한 큰 공간은 시각적인 효과를 감소시킬 수 있습니다.

4. 제목 포맷 설정

이미지 박스의 제목 영역으로 이동하세요. 여기에 이미지 모음의 제목을 입력할 수 있습니다. 예를 들어 "오스트리아 국기"와 같은 도드라진 제목을 고려해 보세요.

5. 설명 텍스트 추가

원한다면 제목 아래에 설명을 추가할 수도 있습니다. 선택 사항이지만 방문자에게 더 많은 정보를 제공하는 좋은 방법입니다. 설명이 길 경우 단락을 생성하기 위해 HTML 태그를 사용해야 합니다.

6. HTML을 사용한 텍스트 포맷팅

텍스트 내에서 줄 바꿈을 만들려면 HTML 요소를 사용해야 합니다. 예를 들어
태그는 줄 바꿈을 만들기위해 사용됩니다. 텍스트 포맷팅에 대해 더 알고 싶다면 온라인에서 HTML 코드를 찾아보세요.

7. 링크 추가

이미지와 관련된 링크도 추가할 수 있습니다. 홈페이지나 YouTube 채널과 같은 구체적인 콘텐츠로 연결할 수 있습니다. 사용자가 직접 링크를 클릭하여 이동할 수 있도록 링크가 올바르게 입력되었는지 확인하세요.

8. 이미지 위치 및 정렬

이제 박스 내의 이미지 배치를 왼쪽, 오른쪽 또는 가운데로 설정할 수 있습니다. 제목 및 설명에 대한 글꼴도 확인하고 방문자에게 초대적인 서체가 보이도록 하세요.

9. 스타일 맞춤 설정

스타일 옵션에서 이미지와 텍스트 배경, 간격 및 모서리 둥글기를 조정할 수 있습니다. 모서리를 둥글게 조정하면 이미지가 둥글어지고 더 우아한 느낌을 줄 수 있습니다.

10. 호버 효과 구성

마우스를 가져가면 이미지가 어떻게 반응해야 하는지 정의할 수 있습니다. 예를 들어 이미지가 약간 커지거나 불투명도가 변경되는 애니메이션을 추가할 수 있습니다. 이러한 효과는 웹사이트 방문자의 사용자 경험을 향상시키고 더 동적으로 만듭니다.

11. 제목 및 설명을 위한 타이포그래피 설정

최종적으로 제목 및 설명의 타이포그래피를 구성할 수 있습니다. 다양한 글꼴과 색상을 시도하여 웹사이트 디자인을 향상시킵니다. 이를 통해 텍스트가 읽기 쉽고 시각적으로 매력적으로 됩니다.

요약

Elementor의 이미지 상자는 이미지 콘텐츠를 표현하는 다양한 방법을 제공합니다. 창의적으로 작업하고 동시에 사용자 경험을 향상시킬 수 있습니다. 적절한 형식, 호버 효과 및 매력적인 링크를 통해 이미지를 더욱 흥미롭게 만들 수 있습니다.