Cómo crear un tema personalizado de WordPress (sin ningún código)

¿Quieres crear un tema de WordPress personalizado desde cero? En el pasado, tenía que seguir el códice de WordPress y tener un buen conocimiento de codificación para crear un tema personalizado de WordPress. Pero gracias a los nuevos generadores de temas de WordPress, ahora cualquiera puede crear un tema de WordPress totalmente personalizado en una hora (no se requieren conocimientos de codificación). En este artículo, le mostraremos cómo crear fácilmente un tema de WordPress personalizado sin escribir ningún código.

Crea un tema de WordPress personalizado para principiantes

A diferencia de los sitios HTML estáticos, los temas de WordPress son una colección de archivos de plantilla escritos en PHP, HTML, CSS y JavaScript. Como regla general, debe tener una comprensión decente de todos estos lenguajes de diseño web o contratar a un desarrollador web para crear un tema personalizado de WordPress. Si ha contratado a un desarrollador o una agencia, el costo de un tema personalizado de WordPress puede ascender a miles de dólares. Dado que muchos propietarios de pequeñas empresas no podían pagar los altos costos de un tema personalizado de WordPress, muchos se quedaron con los temas predeterminados que vienen con WordPress. Aquellos que no querían instalarse y querían personalizaciones usaron un creador de páginas de WordPress de arrastrar y soltar o usaron un marco temático para crear un tema personalizado. Si bien los marcos de temas de WordPress facilitan la creación de un tema de WordPress, son una solución para los desarrolladores, no para el propietario promedio de un sitio web. Por otro lado, los complementos del creador de páginas de WordPress facilitaron la creación de diseños personalizados mediante una interfaz de arrastrar y soltar, pero se limitaron solo a diseños. No se podían crear temas personalizados con él. Hasta que Beaver Builder, uno de los mejores complementos de creación de páginas de WordPress decidió resolver este problema con su complemento llamado Beaver Themer.

Beaver Themer es un complemento de creación de sitios que le permite crear diseños de temas personalizados mediante una interfaz de arrastrar y soltar y sin aprender a codificar. Veamos cómo usar Beaver Themer para crear fácilmente un tema de WordPress.

Video tutorial

Suscríbase a MundoCMS Si no le gusta el video o necesita más instrucciones, siga leyendo.

Configurar Beaver Themer para crear un tema personalizado

Beaver Themer es un complemento adicional para Beaver Builder, por lo que necesitará ambos complementos para este artículo. En primer lugar, debe instalar y activar los complementos Beaver Builder y Beaver Themer. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress. Beaver Themer te permite crear un tema personalizado, pero aún necesitarás un tema para comenzar. Le recomendamos que utilice un tema ligero que incluya una plantilla de página de ancho completo para que sirva como tema de inicio. Puede encontrar muchos de estos temas en el directorio de temas de WordPress.org. La mayoría de los temas modernos de WordPress incluyen una plantilla de ancho completo. Nuestras mejores opciones son:

• Astra: un tema de WordPress ligero y gratuito para todo uso que viene con soporte incorporado de Beaver Builder.
• OeanWP: otro tema de WordPress multipropósito gratuito y popular que admite el creador de páginas completas.
• Temas de StudioPress: todos sus temas son compatibles con Beaver Builder y funcionarían muy bien con Beaver Themer.

Para este tutorial, usaremos Astra, que es liviano y fácil de personalizar el tema de WordPress.

Configura tu tema para Beaver Themer

Al crear un tema de WordPress personalizado con Beaver Themer, es importante asegurarse de que Beaver Themer tenga acceso a todo el cuerpo de la página (de borde a borde). Este es el diseño predeterminado de Astra. Como puede ver, este diseño incluye una barra lateral que puede ser difícil de usar cuando se usa Beaver Themer.

Puede cambiar esto visitando el panel de administración de su sitio web y luego yendo a Apariencia »Personalizar página. A partir de ahí tienes que pasar al Diseño »Barras laterales lengua.

Una vez allí, seleccione "Sin barra lateral" en la opción de diseño predeterminado y haga clic en el botón Publicar para guardar los cambios. Su tema ahora comenzará a usar un diseño sin barras laterales. Este es el mejor diseño para usar con Beaver Themer.

Este diseño de página completa permite a Beaver Themer utilizar cada centímetro de la pantalla, lo que le permite crear una hermosa experiencia visual de principio a fin. La mayoría de los temas de WordPress incluyen un archivo de plantilla para páginas de ancho completo. Si está utilizando otro tema, puede encontrar una opción para eliminar las barras laterales en la configuración de su tema. Si no puede encontrarlo, comuníquese con el desarrollador de su tema y es posible que pueda ayudarlo. Una vez que haya configurado su tema para un diseño de ancho completo, estará listo para crear su tema personalizado de WordPress usando Beaver Themer.

