Trusted by 70K+ Clients —
-
Desarrolla tu web
Como lo haces normalmente, pero ahora copia y pega nuestras convenciones basadas en simples comentarios.
Ver tutorial -
Sube tu proyecto
Regístrate Aquí Una vez dentro, haz click en "Crear tema". Sube tu proyecto html previamente comprimido como archivo .zip.
-
Descarga tu tema
¡Haz click en descargar y listo!
¡Comienza ahora gratis!
Usa HTML ¡y vuela!
Genius HTML transforma enlaces CSS/JS y src
de imágenes
al código apropiado para Wordpress , adapta menús
dinámicos o estáticos,
e interpreta comentarios para blogs y
secciones administrables.
Compatible con plugings
Elementor, gutemberg, Woocommerce y todos los plugings del mercado los podrás gestionar como de costumbre
Hosting gratuito para pruebas
MosterWeb.Com es el hosting oficial de GeniusHtml. Sube tus proyectos de prueba y ¡GRATIS! ¡Sin publicidad!
Soporte inmediato a través de Telegram
En nuestro grupo privado de Telegram podrás recibir soporte,
consejos y buenas prácticas para tus proyectos, asistir a eventos y más.
Tu Puerta al Éxito Profesional.
Con Genius HTML, dominar HTML, es todo lo que necesitas para crear desde landings administrables hasta sitios multi-página. Diseñado para impulsar tu carrera, Genius HTML codifica por ti, permitiéndote aplicar a trabajos como un profesional desde el principio.
Pruébalo
Beneficios Claves
Ahorra tiempo de manera magistral
Lo que puedes hacer en 3 semanas hazlo en segundos.
Proyectos grandes requieren hasta 2 minutos de conversión.
Temas personalizados
Haz lo que siempre haces: trabajar con html. Y convierte tu creación en un tema con secciones adminitrables, para que tu cliente pueda editar textos, imagenes y más.
Marca blanca
Todo el desarrollo es hecho por ti y sólo por
ti.
¡Y solo con HTML!
Próximamente: Copia y pega HTML Optimizado y adaptado para la conversión.
- Templates HTML5 Multipropósito
- Secciones 100% responsivas
- Diseños configurables con múltiples opciones
¡Precios
!
El tiempo es oro y vale mucho dinero.
Nuestros costos son una inversión para duplicar, triplicar,
¡Elevar tus ingresos ahorrando muchísimo tiempo!
Gratis
Ideal para sitios pequeños
Incluye:
- Inicia con 5 Conversiones
- Luego 1 conversión c/15 días
- Proyectos html 2 mb
- Website Landings, multipages, blogs, empresariales, comerciales (No tiendas)
- Lun/Vie Soporte
- Versión Online
Ocasional
Para sitios medianos es perfecto
Incluye:
- 1 Conversión inmediata
- Proyectos html 5 mb
- Website Landings, multipages, blogs, empresariales, comerciales (No tiendas)
- Lun/Vie Soporte
- Versión Online
Core
Licencia Premium
Incluye:
- Proyectos html Sín límites de conversión
- Website Landings, multipages, blogs, empresariales, comerciales (No tiendas)
- Actualizaciones Constantes
- Lun/Vie Soporte
- Versión aplicación de consola
Ilimitada
Agencias
Incluye:
- Proyectos html Sín límites de conversión
- Templates Diseños copy paste
- Website Landings, multipages, blogs, empresariales, comerciales (No tiendas)
- Actualizaciones Constantes
- Tiendas Para próxima actualización
- Lun/Vie Soporte
- Versión aplicación de consola
¿Cómo empiezo?
Sigue estás prácticas en tu html.
Solo copia y pega los comentarios y adapta tu proyecto para la
conversión.
Si no lo implementas, puede convertir igual, pero necesitas mayor personalización
para secciones administrables sensibles.
- Siempre usa las etiquetas header(para el menú) y footer en tu proyecto. Esto definirá el menú y el footer en Wordpress.
- No obstante, en caso olvides
usar la etiqueta Header, el sistema reconocera las siguientes opciones:
📌Comentario <!-- Header -->,
📌 Div hijo directo del <body> con menú interno,
📌 <header> que contiene un <nav>,
📌 <header> con ID "navbar" o que contenga un <nav> o <ul> con enlaces <a>,
📌 <header> con ID "header" o que contenga un <nav> o <ul> con enlaces <a>,
📌 <header> sin ID ni clase "header" (genérico),
📌 <div> con ID "header-wrapper" o clase "header-wrapper",
📌 <header> con solo ID "header", sin clase "header",
📌 <div> con ID "menu" o clase "menu",
📌 <div> con ID "sidebar" o clase "sidebar",
📌 <div> con ID "wrapper" que contenga un <nav> seguido de un <header>,
📌 <nav> (elemento de navegación),
📌 <div> hijo directo del <body>,
📌 <div> con ID "page-wrapper" que tenga un hijo con ID "menu" o clase "menu",
📌 <header> precedido por un <nav>,
Si no existe menú en la página, se colocará el comentario después del primer elemento hijo del <body>.
- En caso olvides
usar la etiqueta Footer, el sistema reconocera las siguientes opciones:
📌 Comentario <!-- Footer -->,
📌 <footer> (etiqueta de footer en HTML),
📌 <div> con ID "footer" o "footer-wrapper",
📌 Último comentario de Footer antes de <footer>,
📌 Último nodo <div>, <section>, <article> antes del <footer>,
Si no se encuentra ningún footer, se colocará el comentario antes del último contenedor válido en <body>.
Ver video
Establece el contenido principal de tus páginas:
- En el index.html y en el resto de tus páginas coloca este comentario
<!-- Main content Start -->
Contenido principal
<!-- Main content End -->
Encerrando así contenido principal sin incluir el header ni el footer dentro.
<body>
<header>
Mi menú
</header>
<!-- Main content Start -->
<div>
...
</div>
<!-- Main content End -->
<footer>
Mi footer
</footer>
</body>
Imagen de tu tema:
Es una imagen .png de nombre: screenshot.
Su tamaño es de 1200 X 900.
Sólo colócalo en la raiz de tu proyecto. Ver video
Define tus páginas:
- index.html será el Home
- blog.html será el blog, es decir la pagina donde se listarán todos las publicaciones del blog.
- single.html será la interna del blog, es decir el post individual.
- Las demás páginas apareceran de manera automática en wordpress. Recuerda direccionarlas bien en el menú de tu proyecto html como lo haces normalmente, el sistema convertirá ese direccionamiento en codigo para Wordpress.
- Con esto el sistema creará de manera automática la página de categorías, user, y acondicionará tu blog de wordpress.
- Nota; En caso hayas olvidado colocar blog.html y tu single.html correspondientes a la vista general de tus posts y la individual, el sistem los creará por ti, pero colocará uno pretedeterminado que se adaptará a tus estilos css. Ver video
Define tu cs y js:
- Las etiquetas link(css) y script(js) deben estar en una sola línea.
- Usa style.css en la raiz de tu proyecto y el resto dentro de una carpeta assets.
- Nota: En caso hayas olvidado organizar tus archivos en una carpeta assets, el sistema lo hará por ti. Incluso el archicho style.css. Ver video
<!--- formnombredelformulario --->
Tu formulario como normalemnte lo haces con html
<!--- endformnombredelformulario --->
Ver video
-
¿Qué hago con action?
- Solo coloca action como lo haces normalmente, este se adaptará al sistema reemplazandolo con: action="#" con lo cual ¿Qué hago con name?
- Debes colocar name con su nombre de dato ejemplo: name="nombre". Sino, geniushtml procesará el id.
- Nota: Recuerda que el comentario es con 3 barritas. Debe tener de manera obligatorio la palabra clave form y luego el nombre del formulario
<!-- logo -->
La imagen del logo encerrada en una etiqueta a
<!-- endlogo -->
Ver video
-
¿Y esto es todo?
- ¡Exactamente! Pero aún si no llegaras a colocar este simple comentario, el sistema lo hará por ti, solo si el src de tu imagen esta direccionada a una imagen llamada logo.png y encerrada dentro de una etiqueta a. Esto hará que tu logo sea administrable en wordpress
Esta guía te explica cómo estructurar el HTML de tu proyecto para que el sistema conversor lo transforme automáticamente en menús dinámicos gestionables desde el administrador de WordPress.
Sección del Header (Encabezado):
-
El header es la parte superior de tu página (antes de
<!-- Main content Start -->o dentro de<header>).
1. Usando la etiqueta
<nav>Si tienes un menú dentro de <nav>, el sistema lo reconocerá automáticamente.
<nav class="main-nav" id="primary-nav">
<ul class="menu-list" id="main-menu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
</ul>
</nav>
2. Usando la etiqueta
<nav> con <a> directosSi tu menú dentro de <nav> tiene enlaces <a> directamente (sin <ul>), el sistema también lo reconocerá.
<nav id="nav">
<a href="#">Homepage</a>
<a href="#">Two Column #1</a>
<a href="#">Two Column #2</a>
<a href="#">One Column</a>
<a href="#">Three Column</a>
</nav>
3. Usando comentarios
<!-- menu --> y <!-- endmenu -->Si no usas <nav>, puedes marcar el menú con comentarios. Tanto como si tienes un ul > li > a, como si solo tienes etiquetas a
Ejemplo con ul > li > a
<!-- menu -->
<ul class="menu-list" id="main-menu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
</ul>
<!-- endmenu -->
Ejemplo con solo etiquetas a
<!-- menu -->
<a href="#">Inicio</a>
<a href="#">Acerca de<
<!-- endmenu -->
Sección del Footer (Pie de Página):
-
El footer es la parte inferior de tu página (después de
<!-- Main content End -->o dentro de<footer>).
Para estructurar los menús en el footer, usa los comentarios <!-- menu --> y <!-- endmenu -->.
<!-- menu -->
<ul class="footer-menu" id="footer-menu-1">
<li><a href="#">Contacto</a></li>
<li><a href="#">Política</a></li>
</ul>
<!-- endmenu -->
Notas Importantes ⚠️
-
El sistema solo reconoce hasta 2 menús en el header (
<nav>o comentarios<!-- menu -->). -
El footer solo admite comentarios
<!-- menu -->, no<nav>.
Conversión Automática:
El sistema transforma los enlaces <a href="#"> en menús editables dentro de WordPress, gestionables en Apariencia > Menús.
Si el menú no tiene un <nav>, y tampoco tiene los comentarios <!-- menu --> y <!-- endmenu -->, y se colocan <!-- menu --> y <!-- endmenu --> como comentarios en el footer, no funcionará el menú del footer.
Ejemplo de footer que NO funcionará:
<div class="header">
<!-- menu -->
<ul class="footer-menu" id="footer-menu-1">
<li><a href="#">Contacto</a></li>
<li><a href="#">Política</a></li>
</ul>
<!-- endmenu -->
</div>
<div class="footer">
<!-- menu -->
<ul class="footer-menu" id="footer-menu-1">
<li><a href="#">Contacto</a></li>
<li><a href="#">Política</a></li>
</ul>
<!-- endmenu -->
</div>
Razón: El sistema espera<!-- menu --> y <!-- endmenu --> como comentarios HTML más una etiqueta nav en el menu del header para que se pueda procesar correctamente los menús del footer.
-
¿Y esto es todo?
- ¡Exactamente! si tienes algo similar a esto:
<link rel="icon" type="image/png" href="assets/favicon.png">el sistema hara todo de manera automatica, incluso si tu favicon no tiene como nombre "favicon.png"
-
Solo debes renombrar tu archivo destinado al blog como
blog.htmly la interna comosingle.html. - Recuerda tener en todas tus páginas el comentario de inicialización como se indica en la sección inicial "Lo primero".
Paso 1: Crear los archivos
blog.html y single.html.Paso 2: Dentro de cada uno, encierra las secciones correspondientes entre los siguientes comentarios:
<!-- blog -->
Contenido interno html como <h1>, <p>, <img>, etc.
<!-- endblog -->
Paso 3: Los datos se listan de acuerdo a:
-
<h1> - <h6>: Son los títulos. -
<p>: Es la descripción. Puede contener imágenes y otros elementos de WordPress. -
<span>o<li>con "Autor" o "Author": Indica el autor del post. - Fecha: Se reemplazará cualquier texto que contenga una fecha, dejando solo el formato correcto.
-
<a>: Enlace al blog. -
<img>: Usará la imagen del post.
Si no existen los archivos
blog.html y single.html, el sistema los creará automáticamente.Categorías:
-
En
blog.htmlosingle.html, coloca "Categorias" o "Categories". -
El sistema detectará una sección
<div>,<section>,<ul>o<nav>y listará las categorías dentro.
Soporte para latest del blog:
- Para mostrar las últimas 10 publicaciones del blog, encierra el contenido con los siguientes comentarios:
<!-- latest -->
Contenido similar al blog va justo aquí
<!-- endlatest -->
<!-- latest -->
Contenido similar al blog va justo aquí
<!-- endlatest -->
<!-- latest -->
Contenido similar al blog va justo aquí
<!-- endlatest -->
<!-- latest -->
Contenido similar al blog va justo aquí
<!-- endlatest -->
Esta guía explica cómo estructurar tu HTML para que el sistema conversor lo transforme en un formulario de búsqueda funcional en WordPress.
Dónde colocar el formulario:
-
Header: Antes de
<!-- Main content Start -->o dentro de<header>. -
Contenido Principal: Entre
<!-- Main content Start -->y<!-- Main content End -->. -
Footer: Después de
<!-- Main content End -->o dentro de<footer>.
Métodos para estructurar el formulario:
-
1. Usando comentarios
<!-- search -->y<!-- endsearch -->(Prioridad Máxima)
<!-- search -->
<form>
<input type="search" placeholder="Buscar...">
</form>
<!-- endsearch -->
-
2. Usando un formulario con
<input type="search">
<form>
<input type="search" placeholder="Buscar en el sitio">
<button type="submit">Buscar</button>
</form>
-
3. Usando un formulario con
<input type="text">(Última Prioridad)
<form>
<input type="text" placeholder="Ingresa tu búsqueda">
</form>
Reglas Importantes:
- Solo se procesa el primer formulario válido en la página, según el orden de prioridad.
- Los formularios con placeholders como "subscribe", "newsletter" o "email" serán ignorados.
Ejemplo Completo:
<!-- search -->
<form>
<input type="text" placeholder="Buscar...">
<button type="submit">Go</button>
</form>
<!-- endsearch -->
El sistema convertirá este formulario en un formulario de búsqueda funcional en WordPress.
-
Paso 1: El archivo debe llevar el nombre en el formato
nombrearchivo[template].html. Ejemplo:landing[template].html. -
La palabra "template" debe estar entre corchetes
[], permitiendo que el sistema identifique el archivo como una plantilla para WordPress. -
Paso 2: Incluye un comentario justo debajo de la etiqueta
<body>describiendo las características de la plantilla.
<body>
<!--
Name: Testimoniales
SingularName: Testimonial
Description: Mi Cpt de testimoniales
FilenameSingle: testimonial
Category: no
Gallery: no
-->
Name: Define el nombre del template.Description: Breve descripción del template.
<!-- template -->
<div>
...
</div>
<!-- endtemplate -->
¿Qué es una template en WordPress?
Una "template" en WordPress es un archivo que define la estructura y diseño de páginas específicas dentro de un sitio web. Permiten personalizar la apariencia sin afectar el resto del sitio.
Las plantillas pueden ser usadas para:
- Páginas de aterrizaje.
- Secciones de testimonios.
- Galerías personalizadas.
Para GeniusHTML: Solo sigue estos 3 pasos y el sistema generará el PHP por ti. Tú solo te encargarás del front con HTML, CSS, JavaScript, Bootstrap, etc. GeniusHTML manejará el backend siempre y cuando cumplas con la convención.
- En el administrador de WordPress, en la sección del CPT, se podrá habilitar o deshabilitar mediante un checkbox.
-
Casos de uso:
- Caso 1: Todos los CPT deshabilitados: No se visualizará ningún CPT en la web.
- Caso 2: Todos los CPT habilitados: Se formará un bucle y se verán todos como un conjunto (ideal para sliders, carruseles, grids, etc.).
- Caso 3: Se habilita solo uno: Solo se visualizará este CPT.
- Caso 4: Uso de:
data-cpt-number="1"
en el<div>: Se encasilla el CPT seleccionado sin bucles.
Paso 1: Modo de uso
- El comentario para identificar un CPT es con tres barritas y el nombre del CPT.
<!--- banner --->
...
<!--- endbanner --->
data-cpt-number="1" o data-cpt-number="2", seleccionamos qué post mostrar en el HTML.
Paso 2: Estructura de datos en HTML
-
Los datos se encierran en corchetes
[]y se escriben en minúsculas.
[nombre] = Input tipo texto.
[fecha][date] = Input tipo fecha.
[color][color] = Input tipo color.
[edad][number] = Input tipo número.
[correo][email] = Input tipo email.
Ejemplo:
<!--- banner --->
<div class="banner-container">
<h2>[nombre]</h2>
<p>Fecha del evento: [fecha][date]</p>
<p>Color principal: [color][color]</p>
<p>Edad recomendada: [edad][number]</p>
<p>Contacto: [correo][email]</p>
</div>
<!--- endbanner --->
[preferencias,meseria,ventas,lonas][checkbox] = Grupo de checkboxes en el administrador.
[bisuteria,meseria,ventas,lonas][multiple] = Select con múltiples opciones.
Reglas de contenedores HTML:
-
Si se coloca dentro de un
<ul>, se listará en<li>. -
Funciona dentro de
<h1> - <h6>,<p>,<div>,<section>,<article>, y<span>.
Soporte para HTML:
Solo coloca un <p> en el código, y automáticamente se usará the_content de WordPress, permitiendo contenido HTML, patrones y elementos de diseño.
Generales e internas Ver video
-
Paso 1: Se agregan archivos HTML:
plural[blog].htmlysingular.html.
Ejemplo para testimoniales:- Página general (plural):
testimoniales[blog].html - Página individual (singular):
testimonial.html
- Página general (plural):
-
Paso 2: Agregar el siguiente comentario en el archivo plural, justo después de
<body>.
<!--
Name: Testimoniales
SingularName: Testimonial
Description: Mi Cpt de testimoniales
FilenameSingle: testimonial
Category: no
Gallery: no
-->
Paso 3: Uso de los comentarios
<!-- blog --> en el archivo custom[blog].html.-
Los datos se encierran en corchetes
[]y deben estar en minúsculas.
<p>[nombre]</p>
<img data-cpt-image="[imagen_1][image]" src="#" class="...">
Paso 4: Uso de enlaces para dirigir a la página del CPT.
-
El nombre debe coincidir con
FilenameSingleen el paso 2.
<a href="[testimonial]"> Testimoniales </a>
Soporte para latest(últimas publicaciones) del CPT con internas:
-
Para listar las últimas 10 publicaciones en el
single.htmlyblog.html, usa:
<!-- latest -->
Contenido del latest
<!-- endlatest -->
<!-- peliculas -->
Contenido
<!-- endpeliculas -->
Reglas para los títulos y párrafos:
-
Si un
<p>o<h1> - <h6>no tiene contenido en corchetes[], se llenará con el título o párrafo predeterminado del CPT.
Uso del constructor Gutenberg de WordPress:
Para permitir imágenes, videos y patrones de WordPress, deja una etiqueta <p> sin contenido en corchetes.
-
Estos nombres encerrados en corchetes
[]al ser implementados dentro del HTML, coincidirán con los datos requeridos.
Teléfono:
- Para un solo número de teléfono:
[phone]
<p>Contact us at: [phone_1], [phone_2], [phone_3]</p>
Título de la página:
[title]Años:
[year]Nombre de la empresa:
[company]WhatsApp:
[whatsapp]Dirección:
[address]Emails:
- Para un solo correo electrónico:
<p>Contact us via email: <a href="mailto:[email]">[email]</a></p>
<p>Additional contact: <a href="mailto:[email_2]">[email_2]</a></p>
<p>For support, email us at: <a href="mailto:[email_3]">[email_3]</a></p>
Redes Sociales:
-
Usa el nombre de la red social entre corchetes en el
href:
<p>Follow us on Facebook: <a href="[facebook]">Facebook</a></p>
<p>Follow us on Instagram: <a href="[instagram]">Instagram</a></p>
<p>Follow us on X (formerly Twitter): <a href="[x]">X</a></p>
<p>Subscribe to our YouTube channel: <a href="[youtube]">YouTube</a></p>
<p>Connect with us on LinkedIn: <a href="[linkedin]">LinkedIn</a></p>
<p>Check out our TikTok: <a href="[tiktok]">TikTok</a></p>
✅ Soporta las siguientes redes sociales: "facebook", "instagram", "x", "youtube", "linkedin", "tiktok".
La sección Gallery permite listar imágenes dentro de un CPT con internas, como un carrusel o slider.
Paso 1: Envolver las imágenes dentro de los comentarios
<!-- gallery --> y <!-- endgallery -->.
<!-- gallery -->
<img src="imagen1.jpg" alt="Imagen 1">
<img src="imagen2.jpg" alt="Imagen 2">
<!-- endgallery -->
Paso 2: En el archivo
[blog].html del CPT, recuerda que es el archivo al que se nombra como vemos en el apartado: Secciones administrables o (Genereción de Custom Post Types sin internas) de esta documentación, debes incluir Gallery: yes en los comentarios de definición del CPT.
<!--
Name: Testimoniales
SingularName: Testimonial
Description: Mi Cpt de testimoniales
FilenameSingle: testimonial
Category: no
Gallery: yes
-->
Paso 3: Gallery solo funciona dentro de un CPT single y dentro de la sección de comentario
<!-- blog -->.Paso 4: Revisar el administrador de WordPress en la sección del CPT, donde aparecerá la opción de galería debajo de la imagen destacada.
El sistema generará automáticamente el código necesario para que la galería funcione en el frontend.
¿Comenzamos gratis?
Convierte 1 proyecto cada 15 días, con un límite
de 2 MB.
Empieza con 5 proyectos cada 24 horas