Cómo eliminar URLs de forma masiva en Google Search Console

Si te encuentras con la necesidad de eliminar varias URLs de tu sitio web en Google Search Console, no te preocupes, ¡puedes hacerlo de forma sencilla y masiva! En este artículo, te mostraremos algunos trucos y herramientas para lograrlo.

¿Quieres más ventas o una web profesional?

Solo tienes que echar un vistazo a los estupendos servicios que te ofrece fullfreelancer.

Más ventas Una web profesional

¿Por qué es importante eliminar URLs de forma masiva en Google Search Console?

Eliminar URLs no deseadas o innecesarias es una tarea crucial para la optimización del SEO de su sitio web. Google Search Console es una herramienta esencial que permite a los propietarios de sitios web monitorear el rendimiento de su sitio en los resultados de búsqueda de Google. Una URL que no se elimina puede afectar negativamente la visibilidad de su sitio web y la experiencia del usuario. Es por eso que es esencial eliminar las URLS innecesarias para mejorar la optimización de su sitio web y brindar una mejor experiencia al usuario.

Eliminar varias URL a la vez en Google Search Console puede ahorrar tiempo y esfuerzo, y es especialmente útil si su sitio web tiene muchas páginas o si ha hecho cambios importantes en la estructura de su sitio. Hay varias herramientas y trucos que se pueden utilizar para eliminar URLS de forma masiva en Google Search Console, lo que puede ayudar a evitar errores y simplificar el proceso.

Trucos para eliminar URLs de forma masiva en Search console

⭐ Preparar el listado de las Urls a eliminar.

				
					Url1.com
Url2.com
Url3.com
Url4.com
				
			

⭐ Acceder a Google Search Console, opción para retirada de urls.

⭐ Personalizar el script con las cantidades de urls.

				
					const urls = [
	 //Aquí pegamos las url que se eliminaran
    'Url1.com',
    'Url2.com',
    'Url3.com',
    'Url4.com'
];

async function deleteUrls(urls) {
    const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
    const click = (selector) => document.querySelector(selector).click();

    for (const url of urls) {
        click('.ZGldwb');
        await sleep(2000);
        document.querySelector('.VfPpkd-fmcmS-wGMbrd').value = url;
        document.querySelector('.VfPpkd-fmcmS-wGMbrd').dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
        await sleep(2000);
        click('.tWntE');
        await sleep(2000);
        click('.sZloWc[data-id="EBS5u"]');
        await sleep(2000);
    }
}
deleteUrls(urls);
				
			

⭐ Pegar el script  en inspeccionar >> consola y disfrutar.

  1. Abre el navegador web que prefieras.
  2. Visita la página web que deseas inspeccionar.
  3. Haz clic derecho en cualquier parte de la página web.
  4. Selecciona “Inspeccionar” o “Inspect” en el menú contextual que se despliega. Esto abrirá el Inspector de Google en el lado derecho o inferior de la ventana del navegador (dependiendo de tu configuración).
  5. Si lo prefieres, también puedes abrir el Inspector de Google usando el atajo de teclado Ctrl+Shift+I en Windows y Linux, o Command+Option+I en Mac.

6. Por último damos enter.

Consejos y precauciones que debes tener en cuenta al eliminar URLS de forma masiva en Google Search Console

➤ Verifique la importancia de las URL antes de eliminarlas: Antes de eliminar varias URL de su sitio web, asegúrese de verificar la importancia de cada URL y su relevancia para su sitio web. Si hay páginas importantes o de alto tráfico, asegúrese de no eliminarlas accidentalmente.

➤ Verifique que no haya errores en las URL que se van a eliminar: Asegúrese de que las URL que desea eliminar no contengan errores ni errores tipográficos. Si elimina una URL incorrecta, puede afectar negativamente el rendimiento de su sitio web en los resultados de búsqueda de Google.

➤ Use una herramienta de análisis: Antes de eliminar varias URL a la vez, utilice una herramienta de análisis para identificar las URL que están afectando negativamente su rendimiento en los resultados de búsqueda de Google. Esto le permitirá enfocar sus esfuerzos en las URL que realmente necesitan ser eliminadas.

➤ Realice una copia de seguridad de su sitio web: Antes de eliminar varias URL de su sitio web, asegúrese de realizar una copia de seguridad completa de su sitio web. Esto le permitirá restaurar su sitio web en caso de cualquier problema o error durante el proceso de eliminación.

