←Volver al Blog

Cómo Crear Diseños Personalizados de Drupal para el Generador de Diseños Mediante Código

2024-02-10•5 min de lectura

Hoy, exploremos Cómo Crear Diseños Personalizados de Drupal para el Generador de Diseños Mediante Código.

El Generador de Diseños de Drupal proporciona una forma potente e intuitiva de diseñar diseños de página flexibles sin adentrarse en el código. Permite a los editores de contenido organizar el contenido en estructuras visualmente atractivas utilizando una interfaz de arrastrar y soltar. En esta entrada del blog, exploraremos qué es el Generador de Diseños, cómo habilitarlo y demostraremos cómo crear plantillas personalizadas para un control aún mayor.

¿Qué es el Generador de Diseños?

En esencia, el Generador de Diseños es un módulo de Drupal que te permite construir visualmente el diseño de las páginas. En lugar de estar limitado a la estructura rígida de un tema, obtienes la libertad de:

  • Definir Regiones: Designar secciones dentro de tu página (por ejemplo, encabezado, pie de página, contenido principal, barra lateral).
  • Ensamblar Diseños con Bloques: Colocar y organizar diferentes bloques de contenido (texto, imágenes, menús, etc.) dentro de estas regiones utilizando arrastrar y soltar.
  • Crear Plantillas Personalizadas: Elaborar archivos de plantilla para diseños específicos para tener un control preciso sobre el HTML y la colocación de regiones.

Habilitar el Generador de Diseños para un Tipo de Contenido

Supongamos que deseas usar el Generador de Diseños en el tipo de contenido 'Artículo'. Aquí te explicamos cómo habilitarlo:

  1. Instalar Módulos: Asegúrate de tener habilitado el módulo principal Generador de Diseños (generalmente es uno predeterminado).
  2. Administrar Pantalla: Navega a / admin / structure / types / manage / article / display (reemplaza 'article' con el nombre de máquina de tu tipo de contenido).
  3. Habilitar el Generador de Diseños: En la sección 'Opciones de diseño', marca la casilla “Usar Generador de Diseños”.
  4. Guardar Cambios: Haz clic en ‘Guardar’.
Habilitar Generador de Diseños

También puedes optar por permitir que los nodos individuales (artículos, en este contexto) tengan sus propias anulaciones de diseño únicas. Esto significa que cada artículo puede tener un diseño distinto al diseño predeterminado que hayas establecido para el tipo de contenido 'Artículo'.

Cómo Crear Diseños Personalizados de Drupal

Si bien tu tema de Drupal y algunos módulos pueden ofrecer algunos diseños preconstruidos, la creación de plantillas personalizadas proporciona un control y una flexibilidad aún mayores. Aquí te explicamos por qué podrías necesitar diseños personalizados:

  • Diseños de Página a Medida: Crea diseños que se ajusten perfectamente a tu contenido, en lugar de limitarte a diseños genéricos de temas o módulos.
  • Edición Fácil: Proporciona diseños listos para usar que coincidan con el estilo de tu sitio web, lo que simplifica la vida a tus editores de contenido.
  • Aspecto Consistente: Asegúrate de que tu sitio web se vea genial en cada página, incluso cuando utilices diseños que no se incluyeron en tu tema.

Para crear diseños personalizados, sigue estos pasos:

  1. Archivo THEME.layouts.yml:
    • Crea un archivo llamado THEME.layouts.yml en el directorio raíz de tu tema (reemplaza THEME con el nombre real de tu tema).
    • Usemos un ejemplo rápido para un diseño con una barra lateral derecha. Agrega el siguiente código y recuerda reemplazar 'EXAMPLE' con un prefijo adecuado para tu proyecto:
example_layout_right_sidebar:
  label: 'EJEMPLO: Contenido con Barra Lateral Derecha'
  path: templates/layout/example/sidebar
  template: layout--right-sidebar
  category: 'Columnas de Ejemplo: 2'
  default_region: first
  icon_map: 
    - [top] 
    - [first, first, second]  
    - [bottom, bottom, bottom] 
  regions: 
    top:
      label: Superior 
    first:
      label: Primero 
    second:
      label: Segundo 
    bottom:
      label: Inferior

