Cómo crear un tema libre de WordPress sin codificar en 3 pasos simples

Antes del generador de página, es solo un sueño para un usuario de WordPress sin habilidades de programación para crear un tema. Para crear un tema de WordPress, debe dominar al menos PHP, HTML y CSS. Si desea crear un tema complejo de WordPress (como los vendidos en ThmeForest), también es un requisito previo para dominar JavaScript. Eso fue entonces. Hoy, puede crear un tema de WordPress incluso si no tiene conocimiento de codificación. Algunos complementos para crear páginas de WordPress, incluida la primaria, vienen con una función de base, que le permite crear un tema de WordPress sin escribir ninguna línea de código. Puede crear un tema de WordPress usando un editor visual de arrastrar y soltar.
Antes de continuar, primero debes saber algo. Un tema de WordPress generalmente consta de tres partes principales: encabezado, sótano y una sola plantilla de publicación. La función de constructor de temas Elementor le permite crear estas tres partes. Además, también puede crear una página personalizada de 404, páginas de archivo, página de autor, etc. Nota: Temo Builder solo está disponible en Elementor Pro.
Obtener el Pro
La forma en que el generador de temas de Elementor funciona la función de los temas en el elemento funciona reemplazando las partes de su tema activo. Por ejemplo, si crea un encabezado con Elementor y lo publica, este nuevo encabezado reemplazará su encabezado de tema activo. Al igual que el sótano, la plantilla de una sola publicación, página 404, páginas de archivo, etc.
Normalmente, un sitio web tiene la misma plantilla de encabezado y sótano en todas las publicaciones y páginas. En el elemento, puede establecer la condición de visualización para establecer una plantilla de encabezado/sótano para aplicarla solo en ciertas páginas o publicaciones. Por supuesto, puede establecer una plantilla de encabezado/sótano para aplicarlo a todo el sitio web. Una cosa. No podrá guardar el tema de WordPress que creó con Elementor en una sola cremallera, como los temas de WordPress en general. Si desea guardar el tema, puede exportar cada lado y armarlos en una sola carpeta. Elementor almacenará sus piezas temáticas (y otras plantillas) en formato JSON. Cómo crear un tema sin WordPress con Elementor como se mencionó anteriormente, un WordPress generalmente consta de tres partes principales: encabezado, sótano y plantilla Publicación única. Lo guiaremos a través de los pasos para crear esas partes. Vamos a empezar. # Crea la plantilla de encabezado
Primero, inicie sesión en el tablero de WordPress y vaya a plantillas -> Builder de temas.
En la página de la página creativa, haga clic en el encabezado seguido del botón Agregar nuevo para crear una nueva plantilla de encabezado.

Dé un nombre a la plantilla de encabezado y haga clic en el botón Crear plantilla.

Elementor ofrece varias plantillas de encabezado listas para usar, de las cuales puede elegir. Simplemente seleccione el deseado y haga clic en el botón Insertar para usarlo.

Si desea comenzar desde cero en lugar de usar una plantilla, simplemente puede cerrar la biblioteca de plantillas para ir directamente al editor de elementos. En este tutorial, crearemos el encabezado desde cero. El encabezado que crearemos está compuesto por dos partes; El subatinte, que está por encima del encabezado principal, y el encabezado principal en sí. Utilizaremos el sub-para colocar cosas como redes sociales, información de contacto, etc. Mientras que el encabezado principal se utilizará para mostrar el sitio y el menú del sitio. ## Sub-ATTet

El sub-strip que creamos está compuesto por dos columnas. Entonces, en el editor de elementor, haga clic en el botón Plus para crear una nueva sección y elija la opción de estructura de dos columnas.
Si lo desea, puede cambiar el fondo de la sección haciendo clic en la pestaña Estilo. Puede cambiar el fondo en la sección de fondo.
Para agregar un widget, simplemente tire del widget deseado del panel izquierdo al área de lienzo. El primer widget que queremos agregar en este ejemplo es la lista de iconos. Usaremos este widget para mostrar su número de teléfono y dirección de correo electrónico.