➤ Verifique su archivo robots.txt: Verifique su archivo robots.txt para asegurarse de que las URL que desea eliminar no estén bloqueadas en el archivo. Si una URL está bloqueada en el archivo robots.txt, no se eliminará de los resultados de búsqueda de Google.

Siguiendo estos consejos y precauciones, podrá eliminar URLs de forma masiva en Google Search Console de manera segura y efectiva, mejorando la optimización del SEO de su sitio web y brindando una mejor experiencia al usuario.

¿Quieres aumentar tus ventas y hacer crecer tu negocio en línea? El posicionamiento SEO es clave. ¡Contáctanos para empezar a trabajar juntos!

Leonela de lima

Leonela de Lima

Aficionada del marketing digital, con habilidad en diseños de páginas web, creación de contenido, copywrite y SEO. Forma parte del equipo FULLFREELANCER. En sus tiempos libres, le agrada desarrollar proyectos o leer un libro.

¿Te gusto este artículo? Te invito a compartirlo :)

Cómo redireccionar un dominio sin www a con www en WordPress en pocos minutos

Si tienes un sitio web en WordPress y te gustaría que tu dominio se muestre con el prefijo “www”, estás en el lugar correcto. Redirigir tu sitio web de un dominio sin www a uno con www es una tarea fácil que puedes realizar en unos pocos minutos.

Para comenzar, debes iniciar sesión en tu panel de control de WordPress y buscar la sección de ajustes. Luego, hacemos clic en “Ajustes generales” y buscamos el campo “Dirección de WordPress (URL)” y “Dirección del sitio (URL)”.  En estos campos, asegúrate de que la dirección de tu sitio web incluya el prefijo “www” (por ejemplo, “www.tusitio.com”).

Si la dirección de tu sitio web no incluye el prefijo “www”, simplemente agrega “www” al principio de la dirección en ambos campos y haz clic en “Guardar cambios”. Si tu sitio web ya está en línea, es importante que tengas en cuenta que la redirección puede tomar hasta 24 horas para que se propague en todo el mundo.

Si deseas acelerar este proceso, también puedes configurar una redirección desde tu servidor web para redirigir automáticamente a los visitantes a la versión con www de tu sitio web. Para hacer esto, debes agregar algunas líneas de código al archivo .htaccess de tu sitio web. Si no te sientes cómodo editando archivos de este tipo, siempre puedes pedir ayuda a un profesional o proveedor de alojamiento web.

				
					RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]
				
			

¿Ahora bien, como redireccionamos de www a sin www en WordPress?

Realizamos el mismo paso anterior, simplemente le quitamos o eliminamos www.

También es importante tener en cuenta que se puede realizar de igual forma por .htaccess, agregamos el siguiente código en el archivo .htaccess

				
					RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.tudominio\.com$ [NC]
RewriteRule ^(.*)$ http://tudominio.com/$1 [R=301,L]
				
			

Como ultima instancia y solución lo podemos realizar por el functions.php de WordPress 

  1. Accede al panel de administración de WordPress.

  2. Haz clic en “Apariencia” y luego en “Editor” en el menú lateral.

  3. Selecciona “functions.php” en el menú de la derecha.

  4. Agrega el siguiente código al final del archivo:

				
					// Redireccionar de www a sin www
if (substr($_SERVER['HTTP_HOST'], 0, 4) === 'www.') {
    $newURL = 'http://' . substr($_SERVER['HTTP_HOST'], 4) . $_SERVER['REQUEST_URI'];
    header('Location: ' . $newURL, true, 301);
    exit();
}
				
			
  1. Guarda los cambios.

Una vez que hayas guardado los cambios, tu sitio web se redirigirá automáticamente de “www” a sin “www”. Es importante tener en cuenta que puede llevar algún tiempo para que los motores de búsqueda actualicen sus índices con la nueva URL, así que es posible que tu sitio web no aparezca inmediatamente en los resultados de búsqueda.

¿Quieres más ventas o una web profesional?

Solo tienes que echar un vistazo a los estupendos servicios que te ofrece fullfreelancer.

Más ventas Una web profesional

¿Por qué es importante las redirecciones de dominios para el seo con y sin www?

