Seleccionar página

Aumentar el tamaño del logo en Divi [Versión Móvil]

Un pequeño problema que surge a la hora de usar Divi es que en la versión móvil el logo se ve muy pequeño.

¿Porque el logo se ve pequeño en el Móvil?

Existe un espacio limitado para colocar el logo, los logos suelen ser imágenes normalmente rectangulares, esas imágenes al no ser imágenes vectoriales, se pueden deformar, Con los logos cuadrados no suele dar problemas.

Cual debería de ser el tamaño del logo de mi página web?

Depende, no hay un máximo ni un mínimo. Mi recomendación seria que la imagen fuera lo más pequeña posible sin que perdiera la calidad. YO suelo usar tamaños de 600 x 400 o 800×300 dependiendo del logo.

Recuerda seguir que cada vez que subas una imagen debería de redimensionar esa imagen a un tamaño apropiado… y optimizar la calidad de la imagen. Tengo un artículo en el blog de cómo lo hago yo de forma manual o automática

Aumentar el tamaño del logo en Divi WordPress

Aumentar el tamaño del logo Opciones DIVI

Revisar las opciones del tema en este caso DIVI en el apartado  de  Apariencia > Personalizar o en Divi > personalizador de Temas.

Accedemos a la sección cabecera y navegación barra menú y ampliamos el tamaño de logo Max y el menú en altura. Revisamos que el logo se vea bien en la versión Móvil.

Esta opción no suele funcionar por lo que haremos lo siguiente:

Ampliar el tamaño del logo con Css.

Vamos a indicarle que coja el ancho y largo máximo en cualquier versión de la web [PC, móvil o Tablet].

Vamos a la sección del código y añadimos lo siguiente:

.et_header_style_left #logo, .et_header_style_split #logo {

max-width: 100%;

max-height: 80%;

}

El ancho y el tamaño máximo dependerá de tu logo, si tu logo tiene un tamaño de 1400 x 800 no te va a valer ya que es demasiado grande la imagen.

Mejorando y u sando Media Querys

Para mejorar la segunda opción .. Se podría añadir una serie de líneas en Css para que este código solo se cargara en caso de que las pantallas fueran más pequeñas, usando para ello las media Querys.

La indicamos que para pantallas con un máximo de 900px cargue este código. [Recuerda probar en diferentes pantallas y densidades de móvil que se vea correctamente]

@media only screen and ( max-width: 900px ) {

.et_header_style_left #logo, .et_header_style_split #logo {

max-width: 100%;

max-height: 80%;

}}

Lo has probado? Te ha funcionado? Si te hemos ayudado o tienes alguna duda déjanos tu opinión. GRACIAS

Boton de Añadir al carrito en divi [Woocommerce]

Divi es una de las mejores formas de crear páginas web bonitas y fáciles de diseñar si es verdad que no está todo optimizado pero bueno y que existe mucha gente que no le gusta porque genera mucho código basura, pues si es verdad… pero no cabe duda que los diseños son fantásticos y que si se sabe hacer bien las cosas puedes optimizar tu página con Divi ( Yo tengo un plugins Premium para ello, escríbeme aquí si necesitas mas info).

Para Woocoomerce yo no lo recomiendo mucho pero bueno, quizás para ciertas tiendas online pequeñas si puede ser una buena opción.

Crear el botón de añadir al carrito en Divi

Lo que vamos a hacer a continuación en añadir un código en el fichero que nos permita añadir de forma automática ese botón de comprar en cada una de las fichas del producto.

Crear un Child Theme:

Siempre, siempre, siempre que vayas a añadir código en algún fichero PHP, debes de crear un tema hijo para así evitar problemas (Que seguro los tendrás en la próximas actualizaciones).

Yo os recomiendo este plugins: Child Theme Configurator (Algún día creare un guía), pero es muy fácil lo único que debes hacer es crear un nuevo tema que parte del padre y ponerle el nombre (ejemplo DiviTemaHijo) y añadir los fichero que vas a modificar… yo suelo añadir el funtion.php el header y  los styles (Algunos ya los coge por defecto)

Activar el nuevo Child Theme:

En apariencia temas eliges el nueva tema que has creado: DiviTemaHijo y activarlo.

Añadir el botón carrito en Divi

Vamos a la parte importante… y como añadimos el botón?

Debemos de acceder a vuestro servidor y buscar el fichero function.php… (Hacer antes una copia y cuidado con los paréntesis corchetes… etc.)

El fichero se encuentra en la siguiente ruta de tu servidor:

wp-content / themes / DiviTemaHijo/ functions.php

// AÑADIR AL CARRITO

function dac_add_cart_button () {
add_action( ‘woocommerce_after_shop_loop_item_title’, ‘woocommerce_template_loop_add_to_cart’, 10 );
}
add_action( ‘after_setup_theme’, ‘dac_add_cart_button’ );

Y YA ESTA AÑADIDO EL BOTON DEL CARRITO…

Como personalizar el mensaje de añadir al carrito en Woocomerce y DIVI

Si lo que quieres es personalizar el texto que aparece en el botón de comprar o añadir al carrito y poner otros mensajes te permite, Dependiendo si el producto es simple o tiene variaciones o diferentes mensajes

// Cambia el texto del botón Añadir al carrito en Woocoomerce en la categorías de productos
//Modificar texto del botón Añadir al carrito

function custom_woocommerce_product_add_to_cart_text() {

global $product;
$product_type = $product->product_type;

switch ( $product_type ) {
case ‘external’:
return __( ‘Ir’, ‘woocommerce’ );
break;
case ‘grouped’:
return __( ‘Detalles’, ‘woocommerce’ );
break;
case ‘simple’:
return __( ‘Comprar’, ‘woocommerce’ );
break;
case ‘variable’:
return __( ‘Opciones’, ‘woocommerce’ );
break;
default:
return __( ‘Detalles’, ‘woocommerce’ );
}

}

add_filter( ‘woocommerce_product_add_to_cart_text’ , ‘custom_woocommerce_product_add_to_cart_text’ );

Te ha gustado este artículo? Agradeceríamos pulsaras en las 5 estrellas o dejaras tu opinión.