¿Le gustaría saber cómo personalizar un tema de WordPress con el Complemento Elementor ?
Personalizar su tema de WordPress es una de las principales tareas al crear sitios web de WordPress. Dado que ella controla el diseño de un sitio web, aquí es donde muchos profesionales pasan la mayor parte de su tiempo.
La creación de un tema de WordPress personalizado generalmente implica trabajar con los archivos del tema y un editor de código. Los cambios de diseño ocurren en archivos de plantilla, cambios de diseño a través de CSS. Además, tendrá que actualizar constantemente la ventana del navegador para mostrar sus personalizaciones, lo que puede ser un poco engorroso.
Afortunadamente, con Elementor, este proceso se vuelve extremadamente fácil, por lo que es posible que desee comprobarlo.
Pero antes, descubramos juntos ¿Cómo instalar un blog de WordPress pasos 7 et ¿Cómo encontrar, instalar y activar un tema de WordPress en tu blog.
Luego, volviendo a por qué estamos aquí.
¿Qué es un tema de WordPress?
Un tema de WordPress es, en esencia, una colección de plantillas que definen la apariencia visual de un sitio web de WordPress.
El tema de WordPress abarca todo lo que afecta el diseño de un sitio web, desde encabezados y pies de página hasta combinación de colores, diseño y más.
Hay muchos temas disponibles, tanto gratuitos como premium, que se adaptan a casi cualquier industria como sitios web de fotografía, sitios web de clubes de gimnasia, sitios web de peluquería, sitios web de derechoY más.
¿Por qué personalizar un tema de WordPress?
Una de las principales razones para crear un sitio web es promocionar su negocio. ¿Qué mejor manera de hacerlo que crear un sitio web único que promueve el estilo y diseño de la empresa.
¿Te imaginas que Amazon, eBay o Google sean lo que son sin su diseño único?
Por supuesto que no, y esa es una de las razones por las que queremos personalizar un tema de WordPress. Queremos hacerlo único y adaptarnos al mensaje de nuestra empresa.
Además, a veces, o mejor dicho, a menudo, se ejecuta a través de un tema de WordPress que está plagado de un diseño deficiente, colores que no van bien juntos o un tema que es demasiado pesado y solo afecta el rendimiento del sitio. web. El tema de WordPress podría ser poderoso excepto por eso que te molesta. Personalícelo y cambie esto podría resolver todos sus problemas y crear mejor experiencia de usuario.
Cómo personalizar un tema de WordPress
Existen varios métodos para personalizar un tema de WordPress.
- Manualmente, a través del personalizador de WordPress
- Con el código
- Con Elementor
Cómo personalizar manualmente un tema de WordPress
Puede personalizar el tema de WordPress de su elección a través del Personalizador de WordPress integrado. Si lo hace sin código, a menudo está limitado en lo que puede cambiar. Alguno Temas de WordPress premium te permite más opciones de personalización, pero en esencia no hay muchas opciones de diseño para ti.
Antes de profundizar en esta área, nos gustaría señalar que cuando personaliza un tema de WordPress existente, es mejor que utilice un tema hijo y no el tema padre.
Tema hijo de WordPress
Un tema hijo es un tema de WordPress que tiene exactamente las mismas funciones y características de otro tema de WordPress, el tema principal. El tema hijo se utiliza para personalizar y modificar de forma segura el tema, sin afectar al tema principal y sin perder la capacidad de actualizarlo.
Personalizador de temas de WordPress
Entonces, ahora que sabemos que es mejor trabajar con un tema hijo, aprendamos a personalizar un tema con el Personalizador de WordPress. Para acceder a él, vaya a su panel, haga clic en Apparence en el lado izquierdo y elige Personalizar.
Las principales características que puede modificar con este Personalizador son las siguientes:
Agregar un título, logotipo e ícono de sitio web
Para agregar o cambiar su título, logotipo o icono, simplemente puede ir al panel de Identidad del sitio web. y elija cada uno de estos elementos para modificarlos.
Cambiar los colores del tema de WordPress
Ciertas Temas de WordPress le permitirá cambiar sus combinaciones de colores, pero no todas, y generalmente son Temas de WordPress de primera calidad. Si tu tema de WordPress te permite cambiar la combinación de colores, verás esta opción cuando accedas al Personalizador.
Menús de navegación agregados
El Personalizador también le permite agregar y modificar fácilmente los menús de navegación de su sitio web.
Cómo personalizar un tema de WordPress con código
Notará que en la pestaña Apariencia, tiene la opción de elegir el editor de temas. Al hacer clic en él, aparecerá una ventana con el código del tema. Esta opción requiere una buena comprensión de la codificación CSS y no se recomienda para principiantes.
Aquí tendrás acceso a archivos como estilo.css, funciones.php, y es exactamente para este escenario que necesitará un tema hijo para no romper su sitio web.
La otra forma de personalizar su tema mediante la codificación es cargar archivos mediante una solución FTP. El proceso implica crear credenciales FTP a través de su proveedor de alojamiento, descargar e instalar una solución FTP (como FileZilla), iniciar sesión en su cuenta y editar sus archivos, que luego cargará a través de la misma. Solución FTP.
Descubre nuestra guía sobre Cómo instalar WordPress con FileZilla
A menos que esté familiarizado con la codificación, no recomendamos esta opción.
Personalice un tema de WordPress fácilmente con Elementor
Puede hacerlo directamente desde la interfaz de usuario. No es necesario cambiar una sola línea de código o volver a cargar una ventana del navegador, ni siquiera una vez.
Elementor le permite cambiar todos los elementos del sitio web de forma rápida y sencilla con solo unos pocos clics del ratón e incluso puede optimizar estas funciones para la plataforma móvil.
Elementor facilita mucho este proceso mediante el uso de contenido dinámico y permitiéndole obtener una vista previa de sus páginas. De esta manera, puede ver de inmediato cómo los cambios de diseño afectarán su sitio web y contenido reales.
Personalizar el encabezado y pie de página
Elementor le permite una flexibilidad total cuando se trata de diseñar sus encabezados y pies de página. Todos sabemos lo aburrido que puede ser, que tienes un tema de WordPress y no puedes cambiar un solo aspecto del diseño del encabezado o pie de página. Necesita temas especializados, complementos, etc.
Con Elementor, es fácil.
1. Crea una plantilla de encabezado
Primero configure una nueva plantilla de encabezado. Para hacer esto, vaya a Elementor> Mis plantillas.
Aquí una forma de comenzar es presionar el botón Agregar nuevo en la parte superior. En la siguiente pantalla, use el menú desplegable para seleccionar Encabezado como el tipo de plantilla a diseñar.
También puede acceder a esta pantalla haciendo clic en la pestaña Encabezado de la pantalla anterior y luego presionando el botón verde grande que aparece.
Preseleccionará el encabezado como tipo de plantilla. De cualquier manera, debe agregar un nombre adecuado para la plantilla (para saber cuál es más adelante) y luego continuar haciendo clic en Crear plantilla.
Te traerá aquí.
Con Elementor Pro, puede elegir entre bloques de encabezado prediseñados. Estas son plantillas de diseño que puedes usar como punto de partida para tu propio diseño, que es lo que vamos a hacer en este caso.
Cuando pasa el cursor sobre un bloque de encabezado, haga clic en recuadro te permite empezar a diseñarlo inmediatamente. De lo contrario, haga clic en la imagen primero para ver una versión más grande. Entonces siempre puedes presionar recuadro en alto.
De lo contrario, si desea comenzar desde cero, simplemente cierre la ventana haciendo clic en X en la esquina superior derecha
2. Cambiar el diseño del encabezado básico
Después de ingresar el nuevo encabezado, lo primero que notará es que el logotipo y el menú que configuramos anteriormente ya están allí.
Es exactamente por eso que los ponemos en su lugar y vamos a hablar sobre cómo personalizarlos. Sin embargo, veamos primero cómo personalizar la sección del encabezado.
Para hacer esto, simplemente coloque el cursor sobre él y haga clic en el botón Editar en la parte superior. Esto abre una lista de opciones de edición a la izquierda.
Esto es lo que puede controlar en los diferentes menús:
- Disposición - Controlar el ancho de la sección, el tamaño del espacio entre columnas, su altura, su columna vertical y su posicionamiento de contenido, su etiqueta HTML asignada y la estructura general.
- Estilo - Aquí puede cambiar el color de fondo, incluido el efectos de desplazamiento, incluso agregar imagen o video si lo desea, agregue efectos de superposición, borde y divisor, así como cambie la configuración de tipografía.
- Avanzado - Esta parte le permite agregar atributos CSS como margen e índice z, animaciones, ID y clases. También le permite hacer que la sección sea pegajosa y controlar la configuración, así como agregar algunos CSS personalizado.
Todo lo anterior se explica por sí mismo y rápidamente obtendrá lo que desea.
3. Personaliza los elementos del encabezado
Sin embargo, no solo puede editar la sección del encabezado como un todo, sino también los elementos incluidos en ella. Por ejemplo, para personalizar el logotipo del sitio web, simplemente haga clic en él. Esto también le proporcionará opciones de edición en el lado izquierdo.
En el caso del logo, este te da las siguientes opciones:
- Contenido - Cambiar el tamaño de la imagen, la alineación y el lugar al que está vinculada.
- Estilo - Controle el ancho y la altura, agregue efectos CSS y efectos de desplazamiento, incluya borde y sombra si lo desea.
- Avanzado - Aquí encontrará esencialmente las mismas opciones que para la sección de encabezado.
Utilice la configuración para personalizar el logotipo de la forma en que desea que se muestre bien en el encabezado. También tenga en cuenta que cada elemento tiene su propio tipo de opciones, así que asegúrese de revisar cada una.
4. Agregar elementos
Por supuesto, con Elementor también puede agregar elementos al encabezado. Simplemente haga clic en el símbolo en la parte superior derecha para ver qué hay disponible.
Al editar una plantilla de encabezado, Elementor muestra automáticamente los bloques relevantes en la parte superior de la lista, lo que tiene más sentido dadas las circunstancias. En este caso, se trata de cosas como el logotipo del sitio web, el menú de navegación y el título del sitio web.
Entonces, por ejemplo, si desea agregar el título del sitio web junto al logotipo, simplemente arrástrelo y suéltelo. Sin embargo, la plantilla de encabezado que hemos elegido actualmente nos permite agregarla arriba o debajo del logo. Pero es un problema que se resolverá fácilmente.
En un caso como este, coloque el cursor sobre el encabezado y use el símbolo más:+-para agregar una sección arriba.
Haga clic aquí en el botón morado para elegir un diseño de tres columnas.
Luego, arrastre los elementos de la sección de encabezado existente a la nueva sección y agregue el título del sitio web en el medio.
Pero espera, ¡el estilo es totalmente diferente! no hay problema. Simplemente haga clic derecho en el encabezado existente y seleccione Dupdo. Luego haga clic derecho en la nueva sección y haga clic aquí en Pegar estilo. Elementor aplicará el estilo de la sección existente, que puede cerrar más tarde.
Puede hacer el mismo proceso con cualquiera de los otros elementos del encabezado y, por supuesto, con todos los demás elementos incluidos en Elementor.
Personaliza una plantilla de publicación única
En Elementor, también puede personalizar una sola plantilla de publicación. Así es cómo :
1. Crea un modelo nuevo
La creación de una plantilla funciona de la forma habitual. Sin embargo, esta vez elige Individual como tipo de modelo. Luego, a continuación, elija la plantilla única que desea editar. En este ejemplo, el de Publicación.
Si desea crear un nuevo diseño de página, edite su página 404 (más sobre eso más adelante) o edite un tipo de publicación personalizada en particular, elegiría otra cosa. En cualquier caso, ingrese un nombre y continúe.
En la siguiente pantalla, puede elegir entre las plantillas predefinidas como de costumbre. Sin embargo, en este caso, queremos crear un nuevo modelo desde cero. Entonces haga clic en la X en la parte superior derecha para cerrar esta ventana.
2. Configurar la vista previa
Luego, configure la ventana de vista previa en una publicación existente. Puede hacer esto haciendo clic en el icono del ojo en la parte inferior de las opciones del editor, luego Ajustes.
En el menú que se abre, debajo Vista previa contenido dinámico, elige Publicar. Después de eso, en la siguiente línea, puede buscar y elegir una publicación existente por nombre.
Una vez que haya hecho eso, toque Aplicá & Vista previa. Si bien no podrá ver nada en este punto (ya que no hay nada en la página), le indicará a Elementor que use los datos en esta publicación a partir de ahora. Pronto verá lo que esto significa.
3. Creemos la sección Arriba
Primero, crearemos la sección de arriba. Aquí normalmente encontrará cosas como el título de la publicación y metadatos como el autor, la fecha y la categoría.
El primer paso es hacer clic en el cartel. + y creando una sección de una sola columna.
Cuando lo haga, en la sección de diseño, tendrá la opción de controlar su ancho, alto, posicionamiento y estilo. En este caso, no hay mucho que hacer aquí. Además, no se preocupe, siempre puede volver atrás y realizar cambios más tarde.
Luego, arrastre el widget de título de la publicación a la nueva sección.
Cuando lo haga, asegúrese de utilizar todas las opciones disponibles para ajustar el diseño y la distribución a su gusto. Por ejemplo, aquí están mis configuraciones para hacerlo:
También hay una característica interesante que debes aprender. Al hacer clic en el símbolo de la llave del título de la publicación, puede agregar contenido estático antes y después de sus datos dinámicos.
Por ejemplo, si crea una plantilla para una determinada categoría de publicación como Noticias o Recetas, puede agregarla al título de la publicación de esta manera:
De esa manera, esos datos aparecerían para cada publicación en esa categoría. No voy a usar esto en este momento, pero pensé que era una nota al margen importante para ti.
Bajo el título de la publicación insertaremos el Publicación Info Reproductor para ver los metadatos de la publicación.
Aquí están las configuraciones que uso:
Además, utilicé las opciones de estilo para que el diseño se ajustara al resto de la página. Asegúrate de hacer lo mismo.
4. Configurar el cuerpo de la publicación
Después del encabezado, es hora de crear el cuerpo de la página. Si desea que esta parte tenga un diseño diferente al del encabezado, deberá configurar una nueva sección. Sin embargo, lo mantengo simple, por lo que no tengo que hacerlo.
Lo primero que queremos insertar es la imagen destacada. Para ello, puede colocar el widget del mismo nombre debajo de lo que ya está en la página.
Básicamente, no cambié ninguna de las configuraciones, simplemente dejé todo como estaba.
Entonces es el momento de publicar el contenido. Aquí también tienes un bloque correspondiente.
Notará que para la imagen destacada y el contenido de la publicación, Elementor extrae automáticamente lo que ya está en el sitio web. Realice los ajustes necesarios en el diseño del nuevo bloque, por ejemplo, jugando con la configuración tipográfica.
Aparte de eso, eso es todo. No hay mucho trabajo por hacer aquí para que podamos pasar a la última parte.
5. Configurar el pie de página
En este caso, queremos que el pie de página muestre el perfil del autor, las opciones para compartir y los comentarios del lector. Para hacer esto, en primer lugar, necesitamos crear una nueva sección con dos columnas. Para crear más espacio para el perfil de autor, puede configurarlo en un diseño 66.33.
Después de eso, coloque el widget Cuadro de autor en la sección de la izquierda.
Asegúrese de personalizar el estilo para que se adapte a sus necesidades. Agregué un poco de color de fondo y ajusté ligeramente la configuración de tipografía.
Después de eso, es hora de agregar el bloque de botones para compartir en el lado derecho.
Puedes ver mi configuración en la captura de pantalla de arriba.
Después de eso, todo lo que queda es crear una sección una columna más hacia abajo y arrastrar y soltar el widget Comentarios de la publicación en ella.
(Por cierto, si alguna vez tiene problemas para localizar alguno de estos widgets, simplemente use la función de búsqueda).
Haga los ajustes que considere necesarios en la sección de comentarios (la dejé como está) y estará listo para publicar. Aquí está el diseño terminado:
Personaliza la plantilla de archivo
1. Configure su plantilla de archivo de WordPress
A estas alturas ya conoce la solución para la creación de nuevos modelos. La única diferencia es que en este caso elegirás Archive como tipo de modelo.
Después de eso, como de costumbre, obtienes una serie de bloques para elegir o también puedes crear tu propio modelo desde cero. Sin embargo, para los archivos, solo tiene aproximadamente dos widgets Elementor que son importantes de todos modos.
2. Defina el título del archivo.
El primer bloque del que quiero hablar es el título del archivo. Título del archivo.
Además de los ajustes habituales en Estilo y avanzado, puede encontrar una opción importante al hacer clic en el símbolo de llave debajo Título.
Aquí puede habilitar y deshabilitar si Elementor muestra el tipo de archivo en la página como la parte donde dice Autor: a continuación. Esto sucede a través del botón debajo Incluir contexto.
Por cierto, como de costumbre, puede obtener una vista previa de diferentes archivos utilizando la configuración de vista previa (Símbolo del ojo> Configuración). De esta manera, puede ver el diseño de categorías, etiquetas, autores y más exclusivos. Tenlo en mente.
3. Utilice el bloque de publicaciones de archivo
El segundo widget importante para archivos es Archive Posts. Esto reúne todas las publicaciones que pertenecen a cualquier archivo en una página. Cuando elige una plantilla, ya están allí, pero también puede agregarlas fácilmente usted mismo con este bloque.
Echemos un vistazo a las opciones que le brinda para personalizar sus páginas de archivo:
- Piel - Elija mostrar sus publicaciones en un diseño de estilo clásico o de tarjeta.
- Columnas - Determina el número de columnas en las que se muestran sus publicaciones.
- Mostrar imagen - Activar imágenes destacadas en páginas de archivo
- Albañilería – Muestra elementos en diseño de mampostería o no.
- Tamaño de la imagen - El tamaño de la imagen que Elementor debe usar en las páginas de archivo.
- Título - ¿Quieres mostrar los títulos de las publicaciones o no?
- Etiqueta HTML de título - Si es así, ¿qué etiqueta HTML debería envolverlo?
- Extracto - Incluya extractos de sus publicaciones o solo muestre el título.
- Longitud del extracto - Determinar la longitud de los extractos.
- metadatos - Define los metadatos de la publicación disponibles para los visitantes.
- Separador entre - Símbolo separador entre información de metadatos.
- Leer Más - Incluir un enlace "leer más", ¿sí o no?
- Identificación - Le permite agregar más información a las publicaciones, como categorías y etiquetas.
- Insignia de taxonomía - Aquí puede decidir qué información incluir.
- Avatar – Con esto puedes cambiar la foto de perfil de los autores de los artículos
Además de lo anterior, tiene algunas opciones más. Debajo Paginación, puede definir cómo se debe manejar la paginación de archivos. Por ejemplo, cómo mostrarlo, el número de páginas a incluir y la alineación del texto.
Enfin, Avanzado le permite configurar el mensaje para que se muestre cuando un visitante aterriza en un archivo vacío. Todo lo demás debe ser familiar. Solo tenga en cuenta que las opciones de estilo cambian según la máscara que haya elegido.
4. Controlar el número de publicaciones por archivo
Una nota rápida sobre las plantillas de archivo. Para cambiar la cantidad de publicaciones que aparecen en un archivo (o en la página de su blog), debe hacerlo en WordPress en Configuración> Lectura.
Aquí, simplemente ingrese la cantidad de publicaciones que desea que vean sus visitantes.
Personalización fácil Tema de WordPress con Elementor
Personalizar temas de WordPress es el pan de cada día de muchos profesionales. Aunque esto suele implicar mucha codificación y edición de los archivos, con Elementor esto ya no es necesario.
Como vio anteriormente, el complemento es un editor de temas de WordPress completo. Le permite personalizar cada parte desde su interfaz de usuario. Puede editar el encabezado, pie de página, plantillas de página y publicación del sitio web, plantillas de archivo y más.
Con la capacidad de usar contenido dinámico y obtener una vista previa de cualquier parte de su sitio web, puede implementar todas las personalizaciones de moda
En resumen, Elementor facilita la personalización de su tema de WordPress. En lugar de realizar cambios laboriosos con docenas de archivos y cientos de líneas de código, puede hacerlo todo rápidamente en un solo lugar.
¡Obtenga Elementor Pro ahora!
Conclusión
Listo ! Eso es todo por este artículo que le muestra cómo personalizar un tema de WordPress con Page Builder Elementor. Si tiene alguna inquietud sobre cómo llegar, háganoslo saber dentro de comentarios.
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