En primer lugar, tener una redirección de dominio de “www” a sin “www” o viceversa te ayuda a consolidar la autoridad de tu sitio web en una sola URL. Si tu sitio web tiene contenido en ambas versiones de la URL (con y sin “www”), esto podría resultar en la fragmentación de la autoridad del sitio, lo que significa que los enlaces entrantes y la relevancia de las páginas se dividen entre ambas versiones. Al tener una redirección adecuada en su lugar, puedes asegurarte de que todos los enlaces entrantes apunten a una sola URL, lo que ayuda a aumentar la autoridad de esa única URL y, por lo tanto, mejora la clasificación en los motores de búsqueda.

Además, una redirección de dominio puede ayudar a prevenir el contenido duplicado. Si no tienes una redirección de dominio y tu sitio web es accesible tanto con “www” como sin “www”, los motores de búsqueda pueden considerar esto como dos versiones de la misma página web, lo que resulta en contenido duplicado. Esto puede tener un impacto negativo en la clasificación de tu sitio web, ya que los motores de búsqueda penalizan el contenido duplicado.

Tener una redirección de dominio también puede mejorar la experiencia del usuario. Al utilizar una redirección adecuada, los visitantes que ingresen a la versión incorrecta de la URL serán automáticamente redirigidos a la versión correcta, lo que ayuda a evitar confusiones y errores en la navegación del sitio. Esto puede ayudar a reducir la tasa de rebote y mejorar la experiencia del usuario en general, lo que a su vez puede mejorar la clasificación en los motores de búsqueda.

En Fullfreelancer, entendemos lo importante que es tener una presencia en línea efectiva y profesional. Si necesitas ayuda con la configuración de redirecciones en tu sitio web de WordPress o cualquier otro aspecto de tu presencia en línea, no dudes en contactarnos. Estaremos encantados de ayudarte a hacer crecer tu negocio en línea.

Leonela de lima

Leonela de Lima

Aficionada del marketing digital, con habilidad en diseños de páginas web, creación de contenido, copywrite y SEO. Forma parte del equipo FULLFREELANCER. En sus tiempos libres, le agrada desarrollar proyectos o leer un libro.

¿Te gusto este artículo? Te invito a compartirlo :)

Como insertar migas de pan en wordpress

¿Estás buscando mejorar la experiencia de usuario en tu sitio web de WordPress? Las migas de pan son una herramienta útil para mejorar la navegación y hacer que tus visitantes encuentren fácilmente lo que están buscando.

Las migas de pan son un elemento de navegación que muestra la ruta que el usuario ha seguido para llegar a la página actual. Estas migas de pan se presentan en forma de un camino que indica la estructura jerárquica del sitio web. Por ejemplo, si un usuario está navegando en la página “Blog” de tu sitio web, las migas de pan podrían mostrar algo como “Inicio > Blog”.

Además de mejorar la navegación de tu sitio web, las migas de pan también pueden ayudar en la optimización para motores de búsqueda. Al mostrar la estructura jerárquica de tu sitio web, las migas de pan pueden ayudar a los motores de búsqueda a entender mejor la relación entre tus páginas y a indexarlas de manera más efectiva.

Para agregar migas de pan a tu sitio web de WordPress, debes editar tu tema y agregar el código necesario. A continuación te mostraremos un código muy eficaz para que parezcan tus migas de pan en tu sitio web WordPress sin necesidad de plugin.

Paso #1: Solo agregarás este código en tu archivo functions.php de tu tema.
				
					<?php
