Muchos elementos componen un sitio web bien dise帽ado. el encabezado de su sitio web de WordPress con Beaver Themer es particularmente importante porque es lo primero que ven los visitantes cuando llegan a su sitio. Al crear un encabezado personalizado, puede captar la atenci贸n de sus visitantes y generar reconocimiento de marca.
C贸mo personalizar el encabezado de su sitio web de WordPress con beaver builder
Tradicionalmente, para personalizar un tema, un desarrollador escribir铆a c贸digo personalizado. Esto requiere habilidades de codificaci贸n avanzadas, especialmente con el requisito de que los sitios sean receptivos.
encabezado de su sitio web de WordPress con Beaver Themer
Hoy en d铆a, incluso si no tenemos la experiencia en codificaci贸n, a煤n as铆 podemos crear encabezados personalizados altamente efectivos usando Beaver Themer, nuestro complemento para el complemento Beaver Builder. Beaver Themer nos da el poder de elaborar encabezados personalizados usando el editor de front-end Beaver Builder de arrastrar y soltar, que normalmente lo usamos para dise帽os en el 谩rea de contenido.
As铆 de f谩cil es. Esta es la plantilla para un dise帽o de encabezado Themer:
Puedes ver en la captura de pantalla c贸mo Themer usa el editor Beaver Builder. La plantilla de encabezado tiene dos filas, con una barra superior, un m贸dulo de Encabezado y un m贸dulo de Men煤. Literalmente, puede hacer unos pocos clics y tener las mismas dos filas, pero qu茅 diferencia:
Esto es todo lo que hicimos para cambiar la plantilla:
- Cambi贸 el fondo de la barra superior a un color oscuro e hizo que el texto y los iconos fueran blancos.
- Se agreg贸 una imagen de fondo y un degradado de color de superposici贸n a la segunda fila y la hizo de altura completa.
- Se movi贸 el m贸dulo Men煤 de la columna de la derecha debajo del encabezado.
- Estilos modificados y relleno de filas en filas y m贸dulos.
Adem谩s de los encabezados, puede crear dise帽os para pies de p谩gina, p谩ginas de archivo y publicaciones 煤nicas, p谩ginas de b煤squeda, p谩ginas 404 y 芦partes禄 de p谩ginas como pancartas de ventas.
Pasos para crear su encabezado personalizado con Beaver Themer
As铆 es como crea un dise帽o Themer para su encabezado personalizado. Comience instalando y activando una versi贸n premium del complemento Beaver Builder y el complemento Beaver Themer Add-On. Luego, vaya al panel de control de su sitio y haga clic en Beaver Builder> Themer Layouts en la barra lateral.
Hacer clic en la opci贸n Agregar nuevo, que se encuentra en la parte superior de la pantalla. Como se muestra en esta captura de pantalla, cree un t铆tulo para el dise帽o de su encabezado (no se muestra en su p谩gina web o en la URL), y establezca el Tipo como Dise帽o tem谩tico y Dise帽o como Encabezado:
Haga clic en el bot贸n Agregar dise帽o de Themer. Luego haga clic en Iniciar Beaver Builder, el bot贸n azul en esta captura de pantalla.
Esto abre el editor Beaver Builder con la plantilla de dise帽o de encabezado ya importada. Modifique la plantilla para crear su encabezado personalizado, como se muestra en la siguiente captura de pantalla. O puede eliminar una o ambas filas de la plantilla y empezar de cero.
Recuerde que puede usar el modo de edici贸n receptiva del editor de Beaver Builder para ver c贸mo se ver谩 su encabezado en dispositivos medianos y peque帽os y realizar cambios en la configuraci贸n que se aplican a un solo tama帽o de dispositivo. Simplemente use el m茅todo abreviado de teclado R mientras est谩 en el editor para alternar entre las vistas de pantalla grande, mediana y peque帽a.
Una cosa que notar谩 cuando abra las filas de la plantilla y los m贸dulos es que algunos de los campos usan una conexi贸n de campo en lugar de texto est谩tico. En este ejemplo, el texto 芦Sitio de demostraci贸n禄 que aparece en la pantalla se crea din谩micamente a partir de la conexi贸n del campo T铆tulo del sitio, como se muestra en esta captura de pantalla.
Puede crear conexiones de campo haciendo clic en el signo m谩s que aparece a la derecha para los campos elegibles y luego eligiendo uno de los valores din谩micos de la lista. En este caso, la conexi贸n del campo T铆tulo del sitio extrae su valor de la configuraci贸n de WordPress que se encuentra en Configuraci贸n> General> T铆tulo del sitio, y la conexi贸n del campo URL del sitio obtiene su valor de Configuraci贸n> General> Direcci贸n del sitio (URL). Puede escribir texto est谩tico en esos campos si lo prefiere, pero la ventaja de las conexiones de campo es que si alguna vez cambia la configuraci贸n de WordPress, los nuevos valores se mostrar谩n autom谩ticamente en su encabezado.
En otras ubicaciones, las conexiones de campo permiten que el valor cambie seg煤n la p谩gina en la que se realiza el dise帽o. Por ejemplo, si est谩 creando un dise帽o de publicaci贸n 煤nica y la conexi贸n de campo del m贸dulo Encabezado est谩 establecida en T铆tulo de la publicaci贸n, el encabezado cambia seg煤n la publicaci贸n que se muestre. Adem谩s de las conexiones de campo que vienen con Beaver Themer, puede conectarse a campos personalizados de WordPress, Campos personalizados avanzados o campos personalizados de Pods, por lo que sus opciones de personalizaci贸n son casi ilimitadas.
Cuando haya terminado de crear su encabezado, guarde los cambios en el editor haciendo clic en Listo> Publicar.
Haga clic en Editar dise帽o de Themer en la barra de administraci贸n de WordPress en la parte superior de la p谩gina para volver a la configuraci贸n de su encabezado, como se muestra en esta captura de pantalla.
Especifique c贸mo desea mostrar su encabezado. Puede hacerlo fijo, lo que significa que permanecer谩 visible cuando los usuarios se desplacen hacia abajo en la p谩gina. O puede convertirlo en una superposici贸n con un fondo transparente:
Elija d贸nde mostrar su encabezado configurando la ubicaci贸n donde aparecer谩, como se muestra en esta captura de pantalla:
Si elige Todo el sitio, su encabezado ser谩 visible en todas sus publicaciones y p谩ginas. Si desea ser m谩s limitado, puede elegir tipos espec铆ficos de publicaciones o p谩ginas y agregar m谩s de una regla de ubicaci贸n.
Si hay 谩reas en las que le gustar铆a que su encabezado no sea visible, use una regla de exclusi贸n. Seleccione el bot贸n Agregar regla de exclusi贸n y especifique qu茅 ubicaciones de su sitio le gustar铆a que no apareciera su encabezado. Para estas p谩ginas excluidas, puede usar otro dise帽o de encabezado Themer o se mostrar谩 el encabezado de su tema.
Una vez que haya configurado todas las reglas necesarias, haga clic en el bot贸n azul Actualizar. 隆Tu encabezado personalizado est谩 listo para funcionar!
Listo, ya vimos c贸mo personalizar el encabezado de su sitio web de WordPress con Beaver Themer.
Tambi茅n podr铆a interesarte: 5 complementos pr谩cticos de Beaver Builder para su sitio de wordpress
