Últimas noticias de SeedProd

Tutoriales, consejos y recursos de WordPress para hacer crecer tu negocio

Cómo crear un tema de WordPress personalizado sin código

Cómo crear un tema personalizado en WordPress (sin código) 

Escrito por: avatar de autor Stacey Corrin
avatar de autor Stacey Corrin
Stacey lleva más de 10 años escribiendo sobre WordPress y marketing digital, y mucho más tiempo sobre otros temas. Además, le fascinan el diseño web, la experiencia de usuario y el SEO.
     Revisado por: avatar del revisor Turner John
avatar del revisor Turner John
John Turner es el cofundador de SeedProd. Cuenta con más de 20 años de experiencia empresarial y de desarrollo y sus plugins se han descargado más de 25 millones de veces.

¿Quieres crear un tema personalizado para WordPress que sea exactamente como te lo imaginaste? En esta guía, te guiaré a través del proceso exacto que utilicé para diseñar mi propio tema, cada página, color y diseño, sin tocar código.

Cuando lancé por primera vez mi sitio de WordPress, utilicé un tema prefabricado, pero no paraba de encontrarme con obstáculos. No podía mover las secciones donde quería, los colores de mi marca nunca quedaban bien y los pequeños cambios me llevaban horas. Aprender a crear un tema personalizado de WordPress arregló todo eso, y te mostraré exactamente cómo hacerlo también.

TL;DR: Puede crear un tema de WordPress personalizado sin ningún tipo de codificación mediante el Drag-and-Drop Theme Builder de SeedProd. Elige una plantilla, personaliza cada parte de tu sitio visualmente y publica tu tema con solo unos clics.

La forma más fácil de crear un tema de WordPress personalizado:

¿Qué páginas componen un sitio web WordPress?
Un sitio web WordPress suele tener una página de Inicio (página principal), una página Acerca de (información sobre usted o su empresa), una página de Servicios o Productos, un Blog (artículos o noticias) y una página de Contacto (formas de ponerse en contacto con usted). Algunos sitios también tienen una página de Preguntas frecuentes o Portafolio.

¿Qué es un tema de WordPress personalizado?

Un tema de WordPress personalizado es un diseño de sitio web que creas para que se adapte exactamente a tus necesidades, en lugar de utilizar un tema prefabricado que viene con diseños y estilos predeterminados. Con un tema personalizado, tú eliges el aspecto y el funcionamiento de cada parte de tu sitio, desde la cabecera y el pie de página hasta el diseño del blog y el estilo de los botones.

Tradicionalmente, había que escribir PHP, CSS y HTML para crear un tema. Ahora, con los creadores de temas visuales como SeedProdpuedes crear un tema de WordPress totalmente personalizado sin tocar código. Usted diseña cada parte de su sitio arrastrando y soltando secciones, cambiando colores y fuentes, y previsualizando todo en vivo.

Esto significa que no tienes que hacer pequeños ajustes al diseño de otra persona. Puedes crear un tema que se adapte a tu marca, cargue más rápido y ofrezca a tus visitantes la experiencia exacta que quieres que tengan.

¿Por qué crear un tema de WordPress personalizado (en lugar de utilizar uno prefabricado)?

Cuando empecé, pensé que elegir un tema popular me ahorraría tiempo. Y así fue durante una semana. Luego me topé con un muro. No podía mover las secciones donde quería, los tipos de letra no me gustaban y cada cambio significaba buscar en configuraciones confusas.

SeedProd Arrastrar y soltar WordPress constructor de sitios web

Fue entonces cuando empecé a buscar una manera de diseñar mi propio tema sin tener que codificar. Encontré SeedProdun creador visual de temas de WordPress que te permite crear cada parte de tu sitio arrastrando y soltando. Sin archivos PHP, sin editar CSS y sin tener que buscar el menú adecuado.

Con SeedProd, podía:

  • Coinciden con mi marca desde el principio. Colores, fuentes y espaciado exactamente como los imaginaba.
  • Eliminé la hinchazón. Solo los diseños y las funciones que realmente necesitaba, lo que hizo que mi sitio se cargara más rápido.
  • Realice cambios en cuestión de minutos. Modifique diseños, cambie imágenes o rediseñe secciones enteras sin tocar el código.
  • Planificar mi sitio en torno a mis visitantes. Construir páginas en el orden que tenía sentido en lugar de forzar el contenido en la estructura de otra persona.

