Layout Builder Base
Proporciona una base de plugin integral para crear diseños flexibles y altamente configurables para Layout Builder de Drupal con amplias opciones de estilo.
layout_builder_base
Overview
Layout Builder Base es un módulo orientado a desarrolladores que proporciona una base extensible para crear diseños complejos y configurables para Layout Builder de Drupal. El módulo ofrece un conjunto integral de clases base abstractas que los desarrolladores pueden extender para crear diseños personalizados con soporte incorporado para opciones de estilo como colores de fondo, márgenes, relleno, anchos de contenedor y propiedades de cuadrícula.
El módulo incluye un potente sistema de configuración que permite a los administradores del sitio establecer valores predeterminados para todas las propiedades del diseño y anular las opciones disponibles a través de una interfaz administrativa. Esto hace posible personalizar las opciones de diseño sin escribir código. Los desarrolladores también pueden usar un amplio conjunto de hooks alter para modificar programáticamente las opciones disponibles.
El submódulo complementario, Layout Builder Base Library, proporciona diseños listos para usar (de una a cuatro columnas más un diseño de columnas personalizable) que vienen con estilos CSS preconfigurados, haciéndolo inmediatamente utilizable para constructores de sitios que desean diseños con funciones completas desde el inicio.
Features
- Clases base abstractas (BaseLayoutBase, DefaultLayoutBase) para crear plugins de diseño personalizados con amplias opciones de configuración
- Diseños preconstruidos a través del submódulo Layout Builder Base Library: una columna, dos columnas, tres columnas, cuatro columnas y columnas personalizables
- Opciones completas de estilo de fondo incluyendo color, carga de imagen, fijación (fijo/desplazamiento), posición, tamaño y efectos de superposición
- Controles flexibles de margen con opciones individuales (superior, inferior, izquierda, derecha) e iguales (superior/inferior, izquierda/derecha) en múltiples tamaños
- Controles flexibles de relleno con opciones individuales (superior, inferior, izquierda, derecha) e iguales (superior/inferior, izquierda/derecha) en múltiples tamaños
- Opciones de ancho de contenedor (predeterminado, pequeño, grande, ninguno) para controlar el ancho máximo del diseño
- Opciones de contenedor de contenido para contener el contenido dentro de un fondo de ancho completo
- Opciones de altura incluyendo 100vh y 80vh para secciones hero
- Opciones de color y alineación de texto
- Propiedades de cuadrícula para diseños multicolumna incluyendo separación de columnas, separación de filas, punto de ruptura y alineación de elementos
- Opciones de ancho de columna para diseños de dos columnas (50-50, 33-67, 67-33, 25-75, 75-25)
- Opciones de ancho de columna para diseños de tres columnas (33-33-33, 25-50-25, 25-25-50, 50-25-25)
- Diseño de columnas personalizable con opciones autofit, autofill y columnas fijas de 2/3/4
- Soporte para ID HTML personalizado y clases CSS para cada sección de diseño
- Carga de imagen de fondo con selección de estilo de imagen
- Interfaz administrativa para establecer valores predeterminados globales para todas las propiedades del diseño
- Sistema de anulación de opciones para personalizar las opciones disponibles sin cambios de código
- Más de 25 hooks alter para personalización programática de opciones de diseño
- Soporte de puntos de ruptura responsivos para diseños adaptables a móviles
Use Cases
Crear secciones hero con imágenes de fondo
Use el diseño de una columna con carga de imagen de fondo, establezca la altura a 100vh o 80vh, aplique una superposición oscura para legibilidad del texto y use color de texto blanco. La opción de contenedor de contenido le permite centrar el contenido mientras tiene un fondo de ancho completo.
Construir secciones de contenido multicolumna responsivas
Use diseños de dos, tres o cuatro columnas con anchos de columna apropiados. Establezca puntos de ruptura de columnas para determinar cuándo las columnas se apilan en pantallas más pequeñas. Ajuste las separaciones de columna y fila para el espaciado entre contenido.
Personalizar opciones de estilo disponibles para editores de contenido
Use la interfaz de administración en /admin/config/content/layout_builder_base para anular opciones. Por ejemplo, limite los colores de fondo solo a los colores de su marca, o agregue tamaños de margen personalizados que coincidan con su sistema de diseño.
Extender diseños con estilos personalizados a través de hooks
Implemente hooks alter como hook_layout_builder_base_background_alter() para agregar colores de fondo personalizados, o hook_layout_builder_base_modifiers_alter() para agregar variantes especiales de diseño. Cree las clases CSS correspondientes en su tema.
Crear plugins de diseño personalizados con las clases base
Extienda DefaultLayoutBase o BaseLayoutBase para crear diseños personalizados. Sobrescriba métodos como getBackgroundOptions() para definir sus propias opciones. Declare el diseño en el archivo layouts.yml de su módulo con la clase personalizada.
Construir páginas de aterrizaje con diseños de sección variados
Combine diferentes diseños en una sola página: sección hero con una columna y fondo de altura completa, cuadrícula de características con tres columnas, llamada a la acción con dos columnas (imagen y texto), y pie de página con cuatro columnas para navegación.
Tips
- Use la función de Opciones de anulación para personalizar las opciones disponibles sin escribir código - este es el enfoque recomendado para la mayoría de las personalizaciones específicas del sitio
- El valor <none> en las opciones de anulación oculta completamente un campo del formulario de configuración de diseño, útil para simplificar la experiencia del editor
- Al extender clases de diseño, siempre llame a los métodos padre para asegurar que los hooks alter se invoquen
- Las imágenes de fondo soportan estilos de imagen - use esto para optimizar tamaños de imagen para mejor rendimiento
- La opción de contenedor de contenido es útil para secciones hero donde desea un fondo de ancho completo pero contenido centrado
- Para diseños personalizados, extienda BaseOneColumnLayout o BaseMultipleColumnsLayout del submódulo Library para heredar todas las opciones predefinidas
Technical Details
Admin Pages 1
/admin/config/content/layout_builder_base
Configurar valores predeterminados globales para todas las propiedades del diseño y anular las opciones disponibles para cada propiedad del diseño. Esta página proporciona una forma centralizada de personalizar el comportamiento del diseño en todo el sitio sin escribir código.
Permisos 1
Hooks 30
hook_layout_builder_base_background_alter
Altera las opciones de color de fondo disponibles en los formularios de configuración de diseño
hook_layout_builder_base_background_attachment_alter
Altera las opciones de fijación de fondo (fijo, desplazamiento) disponibles en los formularios de configuración de diseño
hook_layout_builder_base_background_position_alter
Altera las opciones de posición de fondo disponibles en los formularios de configuración de diseño
hook_layout_builder_base_background_size_alter
Altera las opciones de tamaño de fondo (cover, contain) disponibles en los formularios de configuración de diseño
hook_layout_builder_base_background_overlay_alter
Altera las opciones de superposición de fondo disponibles en los formularios de configuración de diseño
hook_layout_builder_base_top_margin_alter
Altera las opciones de margen superior disponibles en los formularios de configuración de diseño
hook_layout_builder_base_bottom_margin_alter
Altera las opciones de margen inferior disponibles en los formularios de configuración de diseño
hook_layout_builder_base_left_margin_alter
Altera las opciones de margen izquierdo disponibles en los formularios de configuración de diseño
hook_layout_builder_base_right_margin_alter
Altera las opciones de margen derecho disponibles en los formularios de configuración de diseño
hook_layout_builder_base_top_bottom_margins_alter
Altera las opciones de márgenes superior e inferior iguales disponibles en los formularios de configuración de diseño
hook_layout_builder_base_left_right_margins_alter
Altera las opciones de márgenes izquierdo y derecho iguales disponibles en los formularios de configuración de diseño
hook_layout_builder_base_top_padding_alter
Altera las opciones de relleno superior disponibles en los formularios de configuración de diseño
hook_layout_builder_base_bottom_padding_alter
Altera las opciones de relleno inferior disponibles en los formularios de configuración de diseño
hook_layout_builder_base_left_padding_alter
Altera las opciones de relleno izquierdo disponibles en los formularios de configuración de diseño
hook_layout_builder_base_right_padding_alter
Altera las opciones de relleno derecho disponibles en los formularios de configuración de diseño
hook_layout_builder_base_top_bottom_paddings_alter
Altera las opciones de rellenos superior e inferior iguales disponibles en los formularios de configuración de diseño
hook_layout_builder_base_left_right_paddings_alter
Altera las opciones de rellenos izquierdo y derecho iguales disponibles en los formularios de configuración de diseño
hook_layout_builder_base_container_alter
Altera las opciones de ancho de contenedor disponibles en los formularios de configuración de diseño
hook_layout_builder_base_content_container_alter
Altera las opciones de ancho del contenedor de contenido disponibles en los formularios de configuración de diseño
hook_layout_builder_base_height_alter
Altera las opciones de altura disponibles en los formularios de configuración de diseño
hook_layout_builder_base_color_alter
Altera las opciones de color de texto disponibles en los formularios de configuración de diseño
hook_layout_builder_base_alignment_alter
Altera las opciones de alineación de texto disponibles en los formularios de configuración de diseño
hook_layout_builder_base_column_gap_alter
Altera las opciones de separación de columnas para diseños multicolumna
hook_layout_builder_base_row_gap_alter
Altera las opciones de separación de filas para diseños multicolumna
hook_layout_builder_base_column_breakpoint_alter
Altera las opciones de punto de ruptura de columnas para diseños responsivos
hook_layout_builder_base_align_items_alter
Altera las opciones de alineación de elementos para diseños multicolumna
hook_layout_builder_base_two_column_width_alter
Altera las opciones de distribución de ancho de columnas para diseños de dos columnas
hook_layout_builder_base_three_column_width_alter
Altera las opciones de distribución de ancho de columnas para diseños de tres columnas
hook_layout_builder_base_modifiers_alter
Altera las opciones de modificadores para lógica de estilos personalizados
hook_layout_builder_base_customizable_columns_alter
Altera las opciones de columnas personalizables
Troubleshooting 4
Verifique que su clase de diseño extienda la clase base apropiada y que no haya sobrescrito los métodos de opciones para retornar arrays vacíos. Verifique que las opciones de anulación en la administración no estén configuradas como <none>.
Asegúrese de que el submódulo Layout Builder Base Library esté habilitado si usa sus diseños. Verifique que las clases CSS coincidan entre sus opciones de diseño y su hoja de estilos. Limpie la caché de Drupal después de los cambios.
Verifique que la carga del archivo se completó exitosamente y que el archivo existe en public://layout_background/. Verifique los permisos de archivo y asegúrese de que el estilo de imagen seleccionado (si hay alguno) se haya generado.
Verifique que la clase de punto de ruptura de columna se aplique correctamente y revise sus media queries CSS. El submódulo Library proporciona puntos de ruptura predeterminados en 600px, 800px, 1200px y 1400px.