function wordpress_breadcrumbs() {
$delimiter = '&raquo;';
$name = 'Home'; //text for the 'Home' link
$currentBefore = '<span class="current">';
$currentAfter = '</span>';
if ( !is_home() && !is_front_page() || is_paged() ) {
echo '<div id="crumbs">';
global $post;
$home = get_bloginfo('url');
echo '<a href="' . $home . '">' . $name . '</a> ' . $delimiter . ' ';
if ( is_category() ) {
global $wp_query;
$cat_obj = $wp_query->get_queried_object();
$thisCat = $cat_obj->term_id;
$thisCat = get_category($thisCat);
$parentCat = get_category($thisCat->parent);
if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '));
echo $currentBefore . 'Archive by category &#39;';
single_cat_title();
echo '&#39;' . $currentAfter;
} elseif ( is_day() ) {
echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
echo '<a href="' . get_month_link(get_the_time('Y'),get_the_time('m')) . '">' . get_the_time('F') . '</a> ' . $delimiter . ' ';
echo $currentBefore . get_the_time('d') . $currentAfter;
} elseif ( is_month() ) {
echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
echo $currentBefore . get_the_time('F') . $currentAfter;
} elseif ( is_year() ) {
echo $currentBefore . get_the_time('Y') . $currentAfter;
} elseif ( is_single() ) {
$cat = get_the_category(); $cat = $cat[0];
echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
echo $currentBefore;
the_title();
echo $currentAfter;
} elseif ( is_page() && !$post->post_parent ) {
echo $currentBefore;
the_title();
echo $currentAfter;
} elseif ( is_page() && $post->post_parent ) {
$parent_id = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . $delimiter . ' ';
echo $currentBefore;
the_title();
echo $currentAfter;
} elseif ( is_search() ) {
echo $currentBefore . 'Search results for &#39;' . get_search_query() . '&#39;' . $currentAfter;
} elseif ( is_tag() ) {
echo $currentBefore . 'Posts tagged &#39;';
single_tag_title();
echo '&#39;' . $currentAfter;
} elseif ( is_author() ) {
global $author;
$userdata = get_userdata($author);
echo $currentBefore . 'Articles posted by ' . $userdata->display_name . $currentAfter;
} elseif ( is_404() ) {
echo $currentBefore . 'Error 404' . $currentAfter;
}
if ( get_query_var('paged') ) {
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' (';
echo __('Page') . ' ' . get_query_var('paged');
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
}
echo '</div>';
}
}
?>
				
			

Paso #2: Agregarás este código en footer.php o header.php de tu tema. También puedes agregarlo donde quieres que se imprima tus migas de pan, es decir, en cualquier archivo.

Este código funciona sin necesidad de plugin.

				
					<?php if (function_exists('wordpress_breadcrumbs')) wordpress_breadcrumbs(); ?>
				
			

Una vez agregado y guardado quedaría totalmente funcional.

¿Para qué usar las migas de pan en mi sitio web?

Las migas de pan son una herramienta de navegación útil que se utiliza para mostrar a los usuarios la ubicación actual de una página en relación con la estructura general del sitio web. Las migas de pan son una serie de enlaces que se colocan en la parte superior o en la parte inferior de una página web y que indican el lugar donde el usuario ha seguido para llegar a la página actual.

El nombre de “migas de pan” proviene del cuento de Hansel y Gretel, donde los niños usan migas de pan para marcar el camino de regreso a casa. En un sitio web, las migas de pan sirven para ayudar a los usuarios a orientarse y encontrar fácilmente la información que buscan. Esto es especialmente útil en sitios web con una estructura jerárquica o compleja.

Además de ser una herramienta de navegación útil para los usuarios, las migas de pan también tienen beneficios de SEO. Al mostrar la estructura jerárquica del sitio web, las migas de pan pueden ayudar a los motores de búsqueda a entender mejor la relación entre las páginas y a indexarlas de manera más efectiva.

¿Quieres más ventas o una web profesional?

Solo tienes que echar un vistazo a los estupendos servicios que te ofrece fullfreelancer.

Más ventas Una web profesional

Mejores plugins para instalar migas de pan en WordPress

Yoast SEO: Este plugin de SEO incluye la opción de activar las migas de pan para tu sitio web de WordPress. El plugin también te permite personalizar las migas de pan para que se adapten mejor a tu diseño y a la estructura de tu sitio web.

✓ Breadcrumb NavXT: Este plugin es específico para agregar migas de pan en WordPress y te permite personalizar las migas de pan de acuerdo con la estructura de tu sitio web. El plugin también es compatible con la mayoría de los temas de WordPress.

✓ WPSEO Breadcrumbs: Este plugin es otro complemento popular para agregar migas de pan a tu sitio web de WordPress. Ofrece varias opciones de personalización para las migas de pan, como la capacidad de establecer un prefijo o un sufijo para las migas de pan.

✓ NavXT Breadcrumbs: Este plugin te permite agregar migas de pan a tu sitio web y personalizar su apariencia y posición en la página. 

En resumen, las migas de pan son una herramienta útil para mejorar la navegación y la optimización de motores de búsqueda en tu sitio web de WordPress. Asegúrate de agregar migas de pan en tu sitio web para mejorar la experiencia de usuario y ayudar a tus visitantes a encontrar lo que están buscando de manera más rápida y sencilla.