Una vez que vi lo mucho más fácil que era trabajar en mi propio tema SeedProd en lugar de luchar con uno ya hecho, supe que no volvería atrás.

¿Qué debe hacer antes de crear un tema de WordPress personalizado?

Antes de crear un tema de WordPress con SeedProd, querrás asegurarte de que tienes una red de seguridad. Si ya tienes un sitio web con contenido que quieres conservar, deberías hacer una copia de seguridad de tu instalación de WordPress, por si acaso.

Para evitar cualquier contratiempo en el desarrollo del tema en su sitio en vivo, también debe crear un sitio de ensayo. Esto le da un entorno separado y privado para experimentar con SeedProd y construir su tema sin afectar a su sitio web en vivo.

Nota importante: Si aún no tiene uno, tendrá que crear un sitio web antes de utilizar SeedProd. Aquí hay una guía sobre cómo crear un sitio web de WordPress para principiantes para empezar.

¿Cómo se puede crear un tema de WordPress sin código?

¿Recuerdas que te dije que no sabía programar? Bueno, eso no fue un problema en absoluto. SeedProd hizo increíblemente fácil construir un tema personalizado, paso a paso visual. He aquí cómo lo hice.

Paso 1. Instalar SeedProd Instale SeedProd y elija una plantilla

En primer lugar, hazte con el plan SeedProd Pro. Ofrece todas las funciones que necesitas (incluido el creador de temas) a un precio asequible.

Una vez instalado, estarás listo para crear un tema de WordPress personalizado a partir de un kit de inicio y adaptarlo a tu sitio.

Encuentre su clave de licencia SeedProd

Una vez que tenga su clave de licencia, vaya a su sitio de ensayo e instale el plugin. Instalar SeedProd es tan simple como subir el archivo del plugin y hacer clic en "Activar".

Activar el plugin SeedProd

Con el plugin activo, ve al menú SeedProd en tu panel de WordPress y haz clic en "Theme Builder". A continuación, haz clic en el botón "Theme Template Kits" para elegir tu tema de inicio.

Kits de plantillas temáticas SeedProd

SeedProd tiene tantas plantillas de temas en bloque diseñadas profesionalmente que tengo que admitirlo; incluso a mí se me estropeó un poco la elección.

Puedes filtrar las plantillas de SeedProd por categoría y ordenarlas por popularidad o antigüedad. Simplemente elige la que más se acerque a tu estilo, ya que luego lo personalizarás todo.

No te preocupes si no es perfecto. Puedes personalizar cada centímetro en el siguiente paso.

Selector de plantillas para el tema SeedProd

Finalmente me decidí por Elite Consulting Business Theme. Su aspecto limpio y moderno encajaba perfectamente con el ambiente que buscaba.

Para importar su archivo de tema, sitúe el cursor del ratón sobre el kit de temas y haga clic en el icono de marca de verificación.

Importar kit de plantillas SeedProd

Haga clic aquí para obtener una vista previa de la plantilla que seleccioné para este diseño y poder compararla con la versión personalizada.

Después de elegir un kit, puedes ver todas las plantillas individuales que forman los componentes de un tema de WordPress. El mío incluía, por ejemplo, una página de inicio, una cabecera, un pie de página, una página de blog y una barra lateral.

Partes temáticas de SeedProd

También tenía plantillas personalizadas para distintas secciones temáticas, como una sección de premios, una página de servicios, una tabla de precios, una plantilla de página personalizada para productos y mucho más.

Lo más probable es que no las necesites todas para tu sitio. Así que céntrate en lo que necesitas y elimina las plantillas que no quieras haciendo clic en "Papelera".

Si no te sientes cómodo con esto, siempre puedes desactivar la opción "Publicado" para que la plantilla no aparezca en tu sitio web.

Anular la publicación de una plantilla temática en SeedProd

Con los bloques básicos de tu tema en su lugar, puedes empezar a editar cada sección del tema. Para mi sitio, empecé con las secciones de encabezado y pie de página.

