[et_pb_section fb_built=\u00bb1″ admin_label=\u00bbsection\u00bb _builder_version=\u00bb4.16″ global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_row admin_label=\u00bbrow\u00bb _builder_version=\u00bb4.16″ background_size=\u00bbinitial\u00bb background_position=\u00bbtop_left\u00bb background_repeat=\u00bbrepeat\u00bb custom_padding=\u00bb||0px|||\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.16″ custom_padding=\u00bb|||\u00bb global_colors_info=\u00bb{}\u00bb custom_padding__hover=\u00bb|||\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_text _builder_version=\u00bb4.17.6″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n
El dise\u00f1o web responsivo y la optimizaci\u00f3n de su dise\u00f1o para dispositivos m\u00f3viles son m\u00e1s importantes que nunca. Desde 2017, la mayor\u00eda de todo el tr\u00e1fico del sitio web proviene de dispositivos m\u00f3viles<\/a>. Aprenda c\u00f3mo hacer que su sitio web sea receptivo con Divi en solo 10 minutos.<\/strong><\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.16″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.16″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_video src=\u00bbhttps:\/\/youtu.be\/IwXk5EBIy1g\u00bb image_src=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2022\/05\/divi-responsive-design-yt.jpeg\u00bb _builder_version=\u00bb4.17.6″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][\/et_pb_video][et_pb_button button_url=\u00bbhttps:\/\/www.youtube.com\/c\/divimundo\/\u00bb url_new_window=\u00bbon\u00bb button_text=\u00bbSuscr\u00edbete en YouTube\u00bb button_alignment=\u00bbcenter\u00bb _builder_version=\u00bb4.16″ _module_preset=\u00bbdefault\u00bb custom_button=\u00bboff\u00bb background_layout=\u00bbdark\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb custom_css_main_element_last_edited=\u00bbon|desktop\u00bb custom_css_main_element_tablet=\u00bbfont-size:10px !important;\u00bb custom_css_main_element_phone=\u00bbfont-size:10px !important;\u00bb theme_builder_area=\u00bbpost_content\u00bb][\/et_pb_button][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.17.6″ _module_preset=\u00bbdefault\u00bb custom_padding=\u00bb||0px|||\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.17.6″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_text _builder_version=\u00bb4.18.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb sticky_enabled=\u00bb0″]<\/p>\n En resumen, el dise\u00f1o web receptivo significa que su sitio web funciona bien en todos los tama\u00f1os de pantalla. Wikipedia<\/a> ofrece una definici\u00f3n completa:<\/p>\n El dise\u00f1o web responsivo o dise\u00f1o responsivo es un enfoque del dise\u00f1o web que tiene como objetivo hacer que las p\u00e1ginas web se representen bien en una variedad de dispositivos y tama\u00f1os de ventana o pantalla desde el tama\u00f1o m\u00ednimo hasta el m\u00e1ximo para garantizar la usabilidad y la satisfacci\u00f3n. <\/em><\/p>\n<\/blockquote>\n Si sus visitantes m\u00f3viles necesitan hacer zoom (pellizcar) para poder leer el contenido de su sitio web, no est\u00e1 dise\u00f1ado de la manera correcta. Otro error com\u00fan de dise\u00f1o responsivo es colocar elementos vinculados, por ejemplo, botones, demasiado cerca unos de otros. Esto podr\u00eda funcionar bien en una pantalla grande usando un cursor de mouse n\u00edtido, pero con dedos grandes en una pantalla m\u00f3vil peque\u00f1a, es un mal UX. Puede sonar como una paradoja, pero las pantallas m\u00e1s peque\u00f1as a menudo necesitan m\u00e1s espacio en blanco.<\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.17.6″ _module_preset=\u00bbdefault\u00bb custom_padding=\u00bb||0px|||\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.17.6″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_text content_last_edited=\u00bboff|desktop\u00bb _builder_version=\u00bb4.17.6″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n S\u00ed, Divi se basa en un marco receptivo. El men\u00fa de escritorio se convertir\u00e1 autom\u00e1ticamente en un men\u00fa de hamburguesas en tel\u00e9fonos inteligentes y tabletas. Y las columnas de fila se apilar\u00e1n para una mejor experiencia de usuario.<\/p>\n Tambi\u00e9n hay muchas configuraciones de dise\u00f1o receptivas personalizadas para diferentes tama\u00f1os de fuente, m\u00e1rgenes y rellenos para tel\u00e9fonos inteligentes, tabletas y dispositivos de escritorio. Todas las configuraciones de dise\u00f1o se pueden guardar como estilos globales<\/a> , lo que ahorra tiempo y garantiza la coherencia en su dise\u00f1o web.<\/p>\n Incluso puede mostrar contenido diferente, por ejemplo, copia, im\u00e1genes y fondos, para diferentes dispositivos utilizando la funci\u00f3n de contenido sensible Divi<\/a>.<\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.17.6″ _module_preset=\u00bbdefault\u00bb custom_padding=\u00bb||0px|||\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.17.6″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_text _builder_version=\u00bb4.18.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb sticky_enabled=\u00bb0″]<\/p>\n \u00bfLos cambios en el dise\u00f1o de su dispositivo m\u00f3vil tambi\u00e9n afectan el dise\u00f1o de su escritorio? El error m\u00e1s com\u00fan entre los principiantes de Divi es confundir el modo de vista previa receptivo<\/strong> con la configuraci\u00f3n de dise\u00f1o receptivo<\/strong>.<\/p>\n El modo de vista previa receptiva es parte de la interfaz del constructor visual Divi. Lo encontrar\u00e1s en la esquina inferior izquierda despu\u00e9s de hacer clic en la bola p\u00farpura en la parte inferior central de la pantalla. Puede obtener una vista previa y editar su sitio web en cinco vistas diferentes: Wireframe<\/strong>, Zoom Out<\/strong>, Escritorio<\/strong>, Tableta<\/strong> y Tel\u00e9fono<\/strong>.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2022\/08\/divi-responsive-design-preview.jpg\u00bb alt=\u00bbEl modo de vista previa sensible de Divi\u00bb title_text=\u00bbEl modo de vista previa sensible de Divi\u00bb _builder_version=\u00bb4.17.6″ _module_preset=\u00bba1ce92a5-eafc-47a7-9bca-9617ef219bfb\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.18.0″ _module_preset=\u00bb69f72538-4bec-491b-bbf2-e785266edfb2″ hover_enabled=\u00bb0″ locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb sticky_enabled=\u00bb0″]<\/p>\n \u274c No utilices esta funci\u00f3n para editar la configuraci\u00f3n de dise\u00f1o adaptable.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.17.6″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n Sin embargo, es importante comprender que los cambios de dise\u00f1o afectar\u00e1n a todos los dispositivos, independientemente de la vista que est\u00e9 utilizando para obtener una vista previa de su p\u00e1gina web.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.17.6″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n Si desea editar, por ejemplo, el estilo h1 para tel\u00e9fonos inteligentes o la secci\u00f3n de relleno para tabletas, debe usar la configuraci\u00f3n de respuesta Divi<\/strong> en su lugar.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2022\/08\/divi-responsive-design-settings.jpg\u00bb alt=\u00bbConfiguraci\u00f3n de dise\u00f1o receptivo Divi\u00bb title_text=\u00bbConfiguraci\u00f3n de dise\u00f1o receptivo Divi\u00bb _builder_version=\u00bb4.17.6″ _module_preset=\u00bba1ce92a5-eafc-47a7-9bca-9617ef219bfb\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.17.6″ _module_preset=\u00bb69f72538-4bec-491b-bbf2-e785266edfb2″ locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n \u2705 Utilice esta funci\u00f3n para editar la configuraci\u00f3n de dise\u00f1o adaptable en su lugar.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.18.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb sticky_enabled=\u00bb0″]<\/p>\n Comience haciendo clic en la rueda dentada de la secci\u00f3n, fila o m\u00f3dulo que desea editar. A continuaci\u00f3n, haga clic en la pesta\u00f1a Dise\u00f1o<\/strong> y abra la configuraci\u00f3n que desea cambiar.<\/p>\n Coloque el cursor sobre la configuraci\u00f3n que desea cambiar. Si aparece un icono de tel\u00e9fono inteligente<\/strong> a la derecha del encabezado de configuraci\u00f3n, eso significa que hay configuraciones de dise\u00f1o receptivas disponibles.<\/p>\n Haga clic en el icono del tel\u00e9fono inteligente y elija el dispositivo que desea editar. Edite su configuraci\u00f3n de respuesta y guarde. Esta es la forma correcta de editar el dise\u00f1o responsivo en Divi.<\/p>\n Si no cambias la configuraci\u00f3n de dise\u00f1o de un dispositivo espec\u00edfico, heredar\u00e1 la configuraci\u00f3n de dise\u00f1o del dispositivo m\u00e1s grande m\u00e1s cercano.<\/p>\n Por ejemplo, si configura el relleno de 100px para dispositivos de escritorio sin cambiar la configuraci\u00f3n de los dispositivos m\u00e1s peque\u00f1os, tanto la tableta como los tel\u00e9fonos heredar\u00e1n el relleno de 100px.<\/p>\n Si cambia el relleno a 50px para tabletas, tanto las tabletas como los tel\u00e9fonos tendr\u00e1n un relleno de 50px.<\/p>\n Si cambias el acolchado m\u00f3vil a 25px no se heredar\u00e1 a ning\u00fan otro dispositivo ya que el tel\u00e9fono es el m\u00e1s peque\u00f1o vista.<\/p>\n Una vez que cambie una configuraci\u00f3n de dise\u00f1o personalizada para una vista espec\u00edfica, no heredar\u00e1 el valor de los dispositivos m\u00e1s grandes.<\/p>\n Mira el video Learn Divi Responsive Design in 10 Minutes<\/a> para obtener m\u00e1s informaci\u00f3n sobre:<\/p>\n \u00a1Disfrutar!<\/strong><\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.17.6″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.17.6″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_text _builder_version=\u00bb4.17.6″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n El motor de b\u00fasqueda l\u00edder en el mercado mundial, Google, ofrece una prueba gratuita de optimizaci\u00f3n para dispositivos m\u00f3viles<\/a>. Simplemente env\u00ede su URL (o un fragmento de c\u00f3digo) para obtener una respuesta si su p\u00e1gina web es compatible con dispositivos m\u00f3viles.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2022\/08\/mobile-friendly-test-result.jpg\u00bb alt=\u00bb\u00bfSu p\u00e1gina web es compatible con dispositivos m\u00f3viles?\u00bb title_text=\u00bbResultado de la prueba optimizada para dispositivos m\u00f3viles para DiviMundo.com\u00bb _builder_version=\u00bb4.17.6″ _module_preset=\u00bba1ce92a5-eafc-47a7-9bca-9617ef219bfb\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.17.6″ _module_preset=\u00bb69f72538-4bec-491b-bbf2-e785266edfb2″ global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n \u00a1Ufff! DiviMundo.com pas\u00f3 la prueba Mobile-Friendly con gran \u00e9xito.<\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.17.6″ _module_preset=\u00bbdefault\u00bb custom_padding=\u00bb0px|||||\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.17.6″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_text _builder_version=\u00bb4.17.6″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n Espero que hayas disfrutado de este post. Suscr\u00edbete a DiviMundo en YouTube<\/a> y \u00fanete a nuestro grupo de Facebook<\/a> para obtener contenido m\u00e1s n\u00edtido sobre WordPress y dise\u00f1o web.<\/p>\n \ud83d\udc49 Post relacionado:<\/strong> C\u00f3mo cambiar el n\u00famero de columnas en el m\u00f3vil en Divi<\/a><\/p>\n \ud83d\udc49 Post relacionado:<\/strong> Seis consejos para un mejor men\u00fa m\u00f3vil en Divi<\/a><\/p>\n\u00bfQu\u00e9 significa Responsive Design?<\/h2>\n
\n
\u00bfEs Divi un tema responsivo de WordPress?<\/h2>\n
Descripci\u00f3n del modo de vista previa adaptable de Divi<\/h2>\n
La vista previa responsiva de Divi<\/h3>\n
La configuraci\u00f3n de dise\u00f1o responsivo de Divi<\/h3>\n
La configuraci\u00f3n de dise\u00f1o se hereda al dispositivo m\u00e1s peque\u00f1o de forma predeterminada<\/h3>\n
\u00bfQuieres m\u00e1s consejos y trucos de dise\u00f1o receptivo Divi?<\/h2>\n
\n
Bono: Pruebe si su p\u00e1gina web es compatible con dispositivos m\u00f3viles<\/h2>\n
\u00a1Eso es todo por hoy!<\/h2>\n