Apuntes varios de diseño web

Apuntes varios de diseño web

Son cosas más que todo técnicas que seguramente le ayudarán a algún diseñador a salir de un aprieto, lo voy a usar de ahora en adelante

.

Mi web se mueve en celulares cómo solucionarlo

Busca en el head de tu tema y entre las etiquetas head añade este código:

<meta name=”viewport” content=”width=device-width, initial-scale=1″> Esto hará que la web se adapte a la pantalla y no se le pueda hacer zoom.

Medidas para hacer una web responsive – BREAKS

Mobile : Under 768

Tablet pequeña : 769 – 991

Tablet larga : 992 – 1199

Desktop : 1200 +

Las etiquetas básicas en media queries son:

– Ejemplo uno : @media (max-width: 600px)

– Ejemplo dos : @media only screen and (max-width: 600px)

– Ejemplo tres de intervalos: @media only screen and (max-width: 340px) and (min-width: 5px)

@media all and (max-width: 800px)

Colocar código en html y que se muestre en forma de texto

O en palabras más técnicas “cómo convertir texto html en texto plano” usa esta herramienta:

Acá el link

Robots no rastreen este enlace

Esta es muy sencilla pero se olvida con facilidad: Para que los enlaces no sean seguidos por los buscadores usa rel=”nofollow”

Tener información del php de tu sitio

La mejor forma es crear un archivo con el nombre info.php e incluir esta información: Luego ubicarlo en la raíz de la página web acceder a http://dominio.tl/phpinfo.php y listo tendrás esta valiosa información (recuerda borrar el archivo) que servirá para pedirle a tu hosting que haga mejoras como pueden ser :

upload_max_filesize = 1000M
post_max_size = 2000M
memory_limit = 3000M
file_uploads = On

Hacer que un video de Youtube sea responsive

Crea un contenedor div que encierre el iframe y  dale estas clases, con esto funcionará:

.videoresponsive { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; }
.videoresponsive iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Comentarios en CSS

Comentarios en CSS: /* y termina con */

Plugin para sitemap de imágenes

-Advanced Image Sitemap.

Calendario gratuito para wordpress

-https://webnus.net/modern-events-calendar/

Botón flotante para comunicarse gratis y sin plugins

-https://whatshelp.io/widget

Links útiles diseño SEO y demás

Seo Google Rankig factors : https://backlinko.com/google-ranking-factors

Protocolo para crear bien SITEMAPS https://www.sitemaps.org/protocol.html

Creador de sitemap aparentemente limpio http://www.web-site-map.com/

Desactivar las actualizaciones automáticas de WordPress:

Utiliza estos códigos dentro de tu archivo wp-config.php, para:

  • Desactivar las actualizaciones automáticas de WordPress: define( 'WP_AUTO_UPDATE_CORE', false );
  • Desactivar únicamente las versiones «medianas» (4.X), pero sí incluir las menores (4.9.X), el siguiente: define( 'WP_AUTO_UPDATE_CORE', 'minor' );
  • Desactivar TODAS las actualizaciones automáticas (temas, plugins, traducciones o WordPress), el siguiente: define( 'AUTOMATIC_UPDATER_DISABLED', true );

Transferir una web creada en WordPress a otro hosting

https://bit.ly/2Ps23NL

  1. Hacer una copia de todos los archivos de public-html
  2. Exportar la base de datos desde phpmyadmin
  3. Subir los archivos de tu web al otro hosting.
  4. Crear una base de datos en tu nuevo hosting.
  5. Importar la base de datos
  6. Configurar el archivo wp-config.php
  7. Cambiar DNS

Referencias de otras páginas

Selectores CSS: https://uniwebsidad.com/libros/css/capitulo-2/selectores-basicos

Plugins para recordar

– Chat con aplicación : https://www.tidio.com/ Plugin que permite crear un sistema de reservas basado en citas, días y horas específicas, ideal para profesionales médicos y quizás restaurantes. https://preview.codecanyon.net/item/booked-appointments-appointment-booking-for-wordpress/full_screen_preview/9466968?_ga=2.212842388.1432167823.1583981370-798710076.1583288988

– Code Snippets: Una forma fácil, limpia y sencilla para añadir fragmentos de código a tu sitio. ¡No tendrás que volver a editar el archivo «functions.php»!

Cómo invertir el orden de las columnas en responsive design y WpBakery Builder

Con estas clases:
.invertir {flex-wrap: wrap-reverse !important;}

Fragmento de código Javascript para ocultar precio de categorías seleccionadas en Woocommerce

add_filter( ‘woocommerce_get_price_html’, function( $price, $product ) {
if ( is_admin() ) return $price;

// Hide for these category slugs / IDs
$hide_for_categories = array( ‘general’ );

// Don’t show price when its in one of the categories
if ( has_term( $hide_for_categories, ‘product_cat’, $product->get_id() ) ) {
return ”;
}

return $price; // Return original price
}, 10, 2 );

add_filter( ‘woocommerce_cart_item_price’, ‘__return_false’ );
add_filter( ‘woocommerce_cart_item_subtotal’, ‘__return_false’ );

Código CSS para diversos fines:

Hacer que un texto se cubra con una textura perteneciente a una imagen:
El video: https://www.youtube.com/watch?v=3aXTiMa6u9A

selector .elementor-heading-title { background-image: url(); background-position: center center; background-size: cover; background-clip: text; -webkit-background-clip: text; }

 

Cosas originales con Elementor

Crear columnas responsive que se superpongan: https://www.youtube.com/watch?v=9hKnT_ahRxg

Compartir:

Leave a Reply

Your email address will not be published.