Cómo crear fácilmente un tema personalizado de WordPress (sin código)

¬ŅQuieres crear un tema personalizado de WordPress desde el principio?

Anteriormente, tenía que seguir el códice de WordPress y tener un conocimiento de codificación decente para crear un tema personalizado de WordPress. Pero gracias a los nuevos generadores de temas de WordPress, 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 personalizado de WordPress sin escribir ning√ļn c√≥digo.

Crea un tema personalizado de WordPress para principiantes

A diferencia de los sitios web HTML est√°ticos, los temas de WordPress son un conjunto de archivos de plantilla escritos en PHP, HTML, CSS y JavaScript. Por lo general, necesitar√≠a 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 contrató a un desarrollador o agencia, el costo de un tema personalizado de WordPress puede contarse en miles de dólares.

Dado que muchos propietarios de peque√Īas empresas no pod√≠an pagar el alto costo de un tema personalizado de WordPress, muchos de ellos se conformaron con el tema est√°ndar que viene con WordPress.

Aquellos que no querían configurarse y deseaban personalizaciones, usaron un generador de páginas de arrastrar y soltar de WordPress o usaron un marco de temas para crear un tema personalizado.

Si bien los marcos de temas de WordPress facilitaron la creación de un tema de WordPress, son una solución para desarrolladores, no un propietario promedio de sitios web.

Por otro lado, los complementos del creador de p√°ginas de WordPress facilitaron la creaci√≥n de dise√Īos de p√°gina personalizados con una interfaz de arrastrar y soltar, pero se limitaron solo a los dise√Īos. No puedes crear temas personalizados con √©l.

Incluso Beaver Builder, uno de los mejores complementos del creador de páginas de WordPress decidió resolver este problema con su complemento llamado Beaver Themer.

Beaver Builder, el mejor complemento generador de p√°ginas de WordPress

Beaver Themer es un complemento de creaci√≥n de sitios web que le permite crear dise√Īos de temas personalizados con una interfaz de arrastrar y soltar y sin aprender a codificar.

Echemos un vistazo a cómo usar Beaver Themer para crear fácilmente un tema de WordPress.

tutoriales de vídeo

Suscríbase a WPBeginner

Si no le gusta el video o necesita m√°s instrucciones, siga leyendo.

Configure Beaver Themer para crear un tema personalizado

Beaver Themer es un complemento adicional para Beaver Builder, por lo que necesita ambos complementos para este artículo.

Primero, debe instalar y habilitar los complementos Beaver Builder y Beaver Themer. Para obtener más información, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Beaver Themer le permite crear un tema personalizado, pero a√ļn necesita un tema para comenzar. Recomendamos que utilice un tema ligero que incluya una plantilla de p√°gina de ancho completo para servir como tema inicial.

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 gratuito y fácil para todos los propósitos que viene con soporte incorporado para Beaver Builder.

OeanWP: otro popular tema de WordPress con m√ļltiples funciones que viene con soporte de compilaci√≥n unificada.

Temas de StudioPress: todos sus temas cumplen con Beaver Builder y funcionan bien con Beaver Themer.

Para este tutorial, utilizaremos Astra, que es un tema de WordPress ligero y f√°cilmente personalizable.

Establece tu tema para Beaver Themer

Al crear un tema personalizado de WordPress con Beaver Themer, es importante asegurarse de que Beaver Themer tenga acceso a toda la p√°gina (de borde a borde).

Este es el dise√Īo est√°ndar de Astra. Como puede ver, este dise√Īo contiene una barra lateral con la que puede ser dif√≠cil trabajar cuando se usa Beaver Themer.

Dise√Īo de tema est√°ndar con una barra lateral

Puede cambiarlo visitando el panel de administraci√≥n de su sitio y luego navegando a Apariencia ¬ĽPersonalizar lado. Desde aqu√≠ deber√≠as cambiar a Dise√Īo ¬ĽBarras laterales pesta√Īa.

desactivar barras lateralmente en tu tema

Una vez all√≠, seleccione "Sin barra lateral" en la opci√≥n de dise√Īo predeterminada y haga clic en el bot√≥n Publicar para guardar los cambios.

Su tema ahora comienza a usar un dise√Īo sin barras lado. Este es el mejor dise√Īo para usar con Beaver Themer.

Dise√Īo tem√°tico sin barras lado

Este dise√Īo de p√°gina completa le permite a Beaver Themer usar cada cent√≠metro de la pantalla, lo que le permite crear una hermosa experiencia visual de extremo a extremo.

La mayoría de los temas de WordPress incluyen un archivo de plantilla de página completa. Si usa un tema diferente, puede encontrar una opción para eliminar barras páginas en la configuración de su tema.

Si no lo encuentra, póngase en contacto con su desarrollador de temas y ellos pueden ayudarlo.