Fundamentos de Quick Beaver Themer

Beaver Themer trabaja en Beaver Builder. Como complemento de creación de páginas, Beaver Builder le permite arrastrar y soltar elementos en una página para crear diseños personalizados. Contiene los siguientes elementos que puede utilizar en sus diseños:

• Plantilla: una colección de filas de columnas y módulos que componen un diseño completo.
• Columnas: módulos de diseño vertical que ayudan a alinear el contenido horizontalmente.
• Líneas: colección horizontal de varios módulos
• Módulo: elemento que genera información específica como título, bloque de texto, tabla, galería, etc.

Simplemente edite una página en Beaver Builder, luego haga clic en el botón Agregar en la esquina superior derecha. Luego puede arrastrar y soltar columnas, filas, módulos en su página y comenzar a editarlos inmediatamente.

Si no desea comenzar desde cero, elija de una lista de plantillas prediseñadas para comenzar.

Beaver Builder también le permite guardar sus diseños y luego usarlos como plantillas. Para obtener más información, consulte nuestro artículo sobre cómo crear un diseño personalizado con Beaver Builder. Sin embargo, no solo queremos crear diseños. Queremos crear un tema personalizado completo. Aquí es cuando entra Beaver Themer. Agrega otro elemento a Beaver Builder llamado "Themer Layout".

Estos diseños le permiten crear diseños personalizados para el encabezado, pie de página, áreas de contenido, página 404 y otras partes de la plantilla. Estos son los componentes básicos de todos los temas de WordPress y, al usarlos, podrá crear un tema personalizado que satisfaga sus necesidades.

Uso de plantillas de Beaver Themer para crear un tema personalizado de WordPress

En las siguientes instrucciones, lo guiaremos a través de los pasos necesarios para crear los elementos de tema personalizados más populares. Cuando haya terminado, habrá transformado completamente su tema base en un tema hijo de WordPress totalmente personalizado.

Crea un encabezado personalizado para tu tema

Comencemos con el área de encabezado de su sitio web. Un encabezado personalizado es un componente esencial de un tema y crear uno puede ser complicado con los métodos tradicionales. Afortunadamente, Beaver Themer tiene funciones de encabezado integradas. Puede utilizar la plantilla creada previamente o utilizar el menú y los módulos de imagen con un diseño de dos columnas. Para acceder a esta área de encabezado, primero debemos configurar un diseño de encabezado en Beaver Themer. Visita Beaver Builder »Agregar nuevo página y proporcione un título para su encabezado.

Después de eso, seleccione "Diseño de Themer" como tipo y "Encabezado" como opción de diseño. Una vez que haya terminado, haga clic en el botón `` Agregar diseño de Themer '' para continuar. Esto lo llevará a la página de configuración de diseño de página. Desde allí, debe seleccionar "Todo el sitio" como la ubicación donde se mostrará la plantilla de encabezado.

Luego haga clic en el botón "Iniciar Beaver Builder" para abrir la interfaz del constructor. Beaver Builder se iniciará con un diseño básico de una sola columna y dos filas de encabezado como punto de partida.

Puede utilizar las mismas herramientas de arrastrar y soltar de Beaver Builder para cambiar el fondo, los colores, el texto, etc. También puede agregar otros módulos, cargar plantillas predefinidas y agregar filas / columnas haciendo clic en el botón Agregar en la esquina superior derecha. Una vez que esté satisfecho con el diseño, haga clic en el botón Listo para guardar o publicar su diseño. Ahora puede visitar su sitio web para ver el encabezado de su tema personalizado en acción. Como puede ver, hemos aplicado el diseño del encabezado a nuestro tema personalizado.

Aparte del encabezado, todavía no mostrará ningún contenido y es probable que vea el área de pie de página de su tema base. Cambiemos eso.

Crear un pie de página personalizado para su tema

Puede crear un pie de página personalizado para su tema utilizando Beaver Themer, al igual que creó un encabezado personalizado. Dirigirse a Beaver Builder »Agregar nuevo página y proporcione un título para el diseño de su pie de página. A continuación, seleccione "Diseño de Themer" como tipo y "Pie de página" como opción de diseño.

Haga clic en el botón "Agregar diseño de Themer" para continuar. Esto lo llevará a la página de configuración de diseño de página. A partir de ahí, debe seleccionar "Todo el sitio" como la ubicación donde se mostrará la plantilla.

Después de eso, haga clic en el botón "Iniciar Beaver Builder" para abrir la interfaz del constructor. Beaver Builder se lanzará con un diseño de pie de página con tres columnas. Puede utilizar este diseño como punto de partida y empezar a editar.

Puedes agregar módulos, bloques de texto o lo que quieras. Aún puede cambiar colores, fuentes, agregar imágenes de fondo, etc. Una vez que esté satisfecho con el diseño, haga clic en el botón Listo para guardar o publicar su ...