HTML 요소 추가.

DXPR Builder 배우기페이지 만들기콘텐츠 추가텍스트와 미디어

소셜 게시물이나 예약 위젯 같은 자체 코드가 실행되는 페이지 영역을 만들 수 있습니다. 서드파티 임베드나 사용자 정의 마크업에 맞는 요소가 없을 때 사용하세요.

인물 사진과 함께 "Happy 100th Birthday, David Attenborough"라고 적힌 CNN 기사 카드. HTML 요소로 페이지에 렌더링됨

HTML 요소 추가

로그인한 상태에서 페이지를 엽니다. 콘텐츠 영역에 마우스를 올리면 빌더 컨트롤이 나타납니다. 기본 사용법은 첫 페이지에서 확인하세요.

  1. 컬럼에 마우스를 올리고 컨트롤 바에서 +를 클릭하거나, 빈 페이지에서 요소 추가를 클릭합니다. 콘텐츠 탭을 열고 HTML을 클릭합니다. 컬럼 맨 위에 요소가 추가되고 설정 대화상자가 열립니다.
  2. 서비스의 임베드 또는 공유 옵션에서 임베드 코드를 복사합니다. 원시 HTML 편집기에 붙여넣습니다.
  3. 대화상자에서 저장을 클릭합니다. 그런 다음 콘텐츠 영역 상단의 툴바에서 저장을 클릭하여 페이지를 저장합니다.

표시 내용

빌더가 에디터에서도 스크립트를 실행하므로 대화상자에서 저장을 클릭하는 즉시 임베드가 에디터에서 작동합니다. 동영상에서는 대화상자가 닫히자마자 미국 공휴일 Google 캘린더가 표시됩니다. 페이지를 저장하고 게시하면 방문자에게 표시됩니다.

HTML 요소 설정

요소에 마우스를 올리고 컨트롤 바에서 더보기 > 설정을 엽니다. 옵션:

  • 원시 HTML: HTML, CSS, JavaScript용 코드 편집기. 스크립트는 에디터와 게시된 페이지 모두에서 실행됩니다.
  • HTML ID: CSS 또는 JavaScript로 요소를 지정하는 선택 ID.
  • HTML 클래스: 요소 래퍼용 선택 CSS 클래스.

표시되지 않는 경우

  • 콘텐츠 탭에 HTML이 없습니다. 사용자 프로필에서 숨겨져 있습니다. 관리자에게 사용자 프로필에서 활성화해 달라고 요청하세요.
  • 다시 로드하면 사라집니다. 페이지가 저장되지 않았습니다. 다시 추가하고 콘텐츠 영역 상단의 툴바에서 저장을 클릭합니다.
  • 임베드가 일반 텍스트나 빈 인용문으로 표시됩니다. 임베드 스크립트가 아직 로드되지 않았거나 <script> 줄이 없습니다. 몇 초 기다리거나 임베드 코드 전체를 다시 붙여넣습니다.
  • 필드에 코드가 있지만 방문자에게는 아무것도 표시되지 않습니다. 사이트에서 방문자용 텍스트 형식 필터를 실행 중이며, 해당 형식이 <script>나 <iframe> 같은 태그를 제거할 수 있습니다. 편집자에게는 코드가 계속 작동하는 것으로 표시됩니다. 관리자에게 프론트엔드 콘텐츠에 텍스트 형식 필터 적용을 일반 설정에서 해제하거나 텍스트 형식에서 해당 태그를 허용해 달라고 요청하세요. 그런 다음 게시된 페이지를 다시 로드합니다.
  • 요소 아래의 레이아웃이 깨집니다. 코드에 닫지 않은 태그가 있습니다. 모든 여는 태그에 닫는 태그가 있는지 확인하세요.

다음 단계

스타일 탭에서 HTML 요소의 간격과 배경을 변경할 수 있습니다.