Zum Inhalt springen

Listo para el despegue: la plantilla TYPO3 14 gratuita de jweiland.net

¡Despegue a la velocidad de la luz! Nuestro proyecto de ejemplo "Best Practice" es el centro de mando perfecto: personalizable individualmente y con la mejor documentación. Como descarga o con warp drive en hosting.

TYPO3 Version:14 LTS

Con la plantilla TYPO3 gratuita puede empezar a crear contenido inmediatamente y su sitio web estará en línea en muy poco tiempo. Usted no tiene que preocuparse por el diseño, plantillas o código TypoScript, puede empezar de inmediato.

Esto es lo que parece: Versión en vivo de nuestra plantilla TYPO3

¿Misión propia o vuelo completo?

La plantilla TYPO3 14 está disponible como descarga gratuita. Puede utilizar la plantilla directamente con nosotros o con otros proveedores. Tenga en cuenta que no podemos ofrecerle soporte con otros proveedores.

¿Quiere alcanzar las estrellas especialmente rápido con una nueva página web? Entonces reserve nuestro plan gratuito TYPO3 Developer sin compromiso durante 3 meses. La plantilla (como en todos nuestros paquetes de alojamiento) ya está preinstalada y podrá empezar a trabajar de inmediato.

Descargue la última versión de la plantilla TYPO3 (archivo tar.gz)

Comprobación del sistema: TYPO3 v14 requiere al menos PHP 8.3 y MySQL 8.0.17 o MariaDB 10.4.3.

El equipo de a bordo para su proyecto:

Nuestra plantilla de proyecto proporciona una estación base flexible que puede personalizar completamente según sus deseos. Para que su vuelo a las estrellas sea lo más seguro posible, al crear la plantilla hemos tenido en cuenta los temas más importantes para los proyectos en línea actuales:

  • Diseño web responsivo: optimizado para todas las galaxias (escritorio, tableta y smartphone).
  • Tiempos de carga cortos: Velocidad warp y código limpio según el estado actual de la técnica.
  • Navegación segura: Optimizada para buscadores y preparada para la accesibilidad.
  • Totalmente equipado: Ejemplos de todos los elementos de contenido estándar directamente a bordo.
  • Personalizable visual y funcionalmente

La plantilla puede utilizarse como base para su propio sitio web y representa un ejemplo de "mejores prácticas". Aquí puede aprender a configurar un proyecto TYPO3. No pretende ser una plantilla de diseño, sino una plantilla de proyecto. Puede adaptar el diseño a sus propias ideas.

Misión a largo plazo sin relanzamiento

La plantilla utiliza TYPO3 Versión 14 LTS. Esto mantiene su proyecto en marcha hasta al menos octubre de 2028 (con Extended Support incluso hasta 2031).

Tecnología probada desde 2008

Nuestro proyecto de muestra no es un prototipo. Llevamos más de 15 años desarrollando esta plantilla con cada generación de TYPO3. Descubra más sobre la historia de nuestra misión.

Las especificaciones del sistema de la plantilla TYPO3

Hemos procurado que los sistemas de a bordo sean sencillos y eficientes. Pero toda misión exitosa necesita ciertos módulos para tener éxito, por eso los hemos preinstalado:

  • Centro de noticias: mensajes actuales siempre a la vista (extensión: news).
  • Diseño modular: Diseño flexible en varias columnas (extensión: container).
  • Destacados galácticos: Elegante lightbox para la visualización de imágenes.
  • Control de seguridad: gestor de consentimiento de cookies integrado y configurable.

Para el salto a TYPO3 v14, hemos optimizado los motores y añadido nuevos módulos:

  • MarcadorAI: En el backend, puede marcar fácilmente las imágenes generadas por AI como tales a través de una casilla de verificación. Un tooltip informativo aparecerá automáticamente en el frontend. Requisito de etiquetado de IA: ¡comprobado!
  • Configurador de colores: A partir de ahora, puedes ajustar el aspecto de tu sitio web directamente en el backend a través de la configuración del sitio mediante un intuitivo selector de colores.
  • Fluid Compon ents: el uso de Fluid Components (incluidos ejemplos de buenas prácticas) le permite implementar una estructura de plantillas más limpia.
  • Modo de página única: en lugar de un sitio web con subpáginas, ahora su presencia en la web también puede realizarse completamente como una moderna página única.
  • Gráficos de última generación: Soporte completo de imágenes WebP para tamaños de archivo mínimos con la máxima calidad.
  • Botón de contraste: Con el nuevo botón en el frontend, los visitantes pueden cambiar inmediatamente la visualización a una vista de alto contraste, para una legibilidad óptima y una mayor accesibilidad.
  • Navegación sin barreras: la accesibilidad visual se ha optimizado aún más para garantizar un viaje fluido a todos los pasajeros.

También hemos aumentado significativamente la eficiencia en la sala de máquinas: CSS y JS se integran ahora a través de activos en lugar de TypoScript, lo que, junto con profundas optimizaciones de CSS, garantiza tiempos de carga a velocidad de vértigo. Para maximizar el rendimiento del renderizado, hemos cambiado al nuevo objeto de contenido PAGEVIEW, como en la plantilla TYPO3 13, y hemos externalizado el cálculo de imágenes a un DataProcessor independiente para una separación lógica limpia.

Contacto por radio con la estación terrestre

¿Tiene alguna sugerencia o idea para mejorar nuestra plantilla? Póngase en contacto con nosotros en hosting(at)jweiland.net

¿Cuánto cuesta la plantilla TYPO3 de jweiland.net?