¿Necesitas ayuda para solucionar los problemas de tu sitio web? ¡No busques más! En FullFreelance, contamos con un equipo de expertos dispuestos a ayudarte a resolver cualquier problema que tengas en tu página web. ¡Contáctanos ahora y lleva tu sitio web al siguiente nivel!

Leonela de lima

Leonela de Lima

Aficionada del marketing digital, con habilidad en diseños de páginas web, creación de contenido, copywrite y SEO. Forma parte del equipo FULLFREELANCER. En sus tiempos libres, le agrada desarrollar proyectos o leer un libro.

¿Te gusto este artículo? Te invito a compartirlo :)

Cómo desactivar la carga diferida lazy load en imágenes WordPress

¿Te has topado con el problema de las imágenes que tardan en cargar debido al uso de lazy load? ¡No te preocupes! Tenemos la solución para ti. En este post te mostramos cómo puedes desactivar esta función en tu sitio web y disfrutar de imágenes que cargan al instante.

El lazy load es una técnica de carga diferida que se utiliza para mejorar el rendimiento de las páginas web. Sin embargo, a veces puede retrasar la carga de las imágenes y causar problemas de visualización en el sitio. Si esto te ha sucedido, sigue leyendo.

¿Quieres más ventas o una web profesional?

Solo tienes que echar un vistazo a los estupendos servicios que te ofrece fullfreelancer.

Más ventas Una web profesional

1 – Abrimos el archivo de WordPress llamado functions.php de tu tema o si lo prefieres, también puedes agregar el código en un plugin personalizado.

2 – Copia y pega el siguiente código en el archivo functions.php

				
					function remove_image_lazy_loading( $attr, $attachment, $size ) {
    if ( isset( $attr['loading'] ) && 'lazy' === $attr['loading'] ) {
        unset( $attr['loading'] );
    }
    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'remove_image_lazy_loading', 10, 3 );
				
			

4 – Guarda el archivo functions.php y ciérralo.

5 – Abre tu sitio web WordPress y verifica que el atributo loading=”lazy” se haya eliminado de las imágenes. Si la eliminación del atributo loading=”lazy” no se refleja inmediatamente, puedes intentar borrar la caché del sitio web o utilizar una herramienta de depuración para verificar que el código se haya agregado correctamente.

¡Listo! Ahora deberías haber eliminado el atributo loading=”lazy” selectivamente en WordPress. 

¿Buscas ayuda profesional para optimizar tu sitio WordPress? ¡Contáctanos en FULLFREELANCER!

¿Te gusto este artículo? Te invito a compartirlo :)

Como redireccionar un formulario de contact form 7

2 técnicas prácticas para redireccionar Contact Form 7 de manera eficiente

¿Estás agotado de que los usuarios dejen su información en tu formulario de Contact Form 7 y no saber si realmente han llegado a la página de agradecimiento? Si es así, no te alarmes, ¡tenemos la solución para ti! Con esta grandiosa guía, aprenderás cómo redireccionar Contact Form 7 al enviar datos del formulario en WordPress y asegurarte de que tus usuarios sean llevados a la página correcta después de enviar su información.

Para lograr que redireccione a las páginas de gracias, te enseñaremos a utilizar algunas funciones de WordPress y a escribir un código PHP que te permitirá redireccionar a tus usuarios a la URL de destino.

> Vamos al archivo functions.php de WordPress y añadimos el siguiente código.

				
					
add_action( 'wp_footer', 'mycustom_wp_footer' );
 
function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( 'Pegar id de formulario' == event.detail.contactFormId ) { 
location = '/paginas-destino/';
} else if ( 'Pegar id de formulario' == event.detail.contactFormId ) {
location = '/paginas-destino/'; 
} else { 
location = '/paginas-destino/';
}
}, false );
</script>
<?php
}
				
			

¿Quieres más ventas o una web profesional?

Solo tienes que echar un vistazo a los estupendos servicios que te ofrece fullfreelancer.

Más ventas Una web profesional

¿No funciono el redireccionamiento del formulario en Contact form 7 ?

> Agrega este código a cualquier plugin que incluya código JS, o copia y pega el siguiente código en el archivo “footer.php” de tu sitio de WordPress.

				
					<script>