Puede editar el widget que acaba de agregar desde el panel izquierdo. Puede cambiar el aspecto, cambiar el icono predeterminado o cambiar el color/estilo del texto. Cambie a la pestaña de estilo cada vez que desee personalizar el texto o el icono. (Para convertir un widget en modo de edición, puede hacer clic en el mango del widget). También puede hacer clic en el widget en el navegador.

Agregue otro widget a la segunda columna. En este ejemplo, agregamos el widget de íconos sociales.

Nuevamente, puede editar este widget a través del panel izquierdo en el lado izquierdo. Juega con este panel para personalizar los iconos de sus redes sociales. ## El encabezado principal

También usaremos dos columnas para el encabezado principal. La primera columna (la de la izquierda) para colocar el logotipo del sitio y la segunda columna (la derecha) para colocar el menú del sitio. Haga clic en el botón Plus en el editor de elementos para agregar una nueva sección y seleccione la opción de estructura de dos columnas.

Tire del widget del logotipo del panel izquierdo en el área de lienzo. Puede encontrar este widget (logotipo del sitio) en la sección del sitio. Elementor cargará automáticamente el logotipo de su sitio
Establecer alineación y tamaño. Para establecer el tamaño, puede pasar a la pestaña de estilo y cambiar el valor del ancho.
Agregue otro widget (menú NAV) a la segunda columna. Puede encontrar este widget en la sección del sitio.

Nuevamente, puede jugar con su panel izquierdo para personalizar su menú. Puede establecer cosas como el color del texto, el color del flotante, el ancho del flotante, etc. El mismo Elementor cobrará automáticamente la navegación principal en este menú. Si tiene más menús en su sitio web de WordPress, puede configurarlo para mostrar haciendo clic en el menú desplegable en la sección Menú de la pestaña Contenido.

Si lo desea, también puede configurar su menú para que sea pegajoso. Para hacer esto, seleccione la sección superior (subtarrente) y acceda a la pestaña avanzada. Puede encontrar la opción pegajosa en la opción Efectos de movimiento.

Repita los pasos anteriores en la segunda sección (encabezado principal). Si lo desea, puede agregar otros widgets, como un cuadro de búsqueda. Solo juega hasta que estés satisfecho con el resultado. Después de haber terminado, haga clic en el botón de publicación. También puede obtener una vista previa del resultado haciendo clic en el icono del ojo. Se requerirá VI para agregar una condición de pantalla. Simplemente haga clic en el botón Agregar condición para agregar uno.

Si desea activar el encabezado para todo el sitio web, simplemente puede hacer clic en el botón Guardar y continuar, porque de manera predeterminada la plantilla del encabezado se aplicará a todo el sitio. En su lugar, si desea aplicar el encabezado solo en una página (o publicación) en particular, puede elegir la página deseada a través del menú desplegable. Después de haber terminado, haga clic en el botón Guardar y continuar.

# Crear el sótano al igual que el encabezado, Elementor también ofrece un sótano listo para usar para ahorrar tiempo. En este ejemplo, crearemos el sótano desde cero. El sótano que crearemos está compuesto por una sola sección. Agregaremos iconos para las redes sociales, así como páginas como la página, la página de contacto, los términos de uso y la política de privacidad.

Para comenzar, vaya a plantillas -> Builder de temas.

En la página del constructor de temas, seleccione la pestaña Subsol y haga clic en el botón Agregar nuevo.

Dé un nombre a la plantilla y haga clic en el botón Crear plantilla.

Debido a que queremos crear el sótano desde cero, cierre la biblioteca de plantillas para abrir el editor de primaria.
Haga clic en el botón Plus en el área de lona para agregar una nueva sección. Seleccione la opción de estructura de dos columnas.