La plantilla se incluye en todos los nuevos paquetes de alojamiento TYPO3 de jweiland.net y ya está preinstalada. Se puede descargar y utilizar gratuitamente desde este sitio web (véase el enlace de descarga más arriba).

Instale usted mismo la plantilla TYPO3

Cuando contrata un plan de alojamiento (incluido el plan gratuito DEVELOPER), la plantilla TYPO3 ya está instalada por nosotros.

Si desea instalar usted mismo la plantilla en un paquete de alojamiento existente, le indicaremos todos los pasos necesarios:

  1. Cree una nueva base de datos (MariaDB versión 10.11) a través del menú de cliente (Plesk) o una versión comparable en Classic Hosting.
  2. Inicie sesión en el servidor web a través de SSH (instrucciones para Windows, MacOS y Linux).
  3. Descomprima el código fuente de TYPO3 (typo3_src-14.3.x.tar.gz) si no se encuentra ya en el directorio typo3cms.
  4. Descomprima el archivo (sitepackage-14.3.x.tar.gz).
  5. Ajuste los parámetros de la base de datos en typo3conf/system/settings.php.
  6. Importe el archivo de base de datos typo3conf/sitepackage.sql a la nueva base de datos vacía.
  7. Adaptar/crear enlace simbólico al código fuente de TYPO3 14.3.x.
  8. Haga que la raíz del documento del dominio apunte al directorio.
  9. ¡Inicie sesión en el backend de TYPO3 (usuario: typo3-admin, contraseña: Password1!)
    ¡Cambie la contraseña inmediatamente después de la instalación!
  10. Acceda a Websites→Setup.
  11. Haga clic en la pluma y cambie el nombre del dominio.
  12. Cree una redirección 301 al dominio deseado (con o sin www.) en .htaccess.

Cambiar nombre de usuario y contraseña

Por razones de seguridad, le aconsejamos encarecidamente que cambie el nombre de usuario y la contraseña de la cuenta de usuario predeterminada inmediatamente después de iniciar sesión en el backend por primera vez. La contraseña puede cambiarse en el módulo Sistema, en Configuración de usuario.

La contraseña debe cumplir los siguientes requisitos

Longitud mínima: 8 caracteres
Al menos un carácter en mayúsculas
Al menos una letra en minúsculas
Al menos un dígito
Al menos un carácter especial
Debe ser diferente de la contraseña actual.

Cambiar el idioma del backend

El backend TYPO3 puede utilizarse en muchos idiomas diferentes. El inglés y el alemán ya están preinstalados, pero el administrador también puede instalar fácilmente otros idiomas.

Por cierto, cada usuario del backend puede establecer su idioma preferido en la configuración de usuario.

Configuración del sitio web

En el módulo "Sitios web" del área "Configuración" se pueden realizar algunos ajustes básicos para el sitio web. Debe personalizarlos para su sitio web.

  • General: ID de la página de inicio, título del sitio web, dominio
  • Idiomas: añada idiomas adicionales o elimine los que no utilice.
  • Gestión de errores: configure lo que debe suceder en caso de que se produzca un código de estado de error HTTP.
    La configuración predeterminada es una página de error 404 que aparece cuando los usuarios llaman a una URL no válida.
  • Rutas estáticas: Aquí se almacena el robots.txt, que define la capacidad de búsqueda del sitio web para los motores de búsqueda.
    Una plantilla TYPO3 recién instalada no puede ser indexada por Google u otros motores de búsqueda. Esto se evita mediante entradas en un archivo llamado robots.txt. La configuración debe ser ajustada cuando va en vivo.

Personalización visual del diseño con CSS y ajustes del sitio

1. ajustar los colores a través de la configuración del sitio

En la nueva versión de la plantilla, ya no es necesario editar archivos para los ajustes básicos de color. Los colores primarios, secundarios y otros colores de acento se pueden ajustar directamente en el módulo "Sitios web" → "Configuración" → haz clic en la rueda dentada.

Allí encontrará una pestaña "Colores" en la que podrá seleccionar fácilmente los valores deseados mediante un selector de colores. Estos colores se aplican automáticamente a la página web correspondiente.

2. Variables CSS especiales para personalizaciones detalladas

La plantilla utiliza modernas variables CSS para otros refinamientos visuales (como espaciado específico o tamaños de fuente) que van más allá de la configuración del sitio. Puede encontrarlas en el paquete del sitio en:

/typo3conf/ext/jwsitepackage/Resources/Public/Css/CssVariables

Para acceder a este archivo con variables CSS desde el backend en la lista de archivos, tienes que crear un nuevo registro de datos del tipo de almacenamiento de archivos a través del módulo "Contenido" → "Registros de datos" e introducir la ruta anterior en el campo "Ruta base" (ver captura de pantalla). A continuación, puede editar el archivo en el módulo Archivo. Las variables CSS de este archivo se utilizan en todas las hojas de estilo de la plantilla.

3. abandono de SCSS

En la nueva plantilla v14, hemos renunciado deliberadamente a SCSS para reducir la complejidad. Dado que los navegadores modernos soportan totalmente las variables CSS nativas y el anidamiento, la compilación ya no es necesaria.

Sin proceso de compilación: los cambios en los archivos CSS son visibles inmediatamente después de vaciar la caché del frontend.

A prueba de futuro: nos basamos en CSS puro y compatible con los estándares que el navegador interpreta directamente.

Personalizaciones individuales en la configuración del sitio

