Crear tu primer sitio de WordPress puede ser complicado. Con miles de temas para elegir, puede ser difícil encontrar el adecuado para tu marca.
Aquí es donde crear un tema personalizado que se adapte a todos tus requisitos resulta útil.
Sin embargo, la parte complicada para los principiantes es que normalmente requiere experiencia en codificación y un conocimiento profundo de WordPress.
Pero con el constructor de temas de WordPress adecuado, puedes usar simplemente un constructor de arrastrar y soltar para crear tu propio tema.
En este artículo, te mostraremos cómo crear un tema personalizado en unos sencillos pasos sin necesidad de codificación.
¿Qué es un tema de WordPress?
Para empezar, aclaremos qué es exactamente un tema de WordPress y de qué consta.
Un tema de WordPress es un conjunto de archivos ubicados en una carpeta común en el directorio de Temas de WordPress de tu hosting.
Este conjunto incluye plantillas de página escritas en lenguajes HTML, PHP y JavaScript, hojas de estilo CSS y gráficos.
Cuando se trata de crear un tema personalizado desde cero, hay 2 formas típicas:
- Hazlo tú mismo: Requiere una amplia experiencia en desarrollo web y mucho tiempo libre.
- Contrata a un desarrollador o agencia web: El precio medio oscila entre unos pocos cientos y unos pocos miles de euros.
Por razones obvias, ambos métodos son difícilmente aceptables para los principiantes.
Afortunadamente, existe una tercera forma de crear un tema personalizado sin arruinarse ni ser un gurú de la codificación.
Esto es posible a través del uso de un constructor de sitios web de WordPress como SeedProd. Echemos un vistazo en detalle y descubramos por qué es tan popular entre los usuarios de WordPress.
¿Por qué usar SeedProd para crear un tema personalizado de WordPress?
SeedProd es el plugin constructor de sitios web con IA número 1 para WordPress, fácil de usar para principiantes.
Esto es un verdadero cambio de juego, ya que te permite crear temas personalizados de WordPress de alta calidad en minutos, sin necesidad de codificación.
El ingrediente secreto es el práctico y potente editor visual de SeedProd. Usándolo, puedes arrastrar y soltar fácilmente los elementos, bloques o incluso secciones enteras necesarios a tu página.
Aquí tienes una breve vista previa de cómo funciona:
SeedProd optimiza automáticamente las páginas y los temas para una carga rápida. Te permite garantizar la mejor experiencia de usuario para tus visitantes.
También son responsivos y están listos para móviles por defecto, por lo que no tienes que preocuparte de cómo se ve tu sitio en diferentes dispositivos.
Además de eso, SeedProd viene con potentes funciones como:
- Cientos de plantillas de página listas para usar: ¿No te sientes inspirado para crear un tema desde cero? Puedes usar una de las más de 200 plantillas preconstruidas y personalizarlas fácilmente para satisfacer tus necesidades.
- Integración con WooCommerce: ¿Vendes productos en línea? SeedProd es totalmente compatible con WooCommerce, por lo que puedes crear páginas modernas de "próximamente" y de pago, cuadrículas de productos y más.
- Panel de gestión de suscriptores de correo electrónico: ¿Tienes un boletín de correo electrónico? SeedProd te permite recopilar correos electrónicos y seguir el estado de tus suscriptores en un práctico panel.
- Código optimizado para SEO: ¿Preocupado por la claridad del código? El código de los temas y páginas que creas con SeedProd es amigable con el SEO y cumple con todos los requisitos de los motores de búsqueda.
Además, SeedProd cuenta con un equipo de soporte fantástico y receptivo.
Aunque este plugin es muy fácil de usar, si tienes alguna pregunta, siempre están listos para acudir al rescate.
Los comentarios de usuarios entusiasmados no dejan lugar a dudas de que esta calificación está bien merecida.
Esto es lo que la gente dice sobre su experiencia con SeedProd:
Ahora que sabes por qué usar SeedProd es la mejor manera de crear un tema personalizado para principiantes, veamos cómo puedes hacerlo.
Cómo Crear un Tema Personalizado de WordPress
Este tutorial detallado tiene 6 pasos sencillos. Síguelos para crear un hermoso tema personalizado de WordPress sin tocar una sola línea de código.
Aquí tienes una tabla de contenido para ayudarte a navegar:
- Paso 1: Instalar y Activar el Plugin SeedProd
- Paso 2: Seleccionar un Tema de WordPress Prediseñado
- Paso 3: Personalizar las Partes de tu Tema de WordPress
- Paso 4: Personalizar el CSS Global de tu Tema (Sin Código)
- Paso 5: Conectar con tu Servicio de Marketing por Correo Electrónico
- Paso 6: Publicar tu Tema Personalizado de WordPress
- Extra: Crear Formularios de Búsqueda y Página de Resultados Personalizados
Paso 1: Instalar y Activar el Plugin SeedProd
Para empezar, puedes obtener tu copia de SeedProd aquí.
A continuación, puedes iniciar sesión en tu cuenta de SeedProd y dirigirte a la pestaña Descargas.
Luego, haz clic en el botón Descargar SeedProd Pro para comenzar a descargar el archivo ZIP del plugin en tu ordenador.
Cuando hayas terminado de descargar, copia tu clave de licencia en la misma pestaña. La necesitarás más adelante para activar tu copia de SeedProd.
El siguiente paso es subir el archivo ZIP descargado a tu sitio e instalar el plugin. Si necesitas ayuda, puedes seguir este tutorial sobre cómo instalar un plugin de WordPress.
Después de instalar el plugin, verás la pantalla de bienvenida de SeedProd. Aquí, puedes ir a tu panel de WordPress y hacer clic en el botón SeedProd en el panel izquierdo.
Luego, pega tu clave de licencia en el campo de licencia y presiona el botón Verificar clave.
Una vez que actives tu copia de SeedProd, estarás listo para empezar a crear tu tema personalizado de WordPress.
Paso 2: Seleccionar un Tema de WordPress Prediseñado
Para empezar, navega a SeedProd » Theme Builder en tu panel.
En esta página, puedes gestionar tus temas personalizados y crear nuevos.
Desde aquí, tienes 2 maneras de empezar.
La primera es crear cada parte de tu tema personalizado desde cero.
Cada tema de WordPress consta de las siguientes partes:
- Encabezado
- Pie de página
- Publicación individual
- Página individual
- Archivo (Página del blog)
- Página de inicio
- Barra lateral
Estas partes componen tu tema, y SeedProd te permite crearlas y personalizarlas individualmente.
Para empezar a crear una nueva parte de tu tema, pulsa el botón Añadir nueva plantilla de tema.
Aquí, puedes elegir el tipo de tu parte del tema, darle un nombre y luego empezar a construirla desde cero.
Pero, si sientes que es demasiado abrumador para tu primer intento, hay una segunda forma de crear tu tema personalizado de WordPress.
SeedProd viene con un montón de plantillas de temas prediseñadas de aspecto profesional. Puedes seleccionarlas y personalizarlas según tus necesidades.
En este tutorial, nos centraremos en esta forma, ya que es más fácil para principiantes y nos permite mostrarte más funciones de SeedProd.
Para empezar a personalizar una de las plantillas de temas listas para usar, pulsa el botón Kits de plantillas de tema.
Aquí encontrarás una variedad de temas para diferentes propósitos.
Por ejemplo, hay temas para blogs personales, portafolios, sitios de negocios o comercio electrónico, y más.
Para elegir un tema que te guste, pasa el cursor sobre él y haz clic en el icono de la marca de verificación.
Por ejemplo, elegiremos una de las plantillas de inicio.
Una vez que hayas seleccionado una plantilla, SeedProd crea automáticamente las partes que la componen.
Como puedes ver, nuestro tema no solo incluye plantillas de partes de página, como el encabezado, el pie de página y la barra lateral.
También hay plantillas para páginas enteras, como una página individual, una publicación, archivos y la página de inicio.
Si no necesitas una plantilla específica en tu sitio, puedes despublicarla cambiando el interruptor a su lado.
Para cambiar el nombre de una plantilla o editar las condiciones de cuándo debe aparecer en tu sitio, haz clic en el enlace Editar condiciones.
Esto abrirá una ventana modal donde puedes nombrar una plantilla como quieras y cambiar su tipo, prioridad y condiciones.
Cuando hayas terminado, simplemente haz clic en el botón Guardar.
Ahora que sabes cómo gestionar las partes de tu tema, estás listo para empezar a personalizarlo.
Paso 3: Personalizar las Partes de tu Tema de WordPress
Primero, personalicemos el encabezado, ya que es lo primero que ven los visitantes al llegar a tu sitio.
Encabezado
Para empezar, desplázate hacia abajo en la página Theme Builder, busca la plantilla Header y haz clic en ella.
Nota: El encabezado y el pie de página son comunes en todo el sitio. Esto significa que cada cambio que realices en ellos será visible en todas las páginas de tu sitio.
Como puedes ver, nuestro encabezado consta de dos partes. Está la parte izquierda con el logotipo del sitio y la parte derecha con el menú de navegación.
SeedProd tiene un editor visual de arrastrar y soltar. Puedes interactuar con cualquier elemento de la página y añadir otros nuevos simplemente arrastrándolos a la página.
Intentemos cambiar el logotipo. Para hacerlo, simplemente haz clic en él y aparecerá una barra lateral donde podrás editar la configuración del elemento.
Cada tipo de elemento en el editor de SeedProd tiene su propio conjunto de configuraciones y opciones de personalización.
Por ejemplo, nuestro logotipo tiene el tipo Imagen. Por lo tanto, tiene todas las configuraciones que esperarías normalmente de una imagen, como su archivo de origen, texto alternativo, tamaño y más.
También puedes alternar entre las pestañas Contenido, Plantillas y Avanzado en la barra lateral izquierda para descubrir aún más opciones de personalización.
Ahora, digamos que quieres reemplazar el logotipo predeterminado por el tuyo.
Para hacerlo, haz clic en la imagen del logotipo actual y luego podrás seleccionar la imagen que deseas usar en su lugar.
Así es como se ve nuestro nuevo logotipo en nuestro sitio de prueba:
Ahora, cambiemos el color de fondo del encabezado.
Para hacerlo, coloca el cursor sobre tu encabezado hasta que tenga un contorno azul y haz clic en él.
Después de eso, verás las opciones de personalización del encabezado en la barra lateral izquierda. Tiene el tipo de elemento Fila.
En la pestaña Contenido, puedes cambiar el color de fondo de tu encabezado, reemplazarlo con una imagen y elegir el ancho del encabezado.
Para cambiar el color de fondo, haz clic en el icono de la paleta de colores y selecciona el color que desees.
Luego, en la pestaña Avanzado, puedes agregar una sombra o un borde a tu encabezado, cambiar su configuración de espaciado y más.
Como toque final, hagamos que la fuente del menú de navegación sea un poco más grande.
Para hacerlo, coloca el cursor sobre el menú y haz clic en él.
Ahora, en el campo Tamaño de fuente en la barra lateral izquierda, introduce el tamaño de fuente deseado.
Simplemente mueve el control deslizante o introduce un número para cambiar el tamaño de fuente.
Cuando hayas terminado de personalizar el encabezado, presiona el botón Guardar en la esquina superior derecha.
Luego, presiona el icono de salida para abandonar el editor visual y volver a la página de plantillas del tema.
A continuación, personalicemos la Página de inicio.
Página de inicio
Para hacerlo, busca la plantilla Página de inicio entre las otras plantillas del tema y haz clic en ella.
La plantilla de inicio tiene una página de inicio con características que puedes encontrar en un sitio de negocios típico, tales como:
- Sección de descripción del negocio
- Lista de clientes con sus logotipos
- Características del negocio
- Testimonios
- Sección de preguntas frecuentes
- y más…
Al igual que con el encabezado, puedes interactuar con cada elemento de la página y cambiar su apariencia.
Por ejemplo, puedes ver cómo cambiar fácilmente el título, la descripción y el texto del botón en la sección principal con solo unos pocos clics:
Ahora, intentemos agregar algo nuevo a nuestra página.
Si no hay ningún elemento seleccionado en la página, en la barra lateral izquierda, puedes ver la pestaña Bloques.
Hay muchos bloques listos para usar que puedes añadir a tu página con unos pocos clics, sin necesidad de código.
Por ejemplo, puedes encontrar bloques como el autor de la entrada, tabla de precios, formulario de búsqueda y muchos otros.
Para añadir un bloque específico a tu página, arrástralo y suéltalo en el lugar que desees.
Por ejemplo, añadamos un bloque de Cuenta atrás a la sección de Características:
Además, si vas a la pestaña Secciones, encontrarás un montón de secciones predefinidas que también puedes añadir a tu página, como:
- Encabezados
- Pies de página
- Llamada a la acción
- Características
- Testimonios
- y muchas más...
Para añadir una nueva sección a la página, pasa el ratón sobre la sección deseada y haz clic en el icono de más.
Por ejemplo, añadamos una nueva sección de Llamada a la acción a nuestra página.
Por defecto, la nueva sección aparecerá al final de la página.
Para cambiar la posición de la sección, coloca el cursor sobre su borde superior, elige la opción Mover sección y arrástrala de la misma manera que un bloque.
Cuando hayas terminado de personalizar tu página de inicio, puedes ver cómo se ve en dispositivos móviles.
Para ello, haz clic en el icono de vista previa móvil en la esquina inferior izquierda.
Si hay bloques o secciones que no se ven bien, puedes moverlos.
De esta manera, puedes asegurarte de que tu versión móvil ofrezca la mejor experiencia de usuario.
Cuando estés satisfecho con tu página de inicio, no olvides pulsar el botón Guardar para guardar todos los cambios que hayas realizado.
Página de índice de entradas, archivos y búsqueda del blog
Veamos ahora una plantilla llamada Índice de entradas, archivos, búsqueda del blog.
Como puedes suponer por su nombre, esta plantilla es responsable de mostrar la página de entradas del blog, los archivos y los resultados de búsqueda.
Esto es útil, ya que puedes cambiar la apariencia de 3 páginas a la vez.
Como ya has aprendido a personalizar páginas y a añadirles nuevos bloques y secciones, centrémonos en configurar elementos específicos.
Por ejemplo, si haces clic en el elemento Entradas, puedes cambiar el orden de las entradas, excluir entradas de categorías, etiquetas o autores específicos, y más.
Además, puedes personalizar completamente la disposición de la lista de entradas.
Es decir, puedes cambiar el número de columnas y de entradas por página, cambiar la visibilidad del nombre del autor, la fecha de publicación, la hora y el recuento de comentarios.
Es raro que un creador de sitios web te permita controlar este tipo de cosas, sin necesidad de código, lo que es otra razón de la popularidad de SeedProd.
Publicación individual
Cuando hayas terminado de personalizar tu página del blog, editemos también la plantilla de Entrada única .
Una entrada de blog típica tiene las siguientes partes:
- Imagen destacada
- Título de la entrada
- Información de la entrada
- Contenido de la entrada
- Caja del autor
- Sección de comentarios
Lo mejor es que, con SeedProd, puedes personalizar completamente cada una de estas partes.
Por ejemplo, si haces clic en el elemento Información de la entrada, puedes añadirle nuevos datos útiles.
Puede ser una fecha de publicación o modificación, información adicional sobre el autor de la entrada o algo más que quieras especificar.
Por ejemplo, digamos que queremos mostrar el número de comentarios en nuestra sección de información de la entrada. Para empezar, pulsa el botón Añadir elemento.
Luego, haz clic en el menú desplegable Tipo y selecciona la opción Comentarios.
Después de eso, verás que el número de comentarios ahora se muestra dentro del elemento de información de la entrada.
De esta manera, puedes personalizar fácilmente cualquier elemento de la página.
Barra lateral
Cambiemos también la apariencia de la barra lateral de nuestro tema. Dirígete al panel del constructor de temas y haz clic en la plantilla Barra lateral.
Barra lateral es muy popular entre los propietarios de sitios de WordPress.
Es un lugar estupendo para colocar elementos relevantes del sitio web, como una lista de entradas recientes, un formulario de suscripción y muchos otros.
SeedProd también te permite personalizar tu barra lateral totalmente de la misma manera que otras plantillas.
Por ejemplo, puedes añadir un formulario de suscripción al boletín por correo electrónico a tu barra lateral con unos pocos clics.
Para hacerlo, simplemente arrastra y suelta el elemento Formulario de suscripción desde la pestaña Bloques a tu barra lateral:
Luego, si haces clic en él, puedes cambiar el número de campos, su tipo y más.
Ahora que sabes cómo trabajar dentro del editor visual de SeedProd, estás listo para personalizar el CSS global de tu tema.
Paso 4: Personalizar el CSS Global de tu Tema (Sin Código)
Primero, aclaremos qué es CSS y cómo puedes cambiar la apariencia global de tu sitio editando este archivo.
CSS significa hojas de estilo en cascada. Es un archivo que contiene código que determina el estilo global, la tipografía y los colores de tu sitio.
Cuando cambias la apariencia de un elemento en el archivo CSS, esos cambios se aplican a ese elemento en todo tu sitio.
Cada tema de WordPress tiene su propio archivo CSS. Normalmente, para hacerle cambios, necesitas tener algunos conocimientos de desarrollo web.
Pero, SeedProd te permite personalizar el CSS global de tu sitio en un editor sencillo y amigable para principiantes.
Para empezar, haz clic en la plantilla CSS global en el panel de plantillas de tu tema.
Esto te llevará al editor visual de la configuración CSS global.
En el lado izquierdo, encontrarás pestañas donde puedes cambiar el color, las fuentes, el fondo y más de tu sitio.
Y en el lado derecho, puedes ver los resultados de los cambios que has realizado en tiempo real.
Por ejemplo, cambiemos la fuente de los encabezados.
Para ello, puedes hacer clic en la pestaña Fuentes.
Para cambiar la fuente de todos los encabezados de H1 a H6, selecciona una nueva fuente en el menú desplegable bajo el título Fuente de encabezado.
También hay una opción para cambiar el color de la fuente.
Si deseas cambiar la fuente de un encabezado en particular, puedes activar el interruptor Mostrar configuración de H1 – H6.
Luego, haz clic en el botón Editar junto a la opción Tipografía de un encabezado elegido y selecciona la fuente que deseas.
Por ejemplo, cambiaremos la fuente del encabezado H1 a Comic Sans. Como puedes ver, la fuente cambió al instante.
Cuando hayas terminado de ajustar la configuración CSS, haz clic en el botón Guardar para guardar los cambios realizados.
De esta manera, puedes personalizar muchas cosas relacionadas con la apariencia de tu tema personalizado de WordPress.
Ahora que sabes cómo editar la configuración global de CSS, estás listo para continuar y conectar tu cuenta de servicio de marketing por correo electrónico.
Paso 5: Conectar con tu Servicio de Marketing por Correo Electrónico
SeedProd tiene una integración perfecta con los servicios de marketing por correo electrónico más populares. Esta lista incluye, entre otros, Mailchimp, Constant Contact y Drip.
Esta es una gran noticia si ya tienes una base activa de suscriptores de correo electrónico o si deseas comenzar a hacer crecer tu primera lista de correo electrónico.
Para conectar tu cuenta de marketing por correo electrónico, primero navega a la pestaña Constructor de temas y haz clic en cualquier plantilla.
Luego, ve a la pestaña Conectar en el panel superior.
Una vez allí, coloca el cursor sobre un servicio que estés utilizando, presiona el botón Conectar y sigue las instrucciones en pantalla.
Cuando hayas terminado de conectar tu servicio de correo electrónico, presiona el botón Guardar en la parte superior derecha para guardar los cambios.
Ahora, SeedProd recopilará los correos electrónicos de los visitantes que completaron tu formulario de suscripción y los agregará a tu base de correos electrónicos.
Paso 6: Publicar tu Tema Personalizado de WordPress
El último paso es publicar tu tema personalizado y ponerlo en vivo en tu sitio web.
Para ello, primero, ve a SeedProd » Constructor de temas desde tu panel de WordPress.
Luego, activa el interruptor Habilitar tema de SeedProd en la parte superior derecha.
Eso es todo. Tu tema personalizado de WordPress está en vivo y puedes verlo en tu sitio.
Para ello, simplemente visita tu sitio web y ve el nuevo tema personalizado.
Por ejemplo, aquí está nuestra página de inicio personalizada en nuestro sitio de demostración:
Y aquí está la plantilla de publicación de blog individual que también personalizamos con solo unos pocos clics usando SeedProd:
Extra: Crear Formularios de Búsqueda y Página de Resultados Personalizados
¿Ahora, te gustaría mejorar también la experiencia de búsqueda en tu sitio de WordPress con tema personalizado?
La búsqueda predeterminada de WordPress carece de muchas funciones y a menudo no ofrece resultados relevantes, especialmente si tienes muchos artículos o productos en tu sitio.
Aquí es donde SearchWP puede ayudarte. Es el mejor plugin de búsqueda para WordPress y mejora la búsqueda predeterminada al permitirte incluir campos personalizados, etiquetas, categorías, detalles de productos, archivos multimedia, documentos y más en el proceso de búsqueda.
Con SearchWP, puedes configurar formularios de b uevo personalizados y enlazarlos a motores de b uevo espec icos. Tambi (n) ofrece dise (n)os predefinidos y muchas opciones de personalizaci (n).
¡Eso no es todo! SearchWP tambi (n) viene con plantillas de resultados para WordPress. Puedes personalizar c (f)mo aparecer (n) los resultados de la b uevo en tu sitio y seleccionar entre plantillas predefinidas.
Para obtener m (f)s informaci (f)n, consulta nuestra gu (f)a sobre c (f)mo crear una p (f)gina de b uevo de aspecto profesional en WordPress.
Esperamos que este art (f)culo te haya ayudado a aprender a crear un tema personalizado de WordPress en 6 sencillos pasos, sin necesidad de c (f)digo. Tambi (f)n te puede interesar nuestra gu (f)a sobre los mejores plugins de b uevo para WordPress para potenciar la b uevo de tu sitio y c (f)mo crear una p (f)gina de b uevo en WordPress.
Si tambi (f)n quieres mejorar la b uevo de WordPress, entonces puedes empezar con SearchWP aqu (f).