Una vez que haya configurado su tema en un dise√Īo ancho, estar√° listo para crear su tema personalizado de WordPress con Beaver Themer.

Los fundamentos de Quick Beaver Themer

Beaver Themer trabaja en Beaver Builder. Como una adici√≥n al generador de p√°ginas, Beaver Builder le permite arrastrar y soltar elementos a una p√°gina para crear dise√Īos personalizados.

Tiene los siguientes elementos que puede usar en sus dise√Īos:

Plantilla: una colecci√≥n de columnas, filas y m√≥dulos que conforman un dise√Īo de p√°gina completo. Columnas: m√≥dulos de dise√Īo vertical que ayudan a ajustar el contenido horizontalmente. Filas: colecci√≥n horizontal de m√ļltiples m√≥dulos M√≥dulo: un 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 y luego haga clic en el botón Agregar en la esquina superior derecha. Luego puede arrastrar y soltar columnas, filas, módulos a su página y comenzar a editarlos directamente.

Usando Beaver Builder

Si no desea comenzar desde cero, elija una lista de plantillas enviadas para comenzar.

Plantillas Beaver Builder

Beaver Builder tambi√©n le permite guardar sus dise√Īos y luego usarlos m√°s tarde como plantillas.

Para obtener m√°s informaci√≥n, consulte nuestro art√≠culo sobre c√≥mo crear un dise√Īo de p√°gina personalizado con Beaver Builder.

Sin embargo, no solo queremos crear dise√Īos de p√°gina. Queremos crear un tema completamente personalizado.

Aquí es cuando entra Beaver Themer.

Agregue otro elemento a Beaver Builder llamado "Themer Layout".

Dise√Īo Themer

Los dise√Īos de Themer le permiten crear dise√Īos personalizados para encabezados, pies de p√°gina, √°reas de contenido, p√°ginas 404 y otras partes de la plantilla.

Estos son los bloques de construcción para todos los temas de WordPress, y al usarlos puede crear un tema personalizado que satisfaga sus necesidades.

Use las 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 su tema base en un tema de WordPress totalmente personalizado.

Crea un título personalizado para tu tema

Comencemos con el √°rea de t√≠tulo de su sitio web. Un encabezado personalizado es un componente esencial de un tema, y ‚Äč‚Äčconstruir uno puede ser dif√≠cil con los m√©todos tradicionales.

Afortunadamente, Beaver Themer tiene caracter√≠sticas principales incorporadas. Puede usar la plantilla pre-creada o usar el men√ļ y los m√≥dulos de imagen con un dise√Īo de dos columnas.

Para llegar a esta √°rea de encabezado, primero debemos configurar un dise√Īo de encabezado en Beaver Themer. visita Beaver Builder ¬ĽA√Īadir nuevo y dale un t√≠tulo a tu t√≠tulo.

Crear un dise√Īo de encabezado personalizado

Luego seleccione "Dise√Īo Themer" como tipo y "Encabezado" como opci√≥n de dise√Īo. Cuando haya terminado, haga clic en el bot√≥n "Agregar dise√Īo Themer" para continuar.

Esto lo llevar√° a la p√°gina de configuraci√≥n de dise√Īo. Desde aqu√≠, debe seleccionar "Sitio completo" como el lugar donde aparecer√° la plantilla de encabezado.

opciones de dise√Īo

Luego haga clic en el botón "Iniciar Beaver Builder" para abrir la interfaz del generador.

Beaver Builder comenzar√° con una columna b√°sica simple y un dise√Īo de encabezado de dos l√≠neas como punto de partida.

Dise√Īo de encabezado

Puede usar la misma herramienta de arrastrar y soltar que Beaver Builder para cambiar el fondo, los colores, el texto, etc. También puede agregar otros módulos, cargar plantillas prefabricadas y agregar filas / columnas haciendo clic en el botón Agregar. esquina superior derecha

Cuando 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 t√≠tulo de su tema personalizado en acci√≥n. Como puede ver, hemos utilizado el dise√Īo del encabezado para nuestro tema personalizado.

Encabezado personalizado para su tema personalizado

M√°s all√° del t√≠tulo, todav√≠a no mostrar√° ning√ļn contenido y probablemente ver√° el pie de p√°gina del tema base.

Cambiemos esto.

Crea un pie de p√°gina personalizado para tu tema

Puede crear un pie de página personalizado para su tema con Beaver Themer tal como creó un encabezado personalizado.

Ir a Beaver Builder ¬ĽA√Īadir nuevo y proporcione un t√≠tulo para el dise√Īo de su pie de p√°gina. Luego seleccione "Dise√Īo Themer" como tipo y "Pie de p√°gina" como opci√≥n de dise√Īo.

El dise√Īo del pie de p√°gina

Haga clic en el bot√≥n "Agregar dise√Īo" para continuar.

