{"id":23262,"date":"2025-04-05T12:47:22","date_gmt":"2025-04-05T04:47:22","guid":{"rendered":"https:\/\/www.szlogic.net\/?p=23262"},"modified":"2025-04-05T12:47:25","modified_gmt":"2025-04-05T04:47:25","slug":"wordpress-teaching","status":"publish","type":"post","link":"https:\/\/www.szlogic.net\/es\/learn\/wordpress\/wordpress-teaching\/","title":{"rendered":"Tutorial de WordPress: Construye y personaliza tu p\u00e1gina desde cero con el editor Elementor"},"content":{"rendered":"<h1 class=\"wp-block-heading has-text-align-center\" style=\"margin-bottom:30px;font-size:31px\">Tutorial WordPress: Crea y personaliza con Elementor<\/h1>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"463\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/wordpress\u6559\u7a0b.png\" alt=\"wordpress\u6559\u7a0b\" class=\"wp-image-23271\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/wordpress\u6559\u7a0b.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/wordpress\u6559\u7a0b-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\">Si quieres crear una p\u00e1gina de <strong><a href=\"https:\/\/www.szlogic.net\/es\/learn\/wordpress\/what-is-wordpress\/\" data-type=\"link\" data-id=\"https:\/\/www.szlogic.net\/learn\/wordpress\/what-is-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress<\/a><\/strong> profesional y personalizada, pero no quieres que el c\u00f3digo complicado te detenga, entonces <strong><a href=\"https:\/\/www.szlogic.net\/es\/learn\/wordpress\/basic-configuration\/\" data-type=\"link\" data-id=\"https:\/\/www.szlogic.net\/learn\/wordpress\/basic-configuration\/\" target=\"_blank\" rel=\"noreferrer noopener\">el editor Elementor<\/a><\/strong> es la herramienta ideal para ti. Este tutorial te guiar\u00e1 paso a paso desde cero, ense\u00f1\u00e1ndote c\u00f3mo usar Elementor para dise\u00f1ar y construir los elementos de la p\u00e1gina, haciendo que tu sitio web de WordPress sea m\u00e1s atractivo y funcional. Este art\u00edculo es una gu\u00eda pr\u00e1ctica que comienza desde la creaci\u00f3n y edici\u00f3n de p\u00e1ginas en <strong><a href=\"https:\/\/www.szlogic.net\/es\/learn\/wordpress\/wordpress-use\/\" data-type=\"link\" data-id=\"https:\/\/www.szlogic.net\/learn\/wordpress\/wordpress-use\/\" target=\"_blank\" rel=\"noreferrer noopener\">el panel de WordPress<\/a><\/strong>, cubriendo la construcci\u00f3n del encabezado, el contenido principal y el pie de p\u00e1gina, y utilizando los componentes visuales de Elementor para la maquetaci\u00f3n, agregar contenido, ajustar estilos, entre otros. No solo es una ense\u00f1anza b\u00e1sica, sino tambi\u00e9n un proceso pr\u00e1ctico. Aunque la mayor\u00eda de las veces el proceso sigue sin problemas, el desarrollo de los elementos de la p\u00e1gina puede ser impredecible, a veces encontrando conflictos de plugins o problemas con el estilo. Por lo tanto, adem\u00e1s de aprender a usar Elementor, los lectores deben desarrollar habilidades de observaci\u00f3n y resoluci\u00f3n de problemas para dominar esta potente herramienta. Ya seas un principiante que acaba de comenzar con WordPress o un usuario que desea mejorar sus habilidades de edici\u00f3n de p\u00e1ginas, este art\u00edculo te proporcionar\u00e1 una gu\u00eda pr\u00e1ctica para crear elementos y dise\u00f1ar p\u00e1ginas de manera m\u00e1s eficiente. A continuaci\u00f3n, veamos el contenido del \u00edndice de este art\u00edculo y luego nos adentraremos en el tema principal.<\/p>\n\n\n\n<p>Para facilitar un aprendizaje y consulta m\u00e1s eficiente, el autor ha organizado de manera sistem\u00e1tica el tutorial \"WordPress: Construir y personalizar tu p\u00e1gina desde cero con el editor Elementor\", y lo ha estructurado en un listado de \u00edndice claro. Cada cap\u00edtulo no solo muestra de manera intuitiva la jerarqu\u00eda de la estructura del art\u00edculo, sino que tambi\u00e9n incluye enlaces ancla para que puedas saltar directamente a la secci\u00f3n que m\u00e1s te interese, permiti\u00e9ndote revisar o profundizar en cualquier parte en cualquier momento. Ya sea que desees aprender de principio a fin o necesites localizar r\u00e1pidamente un paso espec\u00edfico durante el proceso, este \u00edndice te permitir\u00e1 leer de la manera que prefieras, asegurando que el proceso de aprendizaje sea m\u00e1s fluido y eficiente. El \u00edndice del art\u00edculo es el siguiente:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"#new\">Crear una nueva p\u00e1gina en el panel de administraci\u00f3n de WordPress<\/a><\/strong>\n<ol class=\"wp-block-list\">\n<li><a href=\"#fill\">Rellenar el t\u00edtulo de la p\u00e1gina<\/a><\/li>\n\n\n\n<li><a href=\"#custom\">Personalizar el sufijo de la URL de la p\u00e1gina<\/a><\/li>\n\n\n\n<li><a href=\"#level\">Configuraci\u00f3n de jerarqu\u00eda de la p\u00e1gina<\/a><\/li>\n\n\n\n<li><a href=\"#publish\">Publicar la nueva p\u00e1gina en WordPress<\/a><\/li>\n\n\n\n<li><a href=\"#use\">Usar Elementor para editar la p\u00e1gina<\/a><\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong><a href=\"#header\">Crear una plantilla de header (cabecera y barra de navegaci\u00f3n) en el generador de temas de Elementor<\/a><\/strong>\n<ol class=\"wp-block-list\">\n<li><a href=\"#generate\">Entrada al generador de temas de Elementor<\/a><\/li>\n\n\n\n<li><a href=\"#template\">Crear una plantilla de Header en la interfaz de administraci\u00f3n de plantillas<\/a><\/li>\n\n\n\n<li><a href=\"#select\">Elegir un estilo de plantilla para Header o personalizar completamente el estilo<\/a><\/li>\n\n\n\n<li><a href=\"#navigation\">Usar los contenedores de Elementor para estructurar el dise\u00f1o del header y la barra de navegaci\u00f3n<\/a><\/li>\n\n\n\n<li><a href=\"#edit\">Editar y crear los elementos del header y la barra de navegaci\u00f3n<\/a><\/li>\n\n\n\n<li><a href=\"#settings\">Publicar la plantilla de Header y establecer las condiciones de visualizaci\u00f3n<\/a><\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong><a href=\"#element\">Construir la estructura principal de la p\u00e1gina con Elementor y agregar los elementos de contenido<\/a><\/strong>\n<ol class=\"wp-block-list\">\n<li><a href=\"#block\">Bloque Banner<\/a><\/li>\n\n\n\n<li><a href=\"#business\">Bloque de descripci\u00f3n del negocio<\/a><\/li>\n\n\n\n<li><a href=\"#product\">Bloque de productos y servicios<\/a><\/li>\n\n\n\n<li><a href=\"#core\">Bloque de ventajas principales del producto<\/a><\/li>\n\n\n\n<li><a href=\"#brand\">Bloque de historia de la marca<\/a><\/li>\n\n\n\n<li><a href=\"#information\">Bloque de \u00faltimas noticias<\/a><\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong><a href=\"#file\">Crear la plantilla de footer (pie de p\u00e1gina) con Elementor<\/a><\/strong>\n<ol class=\"wp-block-list\">\n<li><a href=\"#common\">Formatos comunes de dise\u00f1o de Footer<\/a><\/li>\n\n\n\n<li><a href=\"#component\">Componentes comunes en el Footer<\/a><\/li>\n\n\n\n<li><a href=\"#display\">Publicar la plantilla de Footer y establecer las condiciones de visualizaci\u00f3n<\/a><\/li>\n\n\n\n<li><a href=\"#show\">Mostrar el producto final de la p\u00e1gina editada con Elementor<\/a><\/li>\n<\/ol>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading new\" id=\"new\" style=\"margin-bottom:30px\">Uno\u3001Crear una nueva p\u00e1gina en el panel de administraci\u00f3n de WordPress<\/h2>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img decoding=\"async\" width=\"800\" height=\"350\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/WordPress\u540e\u53f0\u521b\u5efa\u65b0\u9875\u9762.png\" alt=\"Crear una nueva p\u00e1gina en el panel de administraci\u00f3n de WordPress\" class=\"wp-image-23277\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/WordPress\u540e\u53f0\u521b\u5efa\u65b0\u9875\u9762.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/WordPress\u540e\u53f0\u521b\u5efa\u65b0\u9875\u9762-18x8.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Antes de comenzar a construir la p\u00e1gina de WordPress con el editor Elementor, el primer paso es asegurarse de que la p\u00e1gina ya ha sido creada en el panel de administraci\u00f3n de WordPress. El camino para acceder a la gesti\u00f3n de p\u00e1ginas en WordPress se muestra en la imagen anterior. En este cap\u00edtulo, comenzaremos con las funciones de gesti\u00f3n de p\u00e1ginas de WordPress, explicando detalladamente c\u00f3mo crear una nueva p\u00e1gina y completar la informaci\u00f3n necesaria, como el t\u00edtulo de la p\u00e1gina, la configuraci\u00f3n de la URL, la jerarqu\u00eda de la p\u00e1gina y la publicaci\u00f3n de la p\u00e1gina, entre otros pasos clave. La creaci\u00f3n de la p\u00e1gina es la base de todo el sitio web, y configurar correctamente los atributos de la p\u00e1gina no solo mejorar\u00e1 la eficiencia de la edici\u00f3n posterior, sino que tambi\u00e9n evitar\u00e1 problemas de dise\u00f1o o compatibilidad al usar Elementor. Una vez que la p\u00e1gina est\u00e9 lista, podremos cambiar sin problemas al modo de edici\u00f3n de Elementor y comenzar con el dise\u00f1o y la disposici\u00f3n de los elementos de la p\u00e1gina.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"fill\" style=\"margin-bottom:30px\">1\u3001Rellenar el t\u00edtulo de la p\u00e1gina<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2546\" height=\"1303\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/\u586b\u5199\u9875\u9762\u6807\u9898.png\" alt=\"Rellenar el t\u00edtulo de la p\u00e1gina\" class=\"wp-image-23281\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/\u586b\u5199\u9875\u9762\u6807\u9898.png 2546w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/\u586b\u5199\u9875\u9762\u6807\u9898-18x9.png 18w\" sizes=\"(max-width: 2546px) 100vw, 2546px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">En el panel de administraci\u00f3n de WordPress, al acceder a la gesti\u00f3n de p\u00e1ginas y hacer clic en el bot\u00f3n \"A\u00f1adir nueva p\u00e1gina\" en la parte superior, llegaremos a la interfaz de operaci\u00f3n para la creaci\u00f3n de una nueva p\u00e1gina, como se muestra en la imagen anterior. En el campo de entrada del t\u00edtulo, marcado con un cuadro rojo en la imagen, podemos personalizar el t\u00edtulo de la p\u00e1gina. En el sistema de WordPress, este t\u00edtulo de p\u00e1gina no solo se muestra en la gesti\u00f3n de p\u00e1ginas, sino que tambi\u00e9n es el texto dentro de la etiqueta \"title\" en el c\u00f3digo frontal de la p\u00e1gina. Por lo tanto, al personalizar la entrada, se debe tener en cuenta el impacto del SEO.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"custom\" style=\"margin-bottom:30px\">2\u3001Personalizar el sufijo de la URL de la p\u00e1gina<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"409\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/\u81ea\u5b9a\u4e49\u9875\u9762URL\u540e\u7f00.png\" alt=\"Personalizar el sufijo de la URL de la p\u00e1gina\" class=\"wp-image-23282\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/\u81ea\u5b9a\u4e49\u9875\u9762URL\u540e\u7f00.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/\u81ea\u5b9a\u4e49\u9875\u9762URL\u540e\u7f00-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Como se muestra en la imagen anterior, despu\u00e9s de ingresar el t\u00edtulo de la p\u00e1gina, haga clic en el texto de ancla \"Enlace\" marcado en el cuadro rojo a la derecha, y el sistema abrir\u00e1 un campo de entrada personalizado para la URL de la p\u00e1gina. Por defecto, WordPress utiliza autom\u00e1ticamente el t\u00edtulo de la p\u00e1gina como sufijo de la URL. Sin embargo, esta configuraci\u00f3n predeterminada no siempre cumple con las normas de SEO, ya que el t\u00edtulo puede contener caracteres no ingleses o ser demasiado largo, lo que afecta tanto la legibilidad del usuario como la optimizaci\u00f3n para motores de b\u00fasqueda. La URL ideal debe ser lo m\u00e1s corta posible y utilizar palabras en ingl\u00e9s, lo que mejora la legibilidad y la amigabilidad con los motores de b\u00fasqueda.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"level\" style=\"margin-bottom:30px\">3\u3001Configuraci\u00f3n de jerarqu\u00eda de la p\u00e1gina<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"412\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u9875\u9762\u7684\u5c42\u7ea7\u8bbe\u7f6e.png\" alt=\"Configuraci\u00f3n de jerarqu\u00eda de la p\u00e1gina\" class=\"wp-image-23286\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u9875\u9762\u7684\u5c42\u7ea7\u8bbe\u7f6e.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u9875\u9762\u7684\u5c42\u7ea7\u8bbe\u7f6e-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">La configuraci\u00f3n del nivel de la p\u00e1gina se utiliza para definir las relaciones jer\u00e1rquicas entre las p\u00e1ginas de WordPress. A diferencia de las p\u00e1ginas de art\u00edculos, que pueden organizarse en categor\u00edas, las p\u00e1ginas de WordPress admiten una estructura jer\u00e1rquica. Por ejemplo, una URL como szlogic\/web-design representa la p\u00e1gina de dise\u00f1o web de \"L\u00f3gica Digital\", y si esta p\u00e1gina se establece como p\u00e1gina principal, la URL de sus subp\u00e1ginas ser\u00e1 szlogic\/web-design\/tu-url-de-p\u00e1gina. Para configurar el nivel de la p\u00e1gina, como se muestra en la imagen anterior, en el panel de edici\u00f3n, en la columna \"P\u00e1gina\" a la derecha, haga clic en la opci\u00f3n \"P\u00e1gina principal\" y aparecer\u00e1 una ventana para seleccionar la p\u00e1gina principal. Despu\u00e9s de elegir la p\u00e1gina principal adecuada, el sistema ajustar\u00e1 autom\u00e1ticamente la estructura de la URL para reflejar la jerarqu\u00eda. Es importante mencionar que la estructura jer\u00e1rquica de las p\u00e1ginas no es obligatoria; si no es necesario asignar una p\u00e1gina principal, puede mantener la configuraci\u00f3n predeterminada.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"publish\" style=\"margin-bottom:30px\">4\u3001Publicar la nueva p\u00e1gina en WordPress<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"411\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u53d1\u5e03WordPress\u65b0\u589e\u9875\u9762.png\" alt=\"Publicar la nueva p\u00e1gina en WordPress\" class=\"wp-image-23288\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u53d1\u5e03WordPress\u65b0\u589e\u9875\u9762.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u53d1\u5e03WordPress\u65b0\u589e\u9875\u9762-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Despu\u00e9s de completar la configuraci\u00f3n de la informaci\u00f3n necesaria de la p\u00e1gina, podemos proceder a la publicaci\u00f3n de la p\u00e1gina. Solo despu\u00e9s de publicarla, la p\u00e1gina se convertir\u00e1 en una parte de la estructura del sitio web y podr\u00e1 ser accedida a trav\u00e9s de la URL. Despu\u00e9s de hacer clic en el bot\u00f3n \"Publicar\" marcado en el cuadro rojo de la imagen anterior, la p\u00e1gina de operaciones cambiar\u00e1 a la pantalla de comprobaci\u00f3n antes de la publicaci\u00f3n, donde deber\u00e1 hacer clic nuevamente en el bot\u00f3n \"Publicar\" para completar la tarea de publicaci\u00f3n de la nueva p\u00e1gina.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"use\" style=\"margin-bottom:30px\">5\u3001Usar Elementor para editar la p\u00e1gina<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"422\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u7f16\u8f91\u9875\u9762.png\" alt=\"Usar Elementor para editar la p\u00e1gina\" class=\"wp-image-23290\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u7f16\u8f91\u9875\u9762.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u7f16\u8f91\u9875\u9762-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Establecer la edici\u00f3n con Elementor es el \u00faltimo paso despu\u00e9s de crear una nueva p\u00e1gina de WordPress. Para entrar en el modo de edici\u00f3n de Elementor por primera vez en una p\u00e1gina reci\u00e9n creada, debe hacer clic en el bot\u00f3n \"Editar con Elementor\" marcado en el cuadro rojo de la imagen anterior, mientras se est\u00e1 en el modo de gesti\u00f3n de la p\u00e1gina. Despu\u00e9s de ingresar al modo de edici\u00f3n de Elementor por primera vez, en los accesos posteriores podr\u00e1 entrar a trav\u00e9s de la p\u00e1gina frontal, sin necesidad de ingresar por el panel de administraci\u00f3n, ya que la primera entrada equivale a autorizar a Elementor para editar esa p\u00e1gina, por lo que es necesario realizar la operaci\u00f3n en el panel de administraci\u00f3n.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"header\" style=\"margin-bottom:30px\">dos\u3001Crear una plantilla de header (cabecera y barra de navegaci\u00f3n) en el generador de temas de Elementor<\/h2>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"423\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5728Elementor\u7684\u4e3b\u9898\u751f\u6210\u5668\u4e2d\u521b\u5efaheader\uff08\u9875\u7709\uff09\u6a21\u677f\u6587\u4ef6.png\" alt=\"\u5728Elementor\u7684\u4e3b\u9898\u751f\u6210\u5668\u4e2d\u521b\u5efaheader\uff08\u9875\u7709\uff09\u6a21\u677f\u6587\u4ef6\" class=\"wp-image-23296\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5728Elementor\u7684\u4e3b\u9898\u751f\u6210\u5668\u4e2d\u521b\u5efaheader\uff08\u9875\u7709\uff09\u6a21\u677f\u6587\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5728Elementor\u7684\u4e3b\u9898\u751f\u6210\u5668\u4e2d\u521b\u5efaheader\uff08\u9875\u7709\uff09\u6a21\u677f\u6587\u4ef6-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\">En un <strong><a href=\"https:\/\/www.szlogic.net\/es\/\" data-type=\"link\" data-id=\"https:\/\/www.szlogic.net\/\" target=\"_blank\" rel=\"noreferrer noopener\">sitio web de WordPress<\/a><\/strong>, el encabezado (Header) y la barra de navegaci\u00f3n son elementos globales cruciales. No solo influyen en el estilo general del sitio web, sino que tambi\u00e9n afectan directamente la experiencia de navegaci\u00f3n del usuario. Dado que el encabezado generalmente debe mantenerse consistente en todas las p\u00e1ginas, podemos utilizar la funci\u00f3n del generador de temas de Elementor para crear una plantilla de encabezado reutilizable y lograr una visualizaci\u00f3n uniforme en todo el sitio. En este cap\u00edtulo, explicaremos c\u00f3mo usar la funci\u00f3n de gesti\u00f3n de plantillas de Elementor para dise\u00f1ar un encabezado desde cero que se ajuste a las necesidades del sitio web. Aprender\u00e1s c\u00f3mo agregar elementos comunes como el logo, el men\u00fa de navegaci\u00f3n y el cuadro de b\u00fasqueda, y c\u00f3mo personalizarlos mediante la interfaz de arrastrar y soltar de Elementor. Una vez que hayas completado el dise\u00f1o de la plantilla, tambi\u00e9n explicaremos c\u00f3mo publicarla seleccionando la opci\u00f3n \"Aplicar a todo el sitio\" en las condiciones de control, asegurando que el encabezado se aplique autom\u00e1ticamente a todas las p\u00e1ginas. Una vez que domines esta t\u00e9cnica, no solo podr\u00e1s crear un encabezado atractivo y funcional, sino que tambi\u00e9n podr\u00e1s actualizarlo f\u00e1cilmente m\u00e1s adelante sin tener que ajustar cada p\u00e1gina individualmente. \u00a1Ahora, comencemos a crear el encabezado exclusivo para tu sitio web!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"generate\" style=\"margin-bottom:30px\">1\u3001Entrada al generador de temas de Elementor<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2558\" height=\"1146\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Elementor\u4e3b\u9898\u751f\u6210\u5668\u5165\u53e3.png\" alt=\"Entrada al generador de temas de Elementor\" class=\"wp-image-23298\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Elementor\u4e3b\u9898\u751f\u6210\u5668\u5165\u53e3.png 2558w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Elementor\u4e3b\u9898\u751f\u6210\u5668\u5165\u53e3-18x8.png 18w\" sizes=\"(max-width: 2558px) 100vw, 2558px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px;margin-bottom:30px\">Al acceder a la p\u00e1gina publicada en el navegador, si se mantiene la sesi\u00f3n iniciada en el panel de administraci\u00f3n de WordPress en el mismo navegador, veremos que aparece una barra de herramientas de administraci\u00f3n en la parte superior de la p\u00e1gina. Al pasar el cursor sobre el texto de ancla \"Editar con Elementor\", aparecer\u00e1 un men\u00fa desplegable de Elementor, y la entrada para el \"Generador de Temas\" estar\u00e1 oculta en este men\u00fa. Al hacer clic en el enlace \"Generador de Temas\" marcado en el cuadro rojo de la imagen anterior, se acceder\u00e1 a la p\u00e1gina de administraci\u00f3n de los archivos de plantillas del tema de Elementor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"template\" style=\"margin-bottom:30px\">2\u3001Agregar un archivo de plantilla Header (Encabezado) en la interfaz de administraci\u00f3n de Elementor<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"421\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5728Elementor\u7684Header\u6a21\u677f\u6587\u4ef6\u7ba1\u7406\u754c\u9762\u65b0\u589e\u6a21\u677f\u6587\u4ef6.png\" alt=\"Crear una plantilla de Header en la interfaz de administraci\u00f3n de plantillas\" class=\"wp-image-23295\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5728Elementor\u7684Header\u6a21\u677f\u6587\u4ef6\u7ba1\u7406\u754c\u9762\u65b0\u589e\u6a21\u677f\u6587\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5728Elementor\u7684Header\u6a21\u677f\u6587\u4ef6\u7ba1\u7406\u754c\u9762\u65b0\u589e\u6a21\u677f\u6587\u4ef6-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Despu\u00e9s de acceder a la p\u00e1gina principal del Generador de Temas de Elementor, haga clic en el directorio de plantillas de la categor\u00eda \"Header\" en la parte superior izquierda. Esto lo llevar\u00e1 a la interfaz de administraci\u00f3n de los archivos de plantillas \"Header\", como se muestra en la imagen anterior. No es necesario realizar ninguna operaci\u00f3n adicional; solo tiene que hacer clic nuevamente en el bot\u00f3n \"Add New\" (Agregar Nuevo) en la esquina superior derecha de la interfaz de administraci\u00f3n, que est\u00e1 marcado en el cuadro rojo de la imagen, para crear el archivo de plantilla del encabezado.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"select\" style=\"margin-bottom:30px\">3\u3001Elegir un estilo de plantilla para Header o personalizar completamente el estilo<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"418\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u9009\u62e9header\uff08\u9875\u7709\uff09\u6a21\u677f\u6837\u5f0f\u6216\u521b\u5efaHeader\u6837\u5f0f.png\" alt=\"\u9009\u62e9header\uff08\u9875\u7709\uff09\u6a21\u677f\u6837\u5f0f\u6216\u521b\u5efaHeader\u6837\u5f0f\" class=\"wp-image-23297\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u9009\u62e9header\uff08\u9875\u7709\uff09\u6a21\u677f\u6837\u5f0f\u6216\u521b\u5efaHeader\u6837\u5f0f.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u9009\u62e9header\uff08\u9875\u7709\uff09\u6a21\u677f\u6837\u5f0f\u6216\u521b\u5efaHeader\u6837\u5f0f-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Despu\u00e9s de hacer clic en el bot\u00f3n \"Add New\" (Agregar Nuevo) en la interfaz de administraci\u00f3n de archivos de plantilla Header, la p\u00e1gina se redirigir\u00e1 autom\u00e1ticamente a la pantalla de selecci\u00f3n del m\u00f3dulo Header de Elementor, como se muestra en la imagen anterior. En esta pantalla, podemos ver que Elementor ofrece algunos estilos de plantilla para el encabezado que podemos seleccionar y usar directamente. En esta interfaz, los usuarios pueden hacer clic en un estilo de encabezado de Elementor para cargarlo, o hacer clic en la \"X\" en la esquina superior derecha de la ventana de selecci\u00f3n del estilo de m\u00f3dulo Header para cerrar la ventana y crear un encabezado\/navegaci\u00f3n completamente personalizado.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"navigation\" style=\"margin-bottom:30px\">4\u3001Usar los contenedores de Elementor para estructurar el dise\u00f1o del header y la barra de navegaci\u00f3n<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"454\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u7684\u5bb9\u5668\u5bf9\u9875\u7709\u53ca\u5bfc\u822a\u680f\u5e03\u5c40.png\" alt=\"Usar los contenedores de Elementor para estructurar el dise\u00f1o del header y la barra de navegaci\u00f3n\" class=\"wp-image-23302\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u7684\u5bb9\u5668\u5bf9\u9875\u7709\u53ca\u5bfc\u822a\u680f\u5e03\u5c40.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u7684\u5bb9\u5668\u5bf9\u9875\u7709\u53ca\u5bfc\u822a\u680f\u5e03\u5c40-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\">En el modo de edici\u00f3n de plantillas de Header, el estilo del encabezado dispuesto mediante el contenedor de Elementor se muestra como en la imagen anterior. A nivel de c\u00f3digo de desarrollo frontend, toda la estructura de la p\u00e1gina est\u00e1 compuesta por elementos de bloque (generalmente representados por etiquetas div), y estos elementos en el dise\u00f1o de <strong><a href=\"https:\/\/html.com\/\" data-type=\"link\" data-id=\"https:\/\/html.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">HTML<\/a><\/strong> se conocen com\u00fanmente como el \"modelo de caja\". Elementor, como un editor de p\u00e1ginas visual, sigue esta misma l\u00f3gica, pero proporciona una interfaz de operaci\u00f3n visual y componentes de contenedor (Container) que nos ayudan a construir la estructura b\u00e1sica de la p\u00e1gina y a organizar otros elementos de manera ordenada dentro de ella. Por lo tanto, antes de agregar los elementos del encabezado (Header) y la barra de navegaci\u00f3n (Navbar), primero debemos planificar adecuadamente su estructura y utilizar los componentes de contenedor de Elementor para configurar el dise\u00f1o. Para lograr un uso flexible de los componentes de contenedor, debemos dominar los par\u00e1metros de configuraci\u00f3n del contenedor y la t\u00e9cnica de anidaci\u00f3n de contenedores que se presentan en este cap\u00edtulo. El contenedor, como el n\u00facleo de la estructura del dise\u00f1o, no solo determina la disposici\u00f3n de los contenidos, sino que tambi\u00e9n influye en el comportamiento responsive de la p\u00e1gina y la experiencia del usuario. Adem\u00e1s, la cantidad de contenedores tambi\u00e9n est\u00e1 relacionada con la cantidad de elementos en la p\u00e1gina. Normalmente, un contenedor alberga un componente de elemento, y los componentes de elementos m\u00e1s comunes en la secci\u00f3n de encabezado son: Site Logo, WordPress Menu y Search, que corresponden al LOGO del sitio, el men\u00fa de WordPress y el cuadro de b\u00fasqueda.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(1) Configuraci\u00f3n del ancho del contenedor<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"603\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5bbd\u5ea6\u8bbe\u7f6e.png\" alt=\"\u5bb9\u5668\u5bbd\u5ea6\u8bbe\u7f6e\" class=\"wp-image-23316\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5bbd\u5ea6\u8bbe\u7f6e.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5bbd\u5ea6\u8bbe\u7f6e-16x12.png 16w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Como se muestra en la imagen anterior, la configuraci\u00f3n del ancho del contenedor determina el rango de visualizaci\u00f3n de los elementos de la p\u00e1gina. Muchos principiantes al editar p\u00e1ginas pueden enfrentar problemas en los que los elementos no se muestran a pantalla completa. La causa principal de esto suele ser que el ancho del contenedor no se ha configurado como \"ancho completo\" o que el relleno del contenedor no se ha establecido en 0. Si se desea que los elementos de la p\u00e1gina tengan m\u00e1rgenes, se puede seleccionar \"Dise\u00f1o de caja\"; si se necesita pantalla completa, se debe ajustar el ancho del contenedor a \"ancho completo\" y asegurarse de que el relleno del contenedor est\u00e9 configurado en 0, seg\u00fan los m\u00e9todos de configuraci\u00f3n que se indican a continuaci\u00f3n. Solo configurando ambas opciones correctamente se podr\u00e1 llenar toda la pantalla con el contenido.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">\uff082\uff09Configuraci\u00f3n de los m\u00e1rgenes\/paddings del contenedor<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"610\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5185\u8ddd\u5916\u8ddd\u7684\u8bbe\u5b9a.png\" alt=\"\u5bb9\u5668\u5185\u8ddd\u5916\u8ddd\u7684\u8bbe\u5b9a\" class=\"wp-image-23315\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5185\u8ddd\u5916\u8ddd\u7684\u8bbe\u5b9a.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5185\u8ddd\u5916\u8ddd\u7684\u8bbe\u5b9a-16x12.png 16w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Como se muestra en la imagen anterior, la configuraci\u00f3n de los m\u00e1rgenes y rellenos del contenedor de Elementor se encuentra en la pesta\u00f1a de \"Configuraci\u00f3n avanzada\". En la parte superior, hay opciones para ajustar los m\u00e1rgenes en las cuatro direcciones. De forma predeterminada, Elementor bloquea los valores de los m\u00e1rgenes y rellenos para que las cuatro direcciones sean iguales. Para ajustar el valor de una direcci\u00f3n individualmente, se debe hacer clic en el \u00edcono de \"enlace\" marcado en el cuadro rojo para desbloquearlo, luego ingresar el valor deseado en la direcci\u00f3n correspondiente. Adem\u00e1s, los usuarios pueden hacer clic en el \u00edcono de bloqueo para cambiar la unidad de medida de px (que es la unidad predeterminada) a otras unidades como em, rem, %, etc., para adaptarse a diferentes necesidades de dise\u00f1o. Es importante destacar que Elementor establece el relleno en 10px de forma predeterminada. Una vez desbloqueado, el sistema ajustar\u00e1 autom\u00e1ticamente el valor del relleno a 0, por lo que ser\u00e1 necesario configurar manualmente el valor adecuado seg\u00fan las necesidades del dise\u00f1o.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">\uff083\uff09M\u00e9todos para anidar contenedores<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"408\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5d4c\u5957\u65b9\u6cd5.png\" alt=\"\u5bb9\u5668\u5d4c\u5957\u65b9\u6cd5\" class=\"wp-image-23314\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5d4c\u5957\u65b9\u6cd5.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5d4c\u5957\u65b9\u6cd5-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Como se muestra en la imagen anterior, hay dos formas de anidar contenedores en Elementor. Ambas son efectivas para lograr la anidaci\u00f3n de contenedores: arrastrar y soltar, y copiar y pegar en el navegador. El m\u00e9todo de arrastrar y soltar es m\u00e1s visual y adecuado para crear una estructura desde cero, mientras que el copiar y pegar es m\u00e1s r\u00e1pido y adecuado para ajustar y reutilizar contenedores dentro de una estructura ya existente.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Arrastrar y soltar un subcontenedor<\/h5>\n\n\n\n<p>Como se muestra en la imagen anterior, puede arrastrar el componente de contenedor desde la barra de herramientas de Elementor a un contenedor principal de destino. El nuevo contenedor se asociar\u00e1 autom\u00e1ticamente con el contenedor principal, formando una estructura jer\u00e1rquica.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Copiar y pegar un contenedor<\/h5>\n\n\n\n<p>En el panel de navegaci\u00f3n a la derecha de la interfaz de Elementor, primero seleccione el contenedor que desea anidar, luego haga una copia de \u00e9l. Despu\u00e9s, seleccione el contenedor principal de destino, haga clic derecho y elija pegar. El contenedor copiado se anidar\u00e1 autom\u00e1ticamente bajo el contenedor principal, convirti\u00e9ndose en un subcontenedor.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">\uff084\uff09Configuraci\u00f3n de la direcci\u00f3n de disposici\u00f3n de los subcontenedores<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"403\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5b50\u5bb9\u5668\u7684\u6392\u5217\u65b9\u5411\u8bbe\u5b9a.png\" alt=\"\u5b50\u5bb9\u5668\u7684\u6392\u5217\u65b9\u5411\u8bbe\u5b9a\" class=\"wp-image-23313\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5b50\u5bb9\u5668\u7684\u6392\u5217\u65b9\u5411\u8bbe\u5b9a.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5b50\u5bb9\u5668\u7684\u6392\u5217\u65b9\u5411\u8bbe\u5b9a-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">La direcci\u00f3n de disposici\u00f3n de los subcontenedores en Elementor est\u00e1 determinada por el contenedor principal, y su configuraci\u00f3n se encuentra en la pesta\u00f1a de \"Dise\u00f1o\", como se muestra en el cuadro rojo de la imagen anterior. En la secci\u00f3n \"Elemento\", se puede elegir la disposici\u00f3n de los subcontenedores, incluyendo la disposici\u00f3n horizontal o vertical, y ajustar la direcci\u00f3n espec\u00edfica de la disposici\u00f3n. Cuando se elige disposici\u00f3n horizontal, los subcontenedores se alinear\u00e1n de manera horizontal, y se podr\u00e1 configurar el orden de izquierda a derecha o de derecha a izquierda, seg\u00fan las necesidades del dise\u00f1o. Si se selecciona disposici\u00f3n vertical, los subcontenedores se apilar\u00e1n de manera vertical, y se podr\u00e1 ajustar el orden de arriba hacia abajo o de abajo hacia arriba. Estas configuraciones afectan directamente la disposici\u00f3n de los subcontenedores dentro del contenedor principal, y una configuraci\u00f3n adecuada no solo flexibiliza el dise\u00f1o de los elementos de la p\u00e1gina, sino que tambi\u00e9n mejora la sensaci\u00f3n de profundidad del dise\u00f1o en general.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"edit\" style=\"margin-bottom:30px\">5\u3001Editar y crear los elementos del encabezado y la barra de navegaci\u00f3n<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"429\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u7f16\u8f91\u521b\u5efa\u9875\u7709\u53ca\u5bfc\u822a\u680f\u7684\u5143\u7d20\u5185\u5bb9.png\" alt=\"\u7f16\u8f91\u521b\u5efa\u9875\u7709\u53ca\u5bfc\u822a\u680f\u7684\u5143\u7d20\u5185\u5bb9\" class=\"wp-image-23307\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u7f16\u8f91\u521b\u5efa\u9875\u7709\u53ca\u5bfc\u822a\u680f\u7684\u5143\u7d20\u5185\u5bb9.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u7f16\u8f91\u521b\u5efa\u9875\u7709\u53ca\u5bfc\u822a\u680f\u7684\u5143\u7d20\u5185\u5bb9-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Despu\u00e9s de completar la disposici\u00f3n b\u00e1sica del encabezado y la barra de navegaci\u00f3n, el siguiente paso es agregar componentes espec\u00edficos para hacer que estos elementos sean funcionales. Elementor ofrece varios componentes \u00fatiles para el encabezado, entre los cuales los m\u00e1s comunes y pr\u00e1cticos son el \"Logo del sitio\" (Site Logo), \"Men\u00fa de WordPress\" (WordPress Menu) y el \"Campo de b\u00fasqueda\" (Search). Al arrastrar estos componentes a los contenedores correspondientes y subir los materiales necesarios, se podr\u00e1 crear una estructura de encabezado completamente funcional. En la imagen de arriba, el bloguero ha subido el logo para el componente de \"Logo del sitio\" y ha configurado las condiciones de visualizaci\u00f3n para el \"Men\u00fa de WordPress\".<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"settings\">6\u3001Publicar el archivo de plantilla del encabezado y establecer condiciones de visualizaci\u00f3n<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-top:30px;margin-bottom:30px\">(1) Publicar el archivo de plantilla del encabezado<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"465\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u53d1\u5e03Header\u6a21\u677f\u6587\u4ef6.png\" alt=\"\u53d1\u5e03Header\u6a21\u677f\u6587\u4ef6\" class=\"wp-image-23306\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u53d1\u5e03Header\u6a21\u677f\u6587\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u53d1\u5e03Header\u6a21\u677f\u6587\u4ef6-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Despu\u00e9s de haber completado la disposici\u00f3n del encabezado utilizando los componentes del contenedor de Elementor, agregar los componentes comunes y subir los materiales necesarios, ya se puede publicar el archivo de plantilla del encabezado para que se aplique oficialmente en la p\u00e1gina. En el modo de edici\u00f3n de Elementor, el bot\u00f3n \"Publicar\" se encuentra en la parte inferior de la barra lateral izquierda, como se muestra en la imagen anterior. Al hacer clic en el bot\u00f3n \"Publicar\", el sistema mostrar\u00e1 una ventana emergente con las opciones de configuraci\u00f3n de condiciones de visualizaci\u00f3n, guiando al usuario para definir el alcance de aplicaci\u00f3n de esta plantilla de encabezado.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(2) Establecer las condiciones de visualizaci\u00f3n del archivo de plantilla del encabezado<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"451\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6.png\" alt=\"\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6\" class=\"wp-image-23308\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">En la ventana de configuraci\u00f3n de condiciones de visualizaci\u00f3n que se muestra en la imagen anterior, el usuario puede elegir aplicar el encabezado (Header) en todo el sitio web, en p\u00e1ginas espec\u00edficas, categor\u00edas de publicaciones o seg\u00fan otras condiciones personalizadas. Dado que el archivo de plantilla del encabezado es una parte global del sitio WordPress, es necesario asegurarse de que se aplique en todas las p\u00e1ginas. Siguiendo el orden de configuraci\u00f3n que muestra el bloguero en la imagen, en la ventana de configuraci\u00f3n de condiciones de visualizaci\u00f3n, seleccione \"Include &gt; Entire Site\", lo que significa que esta plantilla de encabezado se aplicar\u00e1 a todas las p\u00e1ginas del sitio. Despu\u00e9s de hacer la selecci\u00f3n, haga clic en el bot\u00f3n \"Guardar y Cerrar\" para aplicar y cerrar la ventana de operaci\u00f3n. El sistema aplicar\u00e1 autom\u00e1ticamente esta plantilla de encabezado a todas las p\u00e1ginas del sitio web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"element\" style=\"margin-bottom:30px\">tres\u3001Construir la estructura principal de la p\u00e1gina con Elementor y agregar los elementos de contenido<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"533\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u6784\u5efa\u9875\u9762\u4e3b\u4f53\u6846\u67b6\u5e76\u6dfb\u52a0\u5185\u5bb9\u5143\u7d20.png\" alt=\"Construir la estructura principal de la p\u00e1gina con Elementor y agregar los elementos de contenido\" class=\"wp-image-23324\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u6784\u5efa\u9875\u9762\u4e3b\u4f53\u6846\u67b6\u5e76\u6dfb\u52a0\u5185\u5bb9\u5143\u7d20.png 1000w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u6784\u5efa\u9875\u9762\u4e3b\u4f53\u6846\u67b6\u5e76\u6dfb\u52a0\u5185\u5bb9\u5143\u7d20-18x10.png 18w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Despu\u00e9s de completar el dise\u00f1o del encabezado y la barra de navegaci\u00f3n, el siguiente paso es construir la secci\u00f3n principal de contenido de la p\u00e1gina. Al igual que se describi\u00f3 en el cap\u00edtulo anterior sobre \"Uso del contenedor de Elementor para el dise\u00f1o del encabezado y la barra de navegaci\u00f3n\", el dise\u00f1o de la secci\u00f3n principal tambi\u00e9n depende del componente de contenedor de Elementor. La diferencia es que la secci\u00f3n principal generalmente incluye una variedad m\u00e1s amplia de elementos de contenido, como texto, im\u00e1genes, \u00edconos, videos, botones, formularios, entre otros, todos los cuales tienen componentes correspondientes en Elementor.\n\nEn la pr\u00e1ctica, solo es necesario manejar de manera flexible el ajuste del ancho del contenedor, la configuraci\u00f3n de m\u00e1rgenes internos y externos, y el m\u00e9todo de anidamiento de los subcontenedores para lograr diversas disposiciones de la p\u00e1gina. Por ejemplo, el uso de una distribuci\u00f3n adecuada de columnas puede crear una distribuci\u00f3n ordenada del contenido, mientras que combinar el ancho adaptable y el ajuste de m\u00e1rgenes puede hacer que la p\u00e1gina mantenga una buena apariencia visual en diferentes tama\u00f1os de pantalla. Esta es una de las grandes ventajas de Elementor, ya que permite a los usuarios construir estructuras de p\u00e1gina diversas sin necesidad de codificaci\u00f3n.<\/p>\n\n\n\n<p>Por lo tanto, al dise\u00f1ar la secci\u00f3n principal de la p\u00e1gina, es crucial planificar adecuadamente la estructura del contenedor. Un jerarqu\u00eda clara y ordenada de los contenedores no solo asegura una tipograf\u00eda est\u00e9tica, sino que tambi\u00e9n mejora la compatibilidad con dispositivos m\u00f3viles, permitiendo que el sitio web brinde la mejor experiencia de navegaci\u00f3n en diferentes dispositivos. A continuaci\u00f3n, el autor explicar\u00e1 paso a paso c\u00f3mo usar el componente de contenedor de Elementor para realizar la disposici\u00f3n y aplicaci\u00f3n de los elementos en la secci\u00f3n principal de la p\u00e1gina, de arriba hacia abajo, para hacer que la p\u00e1gina sea m\u00e1s din\u00e1mica y con mayor profundidad visual.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"block\" style=\"margin-bottom:30px\">1\u3001Bloque Banner<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"537\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Banner\u533a\u5757.png\" alt=\"Banner\u533a\u5757\u7684\u5e03\u5c40\u548c\u5185\u5bb9\u7f16\u8f91\" class=\"wp-image-23322\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Banner\u533a\u5757.png 1000w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Banner\u533a\u5757-18x10.png 18w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">En la secci\u00f3n del banner, por lo general solo se necesita un componente de elemento: el componente Slides de Elementor. Este componente permite implementar un carrusel de im\u00e1genes en la p\u00e1gina y viene con funciones integradas para configurar el t\u00edtulo, el texto y los enlaces. Por lo tanto, no es necesario anidar varios contenedores en el bloque de Banner; basta con colocar un solo contenedor en la parte superior.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">(1) Configuraci\u00f3n de par\u00e1metros comunes del componente Slides<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-top:30px;margin-bottom:30px\">Configuraci\u00f3n del fondo<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"725\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u80cc\u666f\u7684\u53c2\u6570\u8bbe\u7f6e.png\" alt=\"Configuraci\u00f3n del fondo\" class=\"wp-image-23326\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u80cc\u666f\u7684\u53c2\u6570\u8bbe\u7f6e.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u80cc\u666f\u7684\u53c2\u6570\u8bbe\u7f6e-13x12.png 13w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Como se muestra en la imagen anterior, al expandir la pesta\u00f1a de diapositivas (Slides), aparecer\u00e1n las opciones de configuraci\u00f3n del fondo marcadas en el recuadro rojo. En esta \u00e1rea, puedes subir la imagen de fondo para el carrusel, establecer un color de fondo y, en la pesta\u00f1a superior \"Contenido\", introducir el t\u00edtulo, la descripci\u00f3n y el texto del bot\u00f3n, adem\u00e1s de configurar la URL del bot\u00f3n.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-bottom:30px\">Configuraci\u00f3n de posicionamiento del contenido<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"609\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5185\u5bb9\u5b9a\u4f4d\u53c2\u6570\u8bbe\u7f6e.png\" alt=\"Configuraci\u00f3n de posicionamiento del contenido\" class=\"wp-image-23327\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5185\u5bb9\u5b9a\u4f4d\u53c2\u6570\u8bbe\u7f6e.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5185\u5bb9\u5b9a\u4f4d\u53c2\u6570\u8bbe\u7f6e-16x12.png 16w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Dentro de la pesta\u00f1a \u201cEstilo\u201d del \u00e1rea de configuraci\u00f3n del componente Slides, puedes establecer la ubicaci\u00f3n personalizada del contenido. De arriba hacia abajo, se pueden ajustar los siguientes par\u00e1metros: ancho del contenido, relleno, alineaci\u00f3n horizontal, alineaci\u00f3n vertical y alineaci\u00f3n del texto. Con estas opciones se puede personalizar la disposici\u00f3n del t\u00edtulo, la descripci\u00f3n y el bot\u00f3n dentro del carrusel.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-bottom:30px\">Estilo del texto<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"599\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6587\u672c\u7684\u6837\u5f0f\u8bbe\u7f6e.png\" alt=\"Estilo del texto\" class=\"wp-image-23329\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6587\u672c\u7684\u6837\u5f0f\u8bbe\u7f6e.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6587\u672c\u7684\u6837\u5f0f\u8bbe\u7f6e-16x12.png 16w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\">La ubicaci\u00f3n para configurar el estilo del texto, como se muestra en la imagen anterior, se encuentra en la misma pesta\u00f1a de \"Estilo\" que los \u201cpar\u00e1metros de posicionamiento del contenido\u201d mencionados anteriormente. Tal como se indica en la imagen, los tipos de texto (t\u00edtulo, descripci\u00f3n, bot\u00f3n) est\u00e1n marcados en un recuadro rojo; al hacer clic en el tipo de texto correspondiente, en la secci\u00f3n expandida de configuraci\u00f3n de estilo <strong><a href=\"https:\/\/www.w3.org\/Style\/CSS\/Overview.en.html\" data-type=\"link\" data-id=\"https:\/\/www.w3.org\/Style\/CSS\/Overview.en.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">CSS<\/a><\/strong>, podr\u00e1s personalizar el tama\u00f1o de fuente, el color y otros atributos del objeto de texto.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"business\" style=\"margin-bottom:30px\">2\u3001Bloque de descripci\u00f3n del negocio<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"409\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4e1a\u52a1\u63cf\u8ff0\u533a\u5757.png\" alt=\"Bloque de descripci\u00f3n del negocio\" class=\"wp-image-23332\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4e1a\u52a1\u63cf\u8ff0\u533a\u5757.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4e1a\u52a1\u63cf\u8ff0\u533a\u5757-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Los componentes de elementos de la secci\u00f3n de descripci\u00f3n de servicios pueden combinarse de forma flexible seg\u00fan las necesidades espec\u00edficas del dise\u00f1o de la p\u00e1gina. Por lo general, cuanta m\u00e1s informaci\u00f3n o elementos incluya esta secci\u00f3n, mayor ser\u00e1 la variedad de componentes necesarios. A diferencia del componente Slides utilizado com\u00fanmente en la secci\u00f3n del banner, las dem\u00e1s secciones de la p\u00e1gina no tienen un n\u00famero fijo de componentes requeridos; se pueden combinar libremente seg\u00fan el contenido deseado.\n\nPor ejemplo, en la secci\u00f3n de descripci\u00f3n de servicios que se muestra en la imagen, solo se han utilizado el componente de t\u00edtulo y el componente de bot\u00f3n, lo que da lugar a un dise\u00f1o limpio y claro. A continuaci\u00f3n, el autor explicar\u00e1 en detalle los par\u00e1metros comunes de configuraci\u00f3n de estos dos componentes, para ayudarte a dominarlos y aplicarlos con mayor facilidad.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">(1) Configuraciones com\u00fanmente utilizadas para componentes de t\u00edtulo<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-top:30px;margin-bottom:30px\">Configuraci\u00f3n en la pesta\u00f1a \"Contenido\" del componente de t\u00edtulo<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"465\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png\" alt=\"Configuraci\u00f3n en la pesta\u00f1a &quot;Contenido&quot; del componente de t\u00edtulo\" class=\"wp-image-23335\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\">Despu\u00e9s de seleccionar el componente de t\u00edtulo en el navegador de Elementor, como se muestra en la imagen anterior, el \u00e1rea de configuraci\u00f3n del componente en el lado izquierdo mostrar\u00e1 por defecto la pesta\u00f1a de \"Contenido\". En esta pesta\u00f1a se incluyen principalmente tres configuraciones importantes: el campo de entrada del contenido del t\u00edtulo, el campo de entrada del enlace del t\u00edtulo y la configuraci\u00f3n de la etiqueta HTML Hn. El contenido del t\u00edtulo es un campo obligatorio, ya que determina el texto que se mostrar\u00e1 en la p\u00e1gina. El campo de enlace es opcional y depende de las necesidades espec\u00edficas; en la mayor\u00eda de los casos, el t\u00edtulo no incluye un enlace. La configuraci\u00f3n de la etiqueta HTML Hn es crucial para la <strong><a href=\"https:\/\/www.szlogic.net\/es\/seo\/\" data-type=\"link\" data-id=\"https:\/\/www.szlogic.net\/seo\/\" target=\"_blank\" rel=\"noreferrer noopener\">optimizaci\u00f3n SEO<\/a><\/strong>. Seleccionar correctamente etiquetas como H1, H2, H3, etc., ayuda a los motores de b\u00fasqueda a identificar la estructura de la p\u00e1gina, y una configuraci\u00f3n adecuada puede mejorar la legibilidad del sitio web y su posicionamiento. Por lo tanto, al editar el componente de t\u00edtulo, adem\u00e1s de garantizar la precisi\u00f3n del contenido, tambi\u00e9n se deben configurar adecuadamente las etiquetas HTML seg\u00fan la estructura de la p\u00e1gina y las necesidades de SEO.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-bottom:30px\">Configuraci\u00f3n de estilo en la pesta\u00f1a \"Estilo\" del componente T\u00edtulo<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"380\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u6837\u5f0f\u8bbe\u5b9a\u9879.png\" alt=\"Configuraci\u00f3n de estilo en la pesta\u00f1a &quot;Estilo&quot; del componente T\u00edtulo\" class=\"wp-image-23337\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u6837\u5f0f\u8bbe\u5b9a\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u6837\u5f0f\u8bbe\u5b9a\u9879-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Los componentes de elementos del bloque de descripci\u00f3n de productos y servicios pueden combinarse de forma flexible seg\u00fan las necesidades espec\u00edficas del dise\u00f1o de la p\u00e1gina. En general, cuanta m\u00e1s informaci\u00f3n haya en este bloque, m\u00e1s componentes se necesitar\u00e1n. A diferencia del componente de diapositivas Slides utilizado en el bloque de banner, en el resto de bloques de la p\u00e1gina no hay un n\u00famero fijo de componentes requeridos, sino que se combinan libremente seg\u00fan el contenido.\n\nTomando como ejemplo el bloque de descripci\u00f3n de productos y servicios que se muestra en la imagen, este utiliza \u00fanicamente el componente de t\u00edtulo y varios componentes de bot\u00f3n, logrando un dise\u00f1o claro y visualmente ordenado. A continuaci\u00f3n, el autor explicar\u00e1 en detalle los par\u00e1metros comunes de estos dos componentes para ayudarte a comprender mejor su uso.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">(2) Configuraciones comunes del componente de bot\u00f3n<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-top:30px;margin-bottom:30px\">Configuraciones en la pesta\u00f1a \u201cContenido\u201d del componente de bot\u00f3n<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"396\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6309\u94ae\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png\" alt=\"Configuraciones en la pesta\u00f1a \u201cContenido\u201d del componente de bot\u00f3n\" class=\"wp-image-23339\"\/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Los elementos comunes de configuraci\u00f3n en la pesta\u00f1a \"Contenido\" del componente de bot\u00f3n, como se muestra en el recuadro rojo de la imagen, incluyen texto, enlace e icono. Entre estos tres, hay configuraciones obligatorias y opcionales. La entrada de texto es obligatoria, ya que el contenido del campo de texto ser\u00e1 el nombre del bot\u00f3n; el enlace tambi\u00e9n es obligatorio, ya que un bot\u00f3n sin enlace no tendr\u00eda sentido. La configuraci\u00f3n del icono, en cambio, puede ajustarse seg\u00fan nuestras necesidades de dise\u00f1o: si el bot\u00f3n no requiere un icono, se puede dejar la configuraci\u00f3n por defecto. Si se desea a\u00f1adir un icono al bot\u00f3n, se puede hacer clic en el bot\u00f3n correspondiente para acceder a la biblioteca de iconos de Elementor y seleccionar uno, o subir un archivo de icono personalizado.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-bottom:30px\">Configuraciones en la pesta\u00f1a \u201cEstilo\u201d del componente de bot\u00f3n<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"409\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6309\u94ae\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u6837\u5f0f\u8bbe\u5b9a\u9879.png\" alt=\"Configuraciones en la pesta\u00f1a \u201cEstilo\u201d del componente de bot\u00f3n\" class=\"wp-image-23340\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6309\u94ae\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u6837\u5f0f\u8bbe\u5b9a\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6309\u94ae\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u6837\u5f0f\u8bbe\u5b9a\u9879-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">La pesta\u00f1a \u201cEstilo\u201d del componente de bot\u00f3n incluye m\u00faltiples elementos de configuraci\u00f3n, como se muestra en la imagen. Comparado con el componente de t\u00edtulo, las opciones de estilo del bot\u00f3n son m\u00e1s completas y permiten un ajuste preciso de su apariencia y experiencia interactiva.\n\nPrimero, los ajustes de alineaci\u00f3n determinan c\u00f3mo se posiciona el bot\u00f3n dentro del contenedor: centrado, alineado a la izquierda o a la derecha. Los ajustes de tipograf\u00eda son similares a los de otros componentes y permiten modificar la fuente, tama\u00f1o, peso, etc. La opci\u00f3n de color del texto permite definir diferentes colores para el estado normal y el estado de hover (cuando el rat\u00f3n pasa por encima), asegurando la legibilidad y retroalimentaci\u00f3n visual.<\/p>\n\n\n\n<p>Adem\u00e1s, el ajuste de bordes redondeados controla la curvatura del borde del bot\u00f3n, permitiendo configurarlo como de esquinas rectas, redondeadas o completamente circular. El sombreado permite agregar sombra al bot\u00f3n para darle un efecto tridimensional que invita al clic. Finalmente, los ajustes de espaciado interno (padding) determinan el espacio entre el texto interno y el borde del bot\u00f3n, lo que ayuda a equilibrar el tama\u00f1o visual y mejorar la apariencia.\n\nMediante el uso combinado de estas configuraciones de estilo, se puede dise\u00f1ar un bot\u00f3n visualmente atractivo y alineado con las necesidades del dise\u00f1o de la p\u00e1gina.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"product\" style=\"margin-bottom:30px\">3\u3001Bloque de productos y servicios<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"427\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4ea7\u54c1\u548c\u670d\u52a1\u533a\u5757.png\" alt=\"Bloque de productos y servicios\" class=\"wp-image-23342\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4ea7\u54c1\u548c\u670d\u52a1\u533a\u5757.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4ea7\u54c1\u548c\u670d\u52a1\u533a\u5757-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">La estructura de anidamiento de contenedores en la secci\u00f3n de productos y servicios es m\u00e1s compleja y con mayor jerarqu\u00eda en comparaci\u00f3n con las secciones presentadas anteriormente. Como se muestra en la imagen, el subcontenedor derecho utiliza el componente de galer\u00eda (Gallery) para mostrar tres im\u00e1genes relacionadas con productos o servicios, cada una con texto adicional para mejorar la expresi\u00f3n visual y la explicaci\u00f3n del contenido. En el subcontenedor izquierdo, se emplean el componente de encabezado junto con varios componentes de botones para lograr una gu\u00eda de texto clara y efectos de interacci\u00f3n.<\/p>\n\n\n\n<p>El componente de galer\u00eda ofrece m\u00faltiples opciones de dise\u00f1o y configuraci\u00f3n de par\u00e1metros, como se muestra en el \u00e1rea de configuraci\u00f3n del lado izquierdo de la imagen. Es posible ajustar el modo de disposici\u00f3n de las im\u00e1genes, el n\u00famero de columnas, el espaciado y el tipo de enlace. En este caso, la galer\u00eda utiliza una disposici\u00f3n de 4 columnas y tiene activada la funci\u00f3n de carga diferida (Lazy Load) para mejorar el rendimiento de la p\u00e1gina. El componente de encabezado en el subcontenedor izquierdo est\u00e1 configurado con una fuente de gran tama\u00f1o para garantizar un efecto visual llamativo. Debajo, varios botones sirven para guiar al usuario a diferentes categor\u00edas de productos y servicios. El color del bot\u00f3n, el estilo del borde y el contenido del texto se pueden ajustar a\u00fan m\u00e1s en la pesta\u00f1a \u201cEstilo\u201d para garantizar la coherencia con el dise\u00f1o general. En las secciones anteriores, el bloguero ya ha explicado en detalle la configuraci\u00f3n de par\u00e1metros y estilos de los componentes de encabezado y bot\u00f3n. A continuaci\u00f3n, se centrar\u00e1 en analizar el componente Gallery (galer\u00eda), que a\u00fan no ha sido abordado en esta secci\u00f3n, explicando en profundidad su configuraci\u00f3n de par\u00e1metros y ajustes de estilo para ayudar a los usuarios a utilizar este componente con mayor flexibilidad en la disposici\u00f3n de im\u00e1genes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(1) Configuraci\u00f3n en la pesta\u00f1a \u201cContenido\u201d del componente de galer\u00eda<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"514\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u753b\u5eca\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png\" alt=\"\u753b\u5eca\u7ec4\u4ef6\u201c\u5185\u5bb9\u201d\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879\" class=\"wp-image-23346\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u753b\u5eca\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u753b\u5eca\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">En la pesta\u00f1a \u201cContenido\u201d, el componente de galer\u00eda (Gallery) ofrece m\u00faltiples opciones de configuraci\u00f3n clave para ayudar a los usuarios a personalizar de forma flexible la forma en que se muestran las im\u00e1genes. Primero, en la opci\u00f3n Type (Tipo), se puede elegir el formato de visualizaci\u00f3n de la galer\u00eda, como imagen \u00fanica (Single) o cuadr\u00edcula (Grid), para adaptarse a diferentes necesidades de dise\u00f1o de p\u00e1gina. A continuaci\u00f3n se encuentra el \u00e1rea de selecci\u00f3n de im\u00e1genes, donde se muestra la lista de im\u00e1genes ya a\u00f1adidas. Los usuarios pueden hacer clic en el bot\u00f3n de suma para subir nuevas im\u00e1genes o eliminar las que no necesiten. La opci\u00f3n Order By (Ordenar por) permite establecer el criterio de orden de las im\u00e1genes, por ejemplo, en orden predeterminado o de manera aleatoria. La opci\u00f3n Lazy Load (Carga diferida) permite a los usuarios activar o desactivar esta funci\u00f3n, que mejora el rendimiento de la p\u00e1gina, especialmente en galer\u00edas con muchas im\u00e1genes.<\/p>\n\n\n\n<p>La opci\u00f3n Layout (Dise\u00f1o) determina c\u00f3mo se organizan las im\u00e1genes. En el ejemplo mostrado, se ha seleccionado el dise\u00f1o en cuadr\u00edcula (Grid). La opci\u00f3n Columns (Columnas) establece el n\u00famero de columnas en la galer\u00eda, permitiendo ajustar la estructura de las im\u00e1genes para adaptarse a distintos anchos de p\u00e1gina. La opci\u00f3n Spacing (Espaciado) controla la separaci\u00f3n entre im\u00e1genes. Los usuarios pueden ajustarla con un control deslizante para aumentar o reducir el espacio y as\u00ed optimizar el efecto visual. En la opci\u00f3n Link (Enlace), los usuarios pueden configurar el comportamiento al hacer clic en las im\u00e1genes de la galer\u00eda, como enlazar al archivo multimedia para ver la imagen original o redirigir a una p\u00e1gina espec\u00edfica. La opci\u00f3n Lightbox (Efecto de ventana emergente) permite habilitar una visualizaci\u00f3n emergente de la imagen, ofreciendo una mejor experiencia de navegaci\u00f3n. Por \u00faltimo, la opci\u00f3n Aspect Ratio (Relaci\u00f3n de aspecto) controla las proporciones de visualizaci\u00f3n de las im\u00e1genes. En este caso, el bloguero ha configurado una relaci\u00f3n de 9:16 para mostrar las im\u00e1genes con forma vertical. Mediante estas opciones, los usuarios pueden personalizar el efecto visual del componente de galer\u00eda, adapt\u00e1ndolo a diferentes estilos de dise\u00f1o de p\u00e1gina y mejorando el impacto visual del sitio web.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(2) Configuraci\u00f3n en la pesta\u00f1a \u201cEstilo\u201d del componente de galer\u00eda<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"529\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u753b\u5eca\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png\" alt=\"\u753b\u5eca\u7ec4\u4ef6\u201c\u6837\u5f0f\u201d\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879\" class=\"wp-image-23347\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u753b\u5eca\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u753b\u5eca\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">En la pesta\u00f1a \u201cEstilo\u201d, el componente de galer\u00eda (Gallery) ofrece m\u00faltiples opciones de configuraci\u00f3n para que los usuarios puedan personalizar la apariencia de la galer\u00eda. En la secci\u00f3n Image (Imagen), se permite ajustar el borde, los bordes redondeados y las animaciones al pasar el cursor para mejorar la presentaci\u00f3n visual. Dentro de la configuraci\u00f3n de Image (Imagen), los usuarios pueden alternar entre los estados Normal y Hover (Pasar el cursor), y establecer estilos diferentes para cada uno.\n\nEn el estado Normal, se pueden ajustar el Border Color (Color del borde), Border Width (Ancho del borde) y Border Radius (Radio del borde redondeado) para definir el estilo del borde de la imagen. Adem\u00e1s, se admite el uso de filtros CSS (CSS Filters), lo que permite aplicar efectos como brillo, contraste y saturaci\u00f3n para mejorar la profundidad visual.<\/p>\n\n\n\n<p>En el estado Hover (al pasar el cursor), se pueden agregar distintos efectos interactivos, como Hover Animation (Animaci\u00f3n al pasar el cursor), con soporte para varios tipos de animaci\u00f3n que hacen que la imagen tenga un cambio din\u00e1mico cuando se pasa el mouse por encima. La opci\u00f3n Animation Duration (Duraci\u00f3n de la animaci\u00f3n) permite ajustar la velocidad de reproducci\u00f3n de la animaci\u00f3n, garantizando una experiencia fluida para el usuario. Adem\u00e1s, las opciones Overlay (Capa superpuesta) y Content (Contenido) permiten personalizar a\u00fan m\u00e1s los efectos superpuestos en la galer\u00eda y los textos mostrados sobre las im\u00e1genes, ayudando a lograr una presentaci\u00f3n visual m\u00e1s refinada. A trav\u00e9s de estas configuraciones, se puede ajustar de forma flexible el estilo general de la galer\u00eda para que se alinee con el dise\u00f1o del sitio web y las necesidades de interacci\u00f3n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"core\" style=\"margin-bottom:30px\">4\u3001Bloque de ventajas principales del producto<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"457\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4ea7\u54c1\u6838\u5fc3\u4f18\u52bf\u5f15\u5bfc\u533a\u5757.png\" alt=\"Bloque de ventajas principales del producto\" class=\"wp-image-23348\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4ea7\u54c1\u6838\u5fc3\u4f18\u52bf\u5f15\u5bfc\u533a\u5757.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4ea7\u54c1\u6838\u5fc3\u4f18\u52bf\u5f15\u5bfc\u533a\u5757-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">El bloque de gu\u00eda de ventajas clave del producto utiliza los mismos componentes que el \u201cbloque de descripci\u00f3n del negocio\u201d presentado anteriormente. La \u00fanica diferencia es que en este bloque se ha a\u00f1adido un elemento de imagen de fondo al contenedor. Este ajuste introduce un nuevo punto de conocimiento, por lo tanto, en esta secci\u00f3n el autor explicar\u00e1 c\u00f3mo agregar una imagen de fondo a un contenedor. En cuanto a la configuraci\u00f3n de par\u00e1metros y funciones de los componentes de t\u00edtulo, editor de texto y bot\u00f3n, los lectores pueden consultar el bloque de descripci\u00f3n del negocio para practicar y aplicar la disposici\u00f3n del contenedor y la configuraci\u00f3n de los componentes de los elementos<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(1) M\u00e9todo para agregar una imagen de fondo al contenedor<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"524\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u6dfb\u52a0\u80cc\u666f\u56fe\u7247\u7684\u64cd\u4f5c\u65b9\u6cd5.png\" alt=\"\u5bb9\u5668\u6dfb\u52a0\u80cc\u666f\u56fe\u7247\u7684\u64cd\u4f5c\u65b9\u6cd5\" class=\"wp-image-23355\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u6dfb\u52a0\u80cc\u666f\u56fe\u7247\u7684\u64cd\u4f5c\u65b9\u6cd5.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u6dfb\u52a0\u80cc\u666f\u56fe\u7247\u7684\u64cd\u4f5c\u65b9\u6cd5-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px;margin-bottom:30px\">Para agregar una imagen de fondo al componente de contenedor en Elementor, es necesario acceder a la pesta\u00f1a \u201cEstilo\u201d del contenedor para realizar los ajustes correspondientes. Primero, seleccione el contenedor al que desea agregar una imagen de fondo y, en el panel de configuraci\u00f3n del lado izquierdo, cambie a la pesta\u00f1a \u201cEstilo\u201d. En esta \u00e1rea de operaci\u00f3n, despliegue la secci\u00f3n de configuraci\u00f3n \u201cFondo\u201d y podr\u00e1 ver la opci\u00f3n \u201cSuperposici\u00f3n de fondo\u201d. En el tipo de fondo, seleccione la opci\u00f3n de imagen y cargue o seleccione desde la biblioteca de medios la imagen de fondo deseada. Una vez seleccionada la imagen, puede ajustar a\u00fan m\u00e1s la forma en que se muestra. Primero, la resoluci\u00f3n de la imagen puede mantenerse como \u201cOriginal\u201d o ajustarse seg\u00fan sea necesario. A continuaci\u00f3n, en la opci\u00f3n \u201cPosici\u00f3n\u201d, elija una alineaci\u00f3n adecuada, como \u201cCentro centro\u201d, que garantiza que la imagen se mantenga centrada. La opci\u00f3n \u201cAdjunto de fondo\u201d determina si el fondo se mover\u00e1 al desplazarse por la p\u00e1gina; si desea que el fondo permanezca fijo en la ventana, puede seleccionar el modo \u201cFijo\u201d. En la configuraci\u00f3n de \u201cRepetir fondo\u201d, puede seleccionar \u201cNo repetir\u201d para evitar que una imagen de tama\u00f1o peque\u00f1o se repita en mosaico. Adem\u00e1s, en la opci\u00f3n \u201cTama\u00f1o de visualizaci\u00f3n\u201d, seleccionar \u201cCubrir\u201d permite que la imagen llene completamente el contenedor sin dejar espacios en blanco. A trav\u00e9s de estas configuraciones, los usuarios pueden controlar con precisi\u00f3n la visualizaci\u00f3n de la imagen de fondo del contenedor para que se ajuste mejor a las necesidades del dise\u00f1o de la p\u00e1gina.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"brand\" style=\"margin-bottom:30px\">5\u3001Bloque de historia de la marca<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"430\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u54c1\u724c\u6545\u4e8b\u533a\u5757.png\" alt=\"Bloque de historia de la marca\" class=\"wp-image-23352\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u54c1\u724c\u6545\u4e8b\u533a\u5757.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u54c1\u724c\u6545\u4e8b\u533a\u5757-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">La disposici\u00f3n del contenedor y los componentes de elementos utilizados en el bloque de historia de la marca son consistentes con el bloque de \u201cProductos y servicios\u201d mencionado anteriormente. Tambi\u00e9n se utilizan tres componentes: el componente de t\u00edtulo, el componente de bot\u00f3n y el componente de galer\u00eda (Gallery) para cargar el contenido. Al mismo tiempo, la estructura general sigue siendo un contenedor principal que contiene dos subcontenedores. Los lectores solo necesitan aplicar los conocimientos previos sobre la configuraci\u00f3n de par\u00e1metros del contenedor, el m\u00e9todo de anidamiento, as\u00ed como los ajustes de par\u00e1metros y estilos de estos tres componentes, para lograr el dise\u00f1o del bloque de \u201cHistoria de la marca\u201d mostrado en la imagen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"information\" style=\"margin-bottom:30px\">6\u3001Bloque de \u00faltimas noticias<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"432\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6700\u65b0\u4fe1\u606f\u533a\u5757.png\" alt=\"Bloque de \u00faltimas noticias\" class=\"wp-image-23354\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6700\u65b0\u4fe1\u606f\u533a\u5757.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6700\u65b0\u4fe1\u606f\u533a\u5757-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Para que los metadatos del componente Post de Elementor se muestren en formato ingl\u00e9s en la p\u00e1gina, primero es necesario cambiar el idioma del sitio de WordPress al ingl\u00e9s. Esto se debe a que la interfaz de edici\u00f3n de Elementor y parte de los metadatos leen por defecto el idioma del sitio y se muestran en consecuencia. Por lo tanto, como se muestra en la captura de pantalla anterior, la configuraci\u00f3n de par\u00e1metros y estilos del componente Post tambi\u00e9n se presenta en ingl\u00e9s. A continuaci\u00f3n, el autor explicar\u00e1 la configuraci\u00f3n de funciones clave del componente Post y los m\u00e9todos para ajustar su estilo, con el fin de que todos puedan aplicar mejor este componente.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(1) Configuraci\u00f3n en la pesta\u00f1a \"Contenido\" del componente de publicaci\u00f3n<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"434\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/post\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png\" alt=\"post\u7ec4\u4ef6\u201c\u5185\u5bb9\u201d\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879\" class=\"wp-image-23359\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/post\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/post\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">En el componente Post de Elementor, la pesta\u00f1a \u201cContenido\u201d ofrece una serie de configuraciones clave que se utilizan para controlar el dise\u00f1o y la forma en que se muestran las listas de publicaciones. Los detalles de cada configuraci\u00f3n son los siguientes: mediante estas opciones, los usuarios pueden ajustar de manera flexible la forma en que se presenta el contenido del componente Post, adapt\u00e1ndolo mejor al estilo de dise\u00f1o de la p\u00e1gina.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"translation-block\"><strong>Layout (Dise\u00f1o):<\/strong> La secci\u00f3n de dise\u00f1o permite a los usuarios elegir el estilo de presentaci\u00f3n del art\u00edculo, donde la opci\u00f3n \u201cSkin\u201d se utiliza para definir el estilo general, como el modo \u201cCards\u201d que organiza el contenido del art\u00edculo en forma de tarjetas. La siguiente opci\u00f3n \u201cColumns\u201d especifica el n\u00famero de columnas en la lista de art\u00edculos, mientras que \u201cPosts Per Page\u201d determina cu\u00e1ntos art\u00edculos se muestran por p\u00e1gina.<\/li>\n\n\n\n<li class=\"translation-block\"><strong>Image (Imagen):<\/strong> La configuraci\u00f3n relacionada con las im\u00e1genes incluye el interruptor \u201cShow Image\u201d, que controla la visualizaci\u00f3n de la miniatura del art\u00edculo; la opci\u00f3n \u201cMasonry\u201d habilita el dise\u00f1o en cascada, alineando las im\u00e1genes y bloques de art\u00edculos a diferentes alturas para mejorar el efecto visual. \u201cImage Resolution\u201d permite a los usuarios establecer la resoluci\u00f3n de la imagen, por ejemplo, \u201cMedium 0.3x\u201d reduce la carga de las im\u00e1genes, mientras que \u201cImage Ratio\u201d ajusta la relaci\u00f3n de aspecto de la imagen para asegurar la coherencia en el dise\u00f1o general.<\/li>\n\n\n\n<li class=\"translation-block\"><strong>Title (T\u00edtulo):<\/strong> La secci\u00f3n de t\u00edtulo ofrece el interruptor \u201cShow\u201d, que decide si se muestra el t\u00edtulo del art\u00edculo, y permite elegir la etiqueta HTML a trav\u00e9s de \u201cTitle HTML Tag\u201d, como H3, lo que afecta al peso SEO y el nivel de estilo.<\/li>\n\n\n\n<li class=\"translation-block\"><strong>Excerpt (Resumen):<\/strong> La secci\u00f3n de resumen se utiliza para configurar la visualizaci\u00f3n del extracto del art\u00edculo. El interruptor \u201cShow\u201d decide si se muestra el extracto, mientras que \u201cExcerpt Length\u201d controla la cantidad de caracteres del extracto para mantener el dise\u00f1o de la p\u00e1gina limpio. Adem\u00e1s, la opci\u00f3n \u201cApply to custom Excerpt\u201d permite aplicar los ajustes del extracto a los campos de contenido personalizados.<\/li>\n\n\n\n<li class=\"translation-block\"><strong>Meta Data (Metadatos):<\/strong> En la secci\u00f3n de metadatos, se puede elegir si mostrar informaci\u00f3n adicional sobre el art\u00edculo, como la fecha, hora, categor\u00eda, etiquetas, autor, entre otros, para hacer que la lista de art\u00edculos sea m\u00e1s completa y rica en informaci\u00f3n. En la captura de pantalla, se puede ver que la fecha (Date), hora (Time) y n\u00famero de comentarios (Comments) est\u00e1n habilitados.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(2) Configuraciones en la pesta\u00f1a \"Estilo\" del componente de publicaci\u00f3n<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"427\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/post\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png\" alt=\"post\u7ec4\u4ef6\u201c\u6837\u5f0f\u201d\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879\" class=\"wp-image-23358\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/post\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/post\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">En el componente Post de Elementor, la pesta\u00f1a \u201cEstilo\u201d ofrece una serie de opciones de ajuste visual que abarcan el dise\u00f1o general, el estilo de las im\u00e1genes, el estilo del texto y la configuraci\u00f3n de los espacios, con el fin de garantizar que el aspecto visual de la lista de publicaciones se alinee con el estilo de dise\u00f1o del sitio web. A trav\u00e9s de estas configuraciones en la pesta\u00f1a \u201cEstilo\u201d, los usuarios pueden ajustar de forma detallada la apariencia visual del componente Post, haciendo que se adapte mejor a la identidad de marca y a los requisitos generales de dise\u00f1o del sitio web. A continuaci\u00f3n se detallan las opciones de personalizaci\u00f3n disponibles en el estilo del componente Post:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"translation-block\"><strong>Layout (Dise\u00f1o):<\/strong> La secci\u00f3n de dise\u00f1o permite a los usuarios ajustar el tama\u00f1o general del componente de la publicaci\u00f3n, incluyendo los par\u00e1metros de ancho y alto de las tarjetas. Estos ajustes ayudan a los usuarios a optimizar la forma en que los bloques de art\u00edculos ocupan el espacio, adapt\u00e1ndose mejor a diferentes disposiciones de p\u00e1gina.<\/li>\n\n\n\n<li class=\"translation-block\"><strong>Image (Imagen):<\/strong> La secci\u00f3n de imagen ofrece ajustes detallados sobre el estilo de la miniatura del art\u00edculo, incluyendo el radio de borde (Border Radius), el borde (Border) y el efecto de sombra (Box Shadow). Los usuarios pueden ajustar estos par\u00e1metros para lograr diferentes estilos visuales en las im\u00e1genes, como dise\u00f1os cuadrados, redondeados o con un efecto tridimensional.<\/li>\n\n\n\n<li class=\"translation-block\"><strong>Content (Contenido):<\/strong> La secci\u00f3n de contenido abarca la configuraci\u00f3n de estilo de los elementos internos del art\u00edculo, como el t\u00edtulo, el resumen, el bot\u00f3n \"Read More\" y los metadatos (Meta Data). En la configuraci\u00f3n del t\u00edtulo (Title), los usuarios pueden ajustar el tama\u00f1o de la fuente, el color, el grosor de la fuente y el espaciado, para darle al t\u00edtulo m\u00e1s jerarqu\u00eda en la lista. La secci\u00f3n de resumen (Excerpt) tambi\u00e9n permite ajustes en el estilo de la fuente para garantizar la legibilidad y la est\u00e9tica del extracto del art\u00edculo. Adem\u00e1s, la secci\u00f3n de metadatos (Meta Data) permite personalizar la fuente y el color de informaci\u00f3n como la fecha, la categor\u00eda, las etiquetas, etc., lo que hace que la jerarqu\u00eda de la informaci\u00f3n en la lista de art\u00edculos sea m\u00e1s clara.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"file\" style=\"margin-bottom:30px\">cuatro\u3001Crear la plantilla de footer (pie de p\u00e1gina) con Elementor<\/h2>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"399\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u521b\u5efafooter\uff08\u9875\u811a\uff09\u6a21\u677f\u6587\u4ef6.png\" alt=\"Crear la plantilla de footer (pie de p\u00e1gina) con Elementor\" class=\"wp-image-23364\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u521b\u5efafooter\uff08\u9875\u811a\uff09\u6a21\u677f\u6587\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u521b\u5efafooter\uff08\u9875\u811a\uff09\u6a21\u677f\u6587\u4ef6-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">La secci\u00f3n del Footer (pie de p\u00e1gina) es la \u00faltima parte demostrativa de este art\u00edculo, en la que se explica c\u00f3mo crear y personalizar la estructura y los elementos de la p\u00e1gina. Una vez completado el dise\u00f1o y la disposici\u00f3n del pie de p\u00e1gina, la estructura general de la p\u00e1gina estar\u00e1 b\u00e1sicamente finalizada, convirti\u00e9ndose en una p\u00e1gina completa. El punto de entrada para crear el archivo de plantilla del pie de p\u00e1gina es el mismo que para el Header (encabezado), accediendo desde la interfaz del generador de temas de Elementor en el front-end de la p\u00e1gina. Dentro de la interfaz de administraci\u00f3n del generador de temas, los usuarios pueden encontrar la opci\u00f3n Footer (pie de p\u00e1gina) en el directorio de plantillas del lado izquierdo, ubicada como la segunda opci\u00f3n del men\u00fa. Al hacer clic en ella, se accede a la interfaz de gesti\u00f3n del pie de p\u00e1gina. En esta interfaz, haciendo clic en el bot\u00f3n \u201cAdd New\u201d en la esquina superior derecha, se puede crear un nuevo archivo de plantilla para el pie de p\u00e1gina. Durante el proceso de creaci\u00f3n, Elementor ofrece una serie de estilos de pie de p\u00e1gina predise\u00f1ados que el usuario puede seleccionar directamente para completar r\u00e1pidamente el dise\u00f1o. Si se desea un dise\u00f1o completamente personalizado, tambi\u00e9n se puede cerrar la ventana de selecci\u00f3n de estilos y utilizar contenedores y componentes de elementos para dise\u00f1ar libremente una plantilla de pie de p\u00e1gina que se ajuste al estilo del sitio web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"common\" style=\"margin-bottom:30px\">1\u3001Formatos comunes de dise\u00f1o de Footer<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2532\" height=\"1438\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Footer\u5e38\u89c1\u5bb9\u5668\u5e03\u5c40\u5f62\u5f0f.png\" alt=\"Footer\u5e38\u89c1\u5bb9\u5668\u5e03\u5c40\u5f62\u5f0f\" class=\"wp-image-23369\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Footer\u5e38\u89c1\u5bb9\u5668\u5e03\u5c40\u5f62\u5f0f.png 2532w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Footer\u5e38\u89c1\u5bb9\u5668\u5e03\u5c40\u5f62\u5f0f-18x10.png 18w\" sizes=\"(max-width: 2532px) 100vw, 2532px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">A trav\u00e9s del aprendizaje y la pr\u00e1ctica de las secciones anteriores, los lectores deber\u00edan haber comprendido que, ya sea una estructura de p\u00e1gina simple o compleja, mientras dominemos la configuraci\u00f3n de par\u00e1metros del contenedor padre, la direcci\u00f3n de disposici\u00f3n y los m\u00e9todos de anidamiento de contenedores hijos mencionados anteriormente, cualquier formato de dise\u00f1o que deseemos puede lograrse. El dise\u00f1o del pie de p\u00e1gina, como se muestra en la imagen anterior, no es complicado; generalmente se realiza anidando varios contenedores hijos dentro de un contenedor padre, y la direcci\u00f3n de disposici\u00f3n de los contenedores hijos depende de las necesidades del dise\u00f1o. En esta demostraci\u00f3n, el bloguero ha dispuesto el pie de p\u00e1gina en un formato de tres filas para organizar los contenedores hijos, y dentro del contenedor hijo de la segunda capa, se han anidado tres contenedores hijos dispuestos en columnas. Una vez que se organiza la disposici\u00f3n de los contenedores, podemos comenzar a a\u00f1adir los componentes de elementos correspondientes dentro de los contenedores hijos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"component\" style=\"margin-bottom:30px\">2\u3001Componentes comunes en el Footer<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"539\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Footer\uff08\u9875\u811a\uff09\u5e38\u7528\u7684\u7ec4\u4ef6.png\" alt=\"Componentes comunes en el Footer\" class=\"wp-image-23370\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Footer\uff08\u9875\u811a\uff09\u5e38\u7528\u7684\u7ec4\u4ef6.png 1000w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Footer\uff08\u9875\u811a\uff09\u5e38\u7528\u7684\u7ec4\u4ef6-18x10.png 18w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">El pie de p\u00e1gina, como la secci\u00f3n estructural situada en la parte inferior del sitio web, aunque no contiene tanta informaci\u00f3n como el cuerpo principal de la p\u00e1gina ni tiene la funci\u00f3n de navegaci\u00f3n dominante como el encabezado, sigue cumpliendo funciones muy pr\u00e1cticas, como mostrar informaci\u00f3n de derechos de autor, datos de contacto, enlaces a redes sociales, navegaci\u00f3n secundaria, formularios de suscripci\u00f3n, entre otros. En el dise\u00f1o real, la complejidad del pie de p\u00e1gina suele depender del estilo general del sitio web y de las necesidades funcionales, pudiendo ser muy sencillo o relativamente completo. En su experiencia de creaci\u00f3n de sitios, el bloguero ha desarrollado, seg\u00fan las necesidades de diferentes proyectos, un conjunto eficiente y pr\u00e1ctico de combinaciones de componentes para pies de p\u00e1gina. Aunque cada sitio web tiene una orientaci\u00f3n distinta, con un uso adecuado de estos componentes comunes, es posible crear una secci\u00f3n de pie de p\u00e1gina bien estructurada, visualmente armoniosa y funcionalmente completa, incluso sin recurrir a dise\u00f1os recargados. En los siguientes contenidos, el bloguero presentar\u00e1 la configuraci\u00f3n funcional y el estilo de estos componentes, para que su apariencia est\u00e9 alineada con el dise\u00f1o planificado, y as\u00ed tu sitio web en WordPress tambi\u00e9n refleje profesionalismo y calidad en los detalles.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(1) Componente del logotipo del sitio<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"514\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Site-Logo\u7ec4\u4ef6.png\" alt=\"Site Logo\u7ec4\u4ef6\" class=\"wp-image-23376\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Site-Logo\u7ec4\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Site-Logo\u7ec4\u4ef6-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Aunque el componente Site Logo ya se utiliz\u00f3 en el cap\u00edtulo sobre el \"Archivo de plantilla del encabezado\", en ese momento nos centramos principalmente en la disposici\u00f3n general y la combinaci\u00f3n de componentes, sin profundizar en las funciones y detalles de estilo del propio componente Site Logo. Por lo tanto, en esta secci\u00f3n, el bloguero proporcionar\u00e1 una explicaci\u00f3n complementaria sobre las pesta\u00f1as de \"Contenido\" y \"Estilo\" de este componente, para ayudar a los lectores a comprender mejor su uso en diferentes contextos.<\/p>\n\n\n\n<p>En la pesta\u00f1a \"Contenido\" del componente Site Logo, el usuario puede elegir si desea utilizar el logo del sitio configurado desde el panel de administraci\u00f3n de WordPress o subir una imagen personalizada como logo. Adem\u00e1s de seleccionar la imagen, este panel tambi\u00e9n permite configurar el comportamiento del enlace del logo (por ejemplo, si al hacer clic redirige a la p\u00e1gina de inicio) y el tama\u00f1o de la imagen del logo (se puede seleccionar entre predeterminado, miniatura, tama\u00f1o medio, entre otros tama\u00f1os definidos por WordPress). En cuanto a la pesta\u00f1a \"Estilo\", esta ofrece m\u00e1s opciones para controlar la apariencia visual del logo. Desde este panel se puede personalizar el ancho y el ancho m\u00e1ximo del logo, adapt\u00e1ndolo a las necesidades de visualizaci\u00f3n en diferentes resoluciones; tambi\u00e9n se puede ajustar la opacidad de la imagen, aplicar filtros CSS (como escala de grises, brillo, contraste, etc.), lo cual permite que el logo se integre mejor con el estilo general de la p\u00e1gina. Adem\u00e1s, en la secci\u00f3n de \"Estilo\" tambi\u00e9n se pueden configurar bordes, esquinas redondeadas y efectos de sombra, proporcionando una presentaci\u00f3n m\u00e1s din\u00e1mica del logo. Estos ajustes de estilo no solo mejoran la coherencia visual, sino que tambi\u00e9n aseguran que el logo mantenga una apariencia \u00f3ptima en distintos dispositivos y estilos de tema.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(2) Componente de t\u00edtulo<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"489\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6.png\" alt=\"\u6807\u9898\u7ec4\u4ef6\" class=\"wp-image-23377\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\">La configuraci\u00f3n funcional y de estilo del componente de t\u00edtulo ya se explic\u00f3 en la tercera secci\u00f3n de este art\u00edculo, titulada \u201c<strong>Usar Elementor para construir la estructura principal de la p\u00e1gina y agregar elementos de contenido<\/strong>\u201d, espec\u00edficamente en el subt\u00edtulo del \u201cbloque de descripci\u00f3n de negocio\u201d, por lo que el autor no repetir\u00e1 la explicaci\u00f3n aqu\u00ed. Simplemente aplica los m\u00e9todos de uso del componente de t\u00edtulo aprendidos en el contenido anterior para ponerlos en pr\u00e1ctica.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(3) Componente de lista de iconos<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"493\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u56fe\u6807\u5217\u8868\u7ec4\u4ef6.png\" alt=\"\u56fe\u6807\u5217\u8868\u7ec4\u4ef6\" class=\"wp-image-23378\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u56fe\u6807\u5217\u8868\u7ec4\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u56fe\u6807\u5217\u8868\u7ec4\u4ef6-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">En el componente \"Lista de \u00edconos\" de Elementor, la pesta\u00f1a \"Contenido\" se utiliza principalmente para configurar el contenido espec\u00edfico y la estructura de cada elemento de la lista. Puedes agregar los elementos que deseas mostrar uno por uno, y asignar a cada uno un \u00edcono, como una marca de verificaci\u00f3n, una flecha, un \u00edcono de tel\u00e9fono, etc., para mejorar la identificaci\u00f3n de la informaci\u00f3n. Por supuesto, tambi\u00e9n puedes eliminar el \u00edcono como en la configuraci\u00f3n demostrada por el bloguero; basta con borrar el \u00edcono en el campo correspondiente. Cada elemento de la lista permite personalizar el texto del t\u00edtulo y establecer una direcci\u00f3n de enlace (por ejemplo, redirigir a otra p\u00e1gina o realizar una llamada telef\u00f3nica).<\/p>\n\n\n\n<p>En la pesta\u00f1a \"Estilo\", Elementor ofrece un mayor control de personalizaci\u00f3n sobre la apariencia de la lista de \u00edconos. Puedes ajustar de forma detallada tanto los estilos del \u00edcono como del texto. Por ejemplo, en la secci\u00f3n de \u00edconos, puedes personalizar el color, tama\u00f1o, espaciado, efecto al pasar el cursor, etc. En la parte de texto, puedes configurar la tipograf\u00eda, tama\u00f1o de fuente, altura de l\u00ednea, color, as\u00ed como el espaciado entre el texto y el \u00edcono. Si activas la opci\u00f3n de l\u00ednea divisoria, tambi\u00e9n puedes modificar el grosor, color y estilo de la l\u00ednea. A trav\u00e9s de estas opciones de estilo, la lista de \u00edconos puede adaptarse f\u00e1cilmente al dise\u00f1o general del sitio, ya sea para un dise\u00f1o minimalista o una p\u00e1gina m\u00e1s creativa con mayor impacto visual.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(4) Componente de \u00edconos sociales<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"485\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u793e\u4ea4\u56fe\u6807\u7ec4\u4ef6.png\" alt=\"\u793e\u4ea4\u56fe\u6807\u7ec4\u4ef6\" class=\"wp-image-23379\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u793e\u4ea4\u56fe\u6807\u7ec4\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u793e\u4ea4\u56fe\u6807\u7ec4\u4ef6-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">En el componente \"\u00cdconos sociales\" de Elementor, la pesta\u00f1a \"Contenido\" se utiliza principalmente para a\u00f1adir y gestionar enlaces a distintas plataformas sociales. Los usuarios pueden a\u00f1adir libremente varios \u00edconos sociales seg\u00fan sus necesidades, como en el ejemplo del bloguero que utiliza Facebook, Twitter y YouTube. Para cada elemento, se puede elegir el tipo de \u00edcono (usando la biblioteca de \u00edconos integrada o subiendo un \u00edcono SVG), introducir el enlace correspondiente, y configurar si el enlace se abre en una nueva pesta\u00f1a. Adem\u00e1s de las plataformas sociales preestablecidas, tambi\u00e9n se puede elegir el tipo \"Personalizado\" para agregar cualquier enlace e \u00edcono, brindando mayor flexibilidad de uso. Con estas configuraciones, los \u00edconos sociales no solo dirigen r\u00e1pidamente a los visitantes hacia tus otras plataformas, sino que tambi\u00e9n refuerzan visualmente la capacidad de vinculaci\u00f3n externa y la identidad de marca del sitio.<\/p>\n\n\n\n<p>En la pesta\u00f1a \"Estilo\", Elementor ofrece opciones de personalizaci\u00f3n visual muy completas para asegurar que los \u00edconos sociales sean funcionales y est\u00e9ticamente atractivos. Puedes configurar el tama\u00f1o del \u00edcono, el espaciado, la alineaci\u00f3n y el esquema de color (por ejemplo, los colores oficiales de la marca o colores personalizados). Adem\u00e1s, esta secci\u00f3n permite ajustar el borde, el radio de los bordes, el color de fondo, y tambi\u00e9n establecer efectos al pasar el cursor, como inversi\u00f3n de color, animaciones de escala o cambios de sombra. Gracias a estas configuraciones de estilo, ya sea para dise\u00f1ar un \u00e1rea social minimalista en el pie de p\u00e1gina o una secci\u00f3n destacada de enlaces sociales, el componente de \u00edconos sociales de Elementor ofrece una gran libertad de dise\u00f1o.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(5) Componente de editor de texto<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"491\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6587\u672c\u7f16\u8f91\u5668\u7ec4\u4ef6.png\" alt=\"\u6587\u672c\u7f16\u8f91\u5668\u7ec4\u4ef6\" class=\"wp-image-23380\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6587\u672c\u7f16\u8f91\u5668\u7ec4\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6587\u672c\u7f16\u8f91\u5668\u7ec4\u4ef6-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">En el componente \"Editor de texto\" de Elementor, la pesta\u00f1a \"Contenido\" se encarga principalmente de la introducci\u00f3n de texto y los ajustes b\u00e1sicos de formato. Los usuarios pueden introducir directamente las frases necesarias en el cuadro de texto. Este componente utiliza un editor WYSIWYG (lo que ves es lo que obtienes) similar al editor cl\u00e1sico de WordPress, y admite funciones de formato como negrita, cursiva, inserci\u00f3n de enlaces, alineaci\u00f3n del texto, entre otros. Si se desea insertar contenido din\u00e1mico (como t\u00edtulos de entradas o fechas), tambi\u00e9n es posible hacerlo mediante las etiquetas din\u00e1micas de Elementor. En general, esta pesta\u00f1a est\u00e1 enfocada a la inserci\u00f3n de contenido y a su estructura, siendo ideal para mostrar p\u00e1rrafos, descripciones, informaci\u00f3n de derechos de autor y otras \u00e1reas textuales.<\/p>\n\n\n\n<p>En la pesta\u00f1a \"Estilo\", se puede personalizar la apariencia visual del texto. Puedes configurar por separado el color del texto, la tipograf\u00eda, el tama\u00f1o de fuente, el grosor, la altura de l\u00ednea, el espaciado entre letras, entre otros par\u00e1metros de estilo tipogr\u00e1fico, para que se integren adecuadamente al estilo visual general de la p\u00e1gina.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"display\" style=\"margin-bottom:30px\">3\u3001Publicar la plantilla de Footer y establecer las condiciones de visualizaci\u00f3n<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"451\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6.png\" alt=\"\u9875\u811a\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6\" class=\"wp-image-23308\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">El archivo de plantilla del Footer, al igual que el del Header, forma parte de las secciones globales de un sitio web en WordPress. Por lo tanto, la configuraci\u00f3n de las condiciones de visualizaci\u00f3n tambi\u00e9n debe establecerse para que se muestre en todas las p\u00e1ginas del sitio. Los lectores pueden completar la publicaci\u00f3n del archivo de plantilla del pie de p\u00e1gina y la configuraci\u00f3n de sus condiciones de visualizaci\u00f3n siguiendo los pasos e indicaciones marcados en la imagen anterior.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"show\" style=\"margin-bottom:30px\">4\u3001Mostrar el producto final de la p\u00e1gina editada con Elementor<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"3045\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/WordPress\u9875\u9762\u81ea\u5b9a\u4e49\u9875\u9762\u8bbe\u8ba1\u6559\u5b66.png\" alt=\"WordPress\u9875\u9762\u81ea\u5b9a\u4e49\u9875\u9762\u8bbe\u8ba1\u6559\u5b66\" class=\"wp-image-23372\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/WordPress\u9875\u9762\u81ea\u5b9a\u4e49\u9875\u9762\u8bbe\u8ba1\u6559\u5b66.png 1000w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/WordPress\u9875\u9762\u81ea\u5b9a\u4e49\u9875\u9762\u8bbe\u8ba1\u6559\u5b66-4x12.png 4w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\"><strong>Conclusi\u00f3n:<\/strong> La captura de pantalla de p\u00e1gina completa mostrada anteriormente es el producto final que el autor construy\u00f3 paso a paso mientras redactaba este tutorial, combinando pr\u00e1ctica y explicaci\u00f3n al mismo tiempo. Desde la creaci\u00f3n de una nueva p\u00e1gina en el backend de WordPress, hasta el uso de Elementor para construir los elementos y estructuras del encabezado, contenido principal y pie de p\u00e1gina, cada paso y cada configuraci\u00f3n se realiz\u00f3 exactamente como se har\u00eda en un proceso de desarrollo real. Se puede decir que el efecto final de la p\u00e1gina es el resultado directo del contenido de este art\u00edculo. Esperamos que este tutorial para construir un sitio con Elementor desde cero te proporcione una referencia clara y t\u00e9cnicas \u00fatiles mientras aprendes dise\u00f1o y desarrollo de p\u00e1ginas con WordPress. Si encuentras problemas durante el proceso, no dudes en volver a la secci\u00f3n correspondiente para revisar los detalles. Y si ya completaste todo el flujo de trabajo con \u00e9xito, tambi\u00e9n te invitamos a probar agregar m\u00e1s dise\u00f1os personalizados y seguir expandiendo tus propias p\u00e1ginas web de alta calidad.<\/p>\n\n\n\n<p class=\"translation-block\">Por \u00faltimo, si despu\u00e9s de leer este tutorial consideras que construir un sitio con WordPress a\u00fan requiere asistencia t\u00e9cnica profesional, o si deseas llevar el dise\u00f1o de p\u00e1ginas con Elementor a un nivel m\u00e1s avanzado, te invitamos a conocer y contactar con Logic Digital Technology Co., Ltd. Nos especializamos en <strong><a href=\"https:\/\/www.szlogic.net\/es\/web-design\/\" data-type=\"link\" data-id=\"https:\/\/www.szlogic.net\/web-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">dise\u00f1o y desarrollo personalizado de sitios web en WordPress<\/a><\/strong>, con amplia experiencia pr\u00e1ctica. Podemos crear p\u00e1ginas profesionales verdaderamente alineadas con el posicionamiento de tu marca y las necesidades de tu negocio, enfoc\u00e1ndonos en la experiencia del usuario y en los objetivos de conversi\u00f3n. Ya sea un sitio corporativo, una plataforma de comercio electr\u00f3nico o un sitio multiling\u00fce para comercio internacional, podemos ofrecerte soluciones de construcci\u00f3n de sitios eficientes, estables y escalables.<\/p>\n\n\n\n<p><strong>Este art\u00edculo es propiedad de Logic Digital Technology (SZLOGIC). Se permite compartirlo de forma personal con fines educativos. Queda estrictamente prohibido su uso comercial o reproducci\u00f3n sin autorizaci\u00f3n.<\/strong><\/p>","protected":false},"excerpt":{"rendered":"<p>WordPress\u6559\u5b66\uff1a\u4ece\u96f6\u5f00\u59cb\u4f7f\u7528Elementor\u7f16\u8f91\u5668\u81ea\u5b9a\u4e49\u6784\u5efa\u9875\u9762 \u5982\u679c\u4f60\u60f3\u6253\u9020\u4e00\u4e2a\u4e13\u4e1a\u53c8\u4e2a\u6027\u5316\u7684Wo [&hellip;]<\/p>","protected":false},"author":1,"featured_media":23270,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[87],"tags":[],"class_list":["post-23262","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.szlogic.net\/es\/wp-json\/wp\/v2\/posts\/23262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.szlogic.net\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.szlogic.net\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.szlogic.net\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.szlogic.net\/es\/wp-json\/wp\/v2\/comments?post=23262"}],"version-history":[{"count":73,"href":"https:\/\/www.szlogic.net\/es\/wp-json\/wp\/v2\/posts\/23262\/revisions"}],"predecessor-version":[{"id":23397,"href":"https:\/\/www.szlogic.net\/es\/wp-json\/wp\/v2\/posts\/23262\/revisions\/23397"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.szlogic.net\/es\/wp-json\/wp\/v2\/media\/23270"}],"wp:attachment":[{"href":"https:\/\/www.szlogic.net\/es\/wp-json\/wp\/v2\/media?parent=23262"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.szlogic.net\/es\/wp-json\/wp\/v2\/categories?post=23262"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.szlogic.net\/es\/wp-json\/wp\/v2\/tags?post=23262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}