Recientemente, uno de nuestros lectores nos preguntó cómo cambiar el lado de la barra lateral de un tema de WordPress.
Por lo general, recibimos esta pregunta de los usuarios que desean cambiar la ubicación de su barra lateral de izquierda a derecha o de derecha a izquierda.
En este tutorial, le mostraremos cómo cambiar la ubicación de la barra lateral en WordPress.
Pero antes, si nunca has instalado WordPress, descubre ¿Cómo instalar un blog de WordPress pasos 7 et ¿Cómo encontrar, instalar y activar un tema de WordPress en tu blog
Luego de vuelta a por qué estamos aquí.
¿Por qué cambiar la ubicación de la barra lateral en WordPress?
Los expertos en usabilidad creen que las personas escanean las páginas de izquierda a derecha. Recomiendan colocar el contenido importante a la izquierda para que los usuarios vean este contenido primero. Sin embargo, esto podría revertirse si su sitio web está en un idioma RTL (justo a la izquierda).
Averigua si si tu blog de WordPress tiene barras laterales
Muchos sitios web de WordPress utilizan el diseño de blog típico con dos columnas. Una para el contenido y la otra columna para la barra lateral.
Si es nuevo en los sitios web, debe seleccionar un tema de WordPress que tenga una barra lateral en su ubicación preferida.
Muchos Temas de WordPress ofrece opciones para cambiar el lado de la barra lateral en la configuración de la barra lateral. Sin embargo, si su tema de WordPress no tiene esta opción, deberá cambiar el lado de la barra lateral manualmente. Ve más allá descubriendo Cómo quitar la barra lateral en WordPress
Dicho esto, echemos un vistazo al método que necesita usar para cambiar fácilmente el lado de la barra lateral de WordPress mediante CSS.
Cambiar la barra lateral con CSS
Antes de realizar cambios en su tema de WordPress, primero debe considerar la creando un tema hijo. Al usar un tema secundario, podrá actualizar su tema principal sin perder sus cambios.
Descubre Cómo mostrar una barra lateral diferente para cada elemento en WordPress
En segundo lugar, siempre debe crear una copia de seguridad de su sitio web de WordPress cuando realice cambios en tiempo real en su tema activo.
Necesitará un cliente FTP para editar los archivos del tema de WordPress. Consultar el orientar sobre cómo utilizar FTP.
Inicie sesión en su sitio web de WordPress con el cliente FTP y navegue a la carpeta de temas. Por lo general, se encuentra en:
/ Yoursite / wp-content / themes / tu-theme-carpeta /
Ahora necesita descargar y abrir el archivo de hoja de estilo principal de su tema de WordPress en un editor de texto como el Bloc de notas. Este archivo se llama style.css, y está en el directorio raíz de su tema de WordPress.
Descubre Cómo administrar archivos y carpetas de WordPress
En este archivo, busque la clase CSS de su barra lateral. Generalmente esta clase es " barra lateral ". En este ejemplo, usamos el tema predeterminado de WordPress " veinte quince Quién tiene esta clase para la barra lateral:
.sidebar {float: izquierda; margen derecho: -100%; ancho máximo: 413px; posición: relativa; ancho: 29.4118%; }
Como puede ver, la barra lateral flota a la izquierda con un margen de -100%. Cambiaremos el flotador a la derecha:
.sidebar {float: right; margen izquierdo: -100%; ancho máximo: 413px; posición: relativa; ancho: 29.4118%; }
Guarde sus cambios y cargue el archivo style.css en su sitio web utilizando un cliente FTP. Ahora, si visita su sitio web, se verá así:
De hecho, movimos la barra lateral, pero no movimos el área de contenido. " Veinte Quince Utiliza este CSS para definir la posición del área de contenido.
.site-content {display: block; flotador: izquierda; margen izquierdo: 29.4118%; ancho: 70.5882%; }
Lo cambiaremos para mover el contenido a la derecha. Como sigue:
.site-content {display: block; flotador: izquierda; margen derecho: 29.4118%; ancho: 70.5882%; }
Así es como se verá su sitio web después de aplicar este código CSS.
Como puede ver, cambiamos la ubicación del área de contenido y la barra lateral. Sin embargo, todavía hay un bloque blanco a la izquierda.
Ve más allá descubriendo Cómo administrar archivos y carpetas de WordPress
A menudo encontrará estos errores cuando trabaje con CSS. Tomará un poco de trabajo de detective entender qué está causando esto y cómo solucionarlo.
Utilice la herramienta "Inspector" de su navegador para ver el código fuente. Apunte su mouse a la región afectada en el navegador, haga clic derecho y seleccione "Inspector" en el menú del navegador.
A medida que mueva el mouse por la vista del código fuente, notará las áreas a las que afecta resaltadas en la vista previa en vivo. En el panel derecho, podrá ver el CSS utilizado para ese elemento seleccionado.
Descubre nuestro Complementos de 5 WordPress para editar visualmente CSS en tu blog
Por lo tanto, el CSS correspondiente al elemento resaltado debe reajustarse.
@media screen y (min-width: 59.6875em) {body: before {background-color: #fff; box-shadow: 0 0 1px rgba (0, 0, 0, 0.15); contenido: ""; pantalla: bloque; altura: 100%; altura mínima: 100%; posición: fija; arriba: 0; izquierda: 0; ancho: 29.4118%; índice z: 0; / * Soluciona el error de parpadeo con desplazamiento en Safari * /}
Este código CSS agrega un bloque vacío de 29,4118% ancho y un ancho de 100% en la esquina superior izquierda. Así es como vamos a moverlo hacia la derecha.
@media screen y (min-width: 59.6875em) {body: before {background-color: #fff; box-shadow: 0 0 1px rgba (0, 0, 0, 0.15); contenido: ""; pantalla: bloque; altura: 100%; altura mínima: 100%; posición: fija; arriba: 0; derecha: 0; ancho: 29.4118%; índice z: 0; / * Soluciona el error de parpadeo con desplazamiento en Safari * /}
Después de guardar y cargar la hoja de estilo en el servidor, así se verá su sitio web.
Trabajar con CSS puede ser confuso para principiantes. Si no desea hacer todo el trabajo manual, puede probar el Complemento de WordPress CSS Hero. Te permite editar CSS sin escribir código y funciona con todos los temas de WordPress.
Descubre también algunos complementos premium de WordPress
Puedes usar otros plugins de WordPress para dar una apariencia moderna y optimizar el manejo de tu blog o sitio web.
Aquí le ofrecemos algunos complementos premium de WordPress que lo ayudarán a hacerlo.
1. Zxeion
Zxeion es un potente Plugin de WordPress premium responsable de mejorar la seguridad de su sitio web. Este complemento contiene una colección de herramientas de protección y seguridad que protegerán su sitio web contra posibles ataques.
Su sistema de protección en tiempo real lo ayudará a identificar amenazas a su sitio web y bloquearlas, sin que tenga que hacer nada.
Descubre también nuestro 7 complementos para aumentar tus barras laterales en WordPress
Sus características son: protección en tiempo real, excelente atención al cliente, actualizaciones periódicas, bloqueador de direcciones IP, excelente documentación, interfaz moderna y profesional, atención al cliente dedicada y otras
Descargar | Demo | alojamiento web
2. Slaido
Slaido es un Plugin de WordPress premium que le permite elegir entre casi 320 plantillas de control deslizante receptivas e importar una de ellas a su sitio web con solo unos pocos clics. Es un paquete completo de plantillas, perfecto para Slider Revolution. Por lo tanto, primero deberá instalarlo para utilizarlo por completo. Plugin de WordPress
Sus principales características son: un diseño receptivo de sus controles deslizantes, la facilidad de importar o exportar controles deslizantes, actualizaciones periódicas, soporte al cliente disponible 24/7, animaciones fluidas y muy interesantes, la disponibilidad de tutoriales en vídeo para un inicio rápido, compatibilidad con Google Fonts y muchos más.
Descargar | Demo | alojamiento web
3. Formulario de contacto
Contact Us Form es un complemento de WordPress de alta calidad que responde y una herramienta simple pero rica en opciones de personalización que le permite mostrar un formulario claro y alentador, en el que sus visitantes pueden contactarlo dejando su mensaje.
Podrá definir los campos necesarios, elegir el mejor diseño de los campos y personalizarlo completamente para alentar a sus clientes o visitantes a dejar sus sugerencias o mensajes.
También te invitamos a leer: Complementos de 10 WordPress para crear y administrar un sitio web de restaurante
Simplemente configure la dirección de correo electrónico donde desea recibir los mensajes y úsela para hacer crecer su negocio en la dirección más rentable.
Descargar | Demo | alojamiento web
Recursos recomendados
Conozca otros recursos recomendados para ayudarlo a construir y administrar su sitio web.
- Cómo encontrar la URL de inicio de sesión de tu blog de WordPress
- Cómo crear una zona de superhéroes con texto animado
- Cómo personalizar el CSS de tu sitio web de WordPress
- Cómo añadir categorías al menú de tu blog de WordPress
Conclusión
Aquí! Eso es todo por este tutorial. Esperamos que le ayude a cambiar el lado de la barra lateral de su blog de WordPress. no dude en comparte este artículo con tus amigos en tus redes sociales favoritas.
Sin embargo, también podrá consultar nuestra 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.
Si tienes sugerencias o comentarios, déjalos en nuestra sección comentarios.
...