Explicación del código:

  • example_layout_right_sidebar: Nombre único para el diseño.
  • label: El nombre amigable para este diseño en el Generador de Diseños.
  • path: Dónde se encuentran los archivos de plantilla de tu diseño.
  • template: El archivo de plantilla principal que define la estructura HTML de tu diseño.
    • Necesitarás un archivo layout--right-sidebar.html.twig correspondiente en la ruta especificada.
  • category: Ayuda a agrupar los diseños dentro de la interfaz del Generador de Diseños.
  • default_region: Especifica dónde se colocarán inicialmente los bloques de contenido (en este caso, la región 'first').
  • icon_map:
    • Esto muestra una vista previa visual básica en el Generador de Diseños:
      • Una fila en la parte superior ([top])
      • Fila con tres columnas: dos columnas 'first' más anchas y una columna 'second' más estrecha.
      • Una fila en la parte inferior ([bottom, bottom, bottom])
  • regions:
    • Define las áreas con nombre donde puedes colocar contenido:
      • top: Una región que abarca la parte superior del diseño.
      • first: La región de contenido principal (probablemente la columna izquierda).
      • second: La región de la barra lateral (probablemente la columna derecha).
      • bottom: Una región que abarca la parte inferior del diseño.
    • Usarás {{ content.top }}, {{ content.first }}, y {{ content.second }} para posicionar tu contenido en la plantilla twig.
  1. Archivos de Plantilla:
    • En la carpeta que especificaste en el path de tu archivo .layouts.yml (por ejemplo, templates / layout / example / sidebar), crea los archivos de plantilla Twig como layout--right-sidebar.html.twig.
    • Aquí tienes el ejemplo de plantilla:
{#
/**
 * @file
 * Implementación predeterminada del tema para un diseño de medios.
 *
 * Variables disponibles:
 * - content: El contenido para este diseño.
 * - attributes: Atributos HTML para el <div> del diseño.
 *
 * @ingroup themeable
 #}
{% if content %}
 <div{{ attributes.addClass('row example-sidebar-layout example-right-sidebar') }}>

  <div class="example-container">

   {% if content.top %}
    <div {{ region_attributes.top.addClass('region--top example-sidebar-layout-top') }}>
     {{ content.top }}
    </div>
   {% endif %}

   <div class="example-sidebar-layout-middle">

    <div{{ region_attributes.first.addClass('col-sm-9 example-sidebar-column-left') }}>
     {{ content.first }}
    </div>

    <div{{ region_attributes.second.addClass('col-sm-3 example-sidebar-column-right') }}>
     {{ content.second }}
    </div>

    </div>

   {% if content.bottom %}
    <div {{ region_attributes.bottom.addClass('region--bottom example-sidebar-layout-bottom') }}>
     {{ content.bottom }}
    </div>
   {% endif %}

  </div>

 </div>
{% endif %}
  1. Limpiar Cachés: Limpia las cachés de Drupal para registrar tus nuevas plantillas.

Usando Tus Plantillas Personalizadas

  1. Al editar un nodo de 'Artículo' (o el tipo de contenido que hayas elegido), cambia a la pestaña 'Diseño'.
  2. Tus diseños personalizados ahora deberían estar disponibles para su selección.
  3. Una vez que elijas un diseño, puedes comenzar a agregar bloques de contenido en sus regiones designadas.
Usando Tus Plantillas Personalizadas

Reflexiones Finales

El Generador de Diseños y las plantillas personalizadas te brindan más flexibilidad para diseñar tu sitio de Drupal de la manera que desees. Puede requerir un poco de práctica para acostumbrarse, pero la capacidad de crear diseños que se adapten perfectamente a tus necesidades vale la pena el esfuerzo. Experimenta y mira lo que puedes crear. ¡Feliz depuración!

Categorías:

Drupal