Esto lo llevar√° a la p√°gina de configuraci√≥n de dise√Īo. Desde aqu√≠, debe seleccionar "Sitio web completo" como el lugar donde aparece la plantilla.

Configuración del pie de página

Luego haga clic en el botón "Iniciar Beaver Builder" para abrir la interfaz del generador.

Beaver Builder se lanzar√° con un dise√Īo de pie de p√°gina de tres columnas. Puede usar este dise√Īo como punto de partida y comenzar a editar.

Editar el dise√Īo del pie de p√°gina

Puede agregar módulos, bloques de texto o cualquier otra cosa que desee. Siempre puede cambiar los colores, las fuentes, agregar un fondo de pantalla y más.

Cuando est√© satisfecho con el dise√Īo, haga clic en el bot√≥n Listo para guardar o publicar su dise√Īo.

Crear √°rea de contenido para publicaciones y p√°ginas

Ahora que hemos creado el encabezado y el pie de página para cada página y publicación en el sitio, es hora de crear la publicación o página en la página (área de contenido).

Comenzamos de la misma manera que construimos el encabezado y el pie de p√°gina agregando el dise√Īo "Singular" en la p√°gina Agregar nuevo.

Crear publicaciones y dise√Īos de p√°gina

Luego, elige d√≥nde quieres mostrar este dise√Īo. Puede elegir singular para usar en todas las publicaciones y p√°ginas individuales, o puede seleccionar publicaciones o p√°ginas solamente.

Conjunto de dise√Īo √ļnico

Luego haga clic en el botón "Iniciar Beaver Builder" para abrir la interfaz del generador.

Edici√≥n de dise√Īo √ļnico

Beaver Builder carga un dise√Īo de muestra √ļnico con el t√≠tulo de la publicaci√≥n / p√°gina en la parte superior, seguido del contenido, el cuadro de biograf√≠a del autor y el √°rea de comentarios.

Puede apuntar y hacer clic para editar cualquiera de estos elementos o agregar nuevos m√≥dulos, columnas y filas seg√ļn sea necesario.

Cuando est√© satisfecho con el dise√Īo, haga clic en Listo para guardar y publicar sus cambios.

Ahora puede visitar su sitio web para verlo en acción.

Dise√Īo tem√°tico con contenido.

Crea dise√Īos de archivo para tu tema personalizado

Ahora que su tema personalizado ha comenzado a tomar forma, puede continuar creando dise√Īos para otras partes de su sitio. Las p√°ginas de archivo son donde WordPress muestra sus categor√≠as, etiquetas, autores y archivos mensuales.

Creemos un dise√Īo de p√°gina de archivo en su tema personalizado.

Empiezas visitando Beaver Builder ¬ĽA√Īadir nuevo y proporcione un t√≠tulo para el dise√Īo de su archivo.

Crea un dise√Īo de archivo para tu tema personalizado

Luego seleccione "Dise√Īo Themer" como tipo y "Archivo" como opci√≥n de dise√Īo. Haga clic en el bot√≥n "Agregar dise√Īo" para continuar.

Esto lo llevar√° a la p√°gina de configuraci√≥n de dise√Īo. Desde aqu√≠, debe seleccionar "Todos los archivos" como la ubicaci√≥n donde aparecer√° la plantilla. Tambi√©n puede crear dise√Īos separados para cada tipo de archivo individual, como fecha, resultados de b√ļsqueda, categor√≠a, etiquetas, etc.

Configuraci√≥n de dise√Īo de archivo

Luego haga clic en el botón "Iniciar Beaver Builder" para abrir la interfaz del generador.

Beaver Builder comienza con un dise√Īo b√°sico para una columna. Muestra el t√≠tulo del archivo en la parte superior, seguido de publicaciones.

Edite el dise√Īo del archivo para su tema

Puede apuntar y hacer clic en cualquier objeto para editar sus propiedades. Tambi√©n puede agregar nuevos m√≥dulos, filas y columnas seg√ļn sea necesario.

Luego haga clic en el botón "Listo" para guardar y publicar sus cambios.

Crea otros dise√Īos para tu tema personalizado de WordPress

Beaver Themer tambi√©n le permite crear dise√Īos para otras p√°ginas en la jerarqu√≠a de plantillas, como la p√°gina 404, secciones de plantilla, p√°gina de resultados de b√ļsqueda y m√°s.

Con la función incorporada de arrastrar y soltar de Beaver Builder, puede crear fácilmente su propio tema de WordPress desde cero sin tener que escribir código. Este es realmente el método de desarrollo de métodos más amigable para principiantes para WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo crear un tema personalizado de WordPress sin aprender a codificar. También puede consultar nuestra guía sobre cómo acelerar su sitio de WordPress para una mejor experiencia de usuario y SEO.

Si te gustó este artículo, suscríbete a nuestro canal YouTube para ver el video tutorial de WordPress. También nos puede encontrar en Twitter y Facebook.