워드프레스에서 이미지 위에 텍스트 추가하는 방법 (3가지 방법)

이미지 위에 텍스트를 추가하는 것은 콘텐츠나 웹사이트의 시각적 매력을 높이는 인기 있는 기술입니다. 또한 이미지를 더 유익하고 매력적으로 만드는 훌륭한 방법입니다.

이 기사에서는 워드프레스에서 이미지 위에 텍스트를 추가하는 세 가지 쉬운 방법을 찾았습니다. 블록 에디터, 플러그인 또는 사용자 정의 코드를 사용하는 것을 선호하는지 여부. 알아보겠습니다!

이미지 상단에 텍스트를 추가하는 것이 중요한 이유

방법을 진행하기 전에 이미지 위에 텍스트를 추가하는 것이 중요한 이유를 알아야 합니다.

1. 주목받기

사용자가 콘텐츠를 빠르게 스크롤하는 경우 이미지 추가만으로는 사용자의 관심을 끌기에 충분하지 않을 수 있습니다. 그렇기 때문에 이미지 위에 텍스트를 추가하여 사용자의 관심을 끌고 메시지를 보다 효과적으로 전달해야 합니다.

2. 사용자 경험 향상시키기

자체적으로 많은 가치를 제공할 수 있는 이미지에 캡션, 인용문 또는 기타 텍스트 기반 콘텐츠와 같은 텍스트를 추가하면 훨씬 더 유용하게 사용할 수 있습니다. 또한 사용자는 이미지의 맥락과 콘텐츠와의 관련성을 이해할 수 있습니다.

3. 접근성 개선하기

이미지 자체를 보기 어려운 사용자를 위해 접근성을 개선하는 데에도 도움이 될 수 있습니다. 대체 텍스트를 제공함으로써 더 많은 사용자에게 콘텐츠를 접근 가능하게 할 수 있습니다.

4. SEO 향상

이미지 캡션이나 대체 텍스트에 관련 키워드를 추가하면 웹사이트의 검색 엔진 순위를 향상시키는 데. 검색 엔진은 이러한 정보를 사용하여 웹사이트 콘텐츠를 이해하고 사용자의 검색어와 얼마나 관련성이 있는지 판단하기 때문입니다.

WordPress에서 이미지 위에 텍스트를 추가하는 3가지 방법

1. 워드프레스 블록 에디터 사용하기

먼저 이미지에 텍스트를 추가하려는 페이지 또는 게시물로 이동합니다.

커버 선택 하여 이미지 위에 텍스트를 작성합니다.

그 후, 화면에 나타나기 시작합니다. 기본 이미지가 표시되지만 원하는대로 변경할 수 있습니다.

기본 이미지를 사용자 정의 이미지로 바꿀 수도 있습니다. 교체 버튼 을 클릭하고 이미지를 업로드하거나 미디어 라이브러리에서 간단히 선택하면 됩니다.

이렇게 보일 것이며, 원하는 대로 이미지 위에 텍스트를 쓸 수 있습니다.

텍스트를 더블 클릭 하면 텍스트에 대한 편집 옵션이 나타납니다. 크기, 색상 등을 필요에 따라 조정할 수 있습니다.

마지막으로 업데이트 버튼을 클릭하거나 새 게시물이나 페이지를 추가한 경우 게시 버튼을 클릭합니다.

2. CSS 사용

워드프레스 블록 에디터를 열고 이미지 블록을 선택 합니다. 텍스트를 추가할 이미지 블록을 선택합니다. 오른쪽 사이드바에서 고급 탭을 클릭 합니다.

추가 CSS 클래스 필드에 이미지 블록에 대한 사용자 정의 클래스를 추가 합니다.

변경 사항을 저장하고 페이지 또는 게시물을 게시하거나 업데이트합니다. the changes and publish or update the page or post.

.custom-class { position: relative; } .custom-class p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; color: #ffffff; text-shadow: 2px 2px 2px #000000; } 

위 코드에서 바꾸세요 "custom-class. 글꼴 크기, 색상 및 기타 스타일 옵션도 원하는 대로 사용자 지정할 수 있습니다.

3. WordPress 플러그인 사용

완전히 사용자 정의 가능한 페이지 디자인을 자유롭게 만들고 싶다면 페이지 빌더 플러그인이 필요합니다. WordPress 페이지 빌더 플러그인 중 하나인 SeedProd를 사용하면 웹사이트 전체의 모든 이미지 위에 텍스트를 추가할 수 있습니다.