Dibuje los íconos sociales del widget del panel izquierdo en una de las columnas del editor. Una vez agregado, puede jugar con el panel izquierdo para personalizar los iconos. Para mostrar las páginas del sitio (alrededor de la página, la página de contacto, los términos de uso y la política de privacidad) utilizaremos la lista de iconos de widgets. Así que tira de este widget a la columna de otro editor.

En este ejemplo, cambiamos la apariencia en línea. Esto convertirá la lista de iconos en modo horizontal.

Reemplace el texto predeterminado del campo de texto con la etiqueta de navegación deseada (como “Acerca de”, “Contacto” “Términos de uso”, etc.) y agregue el enlace al campo de enlace. También puede eliminar el icono si lo desea. No usamos el icono en este ejemplo.

Juegue con el panel izquierdo para personalizar la lista de íconos de widgets. Después de haber terminado, puede hacer clic en el botón de publicación.

Haga clic en el botón Agregar condición para establecer dónde desea aplicar la plantilla de su sótano.

Si desea activar la plantilla del sótano para todo el sitio, simplemente puede hacer clic en el botón Guardar y continuar, porque de manera predeterminada la plantilla del sótano se aplicará a todo el sitio. En su lugar, si desea aplicar el sótano solo en una página (o publicación) en particular, puede elegir la página deseada a través del menú desplegable. Después de haber terminado, haga clic en el botón Guardar y continuar.

# Crear la publicación única de Elementer Shabby también le permite crear una plantilla de poste único. En este ejemplo, crearemos una sola plantilla de publicación que consta de cuatro secciones.

Sección uno: colocar la imagen presentada y post meta.

Sección Segunda: El ritmo del contenido de la publicación, los botones de distribución social, el cuadro de autor y la barra lateral. La tercera sección: colocar el formulario de suscripción por correo electrónico.


Cuarta sección: colocar la navegación posterior y publicar comentarios.

Siga los pasos a continuación para comenzar a crear la plantilla de publicación única.

En el tablero de WordPress, vaya a plantillas -> Builder de temas.
En la página del constructor de temas, vaya a la pestaña individual y haga clic en el botón NUEVO ADD.
Dé un nombre a su plantilla en Seleccionar Tipo de publicación Seleccionar, Seleccione Publicar. Haga clic en el botón Crear plantilla para acceder al editor Elementor.
Aparecerá una ventana emergente, ofreciendo algunas de las plantillas listas para usar desde las que puede elegir. Debido a que queremos crear la plantilla de publicación única desde cero, simplemente cierre esta ventana emergente.
## seccion uno
Haga clic en el botón Plus en el editor Elementor para crear una nueva sección. Seleccione la opción de estructura de columna única.
Haga clic en la pestaña Estilo en el panel izquierdo. En el tipo de fondo de la opción de fondo, seleccione Classic. Establezca la imagen en la imagen recomendada.

Establezca el tamaño en la cubierta. En la opción de repetición, seleccione sin repetición.

Dibuja el título de Widget Post en el editor.

Vaya a la pestaña Estilo para personalizarlo. También puede acceder a la pestaña avanzada para realizar configuraciones avanzadas, como el borde y el relleno. En este ejemplo, establecemos el borde izquierdo en 30.
Dibuja el widget de información de la publicación en el editor.
Elimine los elementos innecesarios y acceda a la pestaña de estilo para personalizarlo. Vaya a la pestaña avanzada para establecer el borde izquierdo en 30.

## La segunda sección

Haga clic en el botón Plus en el editor para agregar una nueva sección. Seleccione la opción de estructura de dos columnas. Establezca el ancho de las columnas con una comparación de aproximadamente 68:32 %. Dibuja los botones del eje del widget en la columna izquierda de la sección que acaba de agregar.

Vaya a la pestaña avanzada y establezca el margen. Establezca el borde superior en 30, el borde izquierdo a 20 y el borde derecho a 50 (puede usar valores diferentes).

