{"id":367141,"date":"2023-02-18T11:07:00","date_gmt":"2023-02-18T08:07:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367141"},"modified":"2023-05-08T13:51:13","modified_gmt":"2023-05-08T10:51:13","slug":"como-construir-un-sitio-web-de-wordpress-elementor-receptivo","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-construir-un-sitio-web-de-wordpress-elementor-receptivo\/","title":{"rendered":"C\u00f3mo construir un sitio web de WordPress Elementor receptivo"},"content":{"rendered":"\n

Dado que la mayor\u00eda de los usuarios acceden a Internet a trav\u00e9s de dispositivos m\u00f3viles, \u00bfsu sitio web realmente puede darse el lujo de no ser receptivo?<\/p>\n

\u00bfQu\u00e9 es realmente el dise\u00f1o receptivo?<\/h2>\n

Entonces, en el contexto de un sitio web, receptivo significa que el sitio reacciona a varias relaciones de aspecto<\/strong>, es decir, no se ve igual en diferentes dispositivos, sino que se adapta al dispositivo del visitante<\/strong>. En 2019, m\u00e1s usuarios accedieron a Internet usando sus dispositivos m\u00f3viles<\/a> que las computadoras de escritorio, pero el dise\u00f1o m\u00f3vil primero<\/a>, la pr\u00e1ctica de crear sitios web principalmente con los usuarios m\u00f3viles en mente, ha estado aqu\u00ed por mucho m\u00e1s tiempo.<\/p>\n

Con un dise\u00f1o receptivo de Elementor, b\u00e1sicamente est\u00e1 cambiando el tama\u00f1o y reorganizando todos los componentes de su sitio web para que se ajusten a una pantalla con un dise\u00f1o diferente<\/strong>: computadora de escritorio, tableta (768 px) y dispositivo m\u00f3vil (360 px), sin perder nada de la calidad. Y dado que WordPress es el sistema de administraci\u00f3n de contenido m\u00e1s popular, no es de extra\u00f1ar que tantos desarrolladores se esfuercen por crear temas de WordPress receptivos<\/a>, aunque esto tampoco es garant\u00eda.<\/p>\n

\u00bfC\u00f3mo accedo a diferentes dise\u00f1os en Elementor?<\/h2>\n

Encontrar\u00e1 el \u00edcono de la pantalla en la esquina inferior izquierda<\/strong>. Al seleccionarlo, se abrir\u00e1 el submen\u00fa de vista previa. All\u00ed encontrar\u00e1 las opciones de vistas previas para dise\u00f1os de tabletas y dispositivos m\u00f3viles.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

La vista del escritorio es la predeterminada, pero puede cambiarla f\u00e1cilmente. Debe notar que cuando cambia su vista previa cambia para adaptarse a un dispositivo m\u00e1s peque\u00f1o y<\/strong> con un dise\u00f1o diferente, con una relaci\u00f3n de aspecto diferente, para que pueda tener una idea de c\u00f3mo aparece el dise\u00f1o de su sitio web en cada dispositivo.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Lo importante que debe recordar es que, independientemente de la forma en que cambie sus opciones de dise\u00f1o cosm\u00e9tico en modo tableta o m\u00f3vil, su modo de escritorio y dise\u00f1o no se ver\u00e1n afectados<\/strong>. De esta manera, nunca se perder\u00e1 nada de su trabajo en ning\u00fan dise\u00f1o.<\/p>\n

\u00bfQu\u00e9 elementos puedo ajustar?<\/h2>\n

Antes que nada, aclaremos una cosa: puede ajustar cada elemento marcado con el \u00edcono que se muestra a continuaci\u00f3n. Para estos elementos, podemos ajustar de forma independiente los valores de cada elemento por separado para los formatos de escritorio, tableta y m\u00f3vil.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

La forma en que sus visitantes ven sus elementos de texto es muy importante. Si sus fuentes no son compatibles con dispositivos m\u00f3viles, sus visitantes pueden encontrar el sitio web ilegible<\/strong>, lo que a su vez afectar\u00e1 su SEO (optimizaci\u00f3n de motores de b\u00fasqueda). Con la cantidad de informaci\u00f3n que sus visitantes obtienen simplemente a trav\u00e9s del texto, esto es algo que no puede ignorar. Un sitio web legible se ve limpio, ordenado y profesional.<\/p>\n

Echa un vistazo a este confesionario, por ejemplo:<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Esto se ve perfectamente bien en un dise\u00f1o de escritorio, especialmente con una pantalla ancha. Pero en un dispositivo m\u00e1s peque\u00f1o, especialmente cuando se ve en orientaci\u00f3n vertical, todas las secciones de texto que favorecen la horizontal se ver\u00e1n suavizadas e ilegibles<\/strong>.<\/p>\n

Puede solucionarlo seleccionando el dispositivo para el que desea cambiar el dise\u00f1o. Si est\u00e1 satisfecho con la opci\u00f3n predeterminada (escritorio), todav\u00eda tiene algunos ajustes para administrar para tabletas y m\u00f3viles.<\/p>\n

Como cualquier elemento, un elemento textual tiene atributos. Lo primero a tener en cuenta es la etiqueta HTML. No cambie la etiqueta HTML<\/strong>. Estos son muy importantes para el SEO y, una vez configurados correctamente, no deben modificarse. Para cambiar el tama\u00f1o del texto, debe mirar la pesta\u00f1a Estilo.<\/strong><\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Localice la configuraci\u00f3n de Tipograf\u00eda. All\u00ed puede cambiar la fuente, su tama\u00f1o, grosor, altura de l\u00ednea y espacio entre letras. Si desea cambiar la alineaci\u00f3n de su texto, puede encontrar esa opci\u00f3n seleccionando la pesta\u00f1a Contenido.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Tenga en cuenta que algunos cambios, como Transformar may\u00fasculas, tambi\u00e9n se reflejar\u00e1n en otros dispositivos<\/strong>. Las opciones de tipograf\u00eda son espec\u00edficas del dispositivo. Una consideraci\u00f3n importante a tener en cuenta es tambi\u00e9n que los elementos del texto deben ajustarse en proporci\u00f3n.<\/strong> Lo que desea buscar es la relaci\u00f3n de dimensi\u00f3n de todos los elementos de texto.<\/p>\n

As\u00ed es como se ve una secci\u00f3n modificada proporcionalmente:<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Elementor construye la estructura b\u00e1sica para su contenido usando secciones o filas<\/strong>. La altura de la fila, por lo tanto, es muy importante. Una vez configurado, la altura de la fila se puede ajustar para cada dispositivo<\/strong>. Lo que debe buscar es la distancia entre el contenido de su elemento y el borde de la fila.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Lo que puede verse bien en un dispositivo de escritorio ocupa mucho espacio vertical en dispositivos m\u00f3viles y tabletas. Para ajustar la altura de la fila, seleccione la fila y luego seleccione la opci\u00f3n de edici\u00f3n<\/strong>.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

A continuaci\u00f3n, seleccione la pesta\u00f1a Dise\u00f1o y ajuste el control deslizante Altura m\u00ednima como desee. Puede tener diferentes alturas para diferentes dise\u00f1os de pantalla<\/strong>. Esto es especialmente importante si tambi\u00e9n est\u00e1 ajustando los tama\u00f1os de fuente.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

M\u00e1rgenes y relleno<\/h3>\n

Lo que tambi\u00e9n debe tener en cuenta son los m\u00e1rgenes y el relleno. Un margen es el espacio entre elementos, mientras que el relleno es el espacio entre los bordes de un elemento y su contenido<\/strong>. Independientemente de si ha creado su sitio web desde cero o si est\u00e1 trabajando en una plantilla preparada para<\/a> Elementor<\/strong>, no deber\u00eda tener problemas para navegar por los elementos. Cada elemento en una secci\u00f3n seleccionada muestra un borde azul flotante: simplemente mueva el mouse sobre un elemento y ver\u00e1 su borde<\/strong>. Esta es una buena manera de hacerse una idea de la estructura de una secci\u00f3n.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Seleccione un elemento y luego seleccione la pesta\u00f1a Avanzado. Para el relleno y los m\u00e1rgenes, encontrar\u00e1 cuatro opciones: superior, derecha, inferior e izquierda<\/strong>. Aqu\u00ed es donde ingresa los valores de margen y relleno. El icono de enlace en el lado derecho del submen\u00fa los bloquea entre s\u00ed<\/strong>: puede elegir que todos tengan el mismo valor o que tengan un valor diferente para cada margen o relleno.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

La creaci\u00f3n de columnas<\/a> puede causar problemas de visualizaci\u00f3n cuando no est\u00e1 optimizada para diferentes dispositivos. Su configuraci\u00f3n preferida depender\u00e1 del n\u00famero de columnas y su contenido<\/strong>.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

De forma predeterminada, Elementor apila las columnas una debajo de la otra en los dispositivos m\u00f3viles<\/strong>. Esto significa que las columnas no se juntar\u00e1n y que su contenido permanecer\u00e1 legible.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Para que las columnas sean m\u00e1s f\u00e1ciles de ver para los usuarios de dispositivos m\u00f3viles, puede invertir el orden de las columnas en cualquier fila<\/strong>: simplemente seleccione la secci\u00f3n, luego la pesta\u00f1a Avanzado, el submen\u00fa Responsivo y alterne las columnas inversas para el dise\u00f1o de tableta y m\u00f3vil. como se desee.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Si selecciona un elemento en la vista de escritorio, por ejemplo, y luego selecciona la pesta\u00f1a Avanzado, selecciona el submen\u00fa Responsivo, ver\u00e1 tres alternancias de mostrar\/ocultar: para dispositivos m\u00f3viles, tabletas y de escritorio. Estos se pueden utilizar para mostrar u ocultar elementos o secciones seg\u00fan el tipo de dispositivo en el que se visualizan. Esta opci\u00f3n solo es pr\u00e1ctica para algunos elementos o secciones que sus visitantes pueden encontrar poco interesantes o extra\u00f1os seg\u00fan el dispositivo que est\u00e9n usando, aunque puede usarla para dise\u00f1ar tres p\u00e1ginas completamente diferentes si lo desea.<\/p>\n

Ah\u00ed lo tiene: adaptar el dise\u00f1o de su p\u00e1gina web para dispositivos m\u00f3viles y tabletas, y viceversa, nunca ha sido tan f\u00e1cil. Y tenga en cuenta que la creaci\u00f3n de sitios web responsivos de Elementor es solo una de las muchas caracter\u00edsticas de Elementor. Estamos aqu\u00ed para ayudarte a explorarlos.<\/p>\n

Fuente de grabaci\u00f3n: wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Cree un sitio web de Elementor receptivo en solo unos pocos pasos sencillos, para obtener la mejor experiencia para los visitantes.<\/p>\n","protected":false},"author":1,"featured_media":363491,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[566],"tags":[849],"class_list":["post-367141","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-conceptos-basicos-de-wordpress","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/367141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/comments?post=367141"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/367141\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media\/363491"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media?parent=367141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/categories?post=367141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/tags?post=367141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}