Cómo crear una barra lateral de WordPress personalizada sin código
Publicado: 2022-02-02¿Quieres aprender a crear una barra lateral de WordPress personalizada sin código?
Una barra lateral bien diseñada mejora la experiencia del usuario y permite una mejor navegación para ellos. Pero personalizar su barra lateral usando la configuración predeterminada de WordPress no siempre es muy sencillo. Y la codificación es aún más difícil.
En esta publicación, le mostraremos cómo agregar una barra lateral en WordPress en unos simples pasos.
Por qué debería agregar una barra lateral personalizada de WordPress
Las barras laterales brindan una forma simple pero efectiva de mostrar información importante que le gustaría que los visitantes vieran. En muchos sitios de WordPress, es común dedicar barras laterales para proporcionar enlaces rápidos a publicaciones relacionadas, páginas de redes sociales y formularios de suscripción.
Esto lo ayuda a garantizar la mejor experiencia de usuario para sus usuarios y le permite dirigir a los visitantes a las áreas de su sitio que le gustaría que vieran. Como resultado, las barras laterales le permiten aumentar las visitas a la página, el tiempo de permanencia, el compromiso y las conversiones.
Aunque muchos temas de WordPress vienen con barras laterales listas para usar, no brindan el tipo de personalización visual fácil que obtienes con algunos complementos de WordPress.
SeedProd es el mejor complemento de WordPress para crear barras laterales con una función fácil de arrastrar y soltar. Por lo tanto, usaremos SeedProd para mostrarle cómo agregar una barra lateral en WordPress sin ningún código.
Cómo crear una barra lateral de WordPress personalizada sin código
Para aprender cómo agregar una barra lateral en WordPress, simplemente siga los pasos a continuación:
- Instalación de SeedProd
- Elegir una plantilla de tema
- Personalizando tu barra lateral de WordPress
- Agregar un formulario de contacto dentro de la barra lateral
- Agregar publicaciones recientes dentro de la barra lateral de WordPress
- Eliminación de elementos de la barra lateral
- Guardar cambios y publicar la barra lateral
Empecemos.
1. Instalación de SeedProd
Para empezar, necesita tener instalado SeedProd en su sitio. Si no sabe cómo instalarlo, consulte este tutorial sobre cómo instalar un complemento de WordPress.
Para acceder a la función de creación de temas de WordPress de SeedProd (que necesitará para crear una barra lateral), deberá comprar la licencia SeedProd Pro. Cuando haya realizado su compra y creado una cuenta con SeedProd, inicie sesión en el área de su cuenta y vaya a la pestaña Descargas . Aquí encontrará su clave de licencia. Cópialo (vamos a necesitar esto más tarde).
Desde su panel de WordPress, vaya a SeedProd » Configuración. En esta pantalla, debería ver el campo Clave de licencia . Pegue la clave de licencia aquí y haga clic en el botón Verificar .
Ahora que SeedProd está configurado en su sitio, utilicemos algunas plantillas para facilitar la tarea de creación de nuestra barra lateral.
2. Elegir una plantilla de tema
Desde su área de administración de WordPress, haga clic en SeedProd » Theme Builder.
Este es el tablero principal donde puede controlar la configuración de todos sus diferentes elementos temáticos, incluida la barra lateral.
Ahora, haga clic en el botón naranja Temas .
SeedProd tiene varios temas para diferentes tipos de empresas y organizaciones, incluidas agencias de marketing, restaurantes, corredores de hipotecas y más. Puede elegir el tema que mejor se adapte a su negocio y luego personalizar la barra lateral hasta que se vea exactamente como lo desea.
Para este ejemplo, vamos a utilizar el tema de inicio, que funciona muy bien para sitios web simples. Cuando seleccione el tema, su área de creación de temas ahora se completará automáticamente con todas las partes esenciales que componen el tema.
Puede habilitar y deshabilitar cada parte diferente según sus necesidades. Dado que en nuestro ejemplo solo usaremos una barra lateral para la página del blog, solo mantendremos habilitadas la barra lateral y el índice del blog, los archivos, la búsqueda y las partes.
Usando los botones de alternar bajo el encabezado Publicado , deshabilitamos otras partes del tema y dejamos la barra lateral en el estado SÍ .
Ahora, estamos listos para comenzar a personalizar la barra lateral.
3. Personalización de la barra lateral de WordPress
Para comenzar a personalizar su barra lateral de WordPress, desplace el cursor sobre la opción Barra lateral en el tablero del generador de temas SeedProd y haga clic en Editar diseño.
Esto abrirá la interfaz del generador de temas. La barra lateral del tema de inicio tiene una barra de búsqueda, categorías e íconos de redes sociales habilitados de manera predeterminada.
Pero puede agregar más elementos a la barra lateral o reemplazar los existentes con algo más. En el panel de la izquierda, encontrará toneladas de bloques que puede arrastrar y soltar en el área de la derecha, que es una vista previa en vivo de su barra lateral.
A continuación, le mostraremos cómo realizar algunas personalizaciones comunes de la barra lateral, pero todos estos son pasos opcionales.
Agregar un formulario de contacto dentro de la barra lateral
En este ejemplo, le mostraremos cómo agregar un formulario de contacto simple a su barra lateral. Pero primero, asegúrese de tener instalado WPForms. Si necesita ayuda con esto, consulte este documento sobre la instalación de WPForms.
WPForms se integra automáticamente con SeedProd. Por lo tanto, cualquier formulario que haya creado con WPForms se puede agregar como un bloque dentro de su barra lateral usando SeedProd.
Para hacer esto, simplemente escriba "formulario de contacto" en la barra de búsqueda en la pestaña Bloques . Luego, arrastre y suelte el bloque Formulario de contacto donde desee colocarlo en su barra lateral.
Después de colocar el formulario en la barra lateral, haga clic en el bloque WPForms para abrir las opciones del formulario. Desde aquí, puede agregar un formulario ya creado o incluso crear uno nuevo presionando el botón +Nuevo formulario .
Vamos a usar un formulario que ya creamos con WPForms haciendo clic en el menú desplegable Seleccionar un formulario y eligiendo uno de la lista.
Así es como se ve el formulario.
Si necesita editar el formulario, haga clic en Editar el formulario seleccionado. Esto abrirá el generador de WPForms en la misma ventana y podrá realizar los cambios deseados sin tener que salir de la pantalla del generador de temas.
Aparte de eso, puede personalizar el diseño del formulario yendo a la pestaña Avanzado . Aquí, SeedProd proporciona opciones para cambiar el estilo, los atributos, el espaciado y la visibilidad del dispositivo del formulario.
Por ejemplo, si desea ocultar la barra lateral cuando su sitio se ve en dispositivos móviles, simplemente haga clic en el menú Visibilidad del dispositivo y luego active el botón Ocultar en dispositivos móviles .
A continuación, le mostraremos cómo agregar Publicaciones recientes dentro de la barra lateral de su blog.
Agregar publicaciones recientes dentro de la barra lateral de WordPress
Una vez más, use el campo de búsqueda en la pestaña Bloques del generador de temas y escriba "publicaciones recientes". Ahora, arrastre y suelte el bloque Publicaciones recientes en el área que desea que se muestre.
El widget de Publicaciones recientes se completa automáticamente a medida que se publican nuevas publicaciones de blog en su sitio web.
Si hace clic en el widget cuando se encuentra en el lado derecho del generador, puede acceder a configuraciones como controlar la cantidad de publicaciones que desea que se muestren.
Solo hay 3 publicaciones en nuestro sitio de prueba de ejemplo. Pero es una buena regla general incluir 5 publicaciones recientes para mostrar en la barra lateral.
Eliminación de elementos de la barra lateral
Con el generador de temas de SeedProd, eliminar elementos de la barra lateral es tan fácil como agregar elementos nuevos.
En nuestro ejemplo, vamos a eliminar el bloque de la barra de búsqueda de la barra lateral. Depende totalmente de usted decidir qué partes desea eliminar de su barra lateral. Solo estamos eliminando la barra de búsqueda para demostración.
Normalmente, se considera una buena práctica mantener su barra lateral simple y enfocada, así que trate de no incluir demasiados widgets en su barra lateral.
Para eliminar un bloque, desplace el mouse hasta que aparezca un contorno naranja alrededor del bloque que desea eliminar y presione el icono de la papelera.
Luego verá un mensaje para confirmar la acción de eliminación. Presione ¡Sí, elimínelo! botón para seguir adelante.
Eso es todo lo que se necesita para eliminar cualquier bloque o elemento de su barra lateral.
4. Guardar cambios y publicar la barra lateral
Cuando haya terminado de personalizar la barra lateral a su gusto, haga clic en el botón Guardar en la parte superior derecha.
Ahora, haga clic en el botón de cruz para salir del generador de temas.
Esta acción agregará la barra lateral a la página de tu blog. Abra la página del blog de su sitio desde la interfaz para ver su barra lateral de WordPress recién creada. (En este ejemplo, solo tenemos habilitados los íconos de redes sociales y el formulario de contacto).
¡Y eso es! Ahora sabe cómo agregar una barra lateral en WordPress y personalizarla para que se vea como a usted le gusta.
A continuación, configure un subdominio de correo electrónico
¿Quiere mantener su reputación de correo electrónico y mantener altas tasas de capacidad de entrega? Debería considerar configurar un subdominio de correo electrónico en ese caso. Consulte nuestra guía sobre subdominios de correo electrónico para aprender a administrar mejor su reputación de correo electrónico y configurar un subdominio de correo electrónico.
También es posible que desee obtener información sobre la capacidad de entrega del correo electrónico y su importancia. Puede consultar nuestro artículo sobre cómo mejorar la capacidad de entrega del correo electrónico para obtener más detalles.
¿Listo para arreglar tus correos electrónicos? Comience hoy con el mejor complemento SMTP de WordPress. WP Mail SMTP Elite incluye White Glove Setup completo y ofrece una garantía de devolución de dinero de 14 días.
Si este artículo te ayudó, síguenos en Facebook y Twitter para obtener más consejos y tutoriales de WordPress.