jQuery (document).ready(function(){
jQuery("form").submit(function(){
    window.location.href = 'https://www.url-destino.com/gracias-por-contactar/'
});
});
</script>
				
			

Mejora la experiencia de tus usuarios y aumenta las conversiones del sitio web con esta sencilla configuración de formularios. ¡No esperes más para optimizar tu sitio web con Contact Form 7 y mejorar la experiencia de tus usuarios!

 

¿Estás cansado de lidiar con problemas en tu sitio web?

Permítenos ofrecerte la solución que necesitas.

Información

¿Te gusto este artículo? Te invito a compartirlo :)

Como hacer responsive una página web con CSS

Web responsive

Mucho antes de la llegada de los dispositivos móviles, las paginas o sitios web eran creadas para ser vistas a través de un ordenador, y por lo tanto su diseño era pensado en el mismo, por lo cual, no era de extrañar que su contenido fuera más rígido y las medidas web fueran fijas. Sin embargo, con el pasar del tiempo, a medida que la demanda de estos dispositivos fue aumentando y con ello el auge de las paginas online, se hizo necesario hacer un cambio en esto, y hacer paginas responsives.

Antes que nada, si eres nuevo en esto, seguramente te estarás preguntando a que hacen referencia estos términos. Si este es tu caso, permítenos contarte de que trata todo esto, y para que sea más fácil tu compresión y no quede ninguna duda, primero te explicaremos que es una página responsive, y luego que es CSS, así que vamos por partes…

¿Qué es una página web responsive?

Primero que todo, “responsive” es una palabra que se utiliza para referirnos a “responsive design” que en español significa “diseño web adaptable”, lo anterior en palabras sencillas quiere decir que tomaremos una página web y le haremos ciertas modificaciones para que esta sea más accesible a los usuarios y pueda adaptarse a cualquier clase de dispositivo, tales como ordenadores, tablets, iPads, smartphones y todos los que se te ocurran.

Por otro lado, CSS son las siglas que hacen referencia a “Cascading Style Sheets”, lo que en español se traduce como “hojas de estilo en cascada” y básicamente es un lenguaje de programación que se utiliza frecuentemente en la estructura y composición de los sitios web.

Entonces, básicamente, un sitio web responsive es aquel que sin importar cuál sea el dispositivo que estés utilizando, este sitio tiene la capacidad de adaptar de forma automática el contenido que posee, a los distintos tamaños y medidas de los demás dispositivos, logrando ser visualizado por el usuario de forma correcta en todo tipo de pantallas.

Si ya cuentas con un sitio online, y lo que quieres es saber si este tiene un CSS responsive, puedes hacer uso de emuladores online en el buscador de Google y verificarlo. Sin embargo, al final del post te dejamos una lista de opciones para comprobar web responsives.

¿Cómo se configura correctamente un responsive?

Ahora que ya sabes el significado de cada término, es hora de avanzar al siguiente nivel y al tema por el cual llegaste hasta aquí: ¿Cómo convertir una página web en responsive? Para esto existen una serie de técnicas que te pueden ayudar a lograr este objetivo, y todo haciendo uso de CSS, así que si ya tienes conocimientos básicos en este lenguaje, realizar estos trucos será muy sencillo para ti.

¿Quieres más ventas o una web profesional?

Solo tienes que echar un vistazo a los estupendos servicios que te ofrece fullfreelancer.

Más ventas Una web profesional

➤ 1. Viewport en la etiqueta de Metatag:

Cuando hablamos de “viewport” nos referimos a la región grafica de un sitio web que es visualizada justo en el momento en que un usuario entra a dicha página, aquí se refleja el contenido del documento HTML. En general, hay varios sistemas, pero el más recomendable por su practicidad es el @media. Para este caso, lo que hacemos es incluir todas las reglas o condiciones que necesitemos en un solo documento CSS, cuyos estilos se incluirán dentro de llaves.

Si ves la etiqueta del sistema Metatag de @media, veras que luce de la siguiente forma:

viewpor

En la parte de  content = ” ”  podemos agregar una infinidad de valores separados por comas (,) entre sí, sin embargo, dentro de todas esas posibilidades existen ciertos valores que son frecuentemente utilizados.

En esta sección te dejamos un resumen de los códigos para hacer responsive una página web y que te ayudaran para lo que te explicaremos a continuación:

Cómo hacer responsive

Con la tabla de códigos anteriores, podrás solucionar el responsive de una página web, veamos cómo funciona…

Por ejemplo, supongamos que ya tenemos nuestra página y la hoja de CSS y queremos establecer una regla o condición con base al tamaño de la pantalla. Podemos decir, que siempre que nuestra pantalla tenga un tamaño menor a 320px de ancho, el navegador realice determinados estilos CSS prediseñados por nosotros con anterioridad, así que tendríamos lo siguiente:

Media query

Este proceso lo podemos repetir jugando con cada uno de los códigos de la tabla anterior, y así poder solucionar responsive de una página web con CSS.

➤ 2. Uso de operadores para CSS Media Queries

Por otro lado, los Media Queries, (que en español se traducen como “consultas de medios” ) nos ofrecen algunos operadores lógicos que podemos utilizar combinando unos con otros para crear un Media Query más avanzado de acuerdo a las medidas de una página web que necesitemos conseguir o cualquier otra cosa que sea necesaria.

• And

Usaremos este operador para establecer varias condiciones en una sola. En el siguiente ejemplo definimos que nuestra pantalla solo se efectuará si tiene una medida de ancho igual o mayor de 560 pixeles, y si la pantalla esta en orientación horizontal.

And

• Not

Emplearemos este vector cuando deseemos negar una condición, es decir, que solo si esa situación no se cumple es que se harán efectivas las Media Queries. En el caso de abajo solo se efectuaran los estilos CSS siempre que el dispositivo no sea monocromo.

Not

• Or

Se usa para establecer múltiples condiciones separadas a través de comas, donde sí al menos una de ellas se cumple se hará efectivo la Media Query. Por ejemplo, en el código de abajo vemos un Media Query útil para pantallas de 700px y dispositivos handheld que se encuentren en posición horizontal.

Or

• Only

se utiliza para hacer efectiva la orden solo si se cumplen determinadas condiciones. En el ejemplo inferior se puede ver que en nuestra pantalla únicamente si el ancho de la pantalla es menor a 800 px, el color del fondo es amarillo.

Only

¿Cómo usar las media Queries para tipos de pantallas?

A través de los Media Queries se puede hacer modificaciones en tu app o en la ventana de tu contenido, para transformarlo en un sitio adaptable que encaje entre las medidas específicas de cualquier medio tecnológico. Para convertir tu web para varios responsives, solo debes hacer uso de los siguientes códigos.

  • Dispositivos móviles en general (landscapes y portrait): Aplica para la mayoría de teléfonos celulares, como smartphones, que este en posición vertical u horizontal. La resolución para este caso es de 320 px a 479 px
landscapes y portrait
  • Ipads (portrait y landscape): Para tablets y Ipads en posición horizontal y vertical, tenemos el siguiente código:
landscape
  • Ipads (landscape): Para Ipads y tablets con ubicación horizontal, la resolución se ubica de 768 px a 1024 px.
landscape
  • Ipads (portrait): En este caso, la resolución sigue siendo la misma que la anterior, solo cambia la orientación.
portrait
  • Computador de mesa o portátil:
Computador de mesa o portátil:
  • Pantallas de gran tamaño: en dispositivos grandes, la resolución puede estar entre los 1824 pixeles, por lo que se realice un código aparte
Pantallas de gran tamaño
  • IPhone 4: si deseas aptar una página web a móvil IPhone, el código para eso es el siguiente:
aptar una página web

¿Cuentas con problemas en tu sitio web con el responsive?

Sencillo fullfreelancer lo adapta a todo tipo de dispositivos.

Solucionar mi web

¿Cómo podemos ver las pantallas de los responsives?

Actualmente, estamos en plena era de la tecnología, y tenemos a nuestra disposición un sinfín de herramientas que podemos utilizar a nuestro favor, en este caso para verificar que cumplen con un diseño adaptable y solucionar errores de responsive en la web. Para que logres eso, te presentamos las siguientes opciones:

➤ 1. Extensiones de Google

Puedes hacer uso de las extensiones de Google Chrome a tu favor para simular las distintas medidas de los dispositivos y ver si adapta o no, y lo mejor es que es bastante fácil.  

  • Responsive Viewer: A través de esta extensión puedes observar distintas visualizaciones para lograr que tu página online sea responsive. Únicamente debes instalarla y probar que tal.
