Editor del HOME
Cargando…
HTML personalizado
Prompt maestro para Codex: genera tu diseño y pégalo aquí
Cómo actualiza el Home (https://app.swatforceacademy.com/) con Codex
Para modificar un diseño ya publicado: copia el contenido actual de los cuadros a los archivos de la carpeta, abre Codex ahí y dile qué cambiar manteniendo los shortcodes, los marcadores
- Crea una carpeta vacía en tu computador (ej.
home-swatforce) y abre Codex dentro de ella. - Copia el prompt de abajo, rellena lo que está entre
[corchetes]y pégalo en Codex. Él crea los archivos:cabecera.html,cuerpo.html,pie.htmly, si el diseño lleva slider o banner,sliders.json; además tres vistas solo para probar en local (vista-previa.html,vista-catalogo.htmlyvista-curso.html). - Abre
vista-previa.htmlen el navegador para ver el resultado (usa tarjetas de ejemplo en lugar de los shortcodes). Pídele a Codex los cambios que quieras, por ejemplo: «en cuerpo.html haz el hero más oscuro y añade un slider», hasta que te guste. - Al terminar, Codex te muestra en su respuesta los 4 bloques de código completos (1 cabecera, 2 cuerpo, 3 pie, 4 sliders JSON), listos para copiar y pegar. Copia el contenido de cada bloque (o de su archivo) en su cuadro de abajo:
cuerpo.html→ «Código HTML del HOME»,cabecera.html→ «HTML de tu cabecera»,pie.html→ «HTML de tu pie». No peguesvista-previa.html. - Si hay
sliders.json: abre la tarjeta «Sliders y banners», pega su contenido en «Importar desde Codex (JSON)» y pulsa Importar. Después, en cada diapositiva, sube tus imágenes, elígelas de la biblioteca o genéralas con IA y edita los textos. Los cambios se guardan en el borrador y se ven en la vista previa. - El diseño puede incluir JavaScript propio (animaciones, GSAP desde cdn.jsdelivr.net, etc.); se ejecuta en el Home desde «Código HTML del HOME» y en todas las páginas públicas si va en cabecera o pie.
- Marca «Usar mi propio HTML». El diseño reemplaza por completo las secciones del editor visual. Los shortcodes (
[awx_cursos],[awx_resenas]) se sustituyen por los cursos y reseñas reales; la cabecera y el pie usan tus datos (menú, logo, redes). - El mismo diseño se aplica también a Cursos (cursos.php), Contacto y la vista pública de cada curso: tu cabecera y tu pie reemplazan a los predeterminados allí, y las reglas CSS de tu cuerpo que apuntan a clases del sitio (
.awx-…,.tcd-…) y a:roottambién se aplican. - Revisa la vista previa de esta página y pulsa Publicar cambios.
{…} y las clases.
Puedes incluir
<style> y <script>. Si pegas una página completa
(<html>…<body>), se usa el contenido del body y los estilos del head.
Marcadores:
{menu} (enlaces <a> del menú, sin estilos) · {logo_url} · {login_url} · {login_text} · {year}
Marcadores:
{links} · {social} (íconos) · {logo_url} · {description} · {phone} · {email} · {address} · {year}
— los datos salen de las tarjetas Cabecera y Pie de página; el diseño lo defines tú.
Clases CSS de la lista de cursos y de reseñas (para estilizarlas con tu CSS)
ESTRUCTURA — [awx_cursos]
section.awx-courses (.awx-courses-sc) contenedor del bloque
.awx-container (solo con container="yes")
.awx-sec-hd > .awx-sec-hd-left > .awx-sec-eyebrow + h2 ; .awx-sec-hd-right
.awx-courses-meta (solo con meta="yes")
.awx-course-grid rejilla (usa --awx-cols)
a.awx-course-card cada tarjeta
.awx-course-thumb > img
.awx-course-tag.free | .paid etiqueta "Gratuito" / "Curso online"
.awx-course-wish corazón
.awx-course-body
.awx-course-cat categoría
.awx-course-title título
.awx-course-foot.free | .paid franja inferior
.awx-course-price (> small) precio
.awx-course-cta.free | .paid botón "Inscribirse"
.awx-course-empty "Próximamente…"
.awx-btn.awx-button-custom botón "ver todos" (opción button="…")
VARIABLES CSS (ponlas en .awx-courses o en tu contenedor)
--awx-cols --awx-course-free --awx-course-paid --awx-course-paid-cta
ESTRUCTURA — [awx_resenas]
section.awx-reviews (.awx-reviews-sc)
.awx-sec-hd … (igual que cursos)
.awx-review-grid rejilla (usa --awx-cols)
.awx-review-card
.awx-review-stars
p comentario
.awx-review-top
.awx-review-avatar (> img)
.awx-review-name / .awx-review-role
ESTRUCTURA — [awx_blog] (y páginas blog-publico.php / articulo.php)
section.awx-blog (.awx-blog-sc)
.awx-sec-hd … (igual que cursos)
.awx-blog-grid rejilla (usa --awx-cols)
a.awx-blog-card
.awx-blog-thumb > img | .awx-blog-ph
.awx-blog-body > .awx-blog-cat · h3.awx-blog-title · p.awx-blog-excerpt · .awx-blog-meta > .awx-blog-author + .awx-blog-date
.awx-blog-more > a.awx-btn botón «Ver todo el blog"
.awx-blog-empty sin artículos públicos
article.awx-article > header.awx-article-hd > .awx-article-wrap > .awx-article-back · .awx-article-cat · h1.awx-article-title · .awx-article-meta (.awx-article-author, .awx-article-date)
.awx-article-wrap > figure.awx-article-cover (img) · .awx-article-content (texto) · .awx-article-lock (aviso si es solo para registrados)
TRUCO: algunas reglas base son específicas (p. ej. .awx-course-foot.paid .awx-course-price).
Para que las tuyas ganen, antepón .awx-custom-home:
.awx-custom-home .awx-course-card { border-radius:24px; }
.awx-custom-home .awx-course-foot.paid .awx-course-price { color:#fff; }
Shortcode: bloque dinámico de cursos
[awx_cursos count="6" orderby="recent" columns="3"]
countcantidad (1–24) ·orderbyrecentopopular·categoryID de categoríacolumnscolumnas en escritorio (1–6; en móvil se adapta solo)eyebrowtitlesubtitleencabezado opcional del bloquebuttontexto del botón (button="no"lo oculta) ·button_urlenlacecontaineryes/no:noquita el contenedor para que tome el ancho de tu propio diseño ·paddingej."60px 0"free_colorpaid_colorpaid_btn_colorcolores de las tarjetas
Puedes usar el shortcode varias veces en la misma página con distintos atributos.
Shortcode: bloque de reseñas
[awx_resenas count="3" columns="3"]
- Muestra las reseñas que edites en la sección Reseñas de este editor (también funciona con
[awx_reviews]). countlímite (vacío = todas) ·columnscolumnas en escritorio (1–6)eyebrowtitledescriptionencabezado opcional ·roletexto bajo el nombrecontaineryes/no·paddingej."60px 0"·bgcolor de fondo ej."#f7f9fc"
Shortcode: blog público
[awx_blog count="3" columns="3"]
- Muestra las últimas entradas del blog marcadas como «Públicas» (en Instructor → Blog → ¿Quién puede leerla?). Las de «Solo usuarios registrados» no se muestran.
countcantidad (1–24) ·columnscolumnas en escritorio (1–4) ·categoryID de categoría ·orderbyrecentuoldesteyebrowtitlesubtitleencabezado opcional ·buttontexto del botón (button="no"lo oculta) ·button_urlenlace (por defectoblog-publico.php)excerptauthordateimage=yes/nopara mostrar u ocultar cada parte ·containeryes/no·paddingej."60px 0"- Cada tarjeta lleva a
articulo.php?slug=…, que cualquiera puede leer sin registrarse. El listado completo con buscador está enblog-publico.php.
Shortcodes: cabecera y pie de página
[awx_header]
[awx_footer]
- Si escribiste tu HTML de cabecera / pie arriba, los shortcodes insertan ese diseño (sin estilos del tema). Si lo dejas vacío, insertan la cabecera/pie estándar del sitio.
- Si no escribes los shortcodes en tu HTML, la cabecera va automáticamente al inicio y el pie al final. Si los escribes, se colocan exactamente donde los pongas (sin repetirse).
[awx_header sticky="no"]solo aplica a la cabecera estándar. "Ocultar la cabecera / el pie" los quita por completo.
Sliders y banners (imágenes y textos)
Los sliders y banners de tu diseño se insertan en el HTML con [awx_slider id="hero"].
Aquí cambias sus imágenes y textos sin tocar el código: subes fotos, eliges de la biblioteca o las generas con IA.
Todo se guarda en el borrador y se ve en la vista previa. Si el id aparece en tu HTML pero aún no existe, selecciónalo y créalo aquí.
Aún no hay sliders. Pulsa Nuevo, o pega abajo el JSON que te dio Codex.
Importar desde Codex (JSON)
Si Codex te entregó sliders.json, pega aquí su contenido. Crea o reemplaza esos sliders con sus textos (y las descripciones de imagen para el botón «IA»).
Diseño de página
Cabecera (Header)
Banner / Hero
Color de la continuación del título, la etiqueta superior y los iconos destacados del banner.
Se unen automáticamente con un espacio para formar el título completo (ej: "Título principal" + "Continuación..." = título final). Además del color, aparece con un efecto de "escritura" animada al cargar la página.
Beneficios
Formaciones / Cursos
Los cursos se muestran automáticamente desde tu catálogo publicado — no se editan aquí uno por uno.
Reseñas
Pie de página (Footer)
Vista previa en tiempo real
Acceso restringido
El Editor del HOME solo está disponible para el administrador principal de la plataforma.
Historial de versiones publicadas
Cargando…
Elegir de la biblioteca
Cargando…
© 2026 SwatForce Academy — Plataforma educativa online