사이트에 맞춤 이미지 추가 방법

작동 방식

사용자 지정 HTML 코드를 통해 다른 언어로 현지화된 텍스트가 있는 이미지를 추가할 수 있습니다. 이 기능은 다른 국가에 있는 사용자가 더 유용하게 활용할 수 있는 사이트를 만들 수 있도록 해 줍니다. 기존 솔루션 또는 자체 코드를 추가할 수 있습니다.

획득 방법

기존 솔루션 사용

1. 관리자 페이지에서 프로젝트를 엽니다.
2. 사이드 바에서 웹사이트 빌더를 클릭합니다.
3. 웹사이트 빌더 열기를 클릭합니다.
4. 헤더 블록에서 번역 구성 요소를 설정합니다.
5. 현지화 이미지에 추가할 언어를 선택합니다.
6. 사용자 정의 코드 블록에 다음 코드를 삽입합니다.

<style>
  .localised-image {
    text-align: center;
    padding: 4em 1em;
  }
  .localised-image img {
    width: 100%;
  }
</style>  
<div class="localised-image">
  <img class="lazy loaded" data-src="https://cdn3.xsolla.com/files/uploaded/2340/d9d69114bb9f7c60f0981639aaa4bf3a.jpeg" />
</div>

7. 개별 이미지에 대한 링크를 img 요소에 넣는데 이는 data-src 속성에 있습니다. 지원하는 이미지 포맷: JPEG, PNG, GIF.
8. 여러 개의 지역화 이미지를 추가하려면, 블록을 div 태그로 복제하고 이미지 URL을 변경합니다.
9. 미리보기를 클릭하면 변경 내용을 볼 수 있습니다.

이 지침에 대한 튜토리얼 동영상 시청:

자체 코드 추가

1. 빌더에서 블록 추가를 클릭하고 사용자 지정 코드를 선택합니다.

2. 자체 코드를 블록에 삽입합니다.

이 페이지 평가

개선해야 할 점이 있을까요? 전송

답하기 원하지 않습니다

의견을 보내 주셔서 감사드립니다!

유용한 링크