Edición de Cabecera StoreFront  

 
Francisco
 Francisco
Usuario experto

Hola, acabo de encontrar cómo modificar la cabecera de Storefront, pero sólo el acomodo del logo en el centro y el índice, sin embargo, no he logrado encontrar el tema del tamaño del logo y el acomodo de la caja de búsqueda de productos.

Por lo que mi pregunta son las siguientes:

- Cómo aumentar el tamaño del logotipo
- Quiero acomodar la caja de búsqueda arriba del logo del lado derecho.

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 08/06/2019 9:41 pm
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Francisco,

¿Ya intentaste hacer esos cambios mediante reglas CSS? Creo que esa sería la manera de hacerlo. Si desconoces CSS no t preocupes, podemos ayudarte con ello.

Saludos.

Bulmaro Arellano N.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio

¡Gracias!.

ResponderCitar
Respondido : 08/06/2019 11:37 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Francisco,

¿Ya intentaste hacer esos cambios mediante reglas CSS? Creo que esa sería la manera de hacerlo. Si desconoces CSS no t preocupes, podemos ayudarte con ello.

Saludos.

Bulmaro Arellano N.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio

¡Gracias!.

ResponderCitar
Respondido : 08/06/2019 11:37 pm
Francisco
 Francisco
Usuario experto

Hola, Bulmaro

Muchas gracias, la verdad, no conozco cómo hacerlo mediante CSS, el movimiento que hice que está visible en donde el logo está centrado fue una regla que encontré.

Así que si me ayudas con la regla para agrandar el sitio y otra regla para poner la búsqueda de productos arriba del logo del lado derecho te lo agradecería muchísimo 🙂

ResponderCitar
Respondido : 09/06/2019 12:05 am

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Francisco,

Claro, estamos para auxiliarte en estos casos.

  1. Para cambiar el tamaño del logo añade el siguiente CSS:
    @media (min-width: 768px){
    .site-header .site-branding img {
        height: auto;
        max-width: 500px !important;
    }}

    Donde 500px indica el tamaño en píxeles de la imagen.

  2. El buscador ya no lo veo como aparece en la captura que enviaste. Asumo que ya lograste quitarlo, ¿Cierto?

Bulmaro Arellano N.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio

¡Gracias!.

ResponderCitar
Respondido : 09/06/2019 3:51 am
Francisco
 Francisco
Usuario experto

Muchas gracias, ha quedado excelente lo del logo.

Sì, había quitado el buscador de productos mientras esperaba la respuesta, pero ya lo he activado nuevamente,

Me podrías ayudar con eso, para colocarlo arriba del logo pero dejarlo del lado izquierdo o derecho.

Gracias.

ResponderCitar
Respondido : 09/06/2019 4:30 am

Cursos Gratuitos WordPress

Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Francisco.

Para ello podemos crear un widget y asignarle un área:

  1. En Apariencia -> Editar tema -> functions.php, al final del contenido agrega:
    function wpb_widgets_init() {
     
        register_sidebar( array(
            'name'          => 'Search Before Header',
            'id'            => 'custom-header-widget',
            'before_widget' => '
    ', 'after_widget' => '
    ', 'before_title' => '

    ', 'after_title' => '

    ', ) ); } add_action( 'widgets_init', 'wpb_widgets_init' );
  2. En Apariencia -> Editar tema ->header.php, justo debajo de la etiqueta :
  3. En Apariencia -> Widtgets, verás que aparece un área llamada "Search Before Header", agrégale el widtget llamado "Search products"
  4. En Apariencia -> CSS Adicional agrega:
    #header-widget-area{
    margin-top: 3%;
    }
    
    #header-widget-area div.chw-widget .woocommerce-product-search button[type='submit']{
    	display: none; 
    }

Nota: Recuerda crear un respaldo del archivo functions.php y header.php antes de agregar lo anterior.

Si no te funciona por favor indícame cómo agregaste el logo, si solo usaste CSS no debería haber problema con lo que te he pedido agregar.

Saludos.

Bulmaro Arellano N.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio

¡Gracias!.

ResponderCitar
Respondido : 09/06/2019 1:21 pm
Francisco
 Francisco
Usuario experto

No me funcionó, de hecho mi tema no me permite hacer los cambios directamente en el área de apariencia, así que me fui al CPanel, al área de Theme y ahí me metí tanto en functions como en Header,
Anexo archivos para que veas lo que hice.

ResponderCitar
Respondido : 11/06/2019 2:06 am

wpdoctor-revisa-la-salud-de-tu-wordpress

Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Francisco,

¿Podrías enviarme una captura de tu functions.php y header.php, tambien una vista de la pagína de widgets? Por favor.

Si estás usando Storefront no entiendo por qué no te dejaría editar los archivos anteriores desde Apariencia -> Editor de temas, yo utilicé ese tema para crear el widget y no tuve ningún problema.

Saludos.

Bulmaro Arellano N.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio

¡Gracias!.

ResponderCitar
Respondido : 11/06/2019 2:16 am
Francisco
 Francisco
Usuario experto

Sí te los mandé, a lo mejor se te pasó ver los archivos anexos, pero esta ves los voy a insertar para mayor facilidad.

Muchas gracias,

ResponderCitar
Respondido : 11/06/2019 7:15 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Para mostrar la búsqueda en la parte superior derecha, usa el siguiente código CSS:

header.site-header{
    position:relative;
}

header.site-header .site-search{
    display:block;
    position:absolute;
    right:20px;
}    

Si quieres que la búsqueda igual se muestre en movil agrega adicionalmente:

@media(max-width:768px){
    header.site-header .site-search{
        position:static;
    }   
}

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 11/06/2019 7:55 pm
Francisco
 Francisco
Usuario experto

Funcionó excelente, gracias.

ResponderCitar
Respondido : 13/06/2019 10:18 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Que bien que lo solucionaste.

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 13/06/2019 10:32 pm

Por favor Iniciar Sesión o Registro