Puede acceder a la pestaña Estilo para personalizar el botón. Solo juega para obtener los botones deseados.

Tire del contenido de la publicación del widget en la columna izquierda y colóquelo debajo de los botones para compartir.

Vaya a la pestaña avanzada y establezca el margen. Establezca el borde superior en 15, el borde izquierdo a 20 y el borde derecho a 50 (puede usar valores diferentes).

Puede acceder a la pestaña de estilo para establecer el estilo de impresión (como estilo de fuente, color de fuente y tamaño de fuente).
Tire del widget de la caja del autor en la segunda columna (derecha).

Vaya a la pestaña avanzada y establezca el margen. Establezca el borde superior en 20, el borde izquierdo a 15 y el borde derecho a 15 (puede usar de manera diferente).

Nuevamente, puede acceder a la pestaña Estilo para personalizar este widget. Puede establecer cosas como tamaño de imagen, tipografía, etc. Simplemente jugar.

Tire del widget de la barra lateral en la segunda columna y colóquelo debajo de la caja del autor.
Regrese al panel izquierdo y seleccione una barra lateral (una barra lateral de WordPress) que desea mostrar.

Vaya a la pestaña avanzada y establezca el margen. Establezca el borde izquierdo en 15 y el margen derecho a 15 (puede usar valores diferentes).

Habilite (seleccione) la columna a la derecha y acceda a la pestaña Estilo (puede usar el navegador para facilitar su trabajo). Cambie el fondo a blanco. A través de la segunda columna, cambie a la pestaña avanzada y establezca el margen superior en -85.
## La tercera sección

Haga clic en el botón Plus en el editor de elementos y seleccione la opción de estructura de columna única.

Arrastre el widget de la sección interior en la sección que acaba de agregar y configure el ancho de las columnas con una comparación de aproximadamente 68:32 %.
Habilite (seleccione) la primera columna (la de la izquierda) y vaya a la pestaña de estilo para cambiar su fondo (o cualquier color que desee).

Tire del widget de formulario en la columna izquierda. Debido a que queremos usar este formulario como formulario de suscripción de correo electrónico, elimine todos los elementos del formulario, excepto el correo electrónico.

Con el widget de formulario seleccionado, vaya a la pestaña avanzada para establecer el margen. Establezca el borde derecho en 15, el borde izquierdo a 15 y el borde inferior a 15 (puede usar diferentes valores de margen si lo desea).

Vaya a la pestaña Estilo para personalizar su formulario. Juega hasta que estés satisfecho con el resultado.

Tire del widget del título en la primera columna y colóquelo sobre el formulario y escriba un título como “¿Te gustó este artículo? ¡Manténgase informado inscribiéndose en nuestro boletín! ”.

Con el widget de título seleccionado, vaya a la pestaña avanzada para establecer su borde. Coloque el borde superior en 15, el margen derecho a 15 y el borde izquierdo a 15.
Nuevamente, también puede acceder a la pestaña Estilo para personalizar su título.
## Cuarta sección

Haga clic en el botón Plus en el editor de elementos y seleccione la opción de estructura de columna única.

Tire del widget de la sección interior en la sección que acaba de agregar y configure el ancho de las columnas con una comparación de aproximadamente 68:32 %. Trate la navegación posterior en la primera columna (izquierda).

Con la navegación posterior seleccionada, vaya a la pestaña avanzada para establecer su borde.Coloque el borde superior en 10 y el borde inferior en 10.

Tire del widget de comentarios de la publicación en la primera columna y colóquelo debajo de la navegación posterior.
Después de haber terminado, hacer clic en el botón de publicación para publicar su plantilla.

De manera predeterminada, la plantilla de publicación única se aplicará a todas las publicaciones en su sitio. Si desea aplicarse a una determinada publicación o categoría, puede establecer la condición de visualización haciendo clic en el menú desplegable.Después de haber terminado, haga clic en Guardar y cerrar.