Utilizar diseños backend
En las propiedades de una página se define qué diseño se utiliza. En la pestaña "Apariencia", encontrará dos campos de selección para los diseños de fondo. Aquí puede seleccionar el diseño utilizado para la página actual y para las páginas subordinadas.
Si el campo de selección está vacío, se hereda el diseño de la página principal.
Si selecciona un diseño de backend diferente en una página con contenido existente, es posible que los elementos de contenido dejen de ser visibles en el frontend y también en el backend.
En este caso, debe corregir la asignación a las "Columnas" a través del módulo de lista.
Para ello, cambie al módulo backend "Lista".
A continuación, verá todos los elementos de contenido existentes en la tabla "Contenido de la página". Haga clic en el icono del lápiz para editar un elemento de contenido.
En la pestaña "General", puede seleccionar en el cuadro de selección "Columna" en qué zona del diseño debe aparecer el elemento de contenido.
Personalizar los diseños del backend
Cambie al módulo de listas y seleccione la carpeta "Backend layouts". Aquí puedes ver todos los diseños disponibles en el proyecto de ejemplo.
Haga clic en el icono del lápiz situado junto al diseño "Página de inicio".
Junto al campo "Configuración", puede iniciar el "Asistente" haciendo clic en el icono.
A continuación, hay que personalizar el Typoscript para la salida de las páginas.
Para ello, vaya al módulo de lista de archivos y edite el archivo page.10.ts (en la versión 6.2.2: page.10.setup.ts) en el directorio fileadmin/jweilandnet_musterprojekt/Resources/Typoscript/
Añada aquí el código para la nueva columna. Aquí tienes que elegir un nombre único para esta área de contenido, en este ejemplo usamos contentBox4.
Para el valor de colPos, añade el número de columna que asignaste en el paso anterior.
contentBox4 < .contentBox1 contentBox4 { select.where = colPos = 13 }
La variable contentBox4 también debe aparecer en la plantilla HTML.
Para ello, edite el archivo homeTemplate.html en el directorio fileadmin/jweilandnet_musterprojekt/Resources/Fluidtemplates/templates/.
Puede utilizar un ayudante de vista fluida para dar salida a la variable en la posición correspondiente de la plantilla.
<f:format.raw>{contentBox4}</f:format.raw>
Para que las cuatro columnas se muestren ahora correctamente una junto a otra, debe cambiar la clase CSS utilizada en la línea 23 del mismo archivo Typoscript.
Cambia col-md-4 por col-md-3.
Puedes encontrar más detalles sobre estas clases CSS en la documentación del framework Bootstrap.
El contenido de esta página se ha traducido automáticamente.