¿Quieres crear diseños personalizados de WordPress para tu sitio web y darle un aspecto único?
Independientemente de tus habilidades, es fácil crear un diseño personalizado de WordPress sin tener que contratar a un desarrollador.
En este artículo, te mostraremos cómo crear un diseño personalizado de WordPress utilizando el mejor constructor de páginas de WordPress, SeedProd. También te mostraremos cómo hacerlo usando Beaver Builder.
Muchos de ustedes deben preguntarse, ¿por qué crear un diseño personalizado cuando simplemente pueden elegir un tema premium y comenzar su página con uno de sus diseños predefinidos?
Por qué crear diseños personalizados de WordPress
Encontrarás una gran cantidad de temas premium de WordPress que ofrecen varios diseños integrados impresionantes, listos para usar de inmediato. Definitivamente puedes optar por estos hermosos diseños y darle a tu sitio un aspecto atractivo.
Pero el problema con dichos diseños es que, debido a su disponibilidad inmediata, son ampliamente utilizados por cientos y miles de usuarios en toda la web.
Eso significa que si estás utilizando un diseño predefinido para tu sitio de WordPress, no podrás darle un aspecto distintivo a menos que lo personalices mucho. Además, es posible que estos diseños tampoco cumplan con tus requisitos. Crear un diseño personalizado es la mejor opción en estos casos.
Si eliges usar Gutenberg (editor de bloques), no tendrás la facilidad y libertad para diseñar tu sitio como deseas. Es posible que necesites agregar tu propio CSS para mejorar tus plantillas de publicaciones únicas personalizadas.
Creando un diseño personalizado de WordPress con SeedProd
La mejor manera de crear diseños personalizados visualmente impresionantes para tu sitio web de WordPress es usar el constructor SeedProd.
SeedProd es fácil de usar y te da la capacidad de editar el front-end de tu sitio web visualmente. Nunca tendrás que usar código o hacer cambios a ciegas solo para ver una vista previa y darte cuenta de que no funciona.
SeedProd es, sin duda, la forma número 1 de crear diseños personalizados de WordPress. Puedes leer más sobre este plugin aquí: Reseña de SeedProd.
Para crear un diseño personalizado para tu sitio, necesitarás instalar y activar SeedProd en tu sitio.
Luego, dirígete a tu panel de wp-admin y verás SeedProd en la barra de tareas izquierda.
Esto te permitirá acceder al panel de control de SeedProd. Dentro, puedes elegir usar un kit de tema prefabricado o podrías crear páginas de destino individuales. Para este tutorial, seleccionaremos Theme Builder » Theme Template Kits.
Ahora verás una biblioteca de kits entre los que puedes elegir. Estos kits vienen con imágenes destacadas de stock y contenido de ejemplo que puedes editar rápidamente para hacerlo tuyo.
Una vez que elijas un kit, todas las páginas y publicaciones del kit se importarán y publicarán en tu sitio. Puedes usar esto para crear plantillas para tus páginas y publicaciones.
Para personalizar el diseño de la publicación, selecciona Edit Design debajo de Single Post.
Ahora se abrirá el constructor visual de arrastrar y soltar, donde verás una vista previa en vivo de tu página junto con opciones de personalización para editarla.
Para hacer ediciones en tu plantilla de página personalizada, simplemente puedes seleccionar cualquier blog y obtendrás opciones para editar el contenido, la tipografía, el color, el fondo y más. Para agregar nuevos bloques, simplemente arrastra un bloque desde el menú de la izquierda y colócalo donde quieras en tu diseño, así:
Verás bloques prefabricados para agregar:
- Publicaciones
- Título de la Publicación
- Contenido de la publicación
- Extracto de la publicación
- Biografía del autor de la publicación
- Comentarios
- Logo del sitio
- Navegación de publicaciones
…y más. También verás bloques para agregar texto, espaciado, imágenes, botones, columnas, formularios de contacto, temporizadores de cuenta regresiva, sorteos y otros widgets.
SeedProd también se integra con WooCommerce, por lo que puedes agregar campos personalizados como cuadrículas de productos, botones de agregar al carrito y de pago, y mucho más.
Básicamente, tienes control total sobre cada nueva publicación que subes a tu blog de WordPress.
SeedProd es tan fácil de usar que, incluso como principiante, no hay mucho que aprender.
Te mostraremos lo básico y podrás explorar las funciones avanzadas por tu cuenta. Cuando selecciones un bloque, verás que se resalta en naranja. Luego verás que aparece un menú encima del bloque donde puedes cambiar su posición, eliminarlo, duplicarlo y más.
Para cambiar o eliminar una fila completa, puedes seleccionar la fila y verás que se resalta en morado.
Así, puedes resaltar la fila y usar el símbolo de Más para agregar una nueva fila. Verás diseños entre los que puedes elegir.
Luego puedes seleccionar el ícono de navegación para arrastrarlo y soltarlo en otra área de la página. Para reordenar filas y bloques, todo lo que tienes que hacer es agarrarlo y moverlo a donde quieras.
SeedProd viene con secciones y bloques inteligentes que puedes agregar a tu página. En el menú de la izquierda, selecciona la pestaña 'Secciones'. Aquí, obtendrás encabezados listos para usar, llamadas a la acción, preguntas frecuentes, pies de página y mucho más.
Puedes elegir bloques de contenido de ancho completo o seleccionar uno con un diseño predefinido. Usando estas funciones, puedes crear un diseño personalizado para tu sitio en muy poco tiempo. También puedes agregar un nombre de plantilla y guardarla para uso futuro.
Los diseños son automáticamente responsivos. Incluso puedes usar la vista previa móvil para asegurarte de que el diseño de tu sitio se vea bien en dispositivos móviles.
¡Eso es todo! Es realmente así de simple crear un diseño personalizado para tu sitio web con SeedProd.
SeedProd es, sin duda, la mejor opción para crear un diseño personalizado de WordPress. Obtienes plantillas de publicaciones simples predefinidas que facilitan la creación de diferentes diseños para tu sitio.
Además de eso, puedes seguir creando nuevas publicaciones de WordPress usando esta plantilla que creaste.
Existe una versión gratuita de SeedProd en el repositorio de plugins de WordPress. La versión pro te da acceso a funciones increíbles para tu sitio.
Creando un diseño personalizado de WordPress con Beaver Builder
El plugin Beaver Builder es un popular constructor de páginas de arrastrar y soltar que te permite crear algunos de los diseños más impresionantes para tu blog de WordPress en cuestión de minutos.
Lo mejor de este plugin es el nivel de flexibilidad que ofrece. Puedes tomar el control de casi todo.
Colores, textos, fuentes, imágenes – todo se puede personalizar completamente para obtener el aspecto exacto que siempre has soñado.
Otra cosa que te encantará de Beaver Builder es que, a diferencia de otros plugins constructores de páginas, es muy fácil de usar para principiantes y no tienes que pasar horas descifrando cómo usarlo. Además, también ofrece docenas de plantillas visualmente impresionantes para ayudarte a empezar.
Echa un vistazo a nuestra reseña de Beaver Builder aquí. Ahora veamos cómo crear tus diseños personalizados usando este plugin.
Paso 1: Instalando y configurando Beaver Builder en WordPress
El primer paso es instalar y activar Beaver Builder en tu sitio web. Puedes descargar el plugin yendo al sitio de Beaver Builder. Una vez activado, ve a Ajustes » Page Builder.
Aquí puedes ingresar la clave de licencia para habilitar el soporte y recibir actualizaciones. Una vez hecho esto, estarás listo para crear tu primer diseño personalizado.
Paso 2: Creando tu primer diseño personalizado
Para crear tu primer diseño personalizado, ve a Todas las páginas » Añadir nueva en tu panel de WordPress. En tu editor de texto, tendrás la opción de cambiar al constructor de páginas.
Simplemente haz clic en esta opción y verás que se inicia la pestaña del constructor de páginas. Verás varias opciones de plantillas aquí. Así que selecciona la que más te guste para tu diseño. También puedes hacer clic en la flecha desplegable y seleccionar el tipo de diseño que deseas. Esto puede ser para tus páginas de destino o tus páginas de contenido.
Una vez hecho esto, serás dirigido a su constructor de arrastrar y soltar. Para editar un campo en particular, solo necesitas pasar el cursor sobre esa área específica y luego hacer clic en ella y comenzar a personalizar tu diseño.
Puedes agregar hasta 6 columnas, barras laterales, audios, imágenes, separadores y más a tus diseños. Para agregar filas y barras laterales, haz clic en las pestañas de Diseños de Fila. Luego arrastra el número de columnas que deseas y suéltalo en tu constructor visual.
Esto te permite organizar la jerarquía de tu plantilla.
Una vez que se agreguen tus columnas, simplemente haz clic en ellas y personalízalas para que coincidan con tus requisitos. Puedes cambiar el fondo, el color del texto, agregar enlaces, textos, bordes y más a tus columnas. Estas columnas y filas también se pueden guardar para su uso posterior. Para ello, simplemente haz clic en el botón Guardar al final de la ventana emergente.
Para otros elementos, necesitas usar la opción Módulos básicos. También tienes varios otros elementos que puedes agregar a tu diseño, como botones, acordeones, tablas de precios, mapas, temporizadores de cuenta regresiva y mucho más.
Simplemente necesitas arrastrar los elementos de la derecha y soltarlos en el constructor visual de tu izquierda. Cada uno de estos elementos es personalizable. Así, por ejemplo, si quieres agregar un nuevo encabezado, solo haz clic en Encabezado y arrástralo y suéltalo en tu diseño. Después de eso, haz clic en el elemento Encabezado para personalizarlo.
Tendrás 3 pestañas diferentes aquí. General, Estilo y Avanzado. La primera te permite agregar tus textos, enlaces, etc. a tus encabezados. La segunda pestaña te permite estilizar tu encabezado con diferentes colores, fuentes, etc. La opción Avanzado te permite trabajar en los márgenes, visibilidad, responsividad, animación, etc.
Puedes agregar tantos elementos y módulos como desees utilizando el mismo método y luego personalizarlos para que cumplan con tus requisitos. Los menús desplegables aquí facilitan mucho hacerlo.
Después de haber editado tus diseños, haz clic en el botón Hecho en la esquina superior derecha de tu pantalla. Verás una nueva ventana emergente con varias opciones diferentes, como las que se muestran en la siguiente captura de pantalla.
Usando estas opciones puedes Guardar tu borrador, Publicarlo o descartarlo.
Paso 3: Reutilizar tu diseño
Beaver Builder también te permite guardar tu diseño personalizado de WordPress y reutilizarlo cuando quieras. Para usar esta opción, ve a Herramientas en la esquina superior derecha de tu pantalla. Verás las siguientes opciones en tu pantalla.
Ahora, dependiendo de tus requisitos, selecciona la opción. Si deseas usar la plantilla para uso posterior, haz clic en la opción Guardar Plantilla y luego asigna un nombre a tu diseño. Después de eso, presiona el botón Guardar.
Tu nuevo archivo de plantilla se ha guardado y está listo para su uso futuro en cualquier momento.
Paso 4: Administrar tus Plantillas
Los diseños que creas con Beaver Builder se pueden usar en sitios web ilimitados. Las plantillas creadas por sus usuarios se almacenan en un tipo de publicación personalizado llamado plantillas.
Por defecto, esta opción está oculta. Puedes hacerla visible yendo a la pestaña Configuración » Page Builder » Plantillas.
Ahora haz clic en la opción Habilitar Administración de Plantillas y presiona el botón Guardar Configuración de Plantillas. Al hacer esto, notarás un nuevo elemento de menú llamado Plantillas que aparece en tu barra de administración de WordPress. Todos los diseños de página que guardes como plantilla aparecerán en esa página.
Exportar tus Diseños de WordPress
Dado que los diseños que creas se guardan como un tipo de publicación personalizado, puedes exportar fácilmente tus plantillas de Beaver Builder. Para esto, tienes la función de exportación integrada en WordPress. Para usar esta función, ve a la página Herramientas » Exportar.
Ahora selecciona Plantillas. Haz clic en la flecha desplegable y selecciona la plantilla que deseas exportar. Después de eso, presiona el botón Descargar Archivo de Exportación y WordPress te enviará un archivo XML para que lo descargues.
Importar Diseños de Beaver Builder
Para importar un diseño, ve al panel del sitio web donde deseas que se importe este diseño. Ahora ve a Configuración » Importar » WordPress. Haz clic en la opción Instalar ahora debajo de la pestaña WordPress. Esto descargará e instalará el plugin importador de WordPress.
Una vez que el plugin se haya descargado, puedes subir el archivo XML que acabas de descargar. Tu diseño ahora está listo para ser utilizado en tu otro sitio también.
Y eso es todo. Ahora puedes crear diseños de publicaciones personalizados en muy poco tiempo sin tocar nunca archivos PHP, HTML y otros códigos. Esperamos que te haya gustado nuestro tutorial.
Si te gustó, también podrías querer conocer algunas de las otras alternativas a Beaver Builder que puedes probar.
Comentarios Dejar una respuesta