Plantilla de página personalizada: elimine la barra lateral. Barra lateral del blog. Elementos y disposición. Verdades comunes

Su sitio tiene una barra lateral y le gustaría desactivarla en algunas de sus páginas, entonces sólo necesita leer este artículo.

Puede descargar las fuentes del artículo a continuación.

Puede leer sobre qué es una plantilla de página individual, por qué es necesaria, cómo usarla y editarla en mi artículo anterior.

Esta instrucción consiste en 6 pasos.

Paso 1. Cree un archivo separado para la plantilla de página.

Los siguientes archivos de plantilla de su tema son responsables de mostrar la apariencia de las páginas: page.php, index.php.

Por lo tanto, para no escribir el código para una plantilla individual desde cero, simplemente copiaremos el archivo page.php y corregiremos el código en él, luego le cambiaremos el nombre, por ejemplo, al archivo shirokiishablon.php (puede aparecer con otro nombre para este archivo).

Para hacer esto, vaya a través del programa FileZilla al servidor FTP de su sitio, luego ingrese su tema actual:

/public_html (o WWW)/wp-content/themes: esta carpeta contiene todos los temas instalados en su sitio.

En este ejemplo, mi tema actual se llamará iGames, así que iré a la carpeta /iGames.

Aquí se necesita la línea "Nombre de la plantilla:" para que WordPress reconozca el archivo como una plantilla individual, "shirokii" es el nombre de su futura plantilla individual.

Paso 2. Retire la barra lateral (barra lateral).

Las barras laterales se habilitan en la plantilla de su página usando el siguiente código:

Encontramos esta línea en el código y la eliminamos. En la mayoría de los temas debería estar al final del código.

Básicamente, puede omitir los pasos 3 y 4 de este artículo y obtendrá una página sin barra lateral, pero el texto no se extenderá al área de la barra lateral anterior, es decir, se verá así:

Paso 3: cambia el estilo de la página.

Para que el texto se muestre en todo el ancho de la página, debe cambiar su estilo de diseño.

Para hacer esto, busque la siguiente línea en el código:

y cambiarlo a:

Es decir, cambiamos el estilo de diseño del bloque div de contenido a contenidohirokii (puedes usar un nombre diferente).

Ahora necesitamos crear este estilo (contentshirokii) en nuestro sitio.

Paso 4. Crea contenido al estilo shirokii.

Para hacer esto, debe iniciar sesión en el panel de control de su sitio, seleccionar el elemento Apariencia en el menú de la izquierda y luego el subelemento Editor.

Luego seleccione el archivo style.css (en la parte inferior de la lista) de la lista de plantillas en el menú de la derecha y ábralo.

Ahora tienes dos opciones:

1. o crear un estilo contenthirokii desde cero;

Para hacer esto, simplemente vaya al final del archivo style.css y pegue el siguiente código:

#contentshirokii (relleno: 10px 0px 30px 20px; flotante: izquierda; ancho: 850px;)

Veamos qué es responsable de qué aquí.

La línea de relleno especifica el relleno: izquierda, arriba, derecha, abajo.

La cuerda flotante – establece la alineación: izquierda – hacia la izquierda.

La línea de ancho es el ancho del contenido de la página (texto): 850px – 850 píxeles, aquí puede encontrar el ancho deseado de forma experimental.

2. O busque y copie el estilo de diseño de contenido existente, cámbiele el nombre a contenthirokii y realice cambios en él, aumentando el ancho de la visualización del texto.

Para mí quedó así:

#content (relleno: 10px 0px 30px 20px; flotante: izquierda; ancho: 585px; desbordamiento: oculto;)