먼저 설치하고 활성화하세요 라이선스 키를 입력해야 합니다. 로그인한 SeedProd 계정에 클릭하세요 다운로드 는 .

완료되면 복사하세요 에서 키를 라이선스 키 섹션

로 이동하여 WordPress 관리자 영역에 이 키를 붙여넣을 수 있습니다 SeedProd » 설정 페이지.

해당 페이지 에서 라이선스 키 필드에 키를 붙여넣은 하기만 하면 됩니다 키 확인을 클릭.

로 이동하여 SeedProd » 랜딩 페이지 클릭합니다 새 랜딩 페이지 추가를.

그 다음, 템플릿을 선택합니다. SeedProd 템플릿 중 어떤 것을 선택하든 모든 부분을 사용자 정의하여 웹사이트와 브랜딩에 완벽하게 맞출 수 있습니다.

그러나 빈 캔버스로 시작하려면 빈 템플릿을 클릭합니다.

원하는 템플릿을 찾았으면 마우스 커서를 템플릿 위로 가져가세요. 그런 다음 미리보기 아이콘을 클릭하면.

클릭하세요 "이 템플릿 선택" 버튼을.

페이지 이름 필드 에 페이지 이름을 입력합니다.

자동으로 생성된 URL을 변경하려면 페이지 URL 필드의 텍스트를 편집합니다.

클릭하세요 '페이지 저장 및 편집 시작' . 그러면 SeedProd의 드래그 앤 드롭 편집기에서 템플릿이 열립니다.

왼쪽 사이드바에는 드래그 앤 드롭으로 페이지에 추가할 수 있는 모든 블록과 섹션이 표시됩니다.

빈 템플릿을 사용하지 않는 한, SeedProd 페이지에는 이미 몇 가지 블록과 섹션이 있습니다. 이러한 콘텐츠를 편집하려면 블록 또는 섹션을 클릭하여 선택하세요.

SeedProd의 왼쪽 메뉴에 해당 블록 또는 섹션을 사용자 지정하는 데 사용할 수 있는 모든 설정이 표시됩니다.

이미지 위에 텍스트를 추가하는 가장 쉬운 방법은 SeedProd에서 제공하는 미리 만들어진 히어로 섹션을 이용하는 것입니다.

이러한 섹션에는 전체 너비의 배경 이미지와 그 위에 추가된 텍스트가 미리 설정되어 있습니다. 기본 배경 이미지와 텍스트를 원하는 콘텐츠로 간단히 교체할 수 있습니다.

'섹션' 탭을 클릭한 왼쪽 메뉴에서

다음 '히어로'를 클릭하면 페이지에 추가할 수 있는 모든 미리 만들어진 히어로 섹션을 볼 수 있습니다.

이 히어로 섹션을 디자인에 추가하려면 이 섹션 선택을 클릭합니다.

해당 이미지를 클릭하여 선택하세요 템플릿의 기본 이미지를 원하는 이미지로 바꾸려면

올리면 배경 이미지 휴지통 아이콘이 나타납니다. 이 아이콘을 클릭 기본 이미지를 삭제할 수 있습니다.

을 클릭하세요 '내 이미지 사용'에서 이미지를 선택 WordPress 미디어 라이브러리 하거나 스톡 이미지를 사용할 수 있습니다.

이미지를 추가했으면 이제 자리 표시자 텍스트를 바꿀 차례입니다.

'텍스트 블록'을 클릭하세요에 '텍스트' 영역사용할 텍스트를 입력하세요.

SeedProd의 일부 히어로 템플릿에는 클릭 유도 버튼과 같은 추가 콘텐츠가 포함되어 있습니다.

이 콘텐츠를 변경하려면 해당 블록을 클릭하여 선택한 다음 SeedProd의 왼쪽 메뉴에서 변경하세요.

또 다른 옵션은 히어로 템플릿에서 블록을 삭제하는 것입니다.

이렇게 하려면 블록을 클릭하여 선택 한 다음 휴지통 아이콘을 클릭합니다.

페이지 디자인이 마음에 드시면 '저장' 버튼을 클릭하세요.

여기에서 페이지를 게시하거나 템플릿으로 저장할 수 있습니다.

결론

워드프레스에서 이미지 위에 텍스트를 추가하는 세 가지 방법을 모두 알아보았습니다. 간단하죠? 자신의 숙련도와 디자인 취향에 맞는 방법을 선택하세요.

사용하면 전문가처럼 미디어 파일을 정리, 최적화 및 관리할 수 있습니다 WP Media Folder. 이제 지저분한 미디어 라이브러리와 작별할 때입니다!