Ajustar la estructura HTML y el diseño de una página

El diseño estándar de una nueva página

Una página recién creada en el CMS bluetronix utiliza automáticamente el diseño estándar. Este diseño forma la estructura básica en HTML donde se muestra el contenido de tu página web.

A través del diseño estándar, se integran automáticamente un encabezado y un pie de página, por ejemplo. También otros elementos como el botón del chatbot pueden formar parte de esta estructura básica.

Si no deseas mostrar ciertos elementos o quieres integrar elementos propios de manera estándar en el diseño, puedes personalizar la estructura básica en HTML.

Abrir la base HTML

Abre Diseño ⯈ Diseño-HTML.

Ahí encontrarás las estructuras básicas en HTML existentes o definiciones de diseño.

La primera entrada es el Diseño Estándar. Este diseño se utiliza por defecto para nuevas páginas HTML.

Estructura del diseño estándar

<!DOCTYPE html>
<html class="wide wow-animation" data-bs-theme="__DB_GB_HTMLDarkMode__" lang="__DB_WebSiteLang__">
<head>
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
   __DB_HeadTitle__
   <link rel="icon" href="/img/favicon.ico" type="image/x-icon">
   <script src="__FV_/bx_script/BxHeadScript_own_min.js__"></script>
   <link rel="stylesheet" href="__FV_/bx_style/BxStyle_own_min.css__">
</head>
<body>

__DB_Layout_/bx_Header.html__

<main>
   __DB_Layout_Main__
</main>

__DB_Layout_/bx_Footer.html__

<script src="__FV_/bx_script/BxScript_own_min.js__"></script>
</body>
</html>

En el diseño estándar, entre otras cosas, se integran automáticamente el encabezado y el pie de página.

El contenido real de tu página HTML se inserta dentro de la sección principal o en la etiqueta __DB_Layout_Main__.

Además, el CMS bluetronix establece automáticamente varios valores y etiquetas. Esto incluye, por ejemplo, el modo oscuro de Bootstrap, el idioma y el título de la página web.

Además, se ejecutan automáticamente los scripts necesarios de bluetronix.

El diseño de Página Única

Además del diseño estándar, también está disponible el diseño Página Única.

Este diseño difiere del diseño estándar normal. Por ejemplo, el botón de chat y la notificación de cookies pueden estar ocultos.

Esto te permite utilizar una estructura diferente para ciertas páginas sin tener que modificar el diseño estándar de todas las demás páginas.

Crear un diseño propio

Además, puedes crear entradas de diseño propias y así definir tus propias estructuras básicas en HTML.

En este ejemplo, creamos una entrada de diseño propia con la denominación Diseño de Prueba.

Dentro de este diseño, puedes definir qué componentes deben integrarse de manera estándar en una página.

Seleccionar un diseño para una página

Los diseños definidos pueden asignarse más tarde directamente a una página HTML.

Para hacerlo, abre el Editor y ve a Configuración de Página.

Toca la selección de diseño. Allí se mostrarán las definiciones de diseño existentes.

También se ofrecerán opciones para seleccionar diseños creados por ti, como el Diseño de Prueba.

Cambiar el diseño de una página

Selecciona el diseño deseado y luego toca Guardar.

La página utilizará posteriormente la estructura de diseño seleccionada.

De esta manera, puedes utilizar diferentes estructuras para diferentes páginas y, por ejemplo, definir qué elementos generales se mostrarán en cada página.

Resumen

El diseño determina la estructura HTML básica de una página en el CMS bluetronix. Las nuevas páginas utilizan inicialmente el diseño predeterminado.

A través de Diseño ⯈ HTML-Diseño puedes ver los diseños disponibles y crear tus propias definiciones de diseño. Luego puedes seleccionar el diseño deseado a través de Configuración de Página ⯈ Diseño y aplicarlo con Guardar.