Lo copiamos y lo pegamos al final del archivo style.css, luego cambiamos su nombre a contenthirokii y también cambiamos el parámetro ancho: 585 px al que necesita (este parámetro limita el ancho de su texto, gracias (en el que el texto del artículo no se extiende al área de nuestra antigua barra lateral). El parámetro de ancho se puede configurar de forma experimental; cambié su valor a 850 px.

En general, terminé con el siguiente código:

#contentshirokii (relleno: 10px 0px 30px 20px; flotante: izquierda; ancho: 850px; desbordamiento: oculto;)

Después de los cambios, haga clic en el botón "Actualizar archivo".

Paso 5. Guarde el archivo page.php editado con un nombre diferente y cárguelo en el sitio.

Ahora guardemos nuestro archivo editado, pero no como page.php, sino como shirokiishablon.php.

A continuación, cárguelo usando el programa FileZilla al servidor FTP de su sitio. a tu carpeta de temas actual, es decir, en nuestro ejemplo: /public_html/wp-content/themes/iGames (ya que el tema actual en este ejemplo se llama iGames).

Paso 6. Conecte la plantilla shirokii individual que creamos.

Ahora debemos seleccionar la página en la que vamos a ocultar la barra lateral y aplicarle la plantilla shirokii.

Para hacer esto, vaya al panel de control de su sitio, seleccione el elemento Páginas en el menú de la izquierda, luego el subelemento Todas las páginas, seleccione la página que necesitamos y haga clic en ella.

A continuación, busque el campo "Atributos de página" a la derecha (si no lo tiene, haga clic en el botón "Configuración de pantalla" en la esquina superior derecha y marque la casilla "Atributos de página") y seleccione shirokii en la Plantilla. artículo.

¡Todo está listo!

  • Anastasia

    Creé una copia de la página del archivo, la llamé buscapersonas y la cambié de acuerdo con las instrucciones.

    Blog - donde escribimos cosas


    comentarios para la publicación: "" clase="post_link">"

    "principal")); ?>

    en style.css a su vez:

    #contentpager (relleno: 10px 0px 30px 20px; flotante: izquierda; ancho: 968px;

    al cambiar un mensaje, el buscapersonas no aparece en las plantillas. ayuda por favor

  • Julia Graf

    ¡Artículo INCREÍBLE! No hay palabras. Yo mismo no esperaba que todo saliera bien la primera vez. ¡EXCELENTE! ¡GRACIAS!

  • gregorio

    ¡Que lo pases bien! Hice todo como se describe, al final todo salió bien excepto una cosa: no puedo estirar la página para llenar toda la pantalla (no tengo un módulo ni un foro. Creo una página, aplico un tema y eso es todo: es un bloque estrecho en el medio, puedo mover el bloque por la página, pero no expandirlo (

  • gregorio
  • gregorio

    Lo receté, no ayudó (
    Al solicitar una plantilla de página individual de ancho completo (descárgala), realmente no fue posible encontrar nada que valga la pena; solo encuentra consejos o temas similares con dos barras laterales, que se pueden desactivar y todo estará bien, pero la gente escribe eso. Esto no resuelve el problema para algunos. ¿Quizás introduje accidentalmente la jamba en alguna parte? ¿O vale la pena reorganizar el tema desde cero?

  • Constantino

    Gregory, todo salió bien para mí en el sitio de prueba.
    Código de plantilla personalizado:

    "". __("Páginas:", "destino"), "después" => "")); ?>
  • oksana

    ¡No lo logré! Desafortunadamente. :(El tema F2 no responde a las manipulaciones indicadas, ya ha especificado el ancho en estilo, como lo mostró Bernatsky, y todo fue en vano. El contenido no se extiende en todo su ancho, no hay barra lateral, pero su lugar ¡Es sagrado! La felicidad estuvo cerca, pero... ¡lo estaba! Cambiar el tema Realmente no quiero, tendré que aguantar la barra lateral por ahora y burlarme más del tema y de mí mismo.

  • Constantino

    Oksana, para eliminar la barra lateral necesitas cambiar 3 estilos de diseño en tu tema F2:
    - contenido
    – envoltorio
    – contenedor

    Además, dos de ellos (envoltorio y contenedor) están en el archivo header.php y el otro en page.php, por lo que para eliminar la barra lateral usando el método anterior tendrás que crear dos plantillas individuales para header.php y page. php, cambie los 3 contenedores anteriores (contenido, contenedor, contenedor), por ejemplo, a lo siguiente: contenido2, contenedor2, contenedor2 y luego escriba los estilos de diseño para ellos:

    # contenido2 (
    relleno: 20px 4%;
    desbordamiento: oculto;
    fondo:#fff;
    }

    #envoltorio2(
    flotador: izquierda;
    ancho: 100%;
    color de fondo: #fff;
    pantalla: en línea;
    }

    #contenedor2(
    margen:0;
    }

    Puede ver un ejemplo de demostración aquí: “mnogoblog4.p.ht/sample-page”

  • oksana

    ¡No puedo creerlo! ¡Todo está en la niebla, pero funcionó! Sólo tuve que cambiar el envoltorio y el envase, todo lo demás ya lo había hecho anteriormente. Supuse que era necesario cambiar estos parámetros, pero no sabía exactamente dónde ni en qué archivo. Ahora necesito tomar notas rápidamente mientras todavía recuerdo al menos algo, de lo contrario mi cabeza es un completo desastre.
    Aún así, hay felicidad :)
    Mago Konstantin, ¡muchas gracias!

  • Constantino

    Oksana, ¡gracias por el comentario!

  • elena

    Hola Konstantin! ¡Verdaderamente el primer y único lugar donde todo está escrito de forma clara y comprensible! Muchas gracias, realmente tengo algunos problemas ((Mi plantilla es simple, no quiero cambiarla, porque hay un sombrero nuevo listo para reemplazarla, es hermoso). Entonces en mi plantilla no hay ningún archivo de página. .. hay single e index y hay una barra lateral para llegar aquí y allá... No sé qué editar, tengo miedo de hacer algo mal.

  • Constantino

    Elena, si quieres crear una plantilla individual para una página, usa index.php como base, y si es para publicaciones, entonces single.php.

  • Novedoso

    ¿Cómo puedo eliminar la barra lateral al abrir publicaciones? No hay ninguna opción para seleccionar una plantilla para publicaciones en el panel de administración.

  • Konstantin Plaschevsky

    Konstantin, ¡muchas gracias! ¡Todo salió bien, bien descrito!

  • Ilia

    Konstantin, no quiero eliminar las barras laterales, sino hacerlas diferentes (tengo dos por página). Hay diferentes para cada página. ¿Cómo se puede hacer esto?

  • Vasili

    Hola, algo no me funciona. Creé la página, ¿qué tal si eliminas la barra lateral? No tengo esos archivos. Tengo estos:

  • Vasili

    Mi cabeza ya da vueltas, olvidé la etiqueta de cierre.

  • albina

    ¡Hola! Realmente necesito tu ayuda. Soy nueva en esta zona y para mí es todo un bosque oscuro). Así que me disculpo de antemano si hice una pregunta estúpida) Me quedé atascado en el punto "Guarde el archivo editable page.php con un nombre diferente y cárguelo en el sitio". Mi blog se encuentra actualmente en Denver. ¿Dime cómo completar este paso? Gracias de antemano.

  • albina

    Descubrí este problema. Simplemente estoy cansado) Pero todavía tengo algo confundido en alguna parte. Después de todas las acciones. La página con la plantilla actualizada aparece vacía. Aparentemente algo salió mal.

  • artem

    Para mí no está en page.php sino en header.php
    ¿Qué hacer en este caso? Si realizo las acciones descritas en el punto 3 del encabezado, la plantilla queda torcida para todas las páginas a la vez.

  • artem

    Tengo el código div id = “content” no en page.php sino en header.php

  • artem

    Mi barra de sitio está ubicada a la izquierda del texto, no a la derecha. Así, mi contenido fluye 100% hacia la derecha, pero el texto no se mueve hacia la izquierda (al lugar donde estaba la barra del sitio). ¿Qué hacer en este caso? La etiqueta flotante no ayuda (

  • nicolás

    ¿Cómo hacer que los artículos en http://wordpress.org/themes/marla sean flexibles en ancho (o expandidos)?

  • valery

    Hola Konstantin! En mi plantilla, en la barra lateral derecha hay dos columnas. ¿Qué se debe hacer para eliminar una columna en la barra lateral derecha, mientras se crea una barra lateral izquierda y una columna allí? ¡Gracias!

  • Constantino

    Valery, los pasos son los siguientes:
    1. en el archivo index.php, elimine el siguiente código:

    2. en el archivo style.css cambie los siguientes parámetros:
    encontrar la linea
    .art-contentDiseño .art-content
    {
    y en este cambio de clase:
    flotador: izquierda;
    en
    flotar: derecha;
    Aquí está el ancho del parámetro: 529px; - Puedes aumentarlo al tamaño deseado.

  • Vladímir

    El tema de la F2 nuevamente.
    No hay problemas con las páginas sin barra lateral, pero con las publicaciones sí.
    Creé una plantilla adicional para publicaciones sin barra lateral.
    Hice esto para mostrar galerías de fotos en estas publicaciones, que se ven mejor sin una barra lateral. Sin embargo, si esta entrada es la primera en la lista de entradas, entonces la página de la lista se muestra sin una barra lateral.
    Ejemplo.

  • Hay una solución

    ¿Existe o no un tema predeterminado 3.0 para una barra lateral con widgets de redes sociales en la aplicación “Sitio”? Hice esta pregunta porque: la identificación de un elemento es contenido con barra lateral, tiene una sangría de 280 píxeles a la derecha, en las plantillas encontré una barra lateral solo en main.html con...

    Eliminé la marca de if !empty($action) && $action == "page", moví la barra lateral antes del artículo a un div separado con la barra lateral de id, resultó lo que quería, si hay otra forma de activar la barra lateral en la aplicación del sitio web (tema predeterminado 3.0), hágamelo saber (adjunto el código main.html para personas con el mismo problema) (if $wa->currentUrl() == $wa_app_url && (empty($page .id) && vacío($página.content)))

    [`¡Bienvenido a su nuevo sitio!`]

    ...

    Al instalar el complemento "pedir en una página", se muestra un menú lateral - barra lateral, el tema "compras fáciles". ¿Por favor dígame cómo deshabilitar el menú lateral - barra lateral?

    ¡Hola! Dígame, ¿en qué parte del tema predeterminado 3.0 (que es la versión 3.3.0) en la aplicación "Sitio" está la plantilla responsable de colocar la barra lateral en el sitio? No encontré la plantilla sidebar.html en Diseño > Plantillas... ¿Dónde debería buscar? Y en general...

    ¡Buenas tardes! Me gustaría implementar diferentes barras laterales para diferentes páginas. Tema predeterminado 2.0. Probé Smarty, como se indica aquí (http://old.webasyst.ru/support/help/smarty-conditions.html), pero nada funciona

    ¿Por favor dígame cómo configurar una barra lateral? Cuando está habilitado en la configuración, aparece un lugar en la página, pero no está claro cómo agregar tipos de cambio o el clima allí, por ejemplo. Y otra pregunta: en la página principal se muestran los iconos del menú de categorías de productos, pero...

    ¿Cómo mostrar categorías de blogs en la barra lateral de cualquier tema por separado de la nube de etiquetas? ¿La misma nube de etiquetas sin categorías? Por alguna razón, se muestran juntas. Nube de etiquetas y categorías debajo. Aquí está el código:(foreach $frontend_action como $plugin...

    Artículos en oferta en la barra lateral

    Buenas tardes Debes crear un bloque en el lado izquierdo de la barra lateral que mostrará los artículos en oferta en diapositivas, indicando el % de descuento.

    Ediciones de plantillas: agregue un campo de dirección, íconos para categorías en la barra lateral, etc.

    Plantilla que debe editarse en thebus.com.ua/webasyst (su tienda) 1. En el encabezado del sitio, en el menú donde se encuentra el carrito, agregue un bloque alineado a la izquierda para la información de contacto. 2. En la barra lateral, agregue la capacidad de cargar íconos para elementos del menú...

    Hola, por favor dime cómo quitar la barra lateral de la plantilla 3.0 predeterminada en la página principal, pero para que en el resto quede como antes.

    Por favor dígame. ¿Cómo puedo hacer que una de las categorías raíz en la barra lateral siempre esté expandida de forma predeterminada, pero al ingresar a otra categoría raíz debería contraerse y expandirse la categoría activa? Quizás puedas escribir algo en...

    Por favor, dígame cómo dividir la barra lateral en bloques con categorías seleccionadas y asignar a cada uno su propio título en el tema "Best Buy".

    Dígame cómo agregar un bloque adicional con texto a la barra lateral de la tarjeta del producto Tema predeterminado 3Gracias.

    ¿Es posible crear una barra lateral en un sitio web con el tema de diseño 2.2.2 “Predeterminado 2.0”? Sitio web http://www.nik-m.com

    +9 Sugerencia para mejorar la configuración del nuevo tema de diseño.

    Aquí hay una pregunta "Plantilla de tienda predeterminada" con una respuesta, por supuesto. pero aparentemente debido a que la versión de la plantilla ha cambiado, ya no es relevante. Mi pregunta fue agregada al mismo tema, pero aparentemente, debido a que el estado del tema es "Hay...

    La situación es la siguiente: el sitio tiene varias categorías de productos. Uno tiene una barra lateral con clasificación a la izquierda y una lista de productos a la derecha. El otro contiene sólo una lista de sus subcategorías sin una barra lateral. Ambas categorías usan una...

    +1 Aceptado

    Cuando elimina una categoría en contactos y la más mínima desaceleración de js, la barra lateral "Todos los usuarios" se sobrescribe con la barra lateral de contactos. Ahora la recarga de la barra lateral debería funcionar antes de que se muestre el bloque central (y todo se mostrará normalmente). Si en devolución de llamada...

    Hay una solución

    No puedo entenderlo en la sección "tareas", por favor ayuda.... A la izquierda hay una sección "equipo": ¿cómo agregar allí los usuarios necesarios?

    "Equipo" son los usuarios que tienen acceso a la aplicación. Pero. La lista en la barra lateral muestra solo aquellas personas con las que el usuario autorizado actual ha realizado algunas acciones durante el último mes. Por ejemplo, asignar nuevas tareas o redirigir las existentes. Esto es para evitar mostrar una hoja de 20 personas si están ocupadas en otros proyectos con los que no estás trabajando actualmente. Acabo de agregar un nuevo usuario y le di derechos limitados en Tareas. En la barra lateral él...

    Editar una plantilla

    Buenas tardes. Es necesario realizar cambios en la plantilla. Sección "Líquidos" https://fathervape.ru/category/zhidkosti/1. Mostrar marcas mediante clic. Inicialmente, todos deberían estar ocultos y debería haber una inscripción con el enlace "Mostrar líquidos por...

    A Microsoft le gusta mucho ofrecer a sus productos soluciones de interfaz bastante controvertidas. Desde Windows Vista, considerado técnica y visualmente el antepasado de todos los sistemas posteriores de Microsoft, se utilizó por primera vez la tecnología para visualizar los componentes más utilizados por el usuario, así como muchos otros tipos de "mejoras". Al mismo tiempo, la computadora comenzó a ralentizarse debido a una sobrecarga del sistema. Hoy, en nuestro artículo, nos ocuparemos de uno de estos procesos "pesados": sidebar.exe.

    Entonces, hablemos de qué es responsable sidebar.exe en Windows 7 y otras versiones del sistema operativo en las que se ejecuta este proceso.
    Seguro que más de una vez has notado una franja vertical en el lado derecho de la pantalla con iconos ubicados en ella. Por ejemplo, en Vista podría ser el clima, el calendario, el reloj visual y en versiones posteriores podrían ser aplicaciones de computadora de uso frecuente y elementos de la interfaz web. Estos son los llamados widgets.

    O, como muchos suelen llamarlos, gadgets. Como se mencionó anteriormente, toda esta desgracia se encuentra en el área vertical derecha, que entre los programadores generalmente se llama "barra lateral" (por el nombre del proceso responsable de esto: sidebar.exe). Lo que es ahora está más o menos claro. Consideremos cómo afecta esto al funcionamiento de la máquina en su conjunto.

    Colocar en el sistema

    En general, esta utilidad es una de las más inútiles que jamás se haya introducido en Windows. Un usuario que está acostumbrado a su coche ya sabe, casi con los ojos cerrados, qué está situado y dónde, y la barra lateral sólo estorba. Además, este proceso del sistema puede consumir una cantidad bastante grande de RAM y tiempo del sistema, que podría dedicarse a cosas más útiles. Para evaluar cuánto sidebar.exe "consume" recursos del sistema, simplemente vaya al "Administrador de tareas" y búsquelo entre los demás en la pestaña "Procesos". Dependiendo de los widgets con los que esté equipada nuestra barra lateral, los números pueden variar desde varios kilobytes hasta un par de megabytes. Si estos valores ascienden a gigabytes, entonces hay otro problema, pero hablaremos de eso a continuación.

    El proceso está utilizando demasiada memoria.

    Como sabes, no sólo las personas se enferman, sino también los ordenadores. Es bastante fácil contraer un virus en Internet. Muy a menudo, el malware se disfraza de archivos y procesos con la extensión .exe. Y sidebar.exe no es una excepción. Este es uno de los "donantes" de malware más favoritos. Para revisar su computadora, ejecute una búsqueda en el sistema de sidebar.exe. El archivo real de Microsoft se encuentra en la carpeta C:\Program Files y el malicioso está en C:\Windows o C:\Windows\system32. Actualice urgentemente su antivirus y solucionará fácilmente esta infección informática.

    Quitar la barra lateral

    Si está cansado de la congelación constante del sistema debido a este proceso, lo más probable es que se esté preguntando: ¿cómo eliminar sidebar.exe? Hemos preparado dos de las soluciones más populares.

    El primero es el más sencillo y podrás hacerlo en poco tiempo. Pero tiene un inconveniente importante: después de cada reinicio del sistema, los widgets vuelven a su lugar y continúan arruinando nuestras vidas. Veamos cómo deshacernos rápidamente de sidebar.exe:

    1. Presione la combinación de teclas Ctrl+Alt+Supr; esto abrirá el "Administrador de tareas";
    2. Buscamos sidebar.exe entre otros procesos;
    3. Haga clic derecho sobre él y seleccione "Desactivar".

    ¡Todo! El sistema ahora debería empezar a funcionar más rápido. Piénselo: si decide deshabilitar permanentemente sidebar.exe, ¿qué implica eso? ¿Qué tan beneficioso será deshacerse de estos aparatos? ¿Has decidido? Entonces comencemos:

    1. Abra el menú “Inicio” y seleccione “Ejecutar...”;
    2. En la ventana que se abre, ingrese "msconfig" y haga clic en "Aceptar";
    3. Se abre una ventana frente a nosotros, en la que vamos a la pestaña "Inicio";
    4. Busque nuestra barra lateral y desmárquela.


    Estas acciones deshabilitarán el inicio automático del proceso cuando se inicia el sistema operativo. No recomendamos deshabilitar configuraciones desconocidas, ya que esto puede provocar errores graves en el funcionamiento del sistema operativo.

    Problemas con sidebar.exe

    Sucede que el proceso funciona, pero los widgets en sí no se muestran. ¿Qué está causando el error sidebar.exe? El problema más común es el mal funcionamiento de Adobe Flash Player y del navegador Internet Explorer, ya que es el responsable de cargar datos de Internet en los dispositivos. Reinstale estos componentes y reinicie la barra lateral. Se encuentra en C:\Archivos de programa\Windows Sidebar\sidebar.exe.
    Si esto no ayuda, descargue e instale el componente desde el sitio web oficial de Microsoft.
    Ahora todo debería quedar claro sobre sidebar.exe: qué tipo de proceso es y qué funciones realiza.
    ¿Alguna pregunta? ¡Pregúntales en los comentarios!

    Me cuesta encontrar tiempo para escribir otro artículo en mi blog. Pero, pero... lo haré. Muchas cosas, ¿de dónde vienen?

    Hoy quería hablar sobre lo que debería estar en la barra lateral de un blog. Y al mismo tiempo tocaré el tema de qué es una barra lateral de blog en general.

    Hola a todos, amigos.

    Barra lateral del blog: ¿qué es y qué debería contener?

    Hablemos de esto:

    • ¿Qué es una barra lateral?
    • ¿Por qué en la derecha y por qué solo?
    • ¿Qué debería estar en la barra lateral de un blog?

    ¿Qué es una barra lateral?

    Un poco de teoría para empezar. El motivo de escribir este post fue mi visita a uno de los blogs, mi lector. Y “aleatorio”, si se me permite decirlo.

    Desde hace aproximadamente un mes tenía pensado escribir este post con mis propias fuerzas, pero seguía pensando que no era importante, que este tema podía omitirse. Pero luego siguió otra visita similar, seguida de otra.

    En resumen, he visto suficientes películas de terror)))

    Mi blog está lejos de ser ideal. Como ya dije, estoy trabajando para cambiar el diseño y hacer borrón y cuenta nueva. Estas son cosas del futuro cercano. Entonces será posible juzgar el diseño de mi blog en todo su rigor, pero por ahora, trabajemos conmigo para intentar responder la pregunta principal de esta publicación.

    Entonces, ¿qué es una barra lateral? No es necesario tener un conocimiento profundo de idiomas extranjeros para comprender que esta palabra consta de dos palabras: "lado" es un lado y "bar" es ... un establecimiento de bebidas))) "Bar" es un banda.

    Entonces, si a menudo te gusta pasar el rato en un bar, espera una nueva racha en tu vida.

    Aquellos. Una barra lateral es una especie de barra lateral, un lateral ubicado en tu sitio web (blog). Quiero decir de inmediato que la gran mayoría de las barras laterales de blogs y sitios web se encuentran a la derecha. Esto tiene una explicación completamente lógica: todo Internet es, por así decirlo, diestro.

    ¿Por qué en la derecha y por qué solos?

    La segunda regla tácita: por regla general, en un blog debería haber una barra lateral de este tipo. ¿Alguna vez has visto un blog o sitio web que tenga dos o incluso tres barras laterales? ¿No te recuerda a nada?

    Así es, una feria de fin de semana en la granja colectiva Red Drawbar. Y para ser honesto, nunca me he encontrado con un solo blog armonioso, bellamente y correctamente diseñado con más de una barra lateral. Si no, envía un enlace al estudio y lo discutiremos.

    Entonces, para resumir, quiero decir esto (al menos de esto estoy personalmente seguro):

    • La barra lateral debe estar a la derecha y uno. Repito: ¡ni dos, ni tres!
    • La barra lateral de la izquierda es una señal de que el propietario del blog ha sido "infringido".

    ¿Qué debería estar en la barra lateral de un blog?

    En tu curso gratuito “Blog de bricolaje. Comenzar." Naturalmente mencioné cómo deberían ubicarse los elementos principales del blog. En esta publicación, proporcionaré material sobre este tema con más detalle, describiré, por así decirlo, mi visión.

    Ancho. Aquí, nuevamente, todo es individual y puedes cercar el "huerto" en cualquier dirección, pero el ancho mínimo de este campo debe ser de 250 px, o incluso un poco más.

    Una gran cantidad de banners de barra lateral tienen tamaños de 250x250 px, 125x125 px, 240x400 px, etc. El significado, creo, es claro. Pensando en el futuro, debe asegurar su futuro espacio publicitario ahora si quiere ganar dinero con la publicidad mediante banners.

    Y es bueno si obtienes un tema "de goma", donde puedes cambiar el ancho en cualquier momento, pero ¿y si no? Eso es lo mismo.

    Altura. Valor dinámico para cualquier plantilla. Cuantos más anuncios de publicaciones coloques en la primera página, más “largo” será tu blog y la longitud de la barra lateral cambiará en consecuencia.

    Disposición de elementos. Aquí se aplica una regla: cuanto más cerca esté el elemento del encabezado del blog, más "valioso" debería ser. Por lo tanto, aquí, por regla general, se encuentran las mejores ventajas de cualquier blog (sitio): una suscripción al boletín, un formulario de búsqueda o simplemente uno de los espacios publicitarios más caros.

    Déjame contarte también lo que debería haber allí. Todos pueden agregar la lista ellos mismos (y muy a menudo “hasta el punto de la vergüenza”):

    • El formulario de búsqueda (el estándar no funciona) funciona mejor en Google o Yandex.
    • Un banner propio y colorido para un producto gratuito o de pago, que definitivamente funcionaría como un "generador de suscripciones", es decir. atraería personas a su lista de suscripción.
    • Ventana del comentarista. Muy a menudo veo esta ventana a continuación. También dicen que los comentarios son el alma de un blog. ¿O mezclé algo? Y si es así, ¿por qué entonces los comentaristas caros se colocan en el último lugar? No entiendo.
    • Artículos de blogs populares. Aquí basta con colocar entre 4 y 6 de los artículos más populares (comentados) para proporcionarles tráfico adicional.
    • Ventana de redes sociales. He implementado esta función usando el "Carrusel social" http://makedreamprofits.ru/ Esta ventana es necesaria para conectar a sus visitantes con sus cuentas en diferentes redes sociales.
    • Dos ventanas que coloqué en mi barra lateral: son publicaciones y categorías archivadas. La idea es que esta función se implemente mediante pestañas. Cuando vuelva a trabajar mi diseño, definitivamente lo haré de esta manera. Se ve limpio y ahorra mucho espacio.

    Esto es exactamente lo que debes colocar en la barra lateral de tu blog. También sigo esta regla: la altura de los elementos de la barra lateral debe coincidir con la altura de los anuncios de la página principal.

    Admítelo: muchos de nosotros, mirando la barra lateral ( del ingles Barra lateral - barra lateral), lo ve como nada más que un contenedor que contiene varios elementos del menú. Le prestamos la menor atención durante el desarrollo y, sin pensarlo, lo llenamos con varios widgets.

    Pero al desarrollar un sitio web, el diseñador debe tener en cuenta muchos factores a la hora de diseñar las barras laterales. Por ejemplo, debe decidir cuántos habrá, qué largo y ancho tendrán, cuál será el orden de los elementos en ellos, etc.

    En este artículo hablaremos de " anatomía de una barra lateral ideal».

    Definición e importancia de la barra lateral

    En primer lugar, necesitamos definir una barra lateral. Se parece a esto:

    La barra lateral es una sección gráfica de un sitio web, separada de otras, que contiene información y elementos de navegación.

    Esta no es del todo mi definición: utilicé material de Wikipedia.

    Una barra lateral (es decir, una barra lateral) contiene elementos contextuales que son relevantes para el contenido actual o comunes a todo el sitio, como menús de navegación, formularios de búsqueda o widgets de suscripción. También pueden contener elementos no contextuales como publicidad o una "frase del día".

    Como regla general, tienen un ancho más estrecho que las secciones de contenido, lo que ayuda a enfatizar que el contenido es principal en relación con la barra lateral. El objetivo principal de la barra lateral es ayudar al usuario a navegar por el sitio sin dificultad.

    Como sistema de gestión de contenidos ( sistema de gestión de contenidos – CMS), la plataforma WordPress define una barra lateral como " área de widgets» (Área de widgets). En estas áreas, los desarrolladores de temas de WordPress deberían colocar widgets.

    Aunque técnicamente hablando, las barras laterales son áreas de widgets que pertenecen al pie de página del tema, también pueden considerarse una categoría separada entre los elementos de la página web.

    ¿Cuántas barras laterales debe tener un tema?

    Como habrás notado, no hay una respuesta clara a esta pregunta. Dependiendo de la complejidad del sitio y la necesidad de paneles laterales, su número varía de uno a cuatro.

    Una barra lateral

    Aquí hay un ejemplo de un diseño con una barra lateral: Twenty Twelve WordPress Theme

    Esta es probablemente la opción más popular en el diseño de blogs. Y dado que las páginas de blog suelen contener una larga lista de publicaciones o contenido de artículos con comentarios extensos, esta única barra lateral puede contener entre 5 y 10 elementos.

    Pero recuerde: si la altura de la barra lateral es tal que es mayor que la altura de la página, parece repulsiva y no tiene el mejor efecto en la calidad del diseño.

    La barra lateral puede ubicarse a la izquierda o a la derecha del contenedor con el contenido principal. No hay una diferencia significativa entre los dos, pero como los idiomas europeos se leen de izquierda a derecha, una barra lateral a la izquierda puede atraer más clics, reduciendo la importancia del contenido principal y reduciendo el tiempo promedio dedicado a ver cada página (lo contrario). Este enfoque se utiliza para idiomas que se escriben de derecha a izquierda, por ejemplo árabe o hebreo).

    Dos barras laterales


    Eche un vistazo a un sitio de ejemplo con dos barras laterales: Seventeen WordPress Theme

    Dos barras laterales pueden resultar útiles para sitios web corporativos o tiendas, ya que necesitan mostrar más elementos de navegación e información en comparación con los blogs. La desventaja de tener dos paneles laterales es que ocupan más espacio y obligan a reducir el tamaño del contenedor de contenido principal. En pantallas que ya tienen un ancho estándar para portátiles (1366 píxeles), puedes colocar barras laterales una debajo de la otra.

    También puedes hacer que tus barras laterales sean muy estrechas, con solo íconos o palabras cortas dentro de ellas, pero si lo haces incorrectamente, esto puede desanimar a los visitantes.

    Tres o cuatro barras laterales


    Aquí hay un ejemplo de un diseño con cuatro barras laterales: SmashingMagazine.com

    No hace falta decir que debes abordar este diseño de manera responsable y utilizar las técnicas adecuadas. Si no desea molestar a los visitantes cuyo tamaño de pantalla es inferior a 1600 píxeles, debe reducir o mover las barras laterales en consecuencia.

    El diseño actual del sitio web de Smashing Magazine es uno de los mejores ejemplos de diseño responsivo de cuatro columnas para WordPress. Cuando se reduce el ancho de la pantalla, la barra lateral de la izquierda, que contiene los elementos de navegación principales, se mueve hacia la parte superior, debajo del encabezado del sitio.

    A continuación, la barra lateral de la derecha desaparece por completo y la barra lateral que se movió anteriormente debajo del encabezado vuelve a su lugar a la izquierda, al mismo tiempo, la barra de búsqueda de la barra lateral derecha desaparecida se mueve debajo del encabezado. Finalmente, la barra lateral izquierda y la búsqueda se conectan al encabezado del sitio (que es apropiado para verlo en dispositivos móviles con pantallas pequeñas).

    Sin barras laterales


    Ejemplo de diseño sin barras laterales: Beyn.org

    El minimalismo puede ser un concepto adecuado para diseñar una amplia variedad de sitios web. Si este enfoque le resulta familiar, analice detenidamente qué elementos se pueden eliminar del diseño de su sitio sin comprometer su funcionalidad.

    Puede colocar los botones restantes en la parte inferior de la página. Además, puedes intentar mostrarlos en la parte superior, pero existe el riesgo de que el contenido principal se “mueva” hacia abajo, más allá de la parte visible de la pantalla.

    El tema que vinculé arriba, Beyn, fue creado por mí para mi propio blog. Siempre he usado una barra lateral para desarrollar mis temas, pero esta vez decidí probar el enfoque sin usar barras laterales y funcionó muy bien: en la parte inferior de cada página solo hay tres widgets: una lista de anuncios, botones para redes sociales y suscripciones, y un bloque de comentarios.

    El beneficio clave de diseñar sin barras laterales es que el contenido principal recibe la mayor atención.

    Las sutilezas del buen diseño

    Una de las principales razones por las que los usuarios no prestan atención a la barra lateral es su mal diseño. Otro motivo podría ser utilizar demasiados o, por el contrario, muy pocos elementos, mostrar contenido aburrido y poco interesante en la barra lateral, o un orden incorrecto de los elementos, etc.

    Descuidar el desarrollo de la barra lateral conduce a un bajo número de visitantes, un bajo número de clics en banners publicitarios, tasas de conversión y volúmenes de ventas insatisfactorios.

    Incluso si no espera ganar mucho dinero con su sitio de WordPress y solo quiere que la gente lea lo que publica, aún necesita diseñar buenas barras laterales porque, de lo contrario, la navegación seguirá siendo un problema. visitantes.

    Veamos los tres parámetros más importantes que caracterizan un buen diseño de barra lateral: tamaño, combinación de colores y características tipográficas.

    Ancho y alto de la barra lateral


    El ancho de la barra lateral debe establecerse de acuerdo con el contenido principal, utilizando el sentido común. Este es un enfoque muy inteligente, ya que el área de contenido principal es siempre la máxima prioridad en una página web y una barra lateral amplia puede distorsionar esta percepción.

    Un ancho del 20 % al 40 % suele ser el ancho óptimo para una sola barra lateral. Si vas a utilizar más de una barra lateral, entonces se recomienda que su ancho total no supere el 50% (20% + 20% o 15% + 35%, por ejemplo).

    Para una sola barra lateral, también puedes utilizar el enfoque de proporción áurea, donde el ancho de la barra lateral es aproximadamente el 38% del ancho del área principal.

    En cuanto a la altura, es recomendable que no supere los límites visibles de la pantalla, de lo contrario el usuario tendrá que desplazarse. Normalmente recomiendo a mis clientes que intenten permanecer dentro de la parte visible de la pantalla para que el visitante no tenga que desplazarse.

    Sin embargo, los dispositivos móviles con pantallas pequeñas son ahora tan comunes que la gente se ha acostumbrado a desplazarse y este ya no es un problema tan crítico.

    A pesar de esto, el visitante ve primero los elementos ubicados encima del lugar desde el que debe desplazarse. Por cierto, no vale la pena establecer la altura de la barra lateral por encima de la altura del contenedor con el contenido principal. Si la barra lateral es más larga que la sección de contenido principal, se ve terrible.

    Uso de colores e imágenes.


    Los colores pueden tanto atraer la atención como rechazar. Si utiliza demasiados colores, como se muestra en la imagen de arriba, no tendrá el efecto deseado, será exactamente lo contrario.

    Pero si utilizas sólo unos pocos colores para algunos elementos (aquellos que pretenden llamar la atención de los visitantes más que otros), se conseguirá el efecto deseado. Debe recordar que para llamar la atención sobre cualquier widget, debe colocar los demás en un segundo plano. Esto se llama la palabra "contraste".

    Aunque las imágenes pueden ser una excepción. Todo lo que escribí anteriormente también se aplica a los gráficos digitales, pero las imágenes se pueden usar para atraer la atención por separado de los elementos coloreados de la interfaz de usuario. Pero puedes imaginar que demasiadas imágenes también complicarán la experiencia del visitante de la página. Es por este motivo, como habrás notado, que la publicidad suele ubicarse en las barras laterales.

    Tamaños de fuente y ubicación de elementos


    La tipografía es extremadamente importante para el diseño de calidad. Teniendo solo esto, ya puedes obtener una hermosa vista del sitio.

    Para las barras laterales que desarrollo, configuro el tamaño de fuente para que sea entre un 10 y un 20 % más grande que el contenido principal. Esto atrae, pero no distrae la atención del visitante del contenido principal; este es exactamente el objetivo que perseguimos. No olvides que un texto más pequeño también puede llamar la atención en algunos casos.

    Prefiero centrar los títulos y alinear el texto a la derecha. Sin embargo, puedes (y debes) hacer todo en función de los objetivos de desarrollar tu diseño particular. Todo debe verse limpio y proporcional.

    Disposición de elementos en la barra lateral.

    Independientemente de la cantidad de elementos en la barra lateral, su ubicación en ella juega un papel decisivo. Si hace esto correctamente, definitivamente aumentará los clics y las ventas; de lo contrario, estos números disminuirán.

    Resalte los elementos más importantes a los que el usuario debe prestar atención en primer lugar. Decida también qué elementos no son tan importantes y no requieren atención inmediata cuando visita el sitio por primera vez.

    Ejemplo: si el formulario de suscripción y los botones de publicación más recientes/más populares son importantes, entonces es poco probable que se pueda decir lo mismo del "bloque". últimos comentarios"o sobre una lista de recomendaciones para leer sobre el tema. Una vez que haya determinado qué es más importante, puede colocar esos elementos en relación entre sí para crear una barra lateral bien estructurada.



    
    Arriba