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

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

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

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

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

1. 주목받기

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

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

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

3. 접근성 개선하기

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

4. SEO 향상

이미지 캡션 또는 대체 텍스트에 관련 키워드를 추가하면 웹 사이트의 검색 엔진 순위를 개선하는 데 도움이 될 수 있습니다. 이는 검색 엔진이 이 정보를 사용하여 웹 사이트의 콘텐츠를 이해하고 사용자의 검색 쿼리와 관련성을 파악하기 때문입니다.

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

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

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

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

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

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

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

텍스트를 더블 클릭

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

2. CSS 사용

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

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

변경 사항을 저장하고 페이지 또는 게시물을 게시하거나 업데이트합니다.

.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 플러그인 사용

완전히 사용자 정의된 페이지 디자인을 자유롭게 만들고 싶다면 페이지 빌더 플러그인이 필요합니다. 워드프레스 페이지 빌더 플러그인 중 하나는 SeedProd이며, 이를 통해 전체 웹사이트의 모든 이미지에 텍스트를 추가할 수 있습니다.

먼저 SeedProd 플러그인을 설치하고 활성화합니다. 활성화되면 라이선스 키를 입력해야 합니다. SeedProd 계정에 로그인한 다음 다운로드 탭을 클릭합니다.

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

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

여기에 있으면 라이선스 키 필드에 키를 붙여넣으세요. 그러면 간단히 Verify Key를 클릭하기만 하면 됩니다.

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

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

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

원하는 템플릿을 찾으면 마우스를 템플릿 위에 올려 놓습니다. 그러면 미리보기 아이콘을 클릭할 수 있습니다.

이 템플릿의 모양이 마음에 들면 이 템플릿 선택 버튼을 클릭하세요.

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

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

클릭 페이지 편집 시작 저장 버튼을 누릅니다. 그러면 SeedProd의 드래그 앤 드롭 편집기에서 템플릿이 열립니다.

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

블랭크 템플릿을 사용하지 않는 한 SeedProd 페이지에는 이미 일부 블록과 섹션이 있습니다. 이 콘텐츠를 편집하려면 블록 또는 섹션을 클릭하여 선택합니다.

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

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

이 섹션에는 플레이스홀더 텍스트가 추가된 전체 너비 배경 이미지와 플레이스홀더가 있습니다. 기본 배경 이미지와 텍스트를 사용자의 콘텐츠로 간단히 대체할 수 있습니다.

섹션을 클릭 왼쪽 메뉴의 탭.

그런 다음 히어로를 클릭 하여 페이지에 추가할 수 있는 미리 만들어진 히어로 섹션을 모두 확인합니다.

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

주식 이미지를 클릭하여 선택 템플릿의 주식을 사용자의 이미지로 바꾸려는 경우.

휴지통 아이콘이 나타날 때까지 배경 이미지 미리보기를 마우스로 가리킵니다. 그러면 이 아이콘을 클릭 하여 플레이스홀더 이미지를 삭제할 수 있습니다.

다음으로 사용자 이미지 사용을 클릭합니다. 그러면 WordPress 미디어 라이브러리에서 이미지를 선택하거나 스톡 이미지를 사용할 수 있습니다.

이미지를 추가한 후에는 준비가 완료되었으면 플레이스홀더 텍스트를 바꿀 수 있습니다.

텍스트 블록을 선택하려면 클릭합니다.그런 다음 텍스트 영역에서 사용하려는 텍스트를 입력합니다.

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

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

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

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

페이지 디자인에 만족하면 저장 버튼을 클릭합니다.

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

결론

WordPress에서 이미지 위에 텍스트를 추가하는 세 가지 방법에 대한 설명을 마치겠습니다. 쉽죠? 사용자의 기술 수준과 디자인 선호도에 가장 적합한 방법을 선택하세요.

또한, WP Media Folder과(와) 같은 프로페셔널한 미디어 파일 관리로 정리, 최적화 및 관리를 할 수 있습니다. 이제 지저분한 라이브러리와 작별할 때입니다!