Responsive Viewer

URL ➞ https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb

  • Mobile View Switcher: Esta es otras herramientas para desarrolladores que funciona como complemento y te permite mirar tu contenido desde un dispositivo móvil, y lo mejor es que puedes modificar la vista desde las opciones.
Mobile View Switcher

URL ➞ https://chrome.google.com/webstore/detail/mobile-view-switcher/bmhfelbhbkeoldaiphchjibggnoodpcj

➤ 2. Inspector Google Chrome:

Para poner a prueba tu sitio web con esta técnica, solo basta con tener descargado el navegador de Google Chrome. Una vez lo tengas instalado, lo que harás es presionar el clic derecho sobre tu página web, o sobre cualquier otra para la cual quieras saber si cumple con un diseño adaptable. Luego de esto, se abrirá un cuadro aparte donde deberás dar clic en el recuadro que dice “inspeccionar elemento”, y seguido de esto veras un pequeño icono de un teléfono móvil que también deberás presionar. A partir de aquí podrás ver una pantalla, y decidir desde que dispositivo deseas visualizar dicha página, y de esa forma tan sencilla puedes comprobar si cumple o no con tus expectativas de adaptación.

inspector de google
Leonela de lima

Leonela de Lima

Aficionada del marketing digital, con habilidad en diseños de páginas web, creación de contenido, copywrite y SEO. Forma parte del equipo FULLFREELANCER. En sus tiempos libres, le agrada desarrollar proyectos o leer un libro.

¿Te gusto este artículo? Te invito a compartirlo :)

Cómo crear un botón simple con HTML y CSS para mi web 

En este artículo vamos a aprender a crear botones muy simples en nuestra página web WordPress o cualquier tipo de CMS. 

No usaremos módulos ni plugin, lo haremos con HTML Y CSS de forma muy sencilla, así evitamos renderizar la web con tanto peso de plugins instalados.

 

≫ 1 - Como primer paso creamos un archivo HTML con el siguiente código básico.

<!DOCTYPE html>

<html>

<head>

<title>Mi página web</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<button class="mi-boton">Haz clic aquí</button>

</body>

</html>

¿Quieres más ventas o una web profesional?

Solo tienes que echar un vistazo a los estupendos servicios que te ofrece fullfreelancer.

Más ventas Una web profesional
Este código que hemos creado es una etiqueta botón de HTML donde le hemos asignado una clase llamada ‘mi-boton’ así podemos darle un poco de estilos CSS a nuestro botón.

≫ 2 - Como siguiente paso creamos un archivo CSS con el siguiente código.

				
					.mi-boton {
	background-color: #4CAF50; /* Fondo verde */
	border: none; /* Sin borde */
	color: white; /* Texto blanco */
	padding: 10px 20px; /* Espaciado del contenido */
	text-align: center; /* Centrar el texto */
	text-decoration: none; /* Sin subrayado */
	display: inline-block; /* Botón en línea */
	font-size: 16px; /* Tamaño de fuente */
	margin: 4px 2px; /* Margen superior e inferior */
	cursor: pointer; /* Cambio de cursor al pasar por encima */
	border-radius: 10px; /* Borde redondeado */
}
				
			

¡Optimiza tu sitio web al 100% y mejora tu posicionamiento en los resultados de búsqueda! Descubre cómo con nuestra guía gratuita.

Información

En este código, hemos definido los estilos para la clase mi-boton. Hemos establecido un fondo verde, sin borde, con texto blanco y un espaciado del contenido de 10px en la parte superior e inferior y 20px en los lados. También hemos centrado el texto, eliminado cualquier subrayado, establecido el botón en línea y el tamaño de fuente en 16px. Hemos agregado un margen de 4px en la parte superior e inferior y hemos establecido el cursor en pointer (manita) al pasar por encima. Finalmente, hemos redondeado los bordes con border-radius.

Con estos pasos, habrás creado un botón simple con HTML y CSS para tu página web. Puedes personalizarlo según la forma que sea tus necesidades.

Leonela de lima

Leonela de Lima

Aficionada del marketing digital, con habilidad en diseños de páginas web, creación de contenido, copywrite y SEO. Forma parte del equipo FULLFREELANCER. En sus tiempos libres, le agrada desarrollar proyectos o leer un libro.

¿Te gusto este artículo? Te invito a compartirlo :)