Para editar cualquier sección del tema, sólo tiene que situarse sobre ella y hacer clic en el enlace Editar diseño.

edite su plantilla de cabecera SeedProd

Cuando editas una sección de un tema en SeedProd, irás a su constructor visual de arrastrar y soltar. En esta pantalla, puedes personalizar la cabecera de tu tema simplemente señalando y haciendo clic.

La plantilla de cabecera original tenía un diseño de tres columnas, demasiado recargado para mi gusto. En este caso, basta con eliminarla y arrastrar un bloque de diseño de dos columnas desde el panel izquierdo.

Añadir una nueva columna a la cabecera del tema de WordPress

Añadir un logotipo también es muy fácil con el bloque Imagen: sólo tienes que seleccionarlo en tu biblioteca multimedia y utilizar los controles de apuntar y hacer clic para ajustar su tamaño y ubicación.

Añadir un logotipo personalizado a la cabecera del tema de WordPress

También es un buen momento para volver a comprobar tus decisiones de diseño. Aquí tienes una lista de errores de diseño de WordPress que cometen los principiantes al personalizar sus temas.

Para el menú de navegación, puede utilizar el bloque Nav Menu de SeedProd y elegir el ajuste "Menú Simple". Esto le permite crear fácilmente la estructura de menú exacta que tiene en mente.

Añadir un menú de navegación personalizado a su tema personalizado de WordPress

Cuando estés satisfecho con tu cabecera, guarda los cambios. A continuación, vuelve al constructor de temas y abre la plantilla Pie de página para personalizar la sección de pie de página.

Editar la plantilla de pie de página del tema de WordPress

El pie de página original de mi plantilla tenía un poco más de información de la que necesitaba, así que lo simplifiqué eliminando los bloques innecesarios.

Editar la plantilla de pie de página del tema de WordPress en SeedProd
Ejemplo de plantilla de pie de página original

Mantuve la información de la empresa y los elementos del menú de redes sociales, pero los centré para que tuvieran un aspecto más equilibrado. Después, simplemente cambié el contenido del marcador de posición por el mío propio.

Pie de página de WordPress personalizado
Plantilla de pie de página de WordPress personalizada

Realice cambios similares en la plantilla de pie de página para conseguir el aspecto que desea para su tema personalizado.

Una vez que el encabezado y el pie de página se vean elegantes y con estilo, es hora de abordar el corazón de su sitio web: la página de inicio. Recuerda que puedes encontrar los archivos de tu plantilla en SeedProd " Theme Builder.

Editar plantilla de página de inicio de WordPress

Paso 3. Crear una página de inicio de WordPress personalizada Crear una página de inicio personalizada de WordPress

Si alguna vez te has preguntado cómo construir un tema de WordPress visualmente, esta parte muestra lo sencillo que es.

Su principal objetivo al personalizar la página de inicio es probablemente crear una fuerte primera impresión, mostrar su experiencia y proporcionar a los clientes potenciales o clientes con razones de peso para elegir usted o su negocio.

Personalmente, me gustaba el diseño general de la página de inicio del tema Elite Consulting Business, pero quería simplificarlo aún más y añadirle mi toque personal.

Personalizar la plantilla de la página de inicio del tema de WordPress
Ejemplo del diseño original de la plantilla de la página de inicio de WordPress

Mantuve la sección del héroe en la parte superior, ya que es una gran manera de hacer una declaración audaz. Simplemente cambié la imagen por defecto por otra que reflejara mejor mi marca y actualicé el título y la descripción.

Plantilla personalizada de la página de inicio del tema de WordPress
Ejemplo de cómo he personalizado la página de inicio de mi tema de WordPress

También he modificado el estilo del botón CTA. Para ello, haz clic en la configuración avanzada del bloque. Accederás a un selector de color, donde podrás seleccionar un nuevo color de fondo y redondear las esquinas del botón para darle un aspecto más suave.

Para generar confianza y demostrar mi experiencia, yo:

  • He añadido una tira de logotipos de marcas con las que he trabajado,
  • Contadores numéricos actualizados para resaltar las estadísticas clave
  • Creación de un carrusel de testimonios con citas de clientes
  • Inclusión de una minicarpeta de redacción con bloques de imágenes y encabezamientos
