요소가 잘못 표시되거나 작동합니다.
가장 자주 발생하는 요소 문제를 해결합니다. 시작하기 전에 새 빈 페이지에서 요소를 테스트하여 주변 콘텐츠의 영향을 배제합니다.
일부 기기에서 숨기면 로우 레이아웃이 깨집니다
다음 Responsive Visibility 옵션(HTML classes 아래)은 Bootstrap 디스플레이 클래스입니다(예: d-none d-md-block). 로우에 적용하면 로우 자체 레이아웃을 대체하므로 컬럼이 쌓입니다. 클래스는 컬럼이나 로우를 감싸는 섹션에 적용합니다.
콘솔에 Bootstrap에 jQuery 4 미만 버전이 필요하다고 표시됩니다
테마에서 Bootstrap 3 또는 4 JavaScript를 로드하는데, 이는 최신 Drupal 11 릴리스에 포함된 jQuery 4에서 실행되지 않습니다. DXPR Builder 자체는 jQuery를 사용하지 않습니다.
- 테마에서 Bootstrap 3 또는 4 JavaScript 로드를 중단합니다.
- 테마에서 Bootstrap 5를 로드하지 않으면 DXPR Studio > DXPR Builder > General Settings > Bootstrap으로 이동하여 Sideload Bootstrap files를 Bootstrap 5로 설정합니다.
Note: 모듈은 Bootstrap 5만 지원합니다. Bootstrap 3 또는 4 기반 테마는 마이그레이션이 필요합니다.
태블릿 너비에서 컬럼이 어긋납니다
그리드는 12컬럼이므로 5개 컬럼을 균등하게 배치할 수 없습니다. 로우의 그리드 아이콘을 클릭하고 다음과 같은 프리셋을 선택합니다: 1/4 + 1/4 + 1/4 + 1/4 또는 1/3 + 1/3 + 1/3. 태블릿에 별도 레이아웃을 적용하려면 Add screen size를 클릭한 뒤 목록에서 크기를 선택합니다.
Link 요소 안의 링크가 작동하지 않습니다
Link 요소 자체가 a 태그이므로 브라우저에서는 링크 안에 링크를 넣을 수 없습니다. Button 요소를 사용하거나 링크가 포함된 Text 요소를 사용합니다.
앵커 링크가 고정 헤더 아래에 도착합니다
- General Settings로 이동하여 Advanced Settings를 엽니다.
- Scroll offset selector를 고정 헤더의 CSS 선택자로 설정합니다. 기본값은 DXPR Theme 헤더에 적용됩니다.
- 대상 요소에 HTML ID를 지정합니다(위치: General 패널).
동영상이 자동으로 시작되지 않습니다
브라우저는 소리 나는 동영상을 자동 시작하지 않습니다. Local video 설정에서 Start playing automatically 옆의 Muted를 체크한 뒤 저장합니다.
페이지 안의 블록에 편집 컨트롤이 없습니다
빌더 페이지 안에 배치된 DXPR Builder 블록은 자체 에디터 없이 표시되므로 그곳에서 콘텐츠를 변경할 수 없습니다. 테마 영역에서 해당 블록이 있는 다음 위치에서 블록을 편집합니다: Structure > Block layout. 또는 HTML 요소를 대신 사용합니다.
View의 노출된 필터가 작동하지 않습니다
에디터에 “Turn on Ajax on this view to use exposed filters.” 메시지가 표시됩니다. 빌더 내부의 필터는 AJAX를 통해서만 작동합니다.
- View를 편집하고 Advanced를 엽니다.
- Use AJAX를 Yes로 설정한 뒤 View를 저장합니다.
- 모든 캐시를 지웁니다.
Text 요소에서 스크립트 태그가 사라집니다
빌더는 HTML 요소를 제외한 모든 요소에서 <script src> 태그를 제거합니다. 삽입 코드와 스크립트는 HTML 요소에 넣습니다. Apply text format filters to frontend content 설정이 켜져 있으면 필드의 텍스트 형식에서도 해당 태그를 허용해야 합니다.
Content Security Policy 때문에 에디터가 차단됩니다
빌더 콘텐츠는 인라인 style 속성에 스타일을 유지하며, Asset source를 Cloud로 설정하면 에디터 스크립트가 https://cdn2.dxpr.com에서 로드됩니다. 'unsafe-inline'을 style-src에서 허용하고, https://cdn2.dxpr.com을 script-src와 style-src에서 허용합니다.
수정 확인하기
저장한 뒤 View mode를 Preview로 설정하여 요소를 확인하고, 비공개 창에서 익명 방문자로도 확인합니다.
다음 단계
Content elements에서 각 요소의 설정을 확인합니다.