Desde la versión 13 de TYPO3, las tareas del editor de constantes se han transferido a los ajustes del sitio. Con la introducción del Editor de Ajustes del Sitio, estos ajustes ahora se pueden configurar directamente a través del módulo backend "Websites" → "Setup" → "Site Settings", reemplazando la gestión anterior a través de constantes TypoScript.

Muchas funciones y opciones de salida de la plantilla TYPO3 se pueden controlar cómodamente en el backend a través de los ajustes del sitio. Puede acceder a los ajustes del sitio de la siguiente manera:

  1. Haga clic en "Configuración" en el módulo Sitios web del sitio.
  2. Haga clic en la rueda dentada "Editar ajustes del sitio" en su página.
  3. Si es necesario, seleccione una categoría en el menú de la izquierda.

Las distintas opciones de configuración se describen en este editor de configuración del sitio y pueden personalizarse según sea necesario. He aquí algunos ejemplos.

Sustituir el logotipo en la cabecera

Encontrará un logotipo en la parte superior izquierda de cada página, que siempre está vinculado automáticamente a la página de inicio.

¿Cómo puede utilizar su logotipo?

Para sustituir nuestro logotipo de ejemplo, proceda del siguiente modo:

  1. Cargue el archivo de su logotipo a través del módulo de archivos en "Medios" (se recomienda el formato de archivo JPG, PNG o SVG). Si es necesario, cree una carpeta adecuada para organizar sus archivos.
  2. Haga clic en "Configuración" en el módulo Sitios web.
  3. Haga clic en la rueda dentada "Editar configuración del sitio".
  4. Seleccione la categoría "Configuración general de jweiland.net" en el menú.
  5. Desplácese hasta la sección "Diseño".
  6. Haga clic en el campo "Logotipo".
  7. Introduzca aquí la ruta a su archivo de logotipo (por ejemplo, fileadmin/logos/mi_logo.png).
  8. Haz clic en el botón "Guardar" de la parte superior.

Personalizar el nombre de la empresa

Uno de los primeros pasos para personalizar la plantilla TYPO3 debería ser cambiar el nombre de la empresa. Esto se puede ver en la parte inferior de cada página, por ejemplo. Por supuesto, también puede introducir aquí su nombre personal o cualquier otro texto en lugar del nombre de la empresa.

¿Cómo cambiar el nombre de la empresa?

Realice los siguientes pasos:

  1. Haga clic en "Configuración" en el módulo Sitios web.
  2. Haga clic en la rueda dentada "Editar configuración del sitio".
  3. Seleccione la categoría "Configuración general de jweiland.net" en el menú.
  4. Desplácese hasta la sección "Diseño".
  5. Haga clic en el campo "Nombre de la empresa" y personalice el nombre de la empresa.
  6. Por último, haga clic en el botón "Guardar" de la parte superior.

Sustituir favicon y appicon

Los favicons son pequeñas imágenes que se muestran, por ejemplo, en la barra de título o en la pestaña del navegador. Aquí se suele utilizar el logotipo de una empresa o similar.

La plantilla TYPO3 está preparada para el uso de favicons individuales. También se crean iconos táctiles (iconos de aplicaciones) para smartphones y tablets.

Ambos tipos de iconos se pueden intercambiar fácilmente a través del editor de configuración del sitio.

Tenga en cuenta lo siguiente:

  • El archivo de imagen para el favicon y los iconos táctiles estándar debe ser cuadrado.
  • La segunda variante de la imagen, especialmente útil para Windows Phone, requiere una relación de aspecto de 31:15, por ejemplo: ancho 310 px, alto 150 px.
  • Utilice un archivo de imagen en formato PNG o JPG. Se recomienda PNG. Como las diferentes variantes se crean dinámicamente en la plantilla TYPO3, los clásicos archivos ICO no funcionan aquí. Sin embargo, estos ya no son necesarios hoy en día.

¿Cómo sustituir el favicon y el appicon?

Para personalizar los archivos, proceda de la siguiente manera:

  1. Haga clic en "Configuración" en el módulo Sitios web.
  2. Haga clic en la rueda dentada "Editar configuración del sitio".
  3. Seleccione la categoría "Configuración general de jweiland.net" en el menú.
  4. Desplácese hasta la sección "Diseño".
  5. Haz clic en los campos "App-/Favicon Square" o "App-/Favicon Wide" para activar el campo de entrada.
  6. Introduzca la ruta a su archivo de imagen en el campo de entrada. Puede estar debajo de fileadmin/ o en una extensión separada:
    • Ejemplo para fileadmin: fileadmin/mydirectory/images/appicon-square.png
    • Ejemplo de extensión: EXT:myextension/Resources/Public/Icons/appicon-square.png
  7. Por último, haga clic en "Guardar" en la parte superior.
  8. Si el cambio no es visible inmediatamente, debe borrar la caché del frontend y también la caché de su navegador.

Variantes de navegación

La navegación horizontal se utiliza de forma estándar. Si una página tiene más subpáginas, éstas se muestran como un "menú desplegable".

Además, pueden activarse distintas variantes a través del editor de constantes:

  • Navegación horizontal (por defecto)
  • Navegación vertical
  • Navegación horizontal y vertical

Además, se puede seleccionar el llamado "mega menú" para el menú horizontal a través del tipo de navegación.

¿Cómo cambiar la navegación por defecto?

Realice los siguientes pasos para cambiar la navegación por defecto:

  1. Haga clic en "Configuración" en el módulo Sitios web.
  2. Haga clic en la rueda dentada "Editar configuración del sitio".
  3. Seleccione la categoría "Configuración general de jweiland.net" en el menú.
  4. Desplácese hasta la sección "Ajustes de navegación".
  5. Los campos para seleccionar un tipo de navegación están disponibles aquí
  6. Por último, haga clic en el botón "Guardar" de la parte superior.

Ocultar el menú de idiomas

La plantilla TYPO3 se entrega en 2 idiomas (alemán, inglés). Sin embargo, si sólo desea ejecutar su sitio web en un idioma, puede ocultar el menú de idiomas.

¿Cómo ocultar el menú de idiomas?

Realice los siguientes pasos para ocultar el menú de idiomas:

  1. Haga clic en "Configuración" en el módulo Sitios web.
  2. Haga clic en la rueda dentada "Editar configuración del sitio".
  3. Seleccione la categoría "Configuración general de jweiland.net" en el menú.
  4. Desplácese hasta la sección "Ajustes de navegación".
  5. En "Ajustes de navegación", desactive el campo "Mostrar menú de idioma".
  6. Por último, haga clic en el botón "Guardar" de la parte superior.

Ocultar la función de búsqueda

También hemos integrado una función de búsqueda para el sitio web en la plantilla TYPO3. Utilizamos la extensión estándar "indexed_search". (Existen otras extensiones de búsqueda, a veces más potentes, como "ke_search" o"solr").

¿Cómo ocultar la función de búsqueda?

Realice los siguientes pasos para ocultar la función de búsqueda:

  1. Haga clic en "Configuración" en el módulo Sitios web.
  2. Haga clic en la rueda dentada "Editar configuración del sitio".
  3. Seleccione la categoría "Configuración general de jweiland.net" en el menú.
  4. Desplácese hasta la sección "Ajustes de navegación".
  5. En "Ajustes de navegación", desactive el campo "Mostrar campo de búsqueda".
  6. Por último, haga clic en el botón "Guardar" de la parte superior.

Desactivar el botón de contraste

Hemos integrado un botón de contraste en la plantilla TYPO3 14 para una mayor accesibilidad. Al hacer clic en el botón, el sitio web se muestra en blanco y negro. Un contraste óptimo para todos los visitantes del sitio web. En caso necesario, esta función puede desactivarse a través de los ajustes del sitio.

¿Cómo desactivar el botón de contraste?

Realice los siguientes pasos para ocultar el botón de contraste:

  1. Haga clic en "Configuración" en el módulo Sitios web.
  2. Haga clic en la rueda dentada "Editar configuración del sitio".
  3. Seleccione la categoría "Configuración general de jweiland.net" en el menú.
  4. Desplácese hasta la sección "Ajustes de navegación".
  5. En "Ajustes de navegación", desactive el campo "Mostrar botón de contraste".
  6. Por último, haga clic en el botón "Guardar" de la parte superior.

Cabecera fija

La plantilla TYPO3 tiene un área de cabecera fija. Esto significa que siempre permanece visible al desplazarse por la página web. Si no se desea, se puede desactivar.

¿Cómo se desactiva la cabecera fija?

Realice los siguientes pasos para desactivar la cabecera fija:

  1. Haga clic en "Configuración" en el módulo Sitios web.
  2. Haga clic en la rueda dentada "Editar configuración del sitio".
  3. Seleccione la categoría "Configuración general de jweiland.net" en el menú.
  4. Desplácese hasta la sección "Diseño".
  5. En "Diseño", desactive el campo "Cabecera fija".
  6. Por último, haga clic en el botón "Guardar" de la parte superior.

Mostrar contenido al desplazarse

Al desplazarse por una página, los elementos de contenido se desvanecen lentamente. Si no lo desea, puede desactivarlo.

¿Cómo desactivar la visualización de los elementos de contenido?

Realice los siguientes pasos para desactivar la visualización de elementos de contenido:

  1. Haga clic en "Configuración" en el módulo Sitios web.
  2. Haga clic en la rueda dentada "Editar configuración del sitio".
  3. Seleccione la categoría "Configuración general de jweiland.net" en el menú.
  4. Desplácese hasta la sección "Diseño".
  5. En "Diseño", desactive el campo "Mostrar elementos de contenido".
  6. Por último, haga clic en el botón "Guardar" de la parte superior.

Mostrar canal RSS de noticias

La plantilla TYPO3 proporciona un canal RSS para los artículos de noticias. Los visitantes pueden suscribirse a este feed para estar al día de los nuevos artículos.

Si desea utilizar este feed para sus artículos de noticias, debe configurarlo utilizando el editor de constantes. También puede activarlo o desactivarlo mediante una constante.

Debe personalizarse:

  • El título del flujo RSS
  • La descripción
  • El nombre de dominio del sitio web, incluido el protocolo (http o https)

Si el icono RSS con los iconos de redes sociales debe mostrarse como elemento de contenido (menú de las subpáginas con diseño "Enlaces de redes sociales de las páginas"), active "Icono RSS en elemento de contenido de iconos de redes sociales" en el editor de constantes.

Diseño de páginas

La plantilla TYPO3 proporciona varios diseños de página para mostrar el contenido editorial en una estructura determinada. Estos se pueden cambiar editorialmente en las propiedades de la página en la pestaña Apariencia, Diseño de fondo.

Junto con las opciones de varias columnas del contenedor de extensión, la mayoría de los requisitos comunes de diseño pueden ser cubiertos.

Ver ejemplos

One-Pager

Con la plantilla TYPO3 14, puede crear fácilmente el llamado one-pager en lugar de un sitio web con varias subpáginas. Un one-pager es un sitio web que se construye enteramente en una sola página HTML. Todo el contenido - por ejemplo, Quiénes somos, Servicios, Referencias, Contacto - se encuentra uno debajo del otro en diferentes secciones. El menú de navegación no enlaza con páginas separadas, sino que salta directamente a la sección correspondiente en la misma página mediante desplazamiento suave (<a href="#leistungen">).

Un one-pager es ideal para sitios web centrados y racionalizados. Sin embargo, en cuanto una empresa crece o el SEO juega un papel importante, una estructura clásica de varias páginas es la mejor opción.

¿Cómo crear un one-pager?

Proceda de la siguiente manera:

  1. Su página de inicio es el one-pager con las secciones y todo el contenido
  2. Cree subpáginas del tipo "Enlace" para la navegación (Quiénes somos, Servicios, etc.)
  3. Introduzca un salto de anclaje a la sección deseada de la página de inicio como "Objetivo del enlace".
  4. Guarde y compruebe la página de inicio en el frontend para ver si el enlace está configurado correctamente.

Editar y personalizar el pie de página

Cualquier elemento de contenido puede mostrarse en la zona de pie de página del sitio web. Estos se mantienen de forma centralizada en una página especial y se muestran automáticamente en todo el sitio web.

Desde el punto de vista editorial, es posible elegir entre un diseño de una, dos o tres columnas (diseño backend) en las propiedades de la página, en la pestaña "Aspecto".

Iconos de redes sociales

Si quieres enlazar a canales de redes sociales en tu sitio web, hay un diseño extra "Enlaces a redes sociales desde páginas" en el menú "Subpáginas". Este elemento de contenido ya está insertado en la página de contenido Pie de página.

Algunas páginas de medios sociales debajo de la página "Enlaces de medios sociales" ya están preparadas para ti.
En las propiedades de la página, hay un icono correspondiente para cada página debajo de la pestaña Recursos.

Todo lo que tiene que hacer es cambiar el tipo de página a Página externa en las propiedades de la página e introducir el enlace individual a su canal de medios sociales.

Páginas para la navegación meta en el pie de página

En el pie de página de la página verá lo que se denomina "metanavegación" con enlaces a varias páginas (Inicio, Contacto, Pie de imprenta, Privacidad). Estas páginas pueden editarse, eliminarse y completarse con páginas adicionales en el backend, en "Metamenú". Tenga en cuenta que las páginas Pie de imprenta y Protección de datos deben personalizarse con información individual.

Optimización de motores de búsqueda (SEO)

En TYPO3 14 LTS, ya no necesita una extensión adicional para las funciones básicas de SEO. La personalización manual del título de la página, el control de la indexación por los motores de búsqueda y la generación de la etiqueta canónica son funciones estándar.

Encontrará una pestaña "SEO" en las propiedades de la página

  • Título para los motores de búsqueda: aquí puede sobrescribir manualmente el título de la página generado automáticamente (etiqueta <title> en HTML)
  • Descripción para los motores de búsqueda: aquí puede insertar el texto para la meta descripción
  • Instrucciones para robots:
    • Indexar esta página: controla si los motores de búsqueda indexan o no la página actual (metaetiqueta robots="noindex" o "index" en HTML)
    • Seguir esta página: controla si los robots de los motores de búsqueda siguen o no los enlaces de la página actual (metaetiqueta robots="follow" o "nofollow" en HTML).

La optimización para motores de búsqueda y la accesibilidad también incluyen la cumplimentación de los metadatos de cada archivo incluido en el sitio web.
Estos metadatos pueden gestionarse para cada archivo que se utilice en el backend. Los metadatos pueden ser, por ejemplo, un "texto alternativo" para las imágenes o información sobre derechos de autor. En algunos casos, estos metadatos también aparecen automáticamente en el frontend si están disponibles.

Hay dos formas de mantener estos metadatos:

  1. por elemento de contenido en los archivos allí utilizados
  2. globalmente a través del módulo media backend

La forma global tiene la ventaja de que sólo tiene que mantener estos datos una vez por archivo. Si luego utiliza el archivo en un elemento de contenido (incluso varias veces en diferentes páginas), los metadatos mantenidos globalmente se utilizan automáticamente.

No obstante, si lo desea, puede sobrescribir los metadatos globales localmente para cada elemento de contenido.

Variantes de recorte para imágenes en elementos de contenido

Utilizamos "Responsive Image Rendering" en la plantilla TYPO3. Esto significa que, dependiendo del dispositivo final utilizado para ver el sitio web, se entrega una imagen optimizada en tamaño para este dispositivo. Así, el navegador de un smartphone recibe una imagen más pequeña que el navegador de un ordenador de sobremesa.

Esto mejora enormemente el rendimiento del sitio web, ya que, naturalmente, no tiene mucho sentido entregar imágenes grandes (= grandes cantidades de datos) a dispositivos que sólo pueden mostrar las imágenes más pequeñas de todos modos.

Como usuario, sin embargo, usted no tiene que preocuparse por esto en absoluto, como TYPO3 hace esto de forma totalmente automática en segundo plano.

Si la casilla "Aplicar cambios a todas las variantes de recorte" está marcada, el sistema utilizará la configuración seleccionada en Escritorio para todas las resoluciones de pantalla. Si la sección de la imagen debe ser diferente dependiendo de la anchura de la pantalla (escritorio, tableta, smartphone), la marca debe ser eliminada. A continuación, puede configurar las secciones para cada imagen individualmente en el editor.

Galería de imágenes con miniaturas cuadradas

Usted realmente no necesita una extensión para implementar una galería de imágenes con TYPO3. También se puede hacer muy bien con herramientas integradas.

Para mejorar la presentación de este tipo de galerías un poco, hemos añadido la opción de mostrar imágenes cuadradas de vista previa de las imágenes. Al hacer clic en las imágenes en el lightbox, se muestran en su relación de aspecto original.

¿Cómo puedes crear galerías de imágenes con miniaturas cuadradas?

Siga estos pasos:

  • Seleccione el elemento de contenido Texto y medios
  • Inserte sus imágenes debajo de la pestaña Multimedia. Estas imágenes se mostrarán automáticamente cuadradas en la vista previa. Si no se ajustan, puede cambiarlo en el editor de imágenes seleccionando la relación 1:1
  • Ajusta el "Número de columnas" a 3 o 4 y activa la casilla "Ampliar al hacer clic"
  • En la pestaña Apariencia "Diseño", selecciona la opción "Galería con miniaturas cuadradas"
  • Guarda y listo

Expandir y contraer el elemento de contenido

Se ha integrado en la plantilla una función que se solicita a menudo en los proyectos de los clientes: la opción de mostrar los elementos de contenido en el frontend en un formato ampliable y plegable.

Especialmente con textos largos o mucho contenido en una página, esto le da una opción para hacer los textos más claros.

También hemos integrado la opción de mostrar elementos de contenido en formato expandible y plegable sólo en smartphones, es decir, en pantallas pequeñas. En pantallas más grandes, estos elementos de contenido se muestran "normalmente".

Imagen del héroe

Hemos añadido un elemento de contenido a la plantilla TYPO3 que permite al editor posicionar texto en diferentes variantes sobre una imagen. Los ajustes se pueden realizar en el elemento de contenido en la pestaña "Apariencia" → "Diseño" y "Marco".

  • Texto a la izquierda
  • Texto en el centro
  • Texto a la derecha
  • Texto sobre fondo oscuro
  • Texto sobre fondo claro
  • Texto sin fondo

Como la altura de la imagen y la longitud del texto deben armonizarse en la salida, existe una opción en la configuración del sitio para limitar la longitud máxima del texto para los editores.

  1. Haga clic en "Configuración" en el módulo Sitios web.
  2. Haga clic en la rueda dentada "Editar configuración del sitio".
  3. Seleccione la categoría "Configuración general de jweiland.net" en el menú.
  4. Desplácese hasta la sección "Diseño".
  5. Desplácese hasta el campo "Número máximo de caracteres para el texto del cuerpo de la imagen principal".
  6. Ajuste el número de caracteres que desee.
  7. Por último, haz clic en el botón "Guardar" de la parte superior.

Extensión para noticias

Los artículos de noticias, blogs o similares pueden actualizarse con la extensión "Noticias" suministrada.

Un artículo de noticias consta, como mínimo, de un titular, normalmente un texto teaser y el texto de la noticia propiamente dicha. Además, se pueden añadir a los artículos imágenes, archivos, enlaces relevantes, etc.

Los artículos de noticias se diferencian de los elementos de contenido normales en que suelen recopilarse de forma centralizada en un directorio. La salida de los artículos en el sitio web se controla mediante el elemento de contenido de noticias con varios tipos.

Diferentes vistas de lista para los artículos de noticias

La extensión de noticias proporciona por defecto una vista de lista para los artículos de noticias. Además, hemos configurado otros dos tipos de visualización en la plantilla TYPO3:

  • una vista de lista reducida que puede utilizarse, por ejemplo, en la página de inicio del sitio web para las últimas noticias
  • una vista de mapa, que puede utilizarse como alternativa a la vista estándar.

En cada plugin de noticias se puede seleccionar el tipo de visualización deseado en la pestaña "Plug-in", en "Plantilla" → "Diseño de plantilla".

Nota sobre la extensión news_administration: No integramos ninguna extensión de pago en nuestro SitePackage. Por lo tanto, esta función no está disponible.

Configurar el gestor de consentimiento de cookies

Aunque TYPO3 no establece ninguna cookie en el frontend en la configuración estándar, hemos integrado una herramienta que muestra un llamado "banner de cookies" a los visitantes del sitio web. Si las cookies van a ser establecidas por el sitio, los visitantes tienen la opción de aceptar el uso de cookies individuales o todas las cookies, o en general rechazar las cookies.

En una plantilla TYPO3 recién instalada, se solicita el consentimiento para las cookies de Youtube o Vimeo, ya que también incluimos un vídeo de Vimeo en una página de demostración.

Puede controlar el comportamiento del banner de cookies a través del Editor de Configuración del Sitio. También puede desactivarlo completamente si su sitio web no instala cookies de terceros.

Nota: Las cookies para iniciar sesión en el backend o frontend son cookies técnicamente necesarias que no necesitan ser señaladas por separado.

También hemos preconfigurado el Gestor de Cookies para herramientas comunes. Sólo tiene que añadir la información pertinente en la configuración del sitio para utilizar las siguientes herramientas:

  • Matomo
  • Google Analytics
  • Píxel de Facebook
  • Twitter
  • Youtube / Vimeo

Desde la versión 13.2.0 de nuestra plantilla para TYPO3, también hemos preconfigurado el Google Tag Manager.

Traducir el Cookie Consent Manager

Por supuesto, puedes añadir cualquier otro idioma. Sin embargo, los textos en el Gestor de Consentimiento también deben ser traducidos si es necesario. Para ello, debe editar el siguiente archivo a través de SSH o FTP:

typo3conf/ext/jwsitepackage/Resources/Private/Page/Templates/Partials/Klaro.html

¿Qué es la memoria caché y por qué hay que borrarla de vez en cuando?

TYPO3 utiliza varios mecanismos de caché para acelerar la entrega de un sitio web. La caché es un tipo de almacenamiento temporal para que TYPO3 no tenga que regenerar la página solicitada cada vez que se llama al frontend.

La caché de una página se elimina automáticamente cuando un editor guarda un nuevo elemento de contenido en una página.

En el backend, los editores pueden eliminar la caché de la página haciendo clic en el icono del rayo.

¿Y las actualizaciones?

El proyecto está en continuo desarrollo. La versión actual 14.3.1 de la plantilla a partir de April 2026 se basa en la versión 14 LTS de TYPO3 y está disponible automáticamente en los paquetes de alojamiento en la nube.

Tenga en cuenta, sin embargo, que las instalaciones existentes no se pueden actualizar automáticamente, ya que cada cliente puede realizar cambios individuales en los archivos de la plantilla TYPO3. Con las actualizaciones automáticas, estos cambios se sobrescribirían.

Registramos todos los cambios importantes en el registro de cambios para que pueda añadir nuevas funciones o correcciones de errores si es necesario.

Actualizar la plantilla TYPO3

Si ha utilizado anteriormente el proyecto de ejemplo 13, por supuesto puede actualizar a la versión 14 de TYPO3.

Después de la actualización con éxito, usted tiene dos opciones:

1. seguir utilizando la extensión del proyecto de ejemplo, versión 13 (jwmusterprojekt13), en TYPO3 V14

2. Ventajas:

  • Usted tiene una versión actual de TYPO3
  • Si ha realizado sus propias personalizaciones en los archivos del proyecto de ejemplo 13 (CSS, TypoScript, plantillas fluidas, etc.), estas personalizaciones siguen estando disponibles y el sitio web simplemente sigue funcionando en el frontend como antes.

Desventajas:

  • No puede utilizar las nuevas funciones del paquete de sitio para la versión 14 (jwsitepackage14).

Pasos para actualizar el proyecto de ejemplo 13 para TYPO3 V14

En estas instrucciones, asumimos un proyecto de ejemplo 13 en su estado original, que no ha sido modificado aparte de los ajustes en el Editor de configuración del sitio y las hojas de estilo. Es posible que se requieran medidas adicionales para cambios más extensos.

  1. Por favor, siga las instrucciones de nuestra guía general de actualización
  2. Desactive las extensiones jwsitepackage13 y container
  3. Realice la actualización del núcleo de TYPO3 a la versión 14
  4. Ejecute los asistentes de actualización, elimine la caché de TYPO3 y PHP, ejecute Analizar estructura de base de datos
  5. Realice todas las actualizaciones de las extensiones y reactive el contenedor de extensiones
  6. Ahora se deben realizar los siguientes ajustes en el proyecto de ejemplo 13:
  • Ajustar los números de versión en los archivos composer.json y ext_emconf.php bajo "require" y 'depends' respectivamente
  • en el archivo typo3conf/ext/jwsitepackage/Classes/ViewHelpers/ExistsViewHelper.phpañadir al final de la línea 69: public function render(): mixed (tipo "mixed")
  • en el archivo typo3conf/system/settings.php o a través de la herramienta de instalación en $GLOBALS['TYPO3_CONF_VARS']['SYS'] añada 'systemLocale' => 'de_DE.UTF-8'
  • Reemplace el archivo .htaccess en el directorio raíz con el .htaccess por defecto de TYPO3 v14 o con el de nuestra plantilla para TYPO3 versión 14

Ahora puede reactivar la extensión jwsitepackage13. A continuación, elimine la caché de PHP y ejecute Analyse Database Structure y Rebuild PHP Autoload Information. A continuación, vaya al módulo backend "Sistema > Mantenimiento" y actualice el índice de referencia.

2. sustituye la extensión sitepackage versión 13 (jwmusterprojekt13) por la versión 14 (jwsitepackage14).

Ventajas:

  • Usted también tiene una versión actual de TYPO3
  • Usted tiene todas las nuevas funciones de Sitepackage V14

Desventajas:

  • Si ha realizado sus propias personalizaciones en los archivos del proyecto de ejemplo V13 (CSS, TypoScript, Fluidtemplates, etc.), deberá transferir manualmente estas personalizaciones a los archivos correspondientes en Sitepackage V14. La migración automática no es posible.

Por lo tanto, ambas variantes tienen ventajas e inconvenientes, y deberá decidir por sí mismo qué variante elige. Por supuesto, podemos ayudarle.

Utilización de la plantilla para TYPO3 en un entorno Composer

Como nuestra plantilla para TYPO3 se encuentra en un servidor no público, actualmente no se puede descargar a través de packagist.org o un repositorio individual. Sin embargo, puede utilizar los siguientes pasos para crear una versión compatible con Composer a partir de nuestra plantilla para TYPO3. A continuación, explicamos los pasos en nuestro servidor en la nube y localmente con DDEV en paralelo:

1.) Descargue la versión actual de la plantilla TYPO3 (archivo tar.gz), o utilice el tar.gz que ya se encuentra en su servidor.

2) Instale TYPO3 14.3 (véase también https://get.typo3.org/version/14)

2.a) En el servidor en la nube:

Si está trabajando en el servidor, necesita la ruta a la versión de PHP y Composer. Puede anteponer las rutas al comando o establecer una versión de PHP para la consola como predeterminada. Aquí está la ruta a la versión 8.3 de PHP y Composer:

/opt/alt/php83/usr/bin/php /usr/local/psa/var/modules/composer/composer.phar

Comando de instalación completo con rutas (con la ruta de Composer, se omite el "composer" en el comando):

/opt/alt/php83/usr/bin/php /usr/local/psa/var/modules/composer/composer.phar create-project "typo3/cms-base-distribution:^14.3" site-package

Cambie al directorio "site-package" que acaba de crear.

2.b) Local: Asegúrese de que su instalación de DDEV está actualizada. Cree una nueva carpeta de proyecto con el nombre "site-package" y ejecute los siguientes comandos con su shell favorito:

ddev config --project-type=typo3 --docroot=public --php-version 8.2 --webserver-type 'apache-fpm'
ddev composer create --no-install "typo3/cms-base-distribution:^14.3"
ddev composer install
ddev typo3 setup --server-type=apache --driver=mysqli --host=db --port=3306 --dbname=db --username=db --password=db
reiniciar ddev

3) Añada los siguientes paquetes (anteponga localmente "ddev"):

composer req typo3/cms-indexed-search:^14.3
composer require ichhabrecht/content-defender
composer require jweiland/sync-crop-areas
composer require jweiland/video-shariff
composer require yoast-seo-for-typo3/yoast_seo

4) Descomprima la plantilla descargada, por ejemplo "sitepackage-14.3.20.tar.gz" con

tar -zxvf paquete-sitio-14.3.20.tar.gz

y mueva el subdirectorio sitepackage-14lts/typo3conf/ext/jwsitepackage al directorio site-package/packages de la instalación de TYPO3.

5) Copie el directorio sitepackage-14lts/typo3conf/sites de la plantilla desempaquetada en el directorio site-package/config (si no está ya presente, cree un directorio /config).

6) Edite el archivo /config/sites/main/config.yaml y adapte la primera línea base: a su nombre de dominio. (En un entorno DDEV es [nombredelproyecto].ddev.site, todo en minúsculas y sin espacios).

7) Copie el archivo sitepackage-14lts/typo3conf/system/settings.php de la plantilla desempaquetada en el directorio site-package/config/system/ (si no existe ya, cree un directorio /system)

8) Copie el directorio sitepackage-14lts/fileadmin de la plantilla descomprimida en el directorio site-package/public

9) Copie el archivo sitepackage-14lts/.htaccess de la plantilla descomprimida en el directorio site-package/public.

10) Sobrescriba la entrada del repositorio en el archivo composer.json del directorio principal con la siguiente sección (utilice la información de versión del archivo site-package/packages/jwsitepackage/ext_emconf.php para el [número de versión]):

"repositorios": {
    "packages": {
      "tipo": "ruta",
      "url": "./paquetes/*",
      "opciones": {
        "reference": "none",
        "enlace simbólico": true,
        "versions": {
          "jweiland/jwsitepackage": "[número de versión]"
        }
      }
    }
  }

11) Importar la base de datos

11.a) En el servidor en la nube: Si está disponible, utilice la base de datos existente de la plantilla para TYPO3 o cree una nueva base de datos en la administración de bases de datos. A continuación, cambie al directorio sitepackage-14lts/typo3conf/ en la plantilla desempaquetada e importe el archivo sitepackage.sql en la nueva base de datos:

mysql -h [hostname] -u [username] -p [database hub] < sitepackage.sql

Por último, introduzca la contraseña de la nueva base de datos.

A continuación, introduzca los datos de conexión a la base de datos en el archivo site-package/config/system/settings.php.

11.b) Localmente: Copie el archivo sitepackage-14lts/typo3conf/sitepackage.sql de la plantilla desempaquetada al directorio site-package e importe la base de datos con

ddev import-db --file=paquete-sitio.sql

12) Ahora instale el jwsitepackage con el siguiente comando (use el número de versión del archivo site-package/packages/jwsitepackage/ext_emconf.php para el [número de versión]) preceda "ddev" localmente:

composer req jweiland/jwsitepackage:[número de versión].

En el servidor en nube: Vaya a la administración de dominios y edite su dominio para que apunte al directorio de su proyecto en el directorio público(httpdocs/typo3cms/site-package/public). Asegúrese de que tiene la versión correcta de PHP. Ahora puedes llamar al sitio web con tu dominio en el navegador.

Localmente: con el comando

ddev launch

ya puede acceder a su sitio web desde el navegador.

13) Acceda al backend con los datos de acceso estándar de la plantilla y cambie sus datos de acceso.

14) Seleccione el módulo "Sistema" → "Mantenimiento" y, a continuación, "Gestionar paquetes de idiomas". Haga clic en "Actualizar todo".

15) Seleccione el módulo "Sistema" → "Entorno" y haga clic en "Comprobar estado del directorio..." Desplácese hacia abajo y haga clic en el botón "Intentar arreglar los permisos de archivos y carpetas"

16) En el módulo "Sistema" → "Mantenimiento" haga clic en "Purgar caché". La instalación de la plantilla para TYPO3 con Composer ha finalizado.

Registro de cambios (changelog)

Aquí documentamos todos los cambios que realizamos en la plantilla TYPO3 a lo largo del tiempo. De esta manera, los usuarios pueden mantener siempre al día su propia instalación. Las futuras actualizaciones de TYPO3 serán mucho más fáciles.

27.04.2026: v14.0.0 - Lanzamiento

El contenido de esta página se ha traducido automáticamente.

Aktualisiert: 30.04.2026