Tema Bareungyeol (sitio corporativo · medios corporativos)

Este es el manual de Bareungyeol (bareungyeol), un tema de pago de Zittme para sitios web de empresas · instituciones y medios corporativos (sala de prensa · historias internas). Tipografía negra sobre fondo blanco, con tarjetas en las que la foto es la protagonista. En la portada, las entradas más recientes de un tablero pasan como diapositivas de fotos y, debajo, siguen las tarjetas de artículos destacados · historias · noticias recientes y una zona negra de llamada a contactar. La franja de título, el banner, las pestañas de submenú y el ancho del contenido de las subpáginas también se definen en la configuración del layout.

Demo: bareungyeol-demo.zitt.me · Tienda: zitt.me/store/package/37507

Componentes

El color de acento (verde #00b04f de forma predeterminada) y el modo de color (claro de forma predeterminada · oscuro · según el dispositivo) se cambian en Configuración del layout > Básico.

Instalación y aplicación

1. Tras comprarlo en la tienda, registra el dominio donde lo usarás (activación de la licencia) y se habilitará la descarga. Instálalo desde el motor (Administración > Biblioteca) o descomprímelo en themes/bareungyeol.
2. En Administración > Configuración de diseño, elige Bareungyeol y aplícalo. El layout y los skins de los módulos cambian a la vez.
3. Crea el tablero que usarás como portada (por ejemplo, journal) y pon fotos en las entradas. Escribe ese tablero en "Tablero de diapositivas de portada (mid)" en Configuración del layout > Portada y la portada quedará lista.

Entorno recomendado: Zittme 1.0.1 o superior. Como es un tema responsivo, se recomienda desactivar la vista exclusiva para móviles.

Tipos de página

• Principal: la portada del sitio (el módulo predeterminado de la configuración del sitio) pasa a ser automáticamente la principal. Para usar otra página con formato principal, escribe m en la clase de ese menú en el mapa del sitio.
• Subpágina: el resto de páginas. El orden es franja de título → (pestañas de submenú) → contenido.
• Todo el ancho: si escribes wide en la clase del menú, el contenido ocupa toda la pantalla sin límite de ancho (páginas de widgets, etc.).

Cabecera

Consta de logo (imagen o texto) · menú superior (los menús de segundo nivel son desplegables) · texto de la derecha (eslogan) · búsqueda · carrito (con comercio instalado) · inicio de sesión · botón en el color de acento (por ejemplo, Contáctanos) · menú de cajón móvil.

• En la portada, la cabecera se superpone de forma transparente sobre la foto de portada (letras blancas) y, al hacer scroll, queda fija con fondo blanco. Si usas una imagen de logo, pon también un logo blanco en el campo "Imagen del logo en blanco".
• El botón de la cabecera se crea con "Nombre · enlace del botón de la cabecera" en Configuración del layout > Básico. Si lo dejas vacío, no se muestra.
• Para ocultar los enlaces de inicio de sesión · cuenta de la cabecera y dejarlos solo en el cajón móvil, cambia "Mostrar inicio de sesión · cuenta en la cabecera" a Ocultar.

Portada (primera pantalla)

• Diapositivas de fotos: si escribes un tablero en "Tablero de diapositivas de portada (mid)", las entradas más recientes de ese tablero que tengan imagen destacada se convierten en diapositivas. El título aparece grande en el centro de la foto y, debajo, hay un contador 1 / 4 y flechas. Puedes definir el intervalo de avance automático (desactivado · 4 · 5 · 8 segundos) y la cantidad, y se detiene al pasar el cursor.
• Portada fija: si dejas vacío el tablero, se usa una portada fija con imagen de fondo · línea superior · título · descripción · botón.
• Portada en video (1.2.0): si escribes una dirección mp4 · webm en "Video de fondo de la portada fija", se reproduce en bucle un video sin sonido detrás de la portada fija. La imagen de fondo se usa como primera imagen antes de que cargue el video. Abajo a la derecha aparece un botón de pausa, y no se reproduce automáticamente para los visitantes que tengan activado "Reducir movimiento" en su dispositivo.
• El avance automático de las diapositivas también tiene botones de pausa · reproducción. Cuando entras con el teclado en una diapositiva, el avance automático se detiene un momento.
• Altura: pantalla completa · alta (80%, predeterminada) · normal (620px).

Reglas de la imagen destacada

Las fotos de las tarjetas y de la portada usan la imagen destacada (miniatura) de la entrada. Si no se detecta una miniatura, se usa en su lugar la primera imagen del contenido. Pon al menos una foto en cada entrada. Las entradas sin foto quedan fuera de las diapositivas de portada.

Página principal integrada en el tema (composición principal)

Se monta en orden con el campo repetible "Secciones de la página principal" de la pestaña Composición principal en Configuración del layout. Si no hay ninguna, se usa la composición predeterminada (artículos destacados → historias → noticias recientes → llamada a contactar).

Tipo de sección	Contenido	mid del tablero	Cantidad
Artículos destacados	1 tarjeta grande + tarjetas pequeñas. El nombre de la categoría como chip sobre la foto y el nombre del tablero como línea de fuente	Ej.: journal	5 recomendadas
Historias	2 tarjetas anchas + resumen del contenido	mid del tablero	2 recomendadas
Noticias recientes	Título a la izquierda, fila horizontal de tarjetas a la derecha, fecha	Ej.: notice	4 recomendadas
Novedades	Tarjetas en 3 columnas	mid del tablero	3 o 6
Texto de presentación de la empresa	Etiqueta pequeña + un bloque de letra grande (usa el contenido)	-	-
Áreas de negocio	Tarjetas con iconos en 4 columnas del campo repetible "Áreas de negocio"	-	-
Directivos · equipo	Campo repetible "Directivos · equipo". Sin foto, se usa la inicial del nombre	-	-
Indicadores numéricos	Campo repetible "Indicadores numéricos". Los números suben al entrar en pantalla	-	-
Logos de clientes · socios	Campo repetible "Clientes · socios". Sin logo, el nombre se muestra como texto	-	-
Franja de foto	Foto que llena la pantalla + título · frase · botón (usa imagen · contenido)	-	-
Llamada a contactar	Título · frase · botón con borde sobre franja negra (usa contenido · nombre · enlace del botón; si pones una imagen, fondo de foto)	-	-
Productos · novedades	Tarjetas de productos de comercio en 4 columnas (con comercio instalado). Si el precio es 0, se muestra "Consultar"	-	4 recomendadas
Foto + texto (izquierda · derecha)	Una foto junto a título · contenido · enlace. Si alternas los dos tipos, se forma un zigzag	-	-
Saludo del CEO	Foto vertical + título + contenido largo + firma. La firma se escribe en el campo "Nombre del botón" (ej.: Kim Bareun, CEO)	-	-
Línea de tiempo de la historia	Campo repetible "Historia" (año · título · contenido · foto). Línea de tiempo unida por una línea vertical y puntos	-	-
Organigrama	Campo repetible "Organigrama". Nivel 1 (arriba del todo) · 2 (divisiones) · 3 (equipos bajo la división inmediatamente anterior)	-	-
Premios · certificaciones	Campo repetible "Premios · certificaciones" (imagen del sello · nombre · entidad · año). Sin sello, icono de estrella	-	-
Preguntas frecuentes	Campo repetible "Preguntas frecuentes". Título a la izquierda, lista desplegable a la derecha	-	Cantidad mostrada
Cómo llegar	Google Maps + dirección · indicaciones de transporte (contenido) · teléfono · horario · botones de apps de mapas. La dirección va en el campo "Dirección del tablero (mid) · dirección"; si lo dejas vacío, se usa la última línea de la presentación de la empresa del pie de página	-	-
Información de contacto	Título · frase · botón de contacto + lista de teléfono · correo · horario del pie de página	-	-
Banner de empleo	Franja en el color de acento (si pones una imagen, el color de acento se superpone a la foto) + botón blanco	-	-
Video	Dirección de YouTube · Vimeo o mp4 en "Enlace del botón". No carga el reproductor externo hasta que se pulsa, así que es rápido (YouTube usa la dirección sin cookies). La imagen es la primera pantalla	-	-
Documentos · IR	Entradas del tablero en tabla. Muestra categoría · título · fecha · "Adjuntos N"	Ej.: ir	4~6

Campos comunes de las secciones (1.2.0)

• Texto pequeño sobre el título: frase corta que va sobre el título en el color de acento (About, Since 2009, etc.).
• Fondo: ninguno · gris claro · oscuro. Gris · oscuro se pintan hasta el borde de la pantalla y separan la sección de las anteriores y siguientes. Franja de foto · llamada a contactar · banner de empleo · video usan su propio fondo.
• Dónde mostrar: si lo dejas vacío, en la portada. Si escribes el mid de una página, aparece en esa subpágina. Para varios lugares, sepáralos con comas (about, ceo); para mostrarla también en la portada, añade home.
• Posición en subpáginas: debajo del contenido (predeterminado) · encima del contenido.
• Si desactivas la casilla de visibilidad de la esquina superior derecha de la tarjeta, se oculta temporalmente sin borrarla. Arrastra las tarjetas para cambiar el orden.

Ejemplo de montaje de subpáginas (igual que en la demo)

Si creas una página con poco contenido (una línea de título + una frase de presentación) y escribes el mid de esa página en "Dónde mostrar" de las secciones, puedes montar la subpágina desde el layout.

Página (mid)	Secciones
Saludo del CEO (ceo)	Saludo del CEO → Foto + texto (derecha)
Historia · organización (history)	Línea de tiempo de la historia → Organigrama (fondo gris)
Cómo llegar (location)	Cómo llegar → Información de contacto (fondo gris)
Sobre la empresa (about)	Indicadores numéricos (oscuro) → Documentos · IR → Premios · certificaciones
Contacto (contact)	Preguntas frecuentes (con home, contact, junto con la portada)

Sistema de espaciado · tipografía

El espacio entre secciones, el espacio entre título y contenido, el espacio entre tarjetas, el relleno interior de las secciones de franja y los tamaños de letra de títulos · contenido están ajustados con un único conjunto de valores. Se reducen suavemente según el ancho de la pantalla (entre secciones 72~120px, bajo el título 24~36px, entre tarjetas 16~28px, dentro de las franjas 64~112px). Pongas las secciones en el orden que sea, el espaciado es el mismo, y cuando dos secciones de franja quedan juntas se unen sin hueco blanco entre ellas.

Chips de categoría

El chip negro que aparece sobre la foto de las tarjetas de artículos destacados · noticias recientes · novedades es el nombre de la categoría de la entrada. Si creas categorías como "Personas y cultura · Tecnología · Servicios · Empresa" en Administración del tablero > Categorías y eliges una categoría para cada entrada, obtienes una portada de medio corporativo.

Subpáginas (pestaña de configuración "Subpáginas")

• Formato de cabecera: franja de título (fondo de foto, predeterminado) · solo título (fondo blanco) · no mostrar.
• Imagen de fondo predeterminada de la franja de título y altura (220 · 320 · 460px). Sin imagen de fondo, es una franja de color sólido oscuro.
• Origen del título: nombre del menú de primer nivel (predeterminado) o nombre del módulo (tablero · página).
• Mostrar ruta: Inicio / menú de primer nivel / submenú.
• Pestañas de submenú: si el menú de primer nivel actual tiene menús de segundo nivel, bajo la franja de título aparecen las pestañas "Todo · submenús…".
• Ancho del contenido de subpáginas: igual que el ancho máximo del contenido, o 960px para facilitar la lectura.
• Banners por página: si escribes en el campo repetible el mid de la página · imagen de fondo · título · subtítulo, la franja de título de esa página se decora por separado. Si escribes el mid de un menú de primer nivel, también se aplica a las páginas que cuelgan de él.

Tipos de tablero ("Estilo de lista" en la configuración del skin de tablero)

Estilo	Aspecto	Demo
Lista	Tabla con número · título · autor · fecha	Sala de prensa
Galería grande	La primera entrada con foto grande + título, y después tarjetas de fotos en 3 columnas. Chip de categoría sobre la foto	Inside
Revista	Miniatura a la izquierda + título · resumen	Comunicados de prensa
Tarjetas	Cuadrícula de tarjetas con borde	-
FAQ	Acordeón en el que la respuesta se despliega al pulsar la pregunta. Agrupado por pestañas de categoría	FAQ

• El resumen del contenido de los estilos revista · galería grande solo aparece si activas el elemento "Resumen (summary)" en Administración del tablero > Configuración de la lista. Esto se debe a que el núcleo solo lee el contenido al consultar la lista cuando existe el elemento de resumen.
• Los botones Escribir · Editar · Eliminar solo los ven los miembros con permiso. En tableros que solo usa el administrador, como el de FAQ, limita "Escribir entradas" al grupo de administración en Administración del tablero > Permisos.
• Estructura del menú de la demo: Historias → Inside (galería grande), Sala de prensa → Comunicados de prensa (revista), Contacto → FAQ. Los menús de segundo nivel aparecen automáticamente en el desplegable de la cabecera y en las pestañas de las subpáginas.

Bloques para montar el contenido (páginas de presentación de la empresa · organización)

Si usas las siguientes clases en el contenido del módulo de páginas (una página normal, no una página de widgets), obtienes páginas de presentación con el mismo estilo que la portada. Basta con pegarlas en el modo HTML del editor. Si envuelves todo con <div class="bg-page">, el espacio entre bloques se ajusta automáticamente.

Bloque	Marcado	Uso
Encabezado	<section class="bg-page-lead"><span class="bg-eyebrow">About</span><h2>Title</h2><p>Sentence</p></section>	Primer párrafo de la página
Foto + texto	<section class="bg-split"><img src="..." /><div class="bg-split-copy"><span class="bg-eyebrow">Label</span><h3>Title</h3><p>Sentence</p></div></section>	Con is-flip, la foto va a la derecha
Tarjetas en 3 columnas	<section class="bg-cols"><div class="bg-col"><em>01</em><strong>Title</strong><p>Sentence</p></div>…</section>	Principios · beneficios · características
Historia	<section class="bg-timeline"><div class="bg-tl"><em>2009</em><strong>Title</strong><p>Sentence</p></div>…</section>	4 columnas, 2 columnas en móvil
Cita	<section class="bg-quote"><blockquote>Sentence</blockquote><cite>Source</cite></section>	Una línea de letra grande
Franja de foto	<section class="bg-band" style="background-image:url('...')"><div class="bg-band-copy"><h3>Title</h3><p>Sentence</p></div></section>	Ocupa todo el ancho de la pantalla
Lista de personas	<section class="bg-roster"><div class="bg-roster-item"><img src="..." /><strong>Name</strong><span>Position</span><em>Department</em></div>…</section>	En lugar de foto también sirve <span class="bg-roster-photo">K</span>
Fila de botones	<div class="bg-page-links"><a class="is-primary" href="/contact">Contact</a><a href="/shop">Services</a></div>	Final de la página

Las páginas Sobre la empresa (/about) · Personas (/riders) de la demo están hechas solo con estos bloques, así que es rápido copiar su contenido y adaptarlo.

Servicios · productos (comercio)

Usa el módulo de comercio para presentar y vender servicios. El campo Resumen del producto aparece como línea superior de la tarjeta (en el color de acento), y la sección de productos de la portada usa miniaturas cuadradas. En los productos con presupuesto, si dejas el precio en 0, en la portada se muestra "Consultar" (en la lista de la tienda aparece como 0 wones, así que es mejor escribir un precio).

Pie de página

Dos colores: claro · oscuro. Texto de presentación de la empresa (dirección), teléfono principal · correo · horario, redes sociales (Instagram · YouTube · Facebook · LinkedIn · blog), texto de aviso inferior, datos de la empresa · contacto (un elemento por línea), copyright y botón para volver arriba.

Modo oscuro · animaciones · accesibilidad (1.2.0)

• Botón de cambio a modo oscuro: si pones el modo de color en "Según la configuración del dispositivo del visitante", aparece un botón de sol/luna en la cabecera. Al principio sigue la configuración del dispositivo y recuerda el modo que elija el visitante. Los skins de tablero · miembros · contacto · comercio también cambian a la vez.
• Animación de aparición al hacer scroll: las secciones aparecen suavemente al entrar en pantalla. Se puede desactivar en la configuración, y se desactiva automáticamente para los visitantes que tengan activado "Reducir movimiento" en su dispositivo. Aunque el script tarde en cargar, pasados 3 segundos todas las secciones se hacen visibles.
• Contraste de los botones: el color de acento se usa tal cual, pero el fondo de los botones con texto blanco y el texto en color de acento sobre fondo blanco se oscurecen un poco automáticamente para cumplir el contraste WCAG AA (4.5:1). En el modo oscuro, al revés, se aclaran. Con colores de acento muy claros (amarillo · verde lima) el texto de los botones puede perder fuerza, así que se recomiendan colores de intensidad media o superior.
• Teclado: enlace "Saltar al contenido" al principio y borde de foco en todos los botones · enlaces.
• Impresión: se imprime en blanco y negro sin cabecera · menú · mapa · video, y las FAQ se imprimen desplegadas.

Datos estructurados para buscadores (1.2.0)

Añade a la portada la información Organization de schema.org. Toma de la configuración del pie de página el nombre de la empresa (en orden: razón social oficial → texto del logo → título del sitio), el logo, el teléfono principal · correo, la dirección (última línea de la presentación de la empresa del pie de página) y las direcciones de redes sociales. Se puede desactivar en Configuración > Básico > "Información de la empresa para buscadores".

Búsqueda integrada

La búsqueda de la cabecera lleva a la búsqueda integrada del sitio. La pantalla de resultados también se dibuja con el aspecto del tema (pestañas · lista de resultados · botones). Para que haya resultados, debes indicar los módulos objetivo de búsqueda en Administración > Búsqueda integrada (si dejas vacío el objetivo con "Incluir", aparece "No se puede usar la búsqueda").

Todas las opciones de configuración del layout

Básico

Imagen del logo · imagen del logo en blanco · texto del logo · texto de la derecha de la cabecera · nombre · enlace del botón de la cabecera · color de acento · ancho máximo del contenido · modo de color · usar búsqueda · mostrar inicio de sesión · cuenta en la cabecera · dirección de la tienda de productos (mid) · botón de cambio a modo oscuro · animación de aparición al hacer scroll · información de la empresa para buscadores · razón social oficial · menú superior · menú del pie de página

Portada

Mostrar portada · altura de la portada · tablero de diapositivas de portada (mid) · cantidad de diapositivas · intervalo de avance automático · imagen de fondo de la portada fija · video de fondo de la portada fija · línea superior · título · descripción · nombre del botón · enlace del botón

Composición principal

Secciones de la página principal (tipo · título · texto pequeño sobre el título · contenido · imagen · mid del tablero · dirección · nombre del botón · enlace del botón · cantidad · fondo · dónde mostrar · posición en subpáginas) · historia · organigrama · premios · certificaciones · preguntas frecuentes · directivos · equipo · áreas de negocio · clientes · socios · indicadores numéricos

Subpáginas

Cabecera de subpáginas · imagen de fondo predeterminada de la franja de título · altura de la franja de título · origen del título · mostrar ruta · pestañas de submenú · ancho del contenido de subpáginas · banners por página

Pie de página

Color del pie de página · texto de presentación de la empresa · dirección · teléfono principal · correo principal · horario · 5 direcciones de redes sociales · texto de aviso inferior · datos de la empresa · contacto · aviso de copyright