Tema de WordPress personalizado sección de testimonios

Con unos pocos clics y arrastres, tu página de inicio empezará a tener exactamente el aspecto que deseas.

Paso 4. Crear página de blog y plantillas de entrada única

Bueno, en realidad no necesitaba este paso porque no estaba planeando tener un blog en mi sitio web. Pero sé que muchos de ustedes querrán compartir sus pensamientos y experiencia con el mundo, así que aquí está un rápido resumen de cómo SeedProd hace que sea fácil crear impresionantes páginas de blog y plantillas de entrada única.

Plantilla de página de blog

La plantilla de la página de tu blog se encuentra en la lista de plantillas del tema, en "Índice del blog, Archivos, Búsqueda" o, en mi caso, "Página del blog". Al igual que la plantilla de página personalizada anterior, puedes personalizarla haciendo clic en el enlace "Editar diseño".

Personalizar el tema de WordPress plantilla de página de blog

Aquí puedes personalizar cómo se muestran las entradas de tu blog: puedes elegir mostrar imágenes destacadas, extractos, información sobre el autor, etc.

Personalizar la plantilla de la página del blog en su tema personalizado de WordPress

También puede añadir elementos como una barra de búsqueda, botones para compartir en las redes sociales o incluso una llamada a la acción para animar a los visitantes a seguir explorando.

Plantilla de entrada única

Al igual que la plantilla de página personalizada de blog, puede editar y personalizar la plantilla de entrada de blog única.

editar plantilla de entrada única WordPress

Para lograr un aspecto coherente, SeedProd le permite personalizar la visualización de elementos como el título de la entrada, la imagen destacada, la meta descripción e incluso la biografía del autor.

Se llaman etiquetas de plantilla en WordPress. Extraen automáticamente datos de tu sitio sin que tengas que crearlas manualmente.

Personalización del tema de WordPress plantilla de entrada única

Por ejemplo, con las etiquetas de plantilla Imagen destacada, puede mostrar automáticamente imágenes destacadas en la página individual de su blog.

Paso 5. Crear una página sobre Crear una página "Acerca de".

Después de la página de inicio, la página Acerca de es posiblemente la parte más importante de cualquier sitio web personal. Es donde los clientes y colaboradores potenciales llegan a conocer a la persona que hay detrás de los servicios. Yo quería que la mía resultara auténtica y atractiva y ofreciera una imagen clara de quién soy y qué ofrezco.

El tema Elite Consulting Business ya incluía una plantilla de página de WordPress personalizada básica para una página sobre, a la que podía acceder yendo a Páginas " Todas las páginas en mi panel de control de WordPress y haciendo clic en "Editar con SeedProd".

Editar la página "Acerca de" con SeedProd

Decidí mantener las dos primeras secciones del diseño original, que se centraban en mi experiencia laboral y los servicios que presto. Solo cambié el contenido y las imágenes de los marcadores de posición por los míos.

Personalización de la página sobre el tema de WordPress

A continuación, quería mostrar mis certificaciones para crear credibilidad. Aquí es donde las plantillas de SeedProd resultaron útiles.

Piense en las partes de plantilla como secciones prefabricadas que puede insertar y reutilizar en diferentes páginas de su sitio web: un gran ahorro de tiempo. El tema venía con una parte de plantilla llamada "Premios y reconocimientos".

Plantilla de tema de WordPress personalizada parte

Simplemente edité esta plantilla para incluir mis certificaciones y luego la inserté fácilmente en mi página "Acerca de".

Personalizado plantilla de WordPress tema parte
Ejemplo de cómo he personalizado la parte de la plantilla personalizada

Para terminar, creé una sección final con un toque más personal. Conté algunas de mis aficiones, dónde vivo y otros detalles que ayudarían a los visitantes a conectar conmigo a un nivel más personal.

Tema de WordPress personalizado sobre la sección de la página

Estas personalizaciones me ayudaron a diseñar mi propio tema de WordPress sin necesidad de un desarrollador.

Paso 6. Crear una página de contacto Configurar una página de contacto

Lo último que quería era una página de contacto desordenada y confusa. Aunque el tema Elite Consulting Business incluía una página de contacto prediseñada, resultaba un poco abrumadora.

Diseño de la página de contacto del tema de WordPress
El diseño original de la página de contacto

Decidí simplificar las cosas drásticamente. Eliminé la mayor parte del contenido predeterminado y lo sustituí por el bloque Formulario de contacto de SeedProd. Este bloque hace que sea súper fácil de integrar con WPForms, uno de los plugins más populares de WordPress constructor de formularios.

Página de contacto de WordPress con formulario de contacto
Mi página de contacto rediseñada con un formulario de contacto personalizado

Nota rápida: WPForms no viene incluido con SeedProd, pero puede descargar la versión gratuita de WPForms desde el directorio de plugins de WordPress - tiene todo lo que necesita para un formulario de contacto básico.

Con WPForms instalado, puede crear un formulario de contacto directamente dentro de SeedProd - sin necesidad de jugar con la configuración complicada o shortcodes.

Paso 7. Ajuste la configuración global del tema

Mi sitio web estaba empezando a cobrar forma. Ahora, era el momento de añadir esos toques finales que harían que se viera super pulido y profesional. Introduzca la configuración global de SeedProd.

La plantilla CSS global se encuentra en lalista de plantillas del tema: haz clic en "Editar diseño" para abrirla. Este es su centro de mando para controlar el aspecto general de su sitio web.

Plantilla CSS global

Colores

En primer lugar, querrá garantizar la coherencia del color en todas las páginas. SeedProd facilita esta tarea permitiéndole definir colores globales para todo, desde encabezados y texto hasta botones, enlaces y fondos.

Colores personalizados del tema de WordPress

Fuentes y tipografía

Aunque me gustaba la fuente predeterminada del tema Elite Consulting Business, quería ajustar los pesos y colores de las fuentes de los encabezados y enlaces para que encajaran mejor con la estética de mi marca.

Fuentes personalizadas para temas de WordPress

Fondo

Para mantener la coherencia, he cambiado el color de fondo general de la página. SeedProd incluso le permite añadir una imagen de fondo aquí si quieres ser elegante.

Botones

Los botones son cruciales para las llamadas a la acción, así que asegúrate de que destaquen. Juega con diferentes estilos de fuente, colores y radios de borde hasta que encuentres un aspecto que te guste.

Configuración personalizada de los botones del tema de WordPress

CSS personalizado

SeedProd incluso le da la opción de añadir su propio CSS personalizado. Aquí es donde las cosas se ponen un poco técnico, pero le da aún más control sobre su diseño.

Opciones css personalizadas del tema de WordPress

Por ejemplo, he utilizado un fragmento de CSS personalizado para hacer que el botón de envío del formulario WPForms coincida con el estilo de mis otros botones.

Si quieres, puedes seguir mi guía sobre cómo añadir CSS personalizado en WordPress.

Paso 8. Publicar Publique el tema personalizado de WordPress

Después de poner tanto cuidado en el diseño de tu tema personalizado de WordPress, no te saltes las comprobaciones finales. Utiliza la función de vista previa integrada para comprobar cómo se ve todo en distintos tamaños de pantalla, desde ordenadores de sobremesa hasta tabletas y smartphones.

Vista previa del tema personalizado de WordPress en el móvil

Querrás asegurarte de que tu tema tiene un aspecto fantástico, independientemente de cómo lo vea la gente.

Por supuesto, también debes probar tus elementos interactivos. Envía un mensaje de prueba a través de tu formulario de contacto (¡y haz un bailecito de la victoria cuando llegue a tu bandeja de entrada! 🎉).

Probar las funciones personalizadas de los temas de WordPress

Hice clic en todos los botones y menús para asegurarme de que conducían a los lugares correctos.

Por último, el momento de la verdad. Volver a la SeedProd Theme Builder, tomar una respiración profunda, y encontrar el "Enable SeedProd Theme" en la esquina superior derecha. Con un clic satisfactorio, colóquelo en la posición "on".

Habilite su tema personalizado de WordPress

¡Su tema personalizado de WordPress está EN VIVO! Ya puede visitar su sitio y verlo en acción.

Diseño personalizado del tema de WordPress.

Otras formas de crear un tema de WordPress personalizado (sin SeedProd)

Ahora bien, entiendo que no todo el mundo que lea esta guía querrá seguir mi proceso de creación de plantillas y temas personalizados. Con esto en mente, he investigado algunas otras maneras de construir un diseño de sitio web profesional.

MétodoDificultad¿Codificación?Lo mejor para
Codificación tradicionalAvanzadoSí (PHP, HTML, CSS, JS)Promotores, agencias
Guiones bajos (_s)IntermedioSí (PHP, CSS)Desarrolladores que aprenden a desarrollar temas
Temas infantilesPrincipiante/IntermedioAlgunos CSSEntusiastas de WordPress
Temas en bloqueIntermedioNoUsuarios modernos de WordPress

Cada uno de ellos tiene su lugar, pero aún así pueden parecer limitantes si estás intentando crear un tema para WordPress sin codificar. Los temas hijo requieren ajustes de CSS, y los temas en bloque no siempre son fáciles de usar para principiantes. SeedProd te da una verdadera experiencia sin código con un control total del diseño visual, para que puedas crear un tema completamente personalizado sin tocar el código.

Si buscas una forma rápida y flexible de crear un tema que tenga exactamente el aspecto que deseas, SeedProd es la opción a la que siempre vuelvo.

Ejemplos de temas WordPress personalizados para sitios web reales

¿No está seguro de qué construir con su tema personalizado? Aquí tienes ejemplos reales que puedes seguir para diseñar el sitio perfecto para tu nicho, todos construidos con el constructor visual de SeedProd y unos simples ajustes.

Preguntas frecuentes

¿Puedo crear un tema personalizado para WordPress sin tener experiencia en programación?
Sí, puedes crear un tema personalizado para WordPress sin codificar utilizando herramientas como SeedProd. Estas herramientas te permiten arrastrar y soltar para diseñar el aspecto de tu sitio, por lo que puedes elegir diseños, colores y fuentes sin necesidad de escribir código.
¿Cómo puedo exportar el tema personalizado que he creado con SeedProd?
Puede exportar su tema de WordPress como un archivo .zip utilizando la función de importación/exportación de SeedProd. Sigue esta guía para aprender a exportar archivos de plantillas de temas de WordPress con SeedProd e instalarlos en una instalación de WordPress diferente.
¿Cuál es el mejor plugin creador de temas de WordPress para principiantes?
Si desea crear un tema de WordPress personalizado sin codificación, SeedProd es mi mejor opción. Es un plugin potente pero fácil de usar para principiantes que funciona como un completo creador de temas de WordPress. Puedes arrastrar y soltar tu diseño, darle estilo visualmente y publicarlo sin necesidad de desarrollador.
¿Cuál es la diferencia entre un tema y un constructor de páginas?
Un tema de WordPress controla todo el diseño de su sitio, mientras que un constructor de páginas sólo cambia el área de contenido de las páginas individuales.
¿Necesito un desarrollador para crear un tema personalizado?
No con herramientas como SeedProd: puedes crear y lanzar tu tema sin tocar el código.

Crear un tema personalizado para cualquier sitio web WordPress

Con las herramientas adecuadas, cualquiera puede diseñar un tema de WordPress personalizado y crear un sitio que se ajuste exactamente a su visión, sin necesidad de desarrollador. Tanto si estás creando un blog personal, un sitio de negocios o algo totalmente único, ahora tienes el control total sobre su aspecto y funcionamiento.

Si estás listo para ir aún más lejos, aquí tienes más guías útiles que combinan bien con tu nuevo tema personalizado:

Gracias por leernos. Si tienes alguna pregunta o quieres compartir tu tema personalizado, deja un comentario a continuación. Y síguenos en YouTube, X (antes Twitter) y Facebook para más consejos y tutoriales de WordPress.

También puede seguirnos en YouTube, X (antes Twitter) y Facebook para obtener más contenidos útiles para hacer crecer su negocio.

avatar de autor
Stacey Corrin Escritor
Stacey lleva más de 10 años escribiendo sobre WordPress y marketing digital, y mucho más tiempo sobre otros temas. Además, le fascinan el diseño web, la experiencia de usuario y el SEO.

Divulgación: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, es posible que ganemos una comisión. Sólo recomendamos productos que creemos que aportarán valor a nuestros lectores.