Tu web, con un editor que da gusto usar

AbaBuilder es el editor visual con el que construimos tu web. Cambias textos, fotos y colores tú mismo, sin tocar código y sin depender de nadie.

El editor de AbaBuilder con una página abierta y, delante, esa misma página vista en un móvil

Lo cambias tú

Pulsas sobre lo que quieres cambiar y lo cambias. Sin llamar a nadie y sin esperar.

Se ve bien en todo

Ordenador, tablet y móvil: cada página tiene sus tres versiones, y también modo claro y oscuro.

Rápido y ligero

Tu web se publica como HTML y CSS propios, sin jQuery ni librerías pesadas.

El editor visual: la página en el centro y, a la derecha, el panel con las opciones del elemento seleccionado

Un editor visual dentro de tu WordPress

Trabajas sobre la propia página: lo que ves es lo que se publica. A la derecha, las opciones del elemento que has pulsado.

  • Pulsa, escribe y cambia: sin pantallas intermedias
  • Contenido y Estilo separados, con ayudas en cada campo
  • Guarda solo, y deshacer y rehacer funcionan siempre

283 estructuras ya diseñadas

Cabeceras, portadas, precios, preguntas, opiniones, galerías, pies de página… Elige una, cámbiale el texto y listo.

  • Vista previa real de cada una antes de insertarla
  • Todas siguen la paleta de tu web, también en modo oscuro
  • Guarda las tuyas para reutilizarlas
La biblioteca de estructuras: cabeceras, portadas, precios, preguntas y más, con vista previa de cada una
La ventana de plantillas de página completas: restaurante, tienda, portfolio, evento y otras

Plantillas de página completas

Restaurante, tienda, servicios, portfolio, evento, formación, asociación… Empieza con una página entera y adáptala.

  • Once plantillas pensadas para negocios reales
  • Cada una es una suma de estructuras: se puede cambiar todo
  • Una página «Próximamente» para cuando aún no tienes web

Clic derecho: todo a mano

Copia el estilo de un elemento y pégalo en otro, conviértelo en un estilo con nombre, centra, envuelve en un contenedor o pégalo arriba, abajo, a la izquierda o a la derecha.

  • Arrastra desde el propio elemento para moverlo
  • Alt mientras arrastras: siempre al lado, nunca dentro
  • Cortar, copiar y pegar como en cualquier programa
El menú de clic derecho sobre un elemento: copiar y pegar estilo, alinear, pegar arriba o abajo, envolver y más
El selector de diseños de un acordeón, con una miniatura real de cada uno de los cinco diseños

Cinco diseños para cada elemento

Acordeones, pestañas, carruseles, ventanas y botones traen cuatro diseños cuidados y uno libre. Cada miniatura es tu propio elemento con ese diseño.

  • Cambias de diseño con un clic, y todo se puede afinar después
  • Los diseños usan los colores de tu web
  • Siguen funcionando sin JavaScript

Siempre sabes dónde estás

Las migas de pan te dicen en qué punto de la página estás y te llevan de vuelta de un clic; el árbol muestra todo lo que contiene.

  • Raíz › Carrusel › Diapositiva › Texto: pulsa cualquier paso
  • El árbol permite reordenar, ocultar y bloquear
  • Los elementos bloqueados no se tocan por accidente
El árbol de la página con todos los elementos anidados y las migas de pan sobre el lienzo

Una página, tres versiones

Diseñas en el ordenador y ajustas tablet y móvil sin duplicar nada: lo que no cambias se hereda. Cambias de versión con un botón.

La misma página en un ordenador, una tablet y un móvil

Modo claro y oscuro, sin esfuerzo

Defines una paleta clara y otra oscura para toda la web. Quien te visita elige y se recuerda su elección. Pruébalo con este botón:

La portada de la página en modo claroLa portada de la página en modo oscuro
La ventana Sitio: paleta de colores clara y oscura, tipografías y modo de color de toda la web

Una paleta para toda la web

Cambias el color principal una vez y todo lo sigue: botones, estructuras, estilos y el modo oscuro.

  • Ocho colores claros y ocho oscuros
  • Avisos de contraste cuando un color cuesta de leer
  • Tipografías propias instaladas desde el editor

SEO y ajustes por página

Título, descripción y la vista previa de cómo aparecerá en Google. Si ya usas un plugin de SEO, AbaBuilder se aparta.

  • Texto automático a partir de la propia página
  • Plantilla completa o la del tema, con su cabecera y pie
  • Plantillas para entradas, archivos, búsqueda y la página 404
Los ajustes de SEO de una página: título, descripción y vista previa en Google
El historial de versiones de la página, para volver a una anterior

Historial: vuelve atrás cuando quieras

Cada versión guardada de la página queda en el historial. Si algo no te gusta, restauras una anterior en un clic.

  • Las versiones se guardan solas
  • También puedes exportar la página
  • Prueba sin miedo: siempre hay vuelta atrás

Pieza a pieza

Pulsa cada elemento: cuenta qué es, qué puedes cambiar y lo tienes funcionando delante.

Acordeón

Muestra mucho contenido en poco espacio: la persona abre solo lo que le interesa.

  • Cinco diseños: líneas, bloques, tarjetas, contraste o libre
  • Puede empezar abierto o cerrado
  • Dentro cabe cualquier elemento
¿Puedo poner imágenes dentro?

Sí: dentro de un acordeón caben textos, imágenes, botones o incluso otro acordeón.

¿Cómo cambio el diseño?

Lo seleccionas y eliges otro en Contenido › Diseño; verás una miniatura de cada uno.

¿Se abre sin JavaScript?

Sí, funciona con el propio navegador, también con teclado.

Pestañas

Reúne varias vistas en un mismo sitio: cada pestaña tiene su contenido.

  • Cuatro diseños más el libre: subrayado, cajas, lateral y editorial
  • Añades, ordenas y renombras pestañas desde el panel
  • Funcionan sin JavaScript

Un bloque con título y contenido que se abre y se cierra.

Preguntas frecuentes, condiciones, detalles de un servicio…

Con un clic en Diseño. Aquí hay tres de las cinco opciones.

Carrusel

Una fila de diapositivas que se desliza con el dedo, el trackpad o las flechas.

  • Clásico, con puntos, asomando o con controles abajo
  • 1, 2 o 3 diapositivas visibles según el tamaño
  • Cada diapositiva puede contener lo que quieras

Ventana emergente

Un panel que se abre sobre la página para avisos, formularios o más detalle.

  • Centrada, panel lateral, hoja inferior o pantalla completa
  • Se cierra con la ×, pulsando fuera o con Esc
  • Nada de JavaScript para abrirla

Botones

Llamadas a la acción que respetan los colores de tu web.

  • Sólido, contorno, oscuro, texto o básico
  • Enlazan a páginas de tu web con un selector, o a cualquier dirección
  • Todo se puede afinar: tamaño, colores, bordes

Galería

Una cuadrícula de imágenes que se amplían al pulsarlas, con flechas y Esc.

  • 2, 3 o 4 columnas, adaptadas a tablet y móvil
  • Ampliación opcional
  • Sin JavaScript sigue siendo una cuadrícula normal

Gráfico circular

Datos en un gráfico limpio y accesible, hecho solo con CSS.

  • Escribes «Etiqueta | valor | color», uno por línea
  • Modo anillo, porcentajes en la leyenda y texto para lectores de pantalla
  • Sin librerías externas

Formulario

Recoge mensajes de quien te visita, con los campos que elijas.

  • Texto, correo, teléfono, listas, casillas y área de texto
  • Los mensajes se guardan en WordPress y pueden llegarte por correo
  • Con campo trampa y límite contra el correo basura

Contenido dinámico

Títulos, extractos, imágenes destacadas y autores salen de tu WordPress y se actualizan solos.

  • Bucle de entradas con la tarjeta que diseñes
  • Plantillas para entradas, archivos, búsqueda y la página 404
  • Mostrar u ocultar elementos según la sesión o la fecha

Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!

Tus primeros pasos

Cinco minutos bastan para perderle el miedo. Esta misma página es tu campo de pruebas: nada de lo que hagas aquí afecta al resto de tu web.

Abrir esta página en el editor
  1. Pulsa «Abrir esta página en el editor».
  2. Pulsa un título y cámbialo: ya has editado tu primera página.
  3. Selecciona un acordeón y, en Diseño, prueba los cinco diseños.
  4. Cambia a Tablet y Móvil con los botones de arriba.
  5. Pulsa «Sitio» y cambia el color principal de toda la web.
  6. Si algo no te gusta, abre el Historial y vuelve atrás.

Preguntas frecuentes

¿Necesito saber programar?

No. Todo se hace pulsando, escribiendo y eligiendo diseños; el CSS lo genera AbaBuilder por ti.

¿Puedo romper mi web?

Es muy difícil: el historial guarda cada versión de la página y puedes volver atrás en un clic.

¿Funciona con mi tema de WordPress?

Sí. Puedes dejar la página dentro de tu tema o usar la «página completa» con su propia cabecera y pie, como esta.

¿Se ve bien en el móvil?

Cada elemento tiene versión para tablet y móvil, y con los botones de arriba del editor ves el resultado en cada tamaño.

¿Qué hago con esta página?

Es una página normal de WordPress: edítala, duplícala para practicar o bórrala cuando quieras.

Esta página está hecha con AbaBuilder

Ábrela en el editor y mira cómo está construida: cada sección es un bloque que puedes cambiar, mover o copiar. Así de fácil será tu web.

Abrir en el editor

Página de bienvenida creada con AbaBuilder. Puedes borrarla cuando quieras.