Skip to main content

Dirección de deseño

O paso Dirección de deseño permíteche revisar, perfeccionar e finalizar o deseño visual do teu tema antes de que Theme Builder xere o tema completo.

Visión xeral​

Despois de completar a Entrevista de descubrimento, Theme Builder presenta a túa dirección de deseño con renderización de vista previa en escritorio e móbil. Isto permíteche ver exactamente como se verá o teu deseño en diferentes dispositivos antes de comprometerte co tema.

Compoñentes da dirección de deseño​

1. Paleta de cores​

O esquema de cores do teu tema, incluíndo:

  • Cor primaria — cor principal da marca usada para botóns, ligazóns e acentos
  • Cor secundaria — cor complementaria para variedade
  • Cor de acento — cor de destaque para elementos importantes
  • Cores neutras — grises e brancos para fondos e texto
  • Cor do texto — cor principal do texto para a lexibilidade

2. Tipografía​

Seleccións de fontes para:

  • Fonte dos encabezados — usada para títulos de páxina e cabeceiras de sección
  • Fonte do corpo — usada para texto de parágrafo e contido
  • Tamaños de fonte — dimensionamento adaptable para diferentes tamaños de pantalla
  • Altura de liña — espazamento entre liñas para a lexibilidade
  • Pesos de fonte — variacións en negra, regular e lixeira

3. Deseño e espazamento​

  • Largura do contedor — largura máxima para o contido
  • Recheo e marxes — espazamento arredor dos elementos
  • Sistema de grella — disposición en columnas para deseño adaptable
  • Espazamento entre compoñentes — distancia entre elementos da interface de usuario

4. Elementos visuais​

  • Estilos de botón — deseños de botón primario, secundario e terciario
  • Deseños de tarxeta — disposicións para bloques de contido
  • Iconas — estilo e tamaño das iconas
  • Bordos e sombras — profundidade visual sutil
  • Efectos ao pasar o cursor — estilo de estado interactivo

Renderización de vista previa​

Vista previa de escritorio​

A vista previa de escritorio mostra o teu deseño a largura completa (normalmente 1200px ou máis):

  • Menú de navegación completo
  • Disposición completa con todas as columnas
  • Tipografía e espazamento grandes
  • Todos os elementos visuais a tamaño completo

Vista previa móbil​

A vista previa móbil mostra o teu deseño a largura móbil (normalmente 375px):

  • Navegación adaptable (menú hamburguesa)
  • Disposición dunha soa columna
  • Tipografía e espazamento axustados
  • Tamaños de botón axeitados para o tacto

Puntos de interrupción adaptables​

Theme Builder renderiza vistas previas nestes puntos de interrupción:

DispositivoLarguraVista previa
Móbil375pxTeléfono en vertical
Tableta768pxTableta en horizontal
Escritorio1200pxEscritorio a largura completa
Escritorio grande1920pxPantalla ultraancha

Perfeccionar o teu deseño​

Realizar axustes​

Podes perfeccionar a túa dirección de deseño mediante:

  1. Axustar cores — cambiar calquera cor da paleta
  2. Cambiar fontes — seleccionar tipos de letra diferentes
  3. Modificar o espazamento — axustar recheo e marxes
  4. Actualizar a disposición — cambiar larguras de contedor e columnas da grella
  5. Personalizar elementos — modificar estilos de botón, deseños de tarxeta, etc.

Actualizacións da vista previa​

Os cambios reflíctense en tempo real:

  • A vista previa de escritorio actualízase inmediatamente
  • A vista previa móbil actualízase inmediatamente
  • Actualízanse todos os puntos de interrupción adaptables
  • Podes alternar entre vistas previas para verificar os cambios

Vista de comparación​

Compara a túa dirección de deseño con:

  • Deseño orixinal — ver o que cambiou
  • Deseños de competidores — comparar con sitios de inspiración
  • Versións anteriores — volver a direccións de deseño anteriores

Aprobación da dirección de deseño​

Unha vez que esteas satisfeito co teu deseño:

  1. Revisa ambas as vistas previas — verifica que escritorio e móbil se vexan ben
  2. Comproba todas as cores — garante contraste e accesibilidade
  3. Proba a tipografía — verifica a lexibilidade en todos os tamaños
  4. Confirma a disposición — comproba o espazamento e o aliñamento
  5. Aproba o deseño — continúa coa xeración do tema

Próximos pasos​

Despois de aprobar a túa dirección de deseño:

  1. Theme Builder xera o teu tema completo
  2. O tema instálase no teu sitio WordPress
  3. Podes personalizalo máis usando o personalizador de WordPress
  4. Continúa a Menús de hostalaría ou outras funcionalidades

Boas prácticas​

  • Proba en dispositivos reais — usa teléfonos e tabletas reais se é posible
  • Comproba a lexibilidade — garante que o texto sexa lexible en todos os tamaños
  • Verifica o contraste — usa Validar contraste da paleta para accesibilidade
  • Considera o rendemento — optimiza imaxes e fontes para a velocidade
  • Planifica o contido — garante que a disposición funcione co teu contido real

Solución de problemas​

A vista previa non se actualiza​

  • Actualiza a páxina
  • Borra a caché do navegador
  • Proba cun navegador diferente
  • Comproba a conexión a internet

As cores vense diferentes​

  • Comproba a configuración de cor do monitor
  • Proba en dispositivos diferentes
  • Verifica o contraste de cor con ferramentas de accesibilidade
  • Considera simuladores de daltonismo

Problemas de tipografía​

  • Verifica que os ficheiros de fonte estean cargando
  • Comproba o tamaño da fonte en diferentes puntos de interrupción
  • Proba con contido real
  • Considera a lonxitude de liña para a lexibilidade