이미지 추가.
컬럼을 가득 채우고 화면 크기에 따라 조절되는 사진이나 일러스트를 추가합니다.
이미지 추가
로그인한 상태에서 페이지를 엽니다. 콘텐츠 영역에 마우스를 올리면 빌더 컨트롤이 나타납니다. 기본 사용법은 첫 페이지에서 확인하세요.
- 컬럼에 마우스를 올리고 컨트롤 바에서 +를 클릭하거나, 빈 페이지에서 요소 추가를 클릭합니다. 콘텐츠 탭을 열고 이미지를 클릭합니다. 컬럼 맨 위에 요소가 추가되고 설정 대화상자가 열립니다.
- 항목 이미지에서 이미지 선택을 클릭합니다. 미디어 브라우저에서 원하면 이름으로 필터링하고 사진을 선택한 뒤 선택 항목 삽입을 클릭합니다.
- 펼치려면 SEO 제목을 클릭합니다. 사진에 대한 짧은 설명으로 Alt 속성의 기존 텍스트를 바꿉니다.
- 대화상자에서 저장을 클릭합니다. 그런 다음 콘텐츠 영역 상단의 툴바에서 저장을 클릭하여 페이지를 저장합니다.
표시 내용
기본 이미지 너비는 100%입니다. 스크린 리더가 대체 텍스트를 읽어줍니다. 확대/축소를 확인하려면 보기 모드를 미리보기로 설정하고 브라우저 창을 좁혀 보세요. 저장하고 게시하면 방문자에게 변경 사항이 표시됩니다.
이미지 설정
요소에 마우스를 올리고 컨트롤 바에서 더보기 > 설정을 엽니다. 옵션:
- 이미지: 사이트의 미디어나 파일 브라우저에서 이미지를 선택하거나, 파일을 업로드하거나, 외부 URL을 붙여넣습니다.
- 이미지 너비:
100%나300px같은 CSS 너비. 기본값은 100%입니다. - 이미지 높이:
400px같은 고정 높이. 사진의 비율을 유지하려면 비워 둡니다. - 이미지 링크: 이미지를 클릭할 수 있게 만듭니다. URL을 입력하거나 페이지를 선택합니다.
- 이미지 링크 대상: 같은 창 또는 새 창. 링크를 추가하면 표시됩니다.
- Alt 속성: SEO 섹션에 있으며, 스크린 리더와 검색 엔진용 설명입니다.
- Title 속성: SEO 섹션에 있으며, 마우스를 올리면 툴팁으로 표시되는 추가 정보입니다.
이미지 로딩과 페이지 속도
DXPR Builder는 페이지를 빠르게 유지하고 콘텐츠 밀림을 방지하기 위해 새 이미지의 로딩을 자동으로 관리합니다. 페이지 상단과 탭, 캐러셀, 마퀴 안의 이미지는 바로 표시될 준비를 유지합니다. 아래쪽 이미지는 방문자가 스크롤할 때 로드될 수 있습니다.
이미지는 미디어 라이브러리, 업로드한 파일, 외부 URL에서 가져올 수 있습니다. DXPR Builder가 적절한 공간을 미리 확보할 수 있도록 저장하기 전에 에디터에서 이미지가 완전히 로드되도록 합니다. 이미지를 교체하면 선택한 표시 크기는 그대로 유지하면서 크기가 업데이트됩니다.
사이트에 이미 있는 이미지는 자동으로 업그레이드되지 않습니다. 페이지 속도는 이미지 파일 크기와 다른 콘텐츠에도 영향을 받습니다. 게시된 페이지를 좁은 화면과 넓은 화면에서 확인하세요.
표시되지 않는 경우
- 콘텐츠 탭에 이미지가 없습니다. 사용자 프로필에서 숨겨져 있습니다. 관리자에게 사용자 프로필에서 활성화해 달라고 요청하세요.
- 다시 로드하면 사라집니다. 페이지가 저장되지 않았습니다. 다시 추가하고 콘텐츠 영역 상단의 툴바에서 저장을 클릭합니다.
- 이미지 요소가 비어 있습니다. 사진이 이미지 필드에 설정되지 않았습니다. 요소에 마우스를 올리고 컨트롤 바에서 더보기 > 설정을 연 뒤 이미지 선택을 클릭합니다.
- 깨진 이미지 아이콘이 표시됩니다. 파일이 미디어 라이브러리에서 삭제되거나 이동되었습니다. 요소에 마우스를 올리고 컨트롤 바에서 더보기 > 설정을 연 뒤 선택을 제거하고 새 이미지를 선택합니다.
- 이미지가 가로 또는 세로로 늘어났습니다. 이미지 너비와 이미지 높이 두 값 모두 사진과 맞지 않는 고정값입니다. 원래 비율로 되돌리려면 이미지 높이를 비웁니다.
다음 단계
스타일 탭에서 이미지의 간격과 배경을 변경할 수 있습니다.