{"id":19386,"date":"2018-04-10T17:43:45","date_gmt":"2018-04-10T15:43:45","guid":{"rendered":"https:\/\/clientes.ignaciosantiago.com\/new\/elementor\/"},"modified":"2018-04-10T17:43:45","modified_gmt":"2018-04-10T15:43:45","slug":"elementor","status":"publish","type":"post","link":"https:\/\/clientes.ignaciosantiago.com\/new\/elementor\/","title":{"rendered":"Elementor Page Builder, Review y Tutorial [+VIDEO]"},"content":{"rendered":"<p>[fusion_builder_container hundred_percent=\u00bbno\u00bb hundred_percent_height=\u00bbno\u00bb hundred_percent_height_scroll=\u00bbno\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb link_color=\u00bb\u00bb link_hover_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb gradient_start_color=\u00bb\u00bb gradient_end_color=\u00bb\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; background_blend_mode=\u00bbnone\u00bb video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; type=\u00bbflex\u00bb][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; layout=\u00bb1_1&#8243; background_position=\u00bbleft top\u00bb background_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_position=\u00bball\u00bb spacing=\u00bbyes\u00bb background_image=\u00bb\u00bb background_repeat=\u00bbno-repeat\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb margin_top=\u00bb0px\u00bb margin_bottom=\u00bb0px\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_speed=\u00bb0.3&#8243; animation_direction=\u00bbleft\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb center_content=\u00bbno\u00bb last=\u00bbtrue\u00bb min_height=\u00bb\u00bb hover_type=\u00bbnone\u00bb link=\u00bb\u00bb border_sizes_top=\u00bb\u00bb border_sizes_bottom=\u00bb\u00bb border_sizes_left=\u00bb\u00bb border_sizes_right=\u00bb\u00bb first=\u00bbtrue\u00bb][fusion_text columns=\u00bb\u00bb column_min_width=\u00bb\u00bb column_spacing=\u00bb\u00bb rule_style=\u00bbdefault\u00bb rule_size=\u00bb\u00bb rule_color=\u00bb\u00bb content_alignment_medium=\u00bb\u00bb content_alignment_small=\u00bb\u00bb content_alignment=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb margin_top=\u00bb\u00bb margin_right=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_left=\u00bb\u00bb font_size=\u00bb\u00bb fusion_font_family_text_font=\u00bb\u00bb fusion_font_variant_text_font=\u00bb\u00bb line_height=\u00bb\u00bb letter_spacing=\u00bb\u00bb text_color=\u00bb\u00bb animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb]<\/p>\n<p>Aunque pueda sonar exagerado, desde que he descubierto <strong>Elementor Page Builder<\/strong> mi vida es m\u00e1s sencilla. D\u00e9jame explicarte por qu\u00e9.\u00a0Los que se dedican a <a href=\"https:\/\/ignaciosantiago.com\/como-crear-una-pagina-web\/\" target=\"_blank\" rel=\"noopener noreferrer\">crear p\u00e1ginas web<\/a> para clientes, como es el caso de Ju\u00e1n S\u00e1nchez Mesa, de <a href=\"https:\/\/potenciandotuweb.com\" target=\"_blank\" rel=\"noopener noreferrer\">potenciandotuweb.com<\/a>, se encuentran muy a menudo con un gran problema: <strong>el c\u00f3digo<\/strong>. Un cliente ve una l\u00ednea de c\u00f3digo y piensa que seguro que algo va a ir mal. Parece algo prohibido.\u00a0Por fortuna para aquellos que no quieren ver c\u00f3digo ni en pintura, existe la alternativa de los editores visuales o builders en ingl\u00e9s.<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter size-full wp-image-51689\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2018\/03\/elementor-page-builder-wordpress-review-tutorial-video-2.jpg\" alt=\"elementor page builder wordpress review tutorial video\" width=\"1200\" height=\"600\" \/><\/p>\n<p><strong>Los builders te permiten realizar cualquier dise\u00f1o que tendr\u00edas que hacer\u00a0escribiendo\u00a0c\u00f3digo (mucho c\u00f3digo) de forma sencilla a golpe de rat\u00f3n<\/strong>. Muy sencillo.\u00a0Pero los builders tienen un gran\u00a0inconveniente: el <strong>rendimiento<\/strong>.\u00a0La mayor\u00eda insertan mucho c\u00f3digo para cualquier elemento que configures por peque\u00f1o que sea. Y cuanto m\u00e1s c\u00f3digo que procesar, peor rendimiento va a tener tu web.<\/p>\n<p>Por lo tanto, se ten\u00eda que escoger. O la facilidad de uso que nos permiten los builders o el rendimiento que se obtiene con c\u00f3digo puro y duro.\u00a0Pero recientemente he descubierto un builder con el que ese problema se ha reducido bastante. De hecho lo he utilizado en mi propia web y <strong>me ha sorprendido much\u00edsimo su rendimiento<\/strong> y las posibilidades que ofrece.\u00a0Se trata de <strong>Elementor Page Builder<\/strong>.\u00a0Por suerte para ti, Ignacio me ha permitido usar su web para hacerte llegar este <strong>Mega Tutorial para que aprendas a usarlo y sacar todo el provecho de \u00e9l<\/strong>.<\/p>\n<p>Te tengo que comentar antes de empezar que Elementor es un plugin gratuito, pero que adem\u00e1s cuenta con un a\u00f1adido llamado Pro que amplia mucho sus posibilidades. En este tutorial vas a aprender a usar tanto la versi\u00f3n gratuita como las caracter\u00edsticas de pago.\u00a0Como ya te he dicho, Elementor es un plugin. \u00bfEsto qu\u00e9 significa para ti? Pues que <strong>lo puedes usar independientemente del tema que est\u00e9s usando<\/strong>. Y sin tener que cambiar nada en tu actual web.<\/p>\n<p>No tienes que cambiar de tema, ni de dise\u00f1o, nada. Puedes empezar a usarlo directamente justo despu\u00e9s de leer este tutorial.\u00a0Tanto en mi web como en la de clientes que he desarrollado no he tenido ning\u00fan problema a pesar de usar diferentes temas (Genesis, GeneratePress, etc).<\/p>\n<p>[\/fusion_text][\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container][fusion_global id=\u00bb107830&#8243;][fusion_builder_container hundred_percent=\u00bbno\u00bb hundred_percent_height=\u00bbno\u00bb hundred_percent_height_scroll=\u00bbno\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bbrecomendacion\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb link_color=\u00bb\u00bb link_hover_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb gradient_start_color=\u00bb\u00bb gradient_end_color=\u00bb\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; background_blend_mode=\u00bbnone\u00bb video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; type=\u00bbflex\u00bb][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; layout=\u00bb1_1&#8243; background_position=\u00bbleft top\u00bb background_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_position=\u00bball\u00bb spacing=\u00bbyes\u00bb background_image=\u00bb\u00bb background_repeat=\u00bbno-repeat\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb margin_top=\u00bb0px\u00bb margin_bottom=\u00bb0px\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_speed=\u00bb0.3&#8243; animation_direction=\u00bbleft\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb center_content=\u00bbno\u00bb last=\u00bbtrue\u00bb min_height=\u00bb\u00bb hover_type=\u00bbnone\u00bb link=\u00bb\u00bb border_sizes_top=\u00bb\u00bb border_sizes_bottom=\u00bb\u00bb border_sizes_left=\u00bb\u00bb border_sizes_right=\u00bb\u00bb first=\u00bbtrue\u00bb][fusion_title title_type=\u00bbtext\u00bb rotation_effect=\u00bbbounceIn\u00bb display_time=\u00bb1200&#8243; highlight_effect=\u00bbcircle\u00bb loop_animation=\u00bboff\u00bb highlight_width=\u00bb9&#8243; highlight_top_margin=\u00bb0&#8243; before_text=\u00bb\u00bb rotation_text=\u00bb\u00bb highlight_text=\u00bb\u00bb after_text=\u00bb\u00bb title_link=\u00bboff\u00bb link_url=\u00bb\u00bb link_target=\u00bb_self\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb content_align_medium=\u00bb\u00bb content_align_small=\u00bb\u00bb content_align=\u00bbleft\u00bb size=\u00bb2&#8243; font_size=\u00bb\u00bb animated_font_size=\u00bb\u00bb fusion_font_family_title_font=\u00bb\u00bb fusion_font_variant_title_font=\u00bb\u00bb line_height=\u00bb\u00bb letter_spacing=\u00bb\u00bb text_shadow=\u00bbno\u00bb text_shadow_vertical=\u00bb\u00bb text_shadow_horizontal=\u00bb\u00bb text_shadow_blur=\u00bb0&#8243; text_shadow_color=\u00bb\u00bb margin_top_medium=\u00bb\u00bb margin_right_medium=\u00bb\u00bb margin_bottom_medium=\u00bb\u00bb margin_left_medium=\u00bb\u00bb margin_top_small=\u00bb\u00bb margin_right_small=\u00bb\u00bb margin_bottom_small=\u00bb\u00bb margin_left_small=\u00bb\u00bb margin_top=\u00bb\u00bb margin_right=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_left=\u00bb\u00bb margin_top_mobile=\u00bb\u00bb margin_bottom_mobile=\u00bb\u00bb text_color=\u00bb\u00bb animated_text_color=\u00bb\u00bb gradient_font=\u00bbno\u00bb gradient_start_color=\u00bb\u00bb gradient_end_color=\u00bb\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; highlight_color=\u00bb\u00bb style_type=\u00bbdefault\u00bb sep_color=\u00bb\u00bb link_color=\u00bb\u00bb link_hover_color=\u00bb\u00bb animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb]<\/p>\n<p><a name=\"recomendacion\"><\/a>Mi recomendaci\u00f3n personal a la hora de utilizar Elementor<\/p>\n<p>[\/fusion_title][fusion_text]<\/p>\n<p>Vuelvo a insistir que Elementor<strong> es un plugin<\/strong>, no un tema. Por lo tanto, lo puedes usar donde quieras dentro de tu web con WordPress. Pero que lo puedas usar donde quieras no quiere decir que lo tengas que hacer. Por eso te voy a dar una recomendaci\u00f3n, de hecho lo que te voy a contar es mi forma de trabajar. Mi recomendaci\u00f3n es <strong>que lo uses para realizar p\u00e1ginas<\/strong>, pero no para escribir tus art\u00edculos. Para los art\u00edculos es recomendable que uses el editor propio de WordPress y que sea tu tema quien establezca el dise\u00f1o.\u00a0Como ejemplo de p\u00e1ginas me refiero a la p\u00e1gina de inicio, sobre m\u00ed, de contacto, p\u00e1ginas de venta, etc.\u00a0Porque si en un futuro decides cambiar de tema o dejas de usar Elementor por otro builder que aparezca, trabajando como te digo vas a tener separado el contenido del dise\u00f1o, y no vas a tener que hacer nada.[\/fusion_text][\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container][fusion_builder_container hundred_percent=\u00bbno\u00bb hundred_percent_height=\u00bbno\u00bb hundred_percent_height_scroll=\u00bbno\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bbinstalar\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb link_color=\u00bb\u00bb link_hover_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb gradient_start_color=\u00bb\u00bb gradient_end_color=\u00bb\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; background_blend_mode=\u00bbnone\u00bb video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; type=\u00bbflex\u00bb][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; layout=\u00bb1_1&#8243; background_position=\u00bbleft top\u00bb background_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_position=\u00bball\u00bb spacing=\u00bbyes\u00bb background_image=\u00bb\u00bb background_repeat=\u00bbno-repeat\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb margin_top=\u00bb0px\u00bb margin_bottom=\u00bb0px\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_speed=\u00bb0.3&#8243; animation_direction=\u00bbleft\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb center_content=\u00bbno\u00bb last=\u00bbtrue\u00bb min_height=\u00bb\u00bb hover_type=\u00bbnone\u00bb link=\u00bb\u00bb border_sizes_top=\u00bb\u00bb border_sizes_bottom=\u00bb\u00bb border_sizes_left=\u00bb\u00bb border_sizes_right=\u00bb\u00bb first=\u00bbtrue\u00bb][fusion_title size=\u00bb2&#8243; content_align=\u00bbleft\u00bb]<\/p>\n<p><a name=\"instalar\"><\/a>C\u00f3mo instalar Elementor<\/p>\n<p>[\/fusion_title][fusion_text]<\/p>\n<p>Antes de empezar a usar Elementor l\u00f3gicamente hay que instalarlo.\u00a0Para instalar la versi\u00f3n base de Elementor hay que <strong>hacer lo mismo que con cualquier plugin<\/strong>, ir al repositorio de WordPress en tu web.\u00a0Tienes que ir en tu Escritorio al men\u00fa Plugins y dentro de \u00e9l elegir A\u00f1adir nuevo. Cuando se abra la nueva pantalla, ver\u00e1s que aparecen los plugins m\u00e1s destacados y arriba a la derecha tienes disponible un buscador.\u00a0Solo tienes que poner \u201c<em>elementor<\/em>\u201d en el buscador (sin las comillas) y te aparecer\u00e1 en primer lugar un plugin llamado <strong>Elementor Page Builder<\/strong>. Pues ese es el que tienes que instalar.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-44444\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2018\/04\/tutorial-elementor-page-builder-buscador-plugins.jpg\" alt=\"tutorial elementor page builder buscador plugins\" width=\"1200\" height=\"600\" \/><\/p>\n<p>Si tienes actualizado tu instalaci\u00f3n de WordPress (si no, te recomiendo que lo hagas) lo podr\u00e1s instalar y despu\u00e9s activar directamente desde esta\u00a0p\u00e1gina, sin necesidad de salirte.\u00a0Una vez que lo hayas activado, ya tienes Elementor disponible en tu web.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Comprar versi\u00f3n Pro[\/fusion_title][fusion_text]<\/p>\n<p>Con la versi\u00f3n que acabas de instalar puedes empezar a trabajar sin ning\u00fan problema, pero tienes que saber que\u00a0Elementor Page Builder\u00a0cuenta con una <a href=\"https:\/\/ignaciosantiago.com\/ir-a\/elementor-pro\/\" target=\"_blank\" rel=\"noopener noreferrer\">versi\u00f3n de pago<\/a> que <strong>a\u00f1ade nuevos elementos y funcionalidades a la versi\u00f3n b\u00e1sica<\/strong>.\u00a0Por ejemplo, vas a tener plantillas predefinidas con las que puedes realizar una p\u00e1gina completa con unos pocos clicks. Cargas la plantilla, cambias el contenido que incluye por el tuyo y ya tienes tu p\u00e1gina con un dise\u00f1o espectacular.<\/p>\n<p>Tambi\u00e9n vas a tener<strong> widgets muy \u00fatiles<\/strong> como cuentas atr\u00e1s, slider, formularios sin necesidad de plugins adicionales, login de usuarios, etc. (despu\u00e9s los vamos a ver todos en detalles).\u00a0La <a href=\"https:\/\/ignaciosantiago.com\/ir-a\/elementor-pro\/\" target=\"_blank\" rel=\"noopener noreferrer\">versi\u00f3n Pro<\/a> te cuesta 49$ para una web, 99$ para tres y 199$ para webs ilimitadas. Si no te dedicas a construir webs para otros con la versi\u00f3n de una web o tres es suficiente. Y poder contar con todos los a\u00f1adidos por 49$ me parece un muy buen precio.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-44445\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2018\/04\/tutorial-elementor-page-builder-precios-pro.jpg\" alt=\"tutorial elementor page builder precios pro\" width=\"1200\" height=\"600\" \/><\/p>\n<p>Para instalar la versi\u00f3n Pro tienes que tener instalado primero la versi\u00f3n b\u00e1sica que hemos visto en el punto anterior.\u00a0Si no lo haces, no te preocupes. Si instalas primero la versi\u00f3n Pro, te va a aparecer un mensaje con un bot\u00f3n dici\u00e9ndote que para que funcione la versi\u00f3n Pro necesitas la b\u00e1sica, y si haces click en el bot\u00f3n se instala la versi\u00f3n b\u00e1sica. Todo muy f\u00e1cil.<\/p>\n<p>Cuando hagas la compra, te podr\u00e1s descargar un archivo comprimido zip y obtendr\u00e1s una clave de licencia. Para instalar el archivo tienes que ir al men\u00fa Apariencia y a\u00f1adir nuevo. Pero en esta ocasi\u00f3n vas a hacer click en el bot\u00f3n que te aparece arriba <strong>Subir plugin<\/strong>.\u00a0Se te abrir\u00e1 una pantalla donde tienes un bot\u00f3n para seleccionar un archivo. Pues el archivo que tienes que seleccionar es el que te has descargado de Elementor. Tendr\u00e1 la estructura <em>elementor-pro-version.zip<\/em>, donde versi\u00f3n es un n\u00famero que ser\u00e1 diferente dependiendo de en qu\u00e9 momento te lo descargues.<\/p>\n<p>Para usar la versi\u00f3n Pro, aparte de instalar el archivo que acabas de hacer, <strong>tienes que introducir tu clave de licencia<\/strong>.\u00a0Para hacerlo tienes que ir al nuevo men\u00fa <strong>Elementor<\/strong> y dentro a <strong>License<\/strong>. Ah\u00ed ver\u00e1s que aparece un cuadro de texto donde tienes que pegar tu clave y un bot\u00f3n que pone Activar para finalizar la activaci\u00f3n de tu versi\u00f3n Pro.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-44446\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2018\/04\/tutorial-elementor-page-builder-licencia.jpg\" alt=\"tutorial elementor page builder licencia\" width=\"1200\" height=\"600\" \/><\/p>\n<p>[\/fusion_text][\/fusion_builder_column][fusion_builder_column type=\u00bb1_1&#8243; align_self=\u00bbauto\u00bb content_layout=\u00bbcolumn\u00bb align_content=\u00bbflex-start\u00bb valign_content=\u00bbflex-start\u00bb content_wrap=\u00bbwrap\u00bb spacing=\u00bb\u00bb center_content=\u00bbno\u00bb column_tag=\u00bbdiv\u00bb link=\u00bb\u00bb target=\u00bb_self\u00bb link_description=\u00bb\u00bb min_height=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb type_medium=\u00bb\u00bb type_small=\u00bb\u00bb order_medium=\u00bb0&#8243; order_small=\u00bb0&#8243; dimension_spacing_medium=\u00bb\u00bb dimension_spacing_small=\u00bb\u00bb dimension_spacing=\u00bb\u00bb dimension_margin_medium=\u00bb\u00bb dimension_margin_small=\u00bb\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_medium=\u00bb\u00bb padding_small=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb hover_type=\u00bbnone\u00bb border_sizes=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_radius=\u00bb\u00bb box_shadow=\u00bbno\u00bb dimension_box_shadow=\u00bb\u00bb box_shadow_blur=\u00bb0&#8243; box_shadow_spread=\u00bb0&#8243; box_shadow_color=\u00bb\u00bb box_shadow_style=\u00bb\u00bb overflow=\u00bb\u00bb background_type=\u00bbsingle\u00bb gradient_start_color=\u00bb\u00bb gradient_end_color=\u00bb\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_image_id=\u00bb\u00bb lazy_load=\u00bbnone\u00bb skip_lazy_load=\u00bb\u00bb background_position=\u00bbleft top\u00bb background_repeat=\u00bbno-repeat\u00bb background_blend_mode=\u00bbnone\u00bb render_logics=\u00bb\u00bb filter_type=\u00bbregular\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb last=\u00bbno\u00bb border_position=\u00bball\u00bb][fusion_alert type=\u00bbgeneral\u00bb accent_color=\u00bb#ffffff\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb background_color=\u00bb#1c6979&#8243; border_size=\u00bb4px\u00bb icon=\u00bbfa-exclamation-triangle fas\u00bb text_align=\u00bb\u00bb margin_top=\u00bb\u00bb margin_right=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_left=\u00bb\u00bb text_transform=\u00bb\u00bb dismissable=\u00bb\u00bb box_shadow=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb]<\/p>\n<p>Si todo ha ido bien ver\u00e1s que debajo aparece un mensaje que dice <strong>Status: Active<\/strong>.<\/p>\n<p>[\/fusion_alert][\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container][fusion_builder_container hundred_percent=\u00bbno\u00bb hundred_percent_height=\u00bbno\u00bb hundred_percent_height_scroll=\u00bbno\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bbconfigurar\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb link_color=\u00bb\u00bb link_hover_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb gradient_start_color=\u00bb\u00bb gradient_end_color=\u00bb\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; background_blend_mode=\u00bbnone\u00bb video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; type=\u00bbflex\u00bb][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; layout=\u00bb1_1&#8243; background_position=\u00bbleft top\u00bb background_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_position=\u00bball\u00bb spacing=\u00bbyes\u00bb background_image=\u00bb\u00bb background_repeat=\u00bbno-repeat\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb margin_top=\u00bb0px\u00bb margin_bottom=\u00bb0px\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_speed=\u00bb0.3&#8243; animation_direction=\u00bbleft\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb center_content=\u00bbno\u00bb last=\u00bbtrue\u00bb min_height=\u00bb\u00bb hover_type=\u00bbnone\u00bb link=\u00bb\u00bb border_sizes_top=\u00bb\u00bb border_sizes_bottom=\u00bb\u00bb border_sizes_left=\u00bb\u00bb border_sizes_right=\u00bb\u00bb first=\u00bbtrue\u00bb][fusion_title size=\u00bb2&#8243; content_align=\u00bbleft\u00bb]<\/p>\n<p><a name=\"menu\"><\/a>Men\u00fa de configuraci\u00f3n de Elementor<\/p>\n<p>[\/fusion_title][fusion_text]<\/p>\n<p>Cuando ya tengas instalado Elementor vas a ver que en los men\u00fas de tu Escritorio de WordPress ha aparecido una nueva opci\u00f3n llamada precisamente Elementor.\u00a0Aunque te pueda parecer un poco pesado este bloque, es necesario que antes de empezar a usar Elementor, lo tengas bien configurado. Unos pocos minutos al principio te puede ahorrar mucho trabajo despu\u00e9s. Merece la pena.\u00a0Volvemos al men\u00fa. Este nuevo men\u00fa cuenta con 5 submen\u00fas: Ajustes, Mi biblioteca, Herramientas, Informaci\u00f3n del sistema y Licencia.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-44447\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2018\/04\/tutorial-elementor-page-builder-menu-elementor.jpg\" alt=\"tutorial elementor page builder menu elementor\" width=\"1200\" height=\"600\" \/><\/p>\n<p>A nosotros nos interesan los tres primeros que son en los que podemos configurar el funcionamiento de nuestra web. Los dos restantes nos aportan informaci\u00f3n de tu web y de la licencia con la que est\u00e9s usando Elementor. \u00c9chales un vistazo si quieres pero no son importantes para usar Elementor.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Ajustes[\/fusion_title][fusion_text]<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-44448\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2018\/04\/tutorial-elementor-page-builder-ajustes-generales.jpg\" alt=\"tutorial elementor page builder ajustes generales\" width=\"1200\" height=\"600\" \/><\/p>\n<p>A continuaci\u00f3n te voy a explicar qu\u00e9 ajustes puedes configurar en esta pantalla.<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Tipos de entradas<\/strong>: Aqu\u00ed puedes elegir en qu\u00e9 tipo de contenido vas a poder usar Elementor. Mi recomendaci\u00f3n es que solo elijas P\u00e1ginas y las Entradas aparezcan seg\u00fan tu tema. Como m\u00ednimo vas a tener Entradas y P\u00e1ginas, pero las opciones a elegir van a variar dependiendo del tema y plugins que tengas porque puede que te hayan agregado nuevos tipos de contenido.\u00a0Si no sabes la diferencia entre Entradas y P\u00e1ginas o tienes otras dudas sobre WordPress\u00a0<a href=\"https:\/\/ignaciosantiago.com\/tutorial-wordpress\/\">haz click aqu\u00ed<\/a>.<\/p>\n<p>[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Perfiles exclu\u00eddos<\/strong>: Aqu\u00ed vas a elegir qu\u00e9 tipos de usuario no van a poder usar Elementor.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Desactivar colores globales<\/strong> y <strong>Desactivar tipograf\u00edas globales<\/strong>: Si marcas estas casillas, Elementor va usar los colores y fuentes que use tu tema sin posibilidad de cambiarlo. Yo te recomiendo que las dejes desmarcadas porque siempre puede venir bien hacer alg\u00fan peque\u00f1o ajuste.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Mejorar Elementor<\/strong>: Si marcas esta casilla, vas a enviar datos an\u00f3nimos de como usas Elementor, posibles fallos, etc. Esto se hace para mejorar el producto. Es tu elecci\u00f3n, no va a influir en nada al funcionamiento de Elementor.\u00a0[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Fuentes gen\u00e9ricas predeterminadas<\/strong>: Existen dos familias de fuentes: serif y sans-serif. Aqu\u00ed vas a elegir qu\u00e9 familia es la que se va a usar por defecto si no se cambia nada.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Ancho del contenido<\/strong>: Aqu\u00ed vas a elegir el ancho m\u00e1ximo que va a tener el contenido que vas a crear con Elementor. Deja el que viene ya escrito si no necesitas nada especial o no sabes qu\u00e9 medida necesitas.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Espacio entre widgets<\/strong>: Aqu\u00ed vas a poder configurar un espacio por defecto para los widgets. El que viene por defecto est\u00e1 bien.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Extender hasta ajustar secci\u00f3n<\/strong>: Aqu\u00ed vas a poder elegir el elemento (etiqueta HTML, clase CSS) donde se va a incluir tu creaci\u00f3n de Elementor. D\u00e9jalo como est\u00e1 si tienes dudas, se incluir\u00e1 en tu p\u00e1gina en\u00a0vez\u00a0de dentro de alguna secci\u00f3n.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Selector de t\u00edtulo de p\u00e1gina<\/strong>: Aqu\u00ed tienes que escribir el selector que tiene el t\u00edtulo de la p\u00e1gina que vas a editar con Elementor por si quieres eliminarlo de tus dise\u00f1os. Si tu tema est\u00e1 escrito seg\u00fan los par\u00e1metros que establece WordPress no vas a tener que configurar nada.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Recaptcha<\/strong>: Aqu\u00ed puedes configurar tu cuenta de Recaptcha para incluirla en los formularios que puedas crear con Elementor, por ejemplo. Recaptcha es ese cuadro con letras que cuesta reconocer que tienes que escribir en algunos formularios, para asegurarse que lo est\u00e1 rellenando una persona.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>M\u00e9todo de impresi\u00f3n de CSS<\/strong>: Aqu\u00ed elige Fichero externo para tener un mejor rendimiento. Va a escribir los estilos CSS en un archivo independiente.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Cambio de m\u00e9todo de carga del editor<\/strong>: Dependiendo del tema y de los plugins que tengas instalados pueden haber conflictos con el editor de Elementor. Si tienes alg\u00fan problema cambia la opci\u00f3n de Desactivar a Activar. Yo no lo he necesitado hacer nunca, pero est\u00e1 bien saber que existe esta opci\u00f3n.[\/fusion_li_item][\/fusion_checklist][\/fusion_builder_column][fusion_builder_column type=\u00bb1_1&#8243; align_self=\u00bbauto\u00bb content_layout=\u00bbcolumn\u00bb align_content=\u00bbflex-start\u00bb valign_content=\u00bbflex-start\u00bb content_wrap=\u00bbwrap\u00bb spacing=\u00bb\u00bb center_content=\u00bbno\u00bb column_tag=\u00bbdiv\u00bb link=\u00bb\u00bb target=\u00bb_self\u00bb link_description=\u00bb\u00bb min_height=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb type_medium=\u00bb\u00bb type_small=\u00bb\u00bb order_medium=\u00bb0&#8243; order_small=\u00bb0&#8243; dimension_spacing_medium=\u00bb\u00bb dimension_spacing_small=\u00bb\u00bb dimension_spacing=\u00bb\u00bb dimension_margin_medium=\u00bb\u00bb dimension_margin_small=\u00bb\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_medium=\u00bb\u00bb padding_small=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb hover_type=\u00bbnone\u00bb border_sizes=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_radius=\u00bb\u00bb box_shadow=\u00bbno\u00bb dimension_box_shadow=\u00bb\u00bb box_shadow_blur=\u00bb0&#8243; box_shadow_spread=\u00bb0&#8243; box_shadow_color=\u00bb\u00bb box_shadow_style=\u00bb\u00bb overflow=\u00bb\u00bb background_type=\u00bbsingle\u00bb gradient_start_color=\u00bb\u00bb gradient_end_color=\u00bb\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_image_id=\u00bb\u00bb lazy_load=\u00bbnone\u00bb skip_lazy_load=\u00bb\u00bb background_position=\u00bbleft top\u00bb background_repeat=\u00bbno-repeat\u00bb background_blend_mode=\u00bbnone\u00bb render_logics=\u00bb\u00bb filter_type=\u00bbregular\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb last=\u00bbno\u00bb border_position=\u00bball\u00bb][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Mi biblioteca[\/fusion_title][fusion_text]<\/p>\n<p>Aqu\u00ed vas a poder ver qu\u00e9 dise\u00f1os has guardado y tambi\u00e9n importar otros. Esto es muy \u00fatil y te voy a poner un ejemplo para que lo veas.\u00a0Imagina que creas una landing para un servicio y creas una cabecera con el nombre del servicio. Es muy probable que quieras usar esa cabecera en otras p\u00e1ginas de otros servicios. Pues puedes guardar esa cabecera y usarla en otras p\u00e1ginas con un solo click <strong>sin tener que repetir todo el proceso de dise\u00f1o desde el principio<\/strong>.\u00a0Pues si guardas esa cabecera, aparecer\u00e1 aqu\u00ed.\u00a0M\u00e1s adelante aprender\u00e1s como se guarda. Incluso puedes guardar p\u00e1ginas enteras.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Herramientas[\/fusion_title][fusion_text]<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-44449\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2018\/04\/tutorial-elementor-page-builder-herramientas-elementor.jpg\" alt=\"tutorial elementor page builder herramientas elementor\" width=\"1200\" height=\"600\" \/><\/p>\n<p>Elementor adem\u00e1s de un constructor de p\u00e1ginas incluye una serie de herramientas que te pueden venir muy bien y ahorrarte instalar alg\u00fan plugin.<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Regenerar CSS<\/strong> y <strong>Sincronizar la biblioteca<\/strong>: Con estos botones vas a volver a descargar los archivos de Elementor, estilos y los widgets. Si de repente te encuentras con fallos al usar Elementor, usa estos botones para recuperar los archivos originales.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Reemplazar URL<\/strong>: Esta opci\u00f3n te viene muy bien si decides hacer un cambio de URL. Solo tienes que escribir la direcci\u00f3n antigua y la nueva de tu web y hacer click en el bot\u00f3n. Haz caso del consejo de hacer una copia de la base de datos antes de hacer nada por si surge alg\u00fan problema en el proceso.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Revertir a la versi\u00f3n anterior<\/strong>: Si despu\u00e9s de actualizar est\u00e1s experimentando alg\u00fan problema puedes volver a una versi\u00f3n anterior con estos botones. Si te ocurre, vuelve a la versi\u00f3n anterior, espera unos d\u00edas a que aparezca una versi\u00f3n y actualiza de nuevo.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Convi\u00e9rtete en probador de betas<\/strong>: Aqu\u00ed puedes hacer que te aparezcan en las actualizaciones las versiones beta. Si usas Elementor en una web que ya est\u00e1 online te recomiendo que no lo hagas porque las versiones beta pueden tener errores porque no son versiones finales.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Modo de mantenimiento<\/strong>: Con esta opci\u00f3n puedes poner tu web en modo mantenimiento para hacer cualquier ajuste que tengas que hacer en tu web. Tienes dos opciones que cambian en el c\u00f3digo que se devuelve: pr\u00f3ximamente o mantenimiento. La primera devuelve un c\u00f3digo 200 que es un c\u00f3digo de \u00e9xito, se puede hacer para muy poco tiempo. En la opci\u00f3n mantenimiento se devuelve un error 503 que es un error en el servidor para tiempo m\u00e1s largo. No te lo tomes a la ligera porque si coincide que el robot de Google pasa por tu web y tienes el modo de mantenimiento con c\u00f3digo 200 va a asumir que lo que aparece es tu web, es decir, tu web va a ser el mensaje de mantenimiento. Recuerda: <strong>c\u00f3digo 200 para muy poco tiempo y c\u00f3digo 503 para mantenimiento m\u00e1s largo<\/strong>.[\/fusion_li_item][\/fusion_checklist][\/fusion_builder_column][fusion_builder_column type=\u00bb1_1&#8243; align_self=\u00bbauto\u00bb content_layout=\u00bbcolumn\u00bb align_content=\u00bbflex-start\u00bb valign_content=\u00bbflex-start\u00bb content_wrap=\u00bbwrap\u00bb spacing=\u00bb\u00bb center_content=\u00bbno\u00bb column_tag=\u00bbdiv\u00bb link=\u00bb\u00bb target=\u00bb_self\u00bb link_description=\u00bb\u00bb min_height=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb type_medium=\u00bb\u00bb type_small=\u00bb\u00bb order_medium=\u00bb0&#8243; order_small=\u00bb0&#8243; dimension_spacing_medium=\u00bb\u00bb dimension_spacing_small=\u00bb\u00bb dimension_spacing=\u00bb\u00bb dimension_margin_medium=\u00bb\u00bb dimension_margin_small=\u00bb\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_medium=\u00bb\u00bb padding_small=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb hover_type=\u00bbnone\u00bb border_sizes=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_radius=\u00bb\u00bb box_shadow=\u00bbno\u00bb dimension_box_shadow=\u00bb\u00bb box_shadow_blur=\u00bb0&#8243; box_shadow_spread=\u00bb0&#8243; box_shadow_color=\u00bb\u00bb box_shadow_style=\u00bb\u00bb overflow=\u00bb\u00bb background_type=\u00bbsingle\u00bb gradient_start_color=\u00bb\u00bb gradient_end_color=\u00bb\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_image_id=\u00bb\u00bb lazy_load=\u00bbnone\u00bb skip_lazy_load=\u00bb\u00bb background_position=\u00bbleft top\u00bb background_repeat=\u00bbno-repeat\u00bb background_blend_mode=\u00bbnone\u00bb render_logics=\u00bb\u00bb filter_type=\u00bbregular\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb last=\u00bbno\u00bb border_position=\u00bball\u00bb][fusion_alert type=\u00bbgeneral\u00bb accent_color=\u00bb#808080&#8243; hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb background_color=\u00bb#ffffff\u00bb border_size=\u00bb\u00bb icon=\u00bb\u00bb text_align=\u00bb\u00bb margin_top=\u00bb\u00bb margin_right=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_left=\u00bb\u00bb text_transform=\u00bb\u00bb dismissable=\u00bb\u00bb box_shadow=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb]<\/p>\n<p>Una vez que ya hemos visto los ajustes que tenemos en el men\u00fa de Elementor, ya podemos pasar directamente a empezar a usarlo.<\/p>\n<p>[\/fusion_alert][\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container][fusion_builder_container hundred_percent=\u00bbno\u00bb hundred_percent_height=\u00bbno\u00bb hundred_percent_height_scroll=\u00bbno\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bbantes\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb link_color=\u00bb\u00bb link_hover_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb gradient_start_color=\u00bb\u00bb gradient_end_color=\u00bb\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; background_blend_mode=\u00bbnone\u00bb video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; type=\u00bbflex\u00bb][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; layout=\u00bb1_1&#8243; background_position=\u00bbleft top\u00bb background_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_position=\u00bball\u00bb spacing=\u00bbyes\u00bb background_image=\u00bb\u00bb background_repeat=\u00bbno-repeat\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb margin_top=\u00bb0px\u00bb margin_bottom=\u00bb0px\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_speed=\u00bb0.3&#8243; animation_direction=\u00bbleft\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb center_content=\u00bbno\u00bb last=\u00bbtrue\u00bb min_height=\u00bb\u00bb hover_type=\u00bbnone\u00bb link=\u00bb\u00bb border_sizes_top=\u00bb\u00bb border_sizes_bottom=\u00bb\u00bb border_sizes_left=\u00bb\u00bb border_sizes_right=\u00bb\u00bb first=\u00bbtrue\u00bb][fusion_title size=\u00bb2&#8243; content_align=\u00bbleft\u00bb]<\/p>\n<p><a name=\"antes\"><\/a>Antes de empezar a usar Elementor<\/p>\n<p>[\/fusion_title][fusion_text]<\/p>\n<p>Un \u00faltimo apunte antes de empezar a usar Elementor tienes que tener en cuenta que <strong>el dise\u00f1o que crees se va a adaptar a tu tema<\/strong>.\u00a0\u00bfQu\u00e9 quiero decir con esto?\u00a0Pues que si t\u00fa quieres crear una landing sin cabecera ni men\u00fas, esto lo tienes que configurar antes de arrancar con Elementor.\u00a0Un ejemplo para que lo entiendas mejor. Si tu web cuenta con una p\u00e1gina de inicio con una zona de contenido m\u00e1s un sidebar, el dise\u00f1o que crees con Elementor se va a a\u00f1adir en la zona de contenido. Pero el sidebar no se va a perder.<\/p>\n<p>Por eso es importante que antes de comenzar a usar Elementor sepas qu\u00e9 dise\u00f1os quieres. Y as\u00ed elegir la plantilla de p\u00e1gina que m\u00e1s se adapte.\u00a0Si quieres hacer una landing page Elementor incluye una plantilla de p\u00e1gina llamada <strong>Elementor Canvas<\/strong>. Esta plantilla elimina la cabecera, sidebar o footer que tenga tu web. Vas a tener una p\u00e1gina en blanco.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-44450\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2018\/04\/tutorial-elementor-page-builder-plantilla-pagina.jpg\" alt=\"tutorial elementor page builder plantilla pagina\" width=\"1200\" height=\"600\" \/>[\/fusion_text][\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container][fusion_builder_container hundred_percent=\u00bbno\u00bb hundred_percent_height=\u00bbno\u00bb hundred_percent_height_scroll=\u00bbno\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bbiniciar\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb link_color=\u00bb\u00bb link_hover_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb gradient_start_color=\u00bb\u00bb gradient_end_color=\u00bb\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; background_blend_mode=\u00bbnone\u00bb video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; type=\u00bbflex\u00bb][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; layout=\u00bb1_1&#8243; background_position=\u00bbleft top\u00bb background_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_position=\u00bball\u00bb spacing=\u00bbyes\u00bb background_image=\u00bb\u00bb background_repeat=\u00bbno-repeat\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb margin_top=\u00bb0px\u00bb margin_bottom=\u00bb0px\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_speed=\u00bb0.3&#8243; animation_direction=\u00bbleft\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb center_content=\u00bbno\u00bb last=\u00bbtrue\u00bb min_height=\u00bb\u00bb hover_type=\u00bbnone\u00bb link=\u00bb\u00bb border_sizes_top=\u00bb\u00bb border_sizes_bottom=\u00bb\u00bb border_sizes_left=\u00bb\u00bb border_sizes_right=\u00bb\u00bb first=\u00bbtrue\u00bb][fusion_title size=\u00bb2&#8243; content_align=\u00bbleft\u00bb]<\/p>\n<p><a name=\"iniciar\"><\/a>Como comenzar a usar Elementor<\/p>\n<p>[\/fusion_title][fusion_text]<\/p>\n<p>Comenzar a usar Elementor es muy sencillo. En primer lugar tienes que crear o abrir la p\u00e1gina que quieras editar con Elementor.\u00a0Si lo que quieres es editar alguna p\u00e1gina que ya tengas creada tienes que saber que los elementos que a\u00f1adas con Elementor se van a a\u00f1adir al contenido que ya exista. Pero la buena noticia es que ese <strong>contenido que ya tengas creado tambi\u00e9n lo puedes editar con Elementor<\/strong>, as\u00ed que no tienes que escribirlo otra vez ni empezar a copiar y pegar para darle un nuevo estilo.\u00a0Una vez que tienes abierta tu p\u00e1gina te vas a encontrar el siguiente bot\u00f3n:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-44451\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2018\/04\/tutorial-elementor-page-builder-boton-iniciar.jpg\" alt=\"tutorial elementor page builder boton iniciar\" width=\"1200\" height=\"600\" \/><\/p>\n<p>Pues solo tienes que hacer click para iniciar el editor de Elementor. M\u00e1s f\u00e1cil imposible. Se abrir\u00e1 el editor a pantalla completa. Aunque parezca que te has salido de tu web, no lo has hecho. Observa como el dominio es el tuyo. Se trata simplemente de que el editor se muestra a pantalla completa para aprovechar el espacio al m\u00e1ximo. No te asustes.[\/fusion_text][\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container][fusion_builder_container hundred_percent=\u00bbno\u00bb hundred_percent_height=\u00bbno\u00bb hundred_percent_height_scroll=\u00bbno\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bbpartes\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb link_color=\u00bb\u00bb link_hover_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb gradient_start_color=\u00bb\u00bb gradient_end_color=\u00bb\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; background_blend_mode=\u00bbnone\u00bb video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; type=\u00bbflex\u00bb][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; align_self=\u00bbauto\u00bb content_layout=\u00bbcolumn\u00bb align_content=\u00bbflex-start\u00bb valign_content=\u00bbflex-start\u00bb content_wrap=\u00bbwrap\u00bb spacing=\u00bb\u00bb center_content=\u00bbno\u00bb column_tag=\u00bbdiv\u00bb link=\u00bb\u00bb target=\u00bb_self\u00bb link_description=\u00bb\u00bb min_height=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb order_medium=\u00bb0&#8243; order_small=\u00bb0&#8243; hover_type=\u00bbnone\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb box_shadow=\u00bbno\u00bb box_shadow_blur=\u00bb0&#8243; box_shadow_spread=\u00bb0&#8243; box_shadow_color=\u00bb\u00bb box_shadow_style=\u00bb\u00bb overflow=\u00bb\u00bb background_type=\u00bbsingle\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_image_id=\u00bb\u00bb lazy_load=\u00bbnone\u00bb skip_lazy_load=\u00bb\u00bb background_position=\u00bbleft top\u00bb background_repeat=\u00bbno-repeat\u00bb background_blend_mode=\u00bbnone\u00bb filter_type=\u00bbregular\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb last=\u00bbno\u00bb border_position=\u00bball\u00bb][fusion_title size=\u00bb2&#8243; content_align=\u00bbleft\u00bb]<\/p>\n<p><a name=\"partes\"><\/a>Partes principales de Elementor<\/p>\n<p>[\/fusion_title][fusion_text]<\/p>\n<p>Una vez que has abierto Elementor tienes que distinguir entre dos partes principales en forma de columna.\u00a0La primera, situada a la izquierda, se trata de la <strong>barra de herramientas<\/strong>. Aqu\u00ed es donde vas a poder configurar todos los elementos que a\u00f1adas, a\u00f1adir nuevos, dise\u00f1os, etc. Lo vamos a ver en m\u00e1s detalle.\u00a0La segunda columna corresponde con la <strong>vista previa<\/strong>. Aqu\u00ed vas a ir viendo c\u00f3mo va a ir quedando tu p\u00e1gina, a\u00f1adir secciones, moverlas, etc. Tambi\u00e9n lo vamos a ver en m\u00e1s profundidad.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-44452\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2018\/04\/tutorial-elementor-page-builder-editor-elementor.jpg\" alt=\"tutorial elementor page builder editor elementor\" width=\"1200\" height=\"600\" \/><\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Panel de barra de herramientas[\/fusion_title][fusion_text]<\/p>\n<p>Lo primero que destaca al ver el panel de herramientas son los distintos widgets que vas a poder usar en tus dise\u00f1os. Al ser tantos y la aut\u00e9ntica base de Elementor los vamos a ver uno por uno m\u00e1s adelante.\u00a0Lo que s\u00ed te voy a explicar son las opciones que tienes disponibles en el panel y que van a estar siempre disponibles durante tu trabajo con Elementor.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-44453\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2018\/04\/tutorial-elementor-page-builder-menu-editor.jpg\" alt=\"tutorial elementor page builder menu editor\" width=\"1200\" height=\"600\" \/><\/p>\n<p>En primer lugar vamos a ver el men\u00fa. Si haces click en \u00e9l vas a ver las siguientes opciones:<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Colores globales<\/strong>: Aqu\u00ed vas a poder elegir los colores que se van a usar por defecto a lo largo de tu proceso. Durante el dise\u00f1o puedes elegir los colores que quieras pero si a\u00f1ades los colores que uses aqu\u00ed vas a trabajar de un modo m\u00e1s r\u00e1pido. Adem\u00e1s de poder elegir tu paleta personal, vienen incluidas algunas por si las quieres usar.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Fuentes globales<\/strong>: Este ajuste es muy similar al visto para los colores. Puedes elegir las fuentes por defecto para encabezados y textos. Despu\u00e9s puedes cambiarlos pero si ya eliges aqu\u00ed los que usas no vas a tener que hacer nada despu\u00e9s.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Selector de color<\/strong>: Como ya te he dicho antes en cualquier momento del trabajo con Elementor vas a poder elegir los colores que quieras usar. En la herramienta de selecci\u00f3n de color te aparecen unos colores ya seleccionados para usar con solo un click. Pues aqu\u00ed es donde puedes seleccionar esos colores. Elige los comunes que vayas a usar a lo largo de tu dise\u00f1o.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Diferencia entre Colores globales y Selector de color<\/strong>: Te quiero explicar de modo m\u00e1s detallado la diferencia entre Colores globales y Selector de color porque puede parecer lo mismo. En Colores globales, los colores que elijas se van a aplicar sin t\u00fa hacer nada. Por ejemplo el color que elijas para texto se va a aplicar a todos los textos si t\u00fa no seleccionas un color a mano. Mientras que en Selector de color seleccionas los colores que quieres que aparezcan en la herramienta de seleccionar un color, una especie de acceso directo a ese color.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Historial de revisiones<\/strong>: Aqu\u00ed vas a ver todos los cambios que has ido haciendo a lo largo de tu trabajo con Elementor. Es muy \u00fatil si por ejemplo, realizas alg\u00fan cambio y no termina de quedar como a ti te gustar\u00eda. Pues vas a esta opci\u00f3n, haces click en una revisi\u00f3n anterior y deshaces lo que has hecho. Como posible mejora, podr\u00eda poner las revisiones por acciones en vez de por tiempo. Quedar\u00eda m\u00e1s claro a la hora de deshacer lo que no te gusta.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Ajustes de p\u00e1gina<\/strong>: Aqu\u00ed vas a poder configurar las opciones de tu p\u00e1gina. Son las mismas opciones que puedes configurar en WordPress. El t\u00edtulo, la plantilla de p\u00e1gina que quieres usar. Las dos opciones de plantilla que te recomiendo que uses son Predeterminado (si quieres usar cabeceras) y Elementor Canvas (si quieres usar una p\u00e1gina en blanco, sin cabecera, footer, etc). Pero adem\u00e1s puedes configurar el estilo global de la p\u00e1gina como poner un color de fondo, cosa que no puedes hacer en WordPress.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Eliminar todo el contenido<\/strong>: Esta opci\u00f3n se explica por s\u00ed sola. Eliminar\u00e1s todo el contenido que hayas creado. Y todo es todo. Te quedar\u00e1s con un dise\u00f1o vac\u00edo, as\u00ed que \u00fasala con cuidado.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Ajustes de Elementor<\/strong>: Con esta opci\u00f3n se va a abrir el men\u00fa que ya te he explicado antes. Si necesitas repasar algo vuelve a \u00e9l.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Sobre Elementor<\/strong>: Esta opci\u00f3n te va a abrir la p\u00e1gina web de Elementor. Una forma f\u00e1cil de acceder a ella.[\/fusion_li_item][\/fusion_checklist][\/fusion_builder_column][fusion_builder_column type=\u00bb1_1&#8243; align_self=\u00bbauto\u00bb content_layout=\u00bbcolumn\u00bb align_content=\u00bbflex-start\u00bb valign_content=\u00bbflex-start\u00bb content_wrap=\u00bbwrap\u00bb spacing=\u00bb\u00bb center_content=\u00bbno\u00bb column_tag=\u00bbdiv\u00bb link=\u00bb\u00bb target=\u00bb_self\u00bb link_description=\u00bb\u00bb min_height=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb order_medium=\u00bb0&#8243; order_small=\u00bb0&#8243; hover_type=\u00bbnone\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb box_shadow=\u00bbno\u00bb box_shadow_blur=\u00bb0&#8243; box_shadow_spread=\u00bb0&#8243; box_shadow_color=\u00bb\u00bb box_shadow_style=\u00bb\u00bb overflow=\u00bb\u00bb background_type=\u00bbsingle\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_image_id=\u00bb\u00bb lazy_load=\u00bbnone\u00bb skip_lazy_load=\u00bb\u00bb background_position=\u00bbleft top\u00bb background_repeat=\u00bbno-repeat\u00bb background_blend_mode=\u00bbnone\u00bb filter_type=\u00bbregular\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb last=\u00bbno\u00bb border_position=\u00bball\u00bb][fusion_text]<\/p>\n<p>El siguiente bot\u00f3n te abrir\u00e1 todas las opciones de widgets que tienes disponibles seg\u00fan tu versi\u00f3n (b\u00e1sica o Pro). Como ya te he dicho lo vamos a ver con m\u00e1s detalle uno por uno.\u00a0En la parte inferior tienes 5 opciones m\u00e1s. Vamos a verlas:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-44454\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2018\/04\/tutorial-elementor-page-builder-menu-inferior.jpg\" alt=\"tutorial elementor page builder menu inferior\" width=\"1200\" height=\"600\" \/><\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Salir<\/strong>: Aqu\u00ed tienes dos opciones. Ver p\u00e1gina te va a abrir la p\u00e1gina que est\u00e1s editando y as\u00ed ver c\u00f3mo est\u00e1 quedando. Ir al escritorio te va a permitir volver al Escritorio de WordPress y salir de Elementor.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En la siguiente opci\u00f3n vas a poder elegir la vista en la que quieres que se muestre la p\u00e1gina en el panel de la derecha. Puedes elegir la vista de <strong>Escritorio, Tablet y M\u00f3vil<\/strong>. As\u00ed te vas a asegurar de que tu dise\u00f1o se vea bien en cualquier dispositivo.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En la <strong>opci\u00f3n de ayuda<\/strong> vas a poder ver un v\u00eddeo donde te introduce de forma muy r\u00e1pida como funciona Elementor. Adem\u00e1s se incluye un enlace a la p\u00e1gina web con la documentaci\u00f3n de Elementor, donde vas a encontrar distintos art\u00edculos en ingl\u00e9s acerca de Elementor.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]A continuaci\u00f3n tienes las <strong>opciones de plantillas<\/strong>. Recuerda los dise\u00f1os que guardas para poder usarlos en otras p\u00e1ginas. Tienes una opci\u00f3n de Biblioteca de plantillas donde tienes dise\u00f1os de p\u00e1ginas completas para usarlos con solo un click. Y adem\u00e1s tienes la opci\u00f3n de Guardar plantilla, donde vas a guardar todo el dise\u00f1o que hayas hecho en tu p\u00e1gina.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]Por \u00faltimo tienes el bot\u00f3n de <strong>Guardar<\/strong> para que no se pierda tu trabajo. [\/fusion_li_item][\/fusion_checklist][\/fusion_builder_column][fusion_builder_column type=\u00bb1_1&#8243; align_self=\u00bbauto\u00bb content_layout=\u00bbcolumn\u00bb align_content=\u00bbflex-start\u00bb valign_content=\u00bbflex-start\u00bb content_wrap=\u00bbwrap\u00bb spacing=\u00bb\u00bb center_content=\u00bbno\u00bb column_tag=\u00bbdiv\u00bb link=\u00bb\u00bb target=\u00bb_self\u00bb link_description=\u00bb\u00bb min_height=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb order_medium=\u00bb0&#8243; order_small=\u00bb0&#8243; hover_type=\u00bbnone\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb box_shadow=\u00bbno\u00bb box_shadow_blur=\u00bb0&#8243; box_shadow_spread=\u00bb0&#8243; box_shadow_color=\u00bb\u00bb box_shadow_style=\u00bb\u00bb overflow=\u00bb\u00bb background_type=\u00bbsingle\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_image_id=\u00bb\u00bb lazy_load=\u00bbnone\u00bb skip_lazy_load=\u00bb\u00bb background_position=\u00bbleft top\u00bb background_repeat=\u00bbno-repeat\u00bb background_blend_mode=\u00bbnone\u00bb filter_type=\u00bbregular\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb last=\u00bbno\u00bb border_position=\u00bball\u00bb][fusion_title title_type=\u00bbtext\u00bb rotation_effect=\u00bbbounceIn\u00bb display_time=\u00bb1200&#8243; highlight_effect=\u00bbcircle\u00bb loop_animation=\u00bboff\u00bb highlight_width=\u00bb9&#8243; highlight_top_margin=\u00bb0&#8243; before_text=\u00bb\u00bb rotation_text=\u00bb\u00bb highlight_text=\u00bb\u00bb after_text=\u00bb\u00bb title_link=\u00bboff\u00bb link_url=\u00bb\u00bb link_target=\u00bb_self\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb content_align_medium=\u00bb\u00bb content_align_small=\u00bb\u00bb content_align=\u00bbleft\u00bb size=\u00bb3&#8243; animated_font_size=\u00bb\u00bb fusion_font_family_title_font=\u00bb\u00bb fusion_font_variant_title_font=\u00bb\u00bb font_size=\u00bb\u00bb line_height=\u00bb\u00bb letter_spacing=\u00bb\u00bb text_transform=\u00bb\u00bb text_color=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb animated_text_color=\u00bb\u00bb text_shadow=\u00bbno\u00bb text_shadow_vertical=\u00bb\u00bb text_shadow_horizontal=\u00bb\u00bb text_shadow_blur=\u00bb0&#8243; text_shadow_color=\u00bb\u00bb margin_top_medium=\u00bb\u00bb margin_right_medium=\u00bb\u00bb margin_bottom_medium=\u00bb\u00bb margin_left_medium=\u00bb\u00bb margin_top_small=\u00bb\u00bb margin_right_small=\u00bb\u00bb margin_bottom_small=\u00bb\u00bb margin_left_small=\u00bb\u00bb margin_top=\u00bb\u00bb margin_right=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_left=\u00bb\u00bb margin_top_mobile=\u00bb\u00bb margin_bottom_mobile=\u00bb\u00bb gradient_font=\u00bbno\u00bb gradient_start_color=\u00bb\u00bb gradient_end_color=\u00bb\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; highlight_color=\u00bb\u00bb style_type=\u00bbdefault\u00bb sep_color=\u00bb\u00bb link_color=\u00bb\u00bb link_hover_color=\u00bb\u00bb animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb]<\/p>\n<p>Panel de vista previa<\/p>\n<p>[\/fusion_title][fusion_text]<\/p>\n<p>En este panel vas a poder ver<strong> c\u00f3mo va quedando tu dise\u00f1o<\/strong> con los widgets que vas agregando. Pero tambi\u00e9n puedes interaccionar con ellos.\u00a0Siempre va a aparecer una secci\u00f3n con los botones de Agregar nueva secci\u00f3n, A\u00f1adir plantilla y el mensaje de Arrastrar un widget. <strong>Esta secci\u00f3n no va a aparecer en tu dise\u00f1o final<\/strong>, solo en el panel de edici\u00f3n.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-44455\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2018\/04\/tutorial-elementor-page-builder-agregar-seccion.jpg\" alt=\"tutorial elementor page builder agregar seccion\" width=\"1200\" height=\"600\" \/><\/p>\n<p>Si haces click en Agregar nueva secci\u00f3n te va a aparecer una nueva pantalla donde poder elegir el dise\u00f1o de la secci\u00f3n. De ancho completo, dos columnas iguales, columnas asim\u00e9tricas\u2026 Con las im\u00e1genes que aparecen queda todo muy claro.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-44456\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2018\/04\/tutorial-elementor-page-builder-seleccionar-columna.jpg\" alt=\"tutorial elementor page builder seleccionar columna\" width=\"1200\" height=\"600\" \/><\/p>\n<p>Eliges el dise\u00f1o de secci\u00f3n que quieres y ya tienes una nueva secci\u00f3n en tu dise\u00f1o, lista para que a\u00f1adas el contenido.\u00a0Pero antes, d\u00e9jame explicarte un aspecto importante y es la <strong>diferencia entre Columna y Secci\u00f3n<\/strong>.\u00a0Secci\u00f3n es la zona completa, <strong>solo existe una secci\u00f3n por fila<\/strong>, el conjunto completo. Mientras que columna puede haber una o varias y del mismo o diferente ancho. Es importante que sepas la diferencia porque puedes por ejemplo, configurar un color de fondo. Y el resultado va a cambiar dependiendo si se lo aplicas a la secci\u00f3n o a una columna.\u00a0Vamos a ver las distintas opciones que puedes configurar tanto de una columna como de una secci\u00f3n.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Columna[\/fusion_title][fusion_text]<\/p>\n<p>Cuando haces click en el selector de columna te van a aparecer tres botones y el panel de herramientas va a cambiar con las opciones disponibles a configurar.\u00a0En los botones del selector puedes duplicar la columna, a\u00f1adir una nueva o eliminar la actual.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-44457\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2018\/04\/tutorial-elementor-page-builder-opciones-columna.jpg\" alt=\"tutorial elementor page builder opciones columna\" width=\"1200\" height=\"600\" \/><\/p>\n<p><strong>Duplicar una columna te puede venir bien si por ejemplo configuras un dise\u00f1o y lo quieres repetir<\/strong> pero solo quieres cambiar el texto. As\u00ed no tienes que repetir todos los pasos que ya hayas hecho para conseguir el dise\u00f1o.\u00a0Si ahora nos vamos al panel de herramientas podemos ver las siguientes opciones de estilo:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-44458\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2018\/04\/tutorial-elementor-page-builder-estilo-columna.jpg\" alt=\"tutorial elementor page builder estilo columna\" width=\"1200\" height=\"600\" \/><\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En <strong>fondo y borde<\/strong> creo que ya sabes qu\u00e9 vas a poder configurar. En fondo vas a poder elegir si no quieres nada, modo cl\u00e1sico o un gradiente. En modo cl\u00e1sico vas a poder elegir un color o una imagen. Si configuras un color y una imagen vas a ver la imagen. Si quieres un color, presta atenci\u00f3n de no tener configurada una imagen. En borde vas a poder elegir el tipo y en radio puedes configurar si quieres las esquinas redondeadas.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En <strong>capa de fondo<\/strong> vas a poder seleccionar las mismas opciones que en el fondo de antes pero se superpone al fondo que hayas configurado. Para eso tienes una nueva opci\u00f3n donde configurar la transparencia que quieres que tenga esta capa.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Disposici\u00f3n<\/strong>: Aqu\u00ed vas a poder seleccionar donde quieres que se posicionen los widgets que pongas en esta columna. Puedes seleccionar Arriba, Medio y Abajo. Lo m\u00e1s com\u00fan, para una mejor apariencia es que selecciones Medio.[\/fusion_li_item][\/fusion_checklist][\/fusion_builder_column][fusion_builder_column type=\u00bb1_1&#8243; align_self=\u00bbauto\u00bb content_layout=\u00bbcolumn\u00bb align_content=\u00bbflex-start\u00bb valign_content=\u00bbflex-start\u00bb content_wrap=\u00bbwrap\u00bb spacing=\u00bb\u00bb center_content=\u00bbno\u00bb column_tag=\u00bbdiv\u00bb link=\u00bb\u00bb target=\u00bb_self\u00bb link_description=\u00bb\u00bb min_height=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb order_medium=\u00bb0&#8243; order_small=\u00bb0&#8243; hover_type=\u00bbnone\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb box_shadow=\u00bbno\u00bb box_shadow_blur=\u00bb0&#8243; box_shadow_spread=\u00bb0&#8243; box_shadow_color=\u00bb\u00bb box_shadow_style=\u00bb\u00bb overflow=\u00bb\u00bb background_type=\u00bbsingle\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_image_id=\u00bb\u00bb lazy_load=\u00bbnone\u00bb skip_lazy_load=\u00bb\u00bb background_position=\u00bbleft top\u00bb background_repeat=\u00bbno-repeat\u00bb background_blend_mode=\u00bbnone\u00bb filter_type=\u00bbregular\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb last=\u00bbno\u00bb border_position=\u00bball\u00bb][fusion_text]<\/p>\n<p>Ahora vamos a ver las opciones que puedes configurar en la pesta\u00f1a de Avanzado:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-44459\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2018\/04\/tutorial-elementor-page-builder-avanzado-columna.jpg\" alt=\"tutorial elementor page builder avanzado columna\" width=\"1200\" height=\"600\" \/><\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En <strong>margen<\/strong> vamos a poder configurar el espacio externo con otros elementos. Puedes elegir entre ponerlo en p\u00edxeles o en porcentaje.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En <strong>relleno<\/strong> en cambio, el espacio que vas a configurar es el interior, desde el borde de la columna hasta el contenido.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]Tambi\u00e9n puedes configurar que el elemento aparezca con una <strong>animaci\u00f3n<\/strong>. No abuses de animaciones porque va a perjudicar el rendimiento de tu web.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>CSS ID, Clases CSS<\/strong>: vas a poder establecer un ID y una clase para usar en tus hojas de estilos CSS. Si lo que te acabo de decir te suena a chino, no le vas a sacar provecho. Se trata de personalizar a\u00fan m\u00e1s la columna, pero ya en c\u00f3digo.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En <strong>responsive<\/strong>, puedes configurar el ancho de la columna cuando se vea en m\u00f3viles. Por ejemplo, una columna que en la vista de escritorio se vea al 50% de ancho se va a ver muy peque\u00f1a en m\u00f3vil. Por eso puedes poner que en m\u00f3vil se vea al 100% o 95% y se acaba el problema. Usa la opci\u00f3n Ancho para m\u00f3vil y no Mobile Portrait. Hacen lo mismo pero la segunda est\u00e1 desapareciendo.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En <strong>Custom CSS<\/strong> puedes escribir t\u00fa los estilos en CSS que quieras. Si no sabes c\u00f3digo lo mejor es que no toques nada aqu\u00ed, tampoco creo que te haga falta si no quieres alg\u00fan dise\u00f1o superespec\u00edfico.[\/fusion_li_item][\/fusion_checklist][\/fusion_builder_column][fusion_builder_column type=\u00bb1_1&#8243; align_self=\u00bbauto\u00bb content_layout=\u00bbcolumn\u00bb align_content=\u00bbflex-start\u00bb valign_content=\u00bbflex-start\u00bb content_wrap=\u00bbwrap\u00bb spacing=\u00bb\u00bb center_content=\u00bbno\u00bb column_tag=\u00bbdiv\u00bb link=\u00bb\u00bb target=\u00bb_self\u00bb link_description=\u00bb\u00bb min_height=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb order_medium=\u00bb0&#8243; order_small=\u00bb0&#8243; hover_type=\u00bbnone\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb box_shadow=\u00bbno\u00bb box_shadow_blur=\u00bb0&#8243; box_shadow_spread=\u00bb0&#8243; box_shadow_color=\u00bb\u00bb box_shadow_style=\u00bb\u00bb overflow=\u00bb\u00bb background_type=\u00bbsingle\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_image_id=\u00bb\u00bb lazy_load=\u00bbnone\u00bb skip_lazy_load=\u00bb\u00bb background_position=\u00bbleft top\u00bb background_repeat=\u00bbno-repeat\u00bb background_blend_mode=\u00bbnone\u00bb filter_type=\u00bbregular\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb last=\u00bbno\u00bb border_position=\u00bball\u00bb][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Secci\u00f3n[\/fusion_title][fusion_text]<\/p>\n<p>Vamos ahora a ver las opciones que nos permite una secci\u00f3n. Recuerda que las secciones son bloques que pueden contener una o varias columnas. Una vez dicho vamos a ver qu\u00e9 opciones nos permiten:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-44460\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2018\/04\/tutorial-elementor-page-builder-ajustes-seccion.jpg\" alt=\"tutorial elementor page builder ajustes seccion\" width=\"1200\" height=\"600\" \/><\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Extender la secci\u00f3n<\/strong>: Se trata de un interruptor que puedes activar o desactivar. Si lo activas la secci\u00f3n ocupar\u00e1 todo el ancho de la ventana de tu navegador.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Ancho del contenido<\/strong>: Aqu\u00ed puedes seleccionar el ancho de la secci\u00f3n a elegir entre Caja y Ancho completo. Si eliges Caja adem\u00e1s podr\u00e1s seleccionar el ancho en p\u00edxeles.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Diferencia entre Extender la secci\u00f3n y Ancho completo<\/strong>: Aunque pueda parecer que son lo mismo existe una diferencia. Extender la secci\u00f3n consigue el ancho completo a trav\u00e9s de JavaScript por lo que el ancho completo siempre va a ser del ancho de la ventana. Mientras el Ancho completo lo hace a trav\u00e9s de CSS por lo que el ancho completo puede variar. Si eliges Ancho completo y ves que el ancho completo no es real, activa la casilla Extender la secci\u00f3n.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Espacio entre columnas<\/strong>: aqu\u00ed vas a poder seleccionar entre varias opciones para determinar el espacio entres las columnas que forman parte de la secci\u00f3n. Para un mejor dise\u00f1o, es mejor que los distintos elementos no aparezcan agolpados, recu\u00e9rdalo.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Alto<\/strong>: existen tres opciones. Predeterminado: aqu\u00ed el alto de la secci\u00f3n va a ser la necesaria para poder acoger los elementos que contiene. Acomodar a la pantalla: el alto va a ser el mismo que la ventana de tu navegador, viene bien por ejemplo para una landing page. Y altura m\u00ednima: aqu\u00ed vas a poder escribir a mano la altura de la secci\u00f3n. Pero solo para aumentar la altura, como m\u00ednimo la altura es la misma que en la opci\u00f3n Predeterminado.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Posici\u00f3n del contenido<\/strong>: Esta opci\u00f3n es la misma que ya vimos en las columnas. Puedes elegir entre Arriba, Medio y Abajo.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En <strong>estructura<\/strong> vas a poder ver la configuraci\u00f3n de columnas que existe en la secci\u00f3n. Por ejemplo, ancho completo, 2 columnas, etc. Si la configuraci\u00f3n es de varias columnas podr\u00e1s elegir su distribuci\u00f3n. Si quieres que todas las columnas sean iguales, que la primera sea mayor que las dem\u00e1s, etc.[\/fusion_li_item][\/fusion_checklist][\/fusion_builder_column][fusion_builder_column type=\u00bb1_1&#8243; align_self=\u00bbauto\u00bb content_layout=\u00bbcolumn\u00bb align_content=\u00bbflex-start\u00bb valign_content=\u00bbflex-start\u00bb content_wrap=\u00bbwrap\u00bb spacing=\u00bb\u00bb center_content=\u00bbno\u00bb column_tag=\u00bbdiv\u00bb link=\u00bb\u00bb target=\u00bb_self\u00bb link_description=\u00bb\u00bb min_height=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb order_medium=\u00bb0&#8243; order_small=\u00bb0&#8243; hover_type=\u00bbnone\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb box_shadow=\u00bbno\u00bb box_shadow_blur=\u00bb0&#8243; box_shadow_spread=\u00bb0&#8243; box_shadow_color=\u00bb\u00bb box_shadow_style=\u00bb\u00bb overflow=\u00bb\u00bb background_type=\u00bbsingle\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_image_id=\u00bb\u00bb lazy_load=\u00bbnone\u00bb skip_lazy_load=\u00bb\u00bb background_position=\u00bbleft top\u00bb background_repeat=\u00bbno-repeat\u00bb background_blend_mode=\u00bbnone\u00bb filter_type=\u00bbregular\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb last=\u00bbno\u00bb border_position=\u00bball\u00bb][fusion_text]<\/p>\n<p>En las opciones de estilo vas a poder configurar el dise\u00f1o puro y duro de tu secci\u00f3n:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-44461\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2018\/04\/tutorial-elementor-page-builder-estilo-seccion.jpg\" alt=\"tutorial elementor page builder estilo seccion\" width=\"1200\" height=\"600\" \/><\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En <strong>fondo<\/strong>, tienes las mismas opciones que ya vimos para las columnas pero con una opci\u00f3n m\u00e1s. En la secci\u00f3n <strong>puedes a\u00f1adir un v\u00eddeo<\/strong> como fondo. Para poner un v\u00eddeo como fondo de una secci\u00f3n tienes que prestar atenci\u00f3n a dos opciones. La primera es la fuente del v\u00eddeo. Puedes elegir entre un v\u00eddeo de YouTube o un v\u00eddeo que tengas subido a tu web. Yo te recomiendo la segunda opci\u00f3n. La carga va a ser mucho m\u00e1s r\u00e1pida y si has usado YouTube (me imagino que s\u00ed) habr\u00e1s observado que por defecto se selecciona la calidad del v\u00eddeo de forma autom\u00e1tica y puede pasar que en tu web se cargue el v\u00eddeo con baja resoluci\u00f3n y tu dise\u00f1o pierda mucho. Adem\u00e1s, en un v\u00eddeo de YouTube va a aparecer la animaci\u00f3n de carga al principio. Por \u00faltimo, si el v\u00eddeo que selecciones no carga, puedes elegir una imagen de fondo como alternativa.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]La <strong>capa de fondo<\/strong> funciona igual que en las columnas. Es muy \u00fatil para usar en conjunto con un v\u00eddeo. Puedes aplicar una capa de negro con una opacidad 0,5 y no tendr\u00e1s problemas si usas texto en blanco y el fondo del v\u00eddeo se vuelve claro.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]La <strong>opci\u00f3n de borde<\/strong> se puede usar igual que ya la hemos usado en los casos de las columnas. Exactamente igual.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Shape Divider<\/strong>. Esta opci\u00f3n es muy interesante. Te permite a\u00f1adir gr\u00e1ficos a tu secci\u00f3n. Puedes elegir que aparezca arriba o abajo, el tipo de de gr\u00e1fico, el color, el ancho y el alto. Adem\u00e1s puedes rotar el gr\u00e1fico de modo horizontal y que aparezca por delante del resto de contenido. Es una opci\u00f3n que te puede dar mucho juego. Explora las siguientes opciones que tiene porque puedes dar un toque incre\u00edble a tu web.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En <strong>tipograf\u00eda<\/strong> puedes elegir los colores que va a tener los textos de la secci\u00f3n y su alineaci\u00f3n. Estos ajustes son generales para la secci\u00f3n, si en un elemento eliges el color este va a tener prioridad.[\/fusion_li_item][\/fusion_checklist][\/fusion_builder_column][fusion_builder_column type=\u00bb1_1&#8243; align_self=\u00bbauto\u00bb content_layout=\u00bbcolumn\u00bb align_content=\u00bbflex-start\u00bb valign_content=\u00bbflex-start\u00bb content_wrap=\u00bbwrap\u00bb spacing=\u00bb\u00bb center_content=\u00bbno\u00bb column_tag=\u00bbdiv\u00bb link=\u00bb\u00bb target=\u00bb_self\u00bb link_description=\u00bb\u00bb min_height=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb order_medium=\u00bb0&#8243; order_small=\u00bb0&#8243; hover_type=\u00bbnone\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb box_shadow=\u00bbno\u00bb box_shadow_blur=\u00bb0&#8243; box_shadow_spread=\u00bb0&#8243; box_shadow_color=\u00bb\u00bb box_shadow_style=\u00bb\u00bb overflow=\u00bb\u00bb background_type=\u00bbsingle\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_image_id=\u00bb\u00bb lazy_load=\u00bbnone\u00bb skip_lazy_load=\u00bb\u00bb background_position=\u00bbleft top\u00bb background_repeat=\u00bbno-repeat\u00bb background_blend_mode=\u00bbnone\u00bb filter_type=\u00bbregular\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb last=\u00bbno\u00bb border_position=\u00bball\u00bb][fusion_text]<\/p>\n<p>En la pesta\u00f1a de Avanzado tienes las mismas opciones que ya vimos en la Columna. La \u00fanica diferencia es que puedes observar que los <strong>m\u00e1rgenes izquierdo y derecho aparece auto<\/strong>. Esto significa que la secci\u00f3n va a aparecer centrada. Si lo quieres centrado aseg\u00farate que est\u00e9 as\u00ed, no lo cambies.\u00a0Adem\u00e1s en <strong>Responsive<\/strong> puedes elegir entre esconder la secci\u00f3n en escritorio, tablet, m\u00f3vil o la combinaci\u00f3n que t\u00fa escojas.[\/fusion_text][\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container][fusion_builder_container hundred_percent=\u00bbno\u00bb hundred_percent_height=\u00bbno\u00bb hundred_percent_height_scroll=\u00bbno\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bbwidgets-basicos\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb link_color=\u00bb\u00bb link_hover_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb gradient_start_color=\u00bb\u00bb gradient_end_color=\u00bb\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; background_blend_mode=\u00bbnone\u00bb video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; type=\u00bbflex\u00bb][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; align_self=\u00bbauto\u00bb content_layout=\u00bbcolumn\u00bb align_content=\u00bbflex-start\u00bb valign_content=\u00bbflex-start\u00bb content_wrap=\u00bbwrap\u00bb spacing=\u00bb\u00bb center_content=\u00bbno\u00bb column_tag=\u00bbdiv\u00bb link=\u00bb\u00bb target=\u00bb_self\u00bb link_description=\u00bb\u00bb min_height=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb order_medium=\u00bb0&#8243; order_small=\u00bb0&#8243; hover_type=\u00bbnone\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb box_shadow=\u00bbno\u00bb box_shadow_blur=\u00bb0&#8243; box_shadow_spread=\u00bb0&#8243; box_shadow_color=\u00bb\u00bb box_shadow_style=\u00bb\u00bb overflow=\u00bb\u00bb background_type=\u00bbsingle\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_image_id=\u00bb\u00bb lazy_load=\u00bbnone\u00bb skip_lazy_load=\u00bb\u00bb background_position=\u00bbleft top\u00bb background_repeat=\u00bbno-repeat\u00bb background_blend_mode=\u00bbnone\u00bb filter_type=\u00bbregular\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb last=\u00bbno\u00bb border_position=\u00bball\u00bb][fusion_title size=\u00bb2&#8243; content_align=\u00bbleft\u00bb]<\/p>\n<p><a name=\"basicos\"><\/a>Widgets b\u00e1sicos<\/p>\n<p>[\/fusion_title][fusion_text]<\/p>\n<p>Una vez que ya hemos visto las Columnas y Secciones, vamos a pasar a ver los elementos que te van a permitir construir tu web con Elementor.\u00a0<strong>Para a\u00f1adir un widget a una columna tienes que arrastrarlo<\/strong>. Cuando lo hagas ver\u00e1s que aparece una l\u00ednea azul que es el lugar donde se va a colocar el widget. Suelta el click de tu rat\u00f3n y tu widget se habr\u00e1 a\u00f1adido a tu p\u00e1gina.<\/p>\n<p>Quiero aclararte una cosa antes de comenzar a explicar en detalle los widgets. Van a existir muchas opciones que se van a repetir. Por ejemplo, las opciones de fondo y borde que ya hemos visto van a aparecer pr\u00e1cticamente en todos los elementos.\u00a0Si los explicase una y otra vez, te cansar\u00edas de leer este manual, por lo que no tiene sentido. Seguro que est\u00e1s de acuerdo con esto.\u00a0Dicho esto vamos a comenzar a ver los widgets.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-44462\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2018\/04\/tutorial-elementor-page-builder-widgets-basicos.jpg\" alt=\"tutorial elementor page builder widgets basicos\" width=\"1200\" height=\"600\" \/><\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Columnas[\/fusion_title][fusion_text]<\/p>\n<p>Has visto que a la hora de a\u00f1adir una secci\u00f3n puedes elegir la distribuci\u00f3n de columnas que quieras. Con este widget vas a poder <strong>a\u00f1adir columnas en cualquier momento<\/strong>.\u00a0Imagina que creas una secci\u00f3n con dos columnas. Y quieres que la primera columna a su vez est\u00e9 formada por dos columnas. Pero que la segunda columna sea normal.\u00a0Pues puedes elegir una secci\u00f3n de dos columnas y a la primera a\u00f1adir este widget. Te permite ampliar las posibilidades.<\/p>\n<p>A diferencia de las columnas en una secci\u00f3n, <strong>con este widget no puedes elegir el n\u00famero de columnas, siempre son 2<\/strong>.\u00a0Tienes que tener en cuenta que este widget es un contenedor, no se va a ver nada. Tienes que a\u00f1adir otros widgets dentro para ver alg\u00fan resultado.\u00a0Todas las opciones son las que ya hemos visto cuando te expliqu\u00e9 las secciones y columnas. Si tienes alguna duda vuelve a leer esa parte.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Encabezado[\/fusion_title][fusion_text]<\/p>\n<p>Con este widget vas a poder a\u00f1adir un encabezado de texto en tu dise\u00f1o. Vamos a ver las opciones que vas a poder configurar.<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>T\u00edtulo<\/strong>: aqu\u00ed es donde vas a poder escribir el contenido de tu encabezado.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Enlace<\/strong>: si quieres que tu encabezado se convierta en alg\u00fan enlace solo tienes que escribir aqu\u00ed la direcci\u00f3n a la que quieras dirigir el enlace. Si el enlace es externo (fuera de tu web) marca el bot\u00f3n para que se abra en una nueva ventana, sin cerrar tu web.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Tama\u00f1o<\/strong>: Aqu\u00ed puedes elegir Predeterminado para que se aplique el tama\u00f1o por defecto. O tambi\u00e9n puedes elegir entre Peque\u00f1o, Medio, Largo, XL o XXL para personalizar el tama\u00f1o a mano.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Etiqueta HTML<\/strong>: Aqu\u00ed puedes elegir la etiqueta HTML que se va a usar para el encabezado. Es importante elegir bien la etiqueta para el SEO de tu web. [\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Alineaci\u00f3n<\/strong>: Por \u00faltimo puedes elegir la alineaci\u00f3n del texto a elegir entre las alineaciones cl\u00e1sicas: Izquierda, Derecha, Centro y Justificado.[\/fusion_li_item][\/fusion_checklist][\/fusion_builder_column][fusion_builder_column type=\u00bb1_1&#8243; align_self=\u00bbauto\u00bb content_layout=\u00bbcolumn\u00bb align_content=\u00bbflex-start\u00bb valign_content=\u00bbflex-start\u00bb content_wrap=\u00bbwrap\u00bb spacing=\u00bb\u00bb center_content=\u00bbno\u00bb column_tag=\u00bbdiv\u00bb link=\u00bb\u00bb target=\u00bb_self\u00bb link_description=\u00bb\u00bb min_height=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb order_medium=\u00bb0&#8243; order_small=\u00bb0&#8243; hover_type=\u00bbnone\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb box_shadow=\u00bbno\u00bb box_shadow_blur=\u00bb0&#8243; box_shadow_spread=\u00bb0&#8243; box_shadow_color=\u00bb\u00bb box_shadow_style=\u00bb\u00bb overflow=\u00bb\u00bb background_type=\u00bbsingle\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_image_id=\u00bb\u00bb lazy_load=\u00bbnone\u00bb skip_lazy_load=\u00bb\u00bb background_position=\u00bbleft top\u00bb background_repeat=\u00bbno-repeat\u00bb background_blend_mode=\u00bbnone\u00bb filter_type=\u00bbregular\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb last=\u00bbno\u00bb border_position=\u00bball\u00bb][fusion_text]<\/p>\n<p>En la pesta\u00f1a de estilo puedes elegir el color y si activas la opci\u00f3n de Tipograf\u00eda podr\u00e1s personalizar al m\u00e1ximo el estilo del texto: tama\u00f1o, fuente, usar o no negrita, que el texto aparezca en may\u00fasculas. Si no activas esta pesta\u00f1a se usar\u00e1 la configuraci\u00f3n de tu tema.\u00a0En la pesta\u00f1a de avanzado vas a ver de nuevo las opciones que ya has visto: m\u00e1rgenes, relleno, fondo, borde, opciones Responsive\u2026<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Imagen[\/fusion_title][fusion_text]<\/p>\n<p>Con este widget vas a poder a\u00f1adir una imagen al dise\u00f1o de tu p\u00e1gina. Ten claro que este widget solo a\u00f1ade una imagen,<strong> no puedes a\u00f1adirle texto encima<\/strong>. Si quieres hacer esto crea un widget de Encabezado o el siguiente que vamos a ver Editor de texto y configura una imagen de fondo.\u00a0Volviendo al widget de Imagen vamos a ver sus opciones.<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En primer lugar podr\u00e1s <strong>elegir la imagen<\/strong>. La podr\u00e1s elegir entre las que tengas subidas en tu instalaci\u00f3n de WordPress. [\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En <strong>tama\u00f1o de imagen<\/strong> vas a poder elegir entre las que est\u00e9n disponibles. Va a variar dependiendo de tu tema y plugins. A parte de las disponibles en tu WordPress tienes las opciones de Completo que va a ocupar todo el ancho disponible y Personalizado donde vas a poder escribir a mano las dimensiones.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En <strong>alineaci\u00f3n<\/strong> vas a poder elegir si quieres que tu imagen aparezca a la izquierda, a la derecha o centrada.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En <strong>leyenda<\/strong> vas a poder escribir un texto que aparecer\u00e1 debajo de la imagen.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En <strong>enlace<\/strong> vas a tener tres opciones. Ninguno: la imagen no enlazar\u00e1 a nada, se mostrar\u00e1 la imagen sin m\u00e1s. Archivo de medios: con esta opci\u00f3n, si un usuario hace click en la imagen se abrir\u00e1 a tama\u00f1o completo en una nueva ventana. Y en URL personalizada podr\u00e1s incluir un enlace a una p\u00e1gina web como ya vimos en el encabezado.[\/fusion_li_item][\/fusion_checklist][\/fusion_builder_column][fusion_builder_column type=\u00bb1_1&#8243; align_self=\u00bbauto\u00bb content_layout=\u00bbcolumn\u00bb align_content=\u00bbflex-start\u00bb valign_content=\u00bbflex-start\u00bb content_wrap=\u00bbwrap\u00bb spacing=\u00bb\u00bb center_content=\u00bbno\u00bb column_tag=\u00bbdiv\u00bb link=\u00bb\u00bb target=\u00bb_self\u00bb link_description=\u00bb\u00bb min_height=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb order_medium=\u00bb0&#8243; order_small=\u00bb0&#8243; hover_type=\u00bbnone\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb box_shadow=\u00bbno\u00bb box_shadow_blur=\u00bb0&#8243; box_shadow_spread=\u00bb0&#8243; box_shadow_color=\u00bb\u00bb box_shadow_style=\u00bb\u00bb overflow=\u00bb\u00bb background_type=\u00bbsingle\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_image_id=\u00bb\u00bb lazy_load=\u00bbnone\u00bb skip_lazy_load=\u00bb\u00bb background_position=\u00bbleft top\u00bb background_repeat=\u00bbno-repeat\u00bb background_blend_mode=\u00bbnone\u00bb filter_type=\u00bbregular\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb last=\u00bbno\u00bb border_position=\u00bball\u00bb][fusion_text]<\/p>\n<p>El widget de imagen a\u00f1ade <strong>opciones distintas en la pesta\u00f1a de estilo<\/strong>. Aqu\u00ed te las explico:<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En <strong>tama\u00f1o<\/strong> vas a poder aplicar una escala a tu imagen, por eso el valor es un porcentaje. En 100% es el tama\u00f1o completo, 50% mitad, 25% una cuarta parte, etc.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Opacidad<\/strong>: Aqu\u00ed puedes establecer una transparencia a tu imagen. Dependiendo de los elementos que existan detr\u00e1s te puede interesar aplicar una transparencia.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En <strong>animaci\u00f3n<\/strong> puedes configurar que al pasar el rat\u00f3n por encima de la imagen ocurra una animaci\u00f3n. Ya te he dicho que no soy muy partidario de las animaciones porque penalizan el rendimiento de tu web, \u00fasalas con cuidado. Si te decides por usar una animaci\u00f3n ve probando hasta que encuentres la que m\u00e1s te gusta.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]Como las opciones borde ya las hemos visto, pasamos a las opciones de <strong>Leyenda<\/strong>. Aqu\u00ed puedes configurar su alineaci\u00f3n, el color y las opciones de fuente.[\/fusion_li_item][\/fusion_checklist][\/fusion_builder_column][fusion_builder_column type=\u00bb1_1&#8243; align_self=\u00bbauto\u00bb content_layout=\u00bbcolumn\u00bb align_content=\u00bbflex-start\u00bb valign_content=\u00bbflex-start\u00bb content_wrap=\u00bbwrap\u00bb spacing=\u00bb\u00bb center_content=\u00bbno\u00bb column_tag=\u00bbdiv\u00bb link=\u00bb\u00bb target=\u00bb_self\u00bb link_description=\u00bb\u00bb min_height=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb order_medium=\u00bb0&#8243; order_small=\u00bb0&#8243; hover_type=\u00bbnone\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb box_shadow=\u00bbno\u00bb box_shadow_blur=\u00bb0&#8243; box_shadow_spread=\u00bb0&#8243; box_shadow_color=\u00bb\u00bb box_shadow_style=\u00bb\u00bb overflow=\u00bb\u00bb background_type=\u00bbsingle\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_image_id=\u00bb\u00bb lazy_load=\u00bbnone\u00bb skip_lazy_load=\u00bb\u00bb background_position=\u00bbleft top\u00bb background_repeat=\u00bbno-repeat\u00bb background_blend_mode=\u00bbnone\u00bb filter_type=\u00bbregular\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb last=\u00bbno\u00bb border_position=\u00bball\u00bb][fusion_text]<\/p>\n<p>En las opciones avanzadas volvemos a ver lo que ya hemos visto.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Editor de texto[\/fusion_title][fusion_text]<\/p>\n<p>En cuadro de texto vas a poder a\u00f1adir un texto <strong>usando el mismo editor de WordPress que usas para escribir tus art\u00edculos<\/strong>. Est\u00e1 pensado para textos m\u00e1s extensos que el widget de Encabezado, aunque con este widget tambi\u00e9n puedes crear encabezados de texto.\u00a0En las opciones de estilo y avanzado vas a volver a ver las opciones que ya has visto en otros widgets.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]V\u00eddeo[\/fusion_title][fusion_text]<\/p>\n<p>En el widget de v\u00eddeo vas a poder a\u00f1adir un v\u00eddeo de <strong>YouTube o de Vimeo<\/strong>. Las opciones se explican solas, vamos a echarles un vistazo r\u00e1pido.\u00a0En <strong>enlace<\/strong> puedes copiar y pegar la direcci\u00f3n del v\u00eddeo que quieras usar. Y adem\u00e1s elegir la <strong>proporci\u00f3n<\/strong> con la que quieres que se muestre.\u00a0Despu\u00e9s puedes activar distintas opciones como que el v\u00eddeo inicia de modo autom\u00e1tico, que se muestren los controles, el t\u00edtulo.<\/p>\n<p>Tambi\u00e9n puedes elegir una imagen para que se muestre en lugar de la imagen determinada que muestre YouTube o Vimeo.\u00a0Por \u00faltimo, dentro de las opciones de Imagen de la cubierta puedes activar <strong>Lightbox<\/strong>. Esta opci\u00f3n va a poner el v\u00eddeo en el centro de tu pantalla y poner un fondo del color que elijas. As\u00ed tus usuarios van a ver el v\u00eddeo sin distracciones.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Bot\u00f3n[\/fusion_title][fusion_text]<\/p>\n<p>Con este widgets vas a poder incluir un bot\u00f3n que dirija a una web al hace click en \u00e9l. La mejor forma de comprender su funcionamiento es viendo sus opciones:<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Tipo<\/strong>: En tipo vas a poder usar uno de los dise\u00f1os establecidos. Informaci\u00f3n: fondo de color azul. \u00c9xito: fondo de color verde. Advertencia: fondo de color naranja y Peligro: fondo de color rojo. Aunque tienes estos dise\u00f1os ya preparados, t\u00fa puedes elegir el color que quieras como vas a ver.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Texto<\/strong>: Aqu\u00ed vas a escribir el texto que va a aparecer en el bot\u00f3n.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Enlace<\/strong>: La p\u00e1gina que se va a abrir al hacer click en el bot\u00f3n y la opci\u00f3n para que se abra en otra web. Recuerda, si en enlace es una p\u00e1gina fuera de tu web, m\u00e1rcalo.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Alineaci\u00f3n<\/strong>: La alineaci\u00f3n que va a tener tu bot\u00f3n en el lugar donde lo hayas inclu\u00eddo.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En <strong>tama\u00f1o<\/strong> vas a poder elegir el tama\u00f1o entre varios tama\u00f1os disponibles.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En <strong>icono<\/strong> vas a poder incluir un icono dentro de tu bot\u00f3n. Si eliges un icono vas a poder configurar si va a aparecer antes o despu\u00e9s del texto y el espacio en medio.[\/fusion_li_item][\/fusion_checklist][\/fusion_builder_column][fusion_builder_column type=\u00bb1_1&#8243; align_self=\u00bbauto\u00bb content_layout=\u00bbcolumn\u00bb align_content=\u00bbflex-start\u00bb valign_content=\u00bbflex-start\u00bb content_wrap=\u00bbwrap\u00bb spacing=\u00bb\u00bb center_content=\u00bbno\u00bb column_tag=\u00bbdiv\u00bb link=\u00bb\u00bb target=\u00bb_self\u00bb link_description=\u00bb\u00bb min_height=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb order_medium=\u00bb0&#8243; order_small=\u00bb0&#8243; hover_type=\u00bbnone\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb box_shadow=\u00bbno\u00bb box_shadow_blur=\u00bb0&#8243; box_shadow_spread=\u00bb0&#8243; box_shadow_color=\u00bb\u00bb box_shadow_style=\u00bb\u00bb overflow=\u00bb\u00bb background_type=\u00bbsingle\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_image_id=\u00bb\u00bb lazy_load=\u00bbnone\u00bb skip_lazy_load=\u00bb\u00bb background_position=\u00bbleft top\u00bb background_repeat=\u00bbno-repeat\u00bb background_blend_mode=\u00bbnone\u00bb filter_type=\u00bbregular\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb last=\u00bbno\u00bb border_position=\u00bball\u00bb][fusion_text]<\/p>\n<p>En las opciones de Estilo vas a poder configura <strong>el dise\u00f1o del bot\u00f3n de forma personalizada<\/strong> como te dec\u00eda en las opciones de Tipo.\u00a0Tienes que distinguir entre las opciones que se aplican en modo Normal y en modo Hover. <strong>El modo Hover se aplica cuando se pasa el rat\u00f3n por encima del rat\u00f3n<\/strong>.\u00a0Las dem\u00e1s opciones ya se han visto: m\u00e1rgenes, rellenos, opciones de tipograf\u00eda, etc.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Separador[\/fusion_title][fusion_text]<\/p>\n<p>El widget Separador va a a\u00f1adir una barra horizontal. Viene muy bien para separar elementos de una forma elegante.\u00a0Las opciones del separador son muy sencillas. Vamos a verlas:<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Estilo<\/strong>: Aqu\u00ed vas a poder elegir el estilo que va a tener la l\u00ednea horizontal. S\u00f3lido, una sola l\u00ednea. Doble, punteado o l\u00ednea discontinua.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Peso<\/strong>: Aqu\u00ed vas a poder configurar el grosor que va a tener la l\u00ednea.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]Las opciones de <strong>color<\/strong>, <strong>ancho<\/strong> y <strong>alineaci\u00f3n<\/strong> se explican por s\u00ed solas.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En <strong>brecha<\/strong> vas a poder elegir el espacio que se va a a\u00f1adir por encima y debajo de la l\u00ednea.[\/fusion_li_item][\/fusion_checklist][\/fusion_builder_column][fusion_builder_column type=\u00bb1_1&#8243; align_self=\u00bbauto\u00bb content_layout=\u00bbcolumn\u00bb align_content=\u00bbflex-start\u00bb valign_content=\u00bbflex-start\u00bb content_wrap=\u00bbwrap\u00bb spacing=\u00bb\u00bb center_content=\u00bbno\u00bb column_tag=\u00bbdiv\u00bb link=\u00bb\u00bb target=\u00bb_self\u00bb link_description=\u00bb\u00bb min_height=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb order_medium=\u00bb0&#8243; order_small=\u00bb0&#8243; hover_type=\u00bbnone\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb box_shadow=\u00bbno\u00bb box_shadow_blur=\u00bb0&#8243; box_shadow_spread=\u00bb0&#8243; box_shadow_color=\u00bb\u00bb box_shadow_style=\u00bb\u00bb overflow=\u00bb\u00bb background_type=\u00bbsingle\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_image_id=\u00bb\u00bb lazy_load=\u00bbnone\u00bb skip_lazy_load=\u00bb\u00bb background_position=\u00bbleft top\u00bb background_repeat=\u00bbno-repeat\u00bb background_blend_mode=\u00bbnone\u00bb filter_type=\u00bbregular\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb last=\u00bbno\u00bb border_position=\u00bball\u00bb][fusion_text]<\/p>\n<p>Una configuraci\u00f3n que funciona muy bien en cualquier web es la siguiente:<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]Estilo: S\u00f3lido[\/fusion_li_item]<br \/>\n[fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]Peso: 2[\/fusion_li_item]<br \/>\n[fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]Color: #ccc[\/fusion_li_item]<br \/>\n[fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]Ancho: 60[\/fusion_li_item]<br \/>\n[fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]Alineaci\u00f3n: Centro[\/fusion_li_item][\/fusion_checklist][\/fusion_builder_column][fusion_builder_column type=\u00bb1_1&#8243; align_self=\u00bbauto\u00bb content_layout=\u00bbcolumn\u00bb align_content=\u00bbflex-start\u00bb valign_content=\u00bbflex-start\u00bb content_wrap=\u00bbwrap\u00bb spacing=\u00bb\u00bb center_content=\u00bbno\u00bb column_tag=\u00bbdiv\u00bb link=\u00bb\u00bb target=\u00bb_self\u00bb link_description=\u00bb\u00bb min_height=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb order_medium=\u00bb0&#8243; order_small=\u00bb0&#8243; hover_type=\u00bbnone\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb box_shadow=\u00bbno\u00bb box_shadow_blur=\u00bb0&#8243; box_shadow_spread=\u00bb0&#8243; box_shadow_color=\u00bb\u00bb box_shadow_style=\u00bb\u00bb overflow=\u00bb\u00bb background_type=\u00bbsingle\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_image_id=\u00bb\u00bb lazy_load=\u00bbnone\u00bb skip_lazy_load=\u00bb\u00bb background_position=\u00bbleft top\u00bb background_repeat=\u00bbno-repeat\u00bb background_blend_mode=\u00bbnone\u00bb filter_type=\u00bbregular\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb last=\u00bbno\u00bb border_position=\u00bball\u00bb][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Espaciador[\/fusion_title][fusion_text]<\/p>\n<p>El widget de Espaciador tambi\u00e9n sirve como el de Separador para separar elementos. Pero a diferencia de Separador, este widget<strong> a\u00f1ade un espacio en blanco<\/strong>.\u00a0Por lo tanto, la \u00fanica opci\u00f3n que existe en este widget es el espacio que quieres que tenga.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Google Maps[\/fusion_title][fusion_text]<\/p>\n<p>Con este plugin vas a poder a\u00f1adir un mapa de Google de forma muy sencilla. <strong>Es muy \u00fatil si tienes un negocio f\u00edsico<\/strong>.\u00a0Como todos los widgets de Elementor se configura de una forma muy f\u00e1cil:<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Direcci\u00f3n<\/strong>: Aqu\u00ed vas a escribir la direcci\u00f3n que quieres que aparezca. Tienes que buscar la direcci\u00f3n concreta que quieres que aparezca. Porque si escribes Madrid te va a mostrar la ciudad completa.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Nivel de Zoom<\/strong>: Selecciona el zoom con el que se va a mostrar la direcci\u00f3n en el mapa. Dependiendo de la ciudad que busques, elige un zoom 17 o 18.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Alto<\/strong>: Aqu\u00ed vas a configurar el alto del elemento donde se muestra el mapa. No te confundas con la altitud del mapa. Se trata del cuadro donde se muestra.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Impedir scroll<\/strong>: Si lo activas, el mapa no se va a poder manipular. No vas a poder hacer zoom ni navegar por el mapa. Si lo dejas desactivado, s\u00ed lo podr\u00e1s hacer.[\/fusion_li_item][\/fusion_checklist][\/fusion_builder_column][fusion_builder_column type=\u00bb1_1&#8243; align_self=\u00bbauto\u00bb content_layout=\u00bbcolumn\u00bb align_content=\u00bbflex-start\u00bb valign_content=\u00bbflex-start\u00bb content_wrap=\u00bbwrap\u00bb spacing=\u00bb\u00bb center_content=\u00bbno\u00bb column_tag=\u00bbdiv\u00bb link=\u00bb\u00bb target=\u00bb_self\u00bb link_description=\u00bb\u00bb min_height=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb order_medium=\u00bb0&#8243; order_small=\u00bb0&#8243; hover_type=\u00bbnone\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb box_shadow=\u00bbno\u00bb box_shadow_blur=\u00bb0&#8243; box_shadow_spread=\u00bb0&#8243; box_shadow_color=\u00bb\u00bb box_shadow_style=\u00bb\u00bb overflow=\u00bb\u00bb background_type=\u00bbsingle\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_image_id=\u00bb\u00bb lazy_load=\u00bbnone\u00bb skip_lazy_load=\u00bb\u00bb background_position=\u00bbleft top\u00bb background_repeat=\u00bbno-repeat\u00bb background_blend_mode=\u00bbnone\u00bb filter_type=\u00bbregular\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb last=\u00bbno\u00bb border_position=\u00bball\u00bb][fusion_text]<\/p>\n<p>En las opciones avanzadas, est\u00e1n presentes las opciones que ya hemos visto.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Icono[\/fusion_title][fusion_text]<\/p>\n<p>Aqu\u00ed vas a poder incluir un icono. Es muy \u00fatil combin\u00e1ndolo con otros elementos. Por ejemplo puedes escribir el testimonio de un cliente y usar el icono llamado quote-right para hacer el dise\u00f1o m\u00e1s atractivo.\u00a0Vamos a ver sus opciones:<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Ver<\/strong>: Aqu\u00ed vas a poder elegir el estilo que va a tener el icono. En Predeterminado, va a aparecer el icono solo. En Apilados va a aparecer el icono dentro de una forma con relleno. Y en Encuadrado va a aparecer el icono dentro de una forma con borde pero sin relleno. La forma se va a poder elegir m\u00e1s adelante.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Icono<\/strong>: Aqu\u00ed vas a poder elegir el icono que quieres usar. Puedes usar el buscador porque hay muchos, pero est\u00e1 en ingl\u00e9s. Si buscas en espa\u00f1ol no vas a encontrar nada.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Forma<\/strong>: Aqu\u00ed vas a elegir la forma que va a contener el icono si eliges el estilo Apilados o Encuadrado. Puedes elegir un c\u00edrculo o un cuadrado. Si eliges el estilo Predeterminado no aparece esta opci\u00f3n.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Enlace<\/strong>: Si escribes una direcci\u00f3n web tu icono se va a convertir en un enlace. Adem\u00e1s tienes la opci\u00f3n de que el enlace se abra en una ventana nueva.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]Por \u00faltimo puedes elegir la <strong>alineaci\u00f3n<\/strong> del icono.[\/fusion_li_item][\/fusion_checklist][\/fusion_builder_column][fusion_builder_column type=\u00bb1_1&#8243; align_self=\u00bbauto\u00bb content_layout=\u00bbcolumn\u00bb align_content=\u00bbflex-start\u00bb valign_content=\u00bbflex-start\u00bb content_wrap=\u00bbwrap\u00bb spacing=\u00bb\u00bb center_content=\u00bbno\u00bb column_tag=\u00bbdiv\u00bb link=\u00bb\u00bb target=\u00bb_self\u00bb link_description=\u00bb\u00bb min_height=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb order_medium=\u00bb0&#8243; order_small=\u00bb0&#8243; hover_type=\u00bbnone\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb box_shadow=\u00bbno\u00bb box_shadow_blur=\u00bb0&#8243; box_shadow_spread=\u00bb0&#8243; box_shadow_color=\u00bb\u00bb box_shadow_style=\u00bb\u00bb overflow=\u00bb\u00bb background_type=\u00bbsingle\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_image_id=\u00bb\u00bb lazy_load=\u00bbnone\u00bb skip_lazy_load=\u00bb\u00bb background_position=\u00bbleft top\u00bb background_repeat=\u00bbno-repeat\u00bb background_blend_mode=\u00bbnone\u00bb filter_type=\u00bbregular\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb last=\u00bbno\u00bb border_position=\u00bball\u00bb][fusion_text]<\/p>\n<p>Vamos a ver ahora las opciones de estilo que a\u00f1ade nuevas opciones propias del icono:<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]Color primario: La aplicaci\u00f3n del color primario va a depender del estilo que hayas elegido para tu icono. Si eliges Predeterminado es el color del icono. Si eliges Apilados, va a ser el color del relleno de la forma. Si eliges Encuadrado, el color se va a aplicar al icono y al borde.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Color secundario<\/strong>: Aqu\u00ed ocurre lo mismo que en color primario, va a depender del estilo de tu icono. Si eliges Predeterminado no te va a aparecer esta opci\u00f3n. Si eliges Apilados, va a ser el color del icono. Si eliges Encuadrado, el color va a ser el relleno de la forma.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En <strong>Tama\u00f1o<\/strong> y <strong>Relleno del icono<\/strong> vas a poder elegir el tama\u00f1o del icono y del relleno respectivamente. Si eliges el estilo Predeterminado, la opci\u00f3n Relleno del icono no va a aparecer.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En <strong>Rotate<\/strong> puedes escribir los grados que quieres que se gire el icono.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]A continuaci\u00f3n puedes configurar el <strong>borde<\/strong>, tanto el ancho como el borde como el radio. Radio te va a servir si quieres un borde que no sea ni un c\u00edrculo completo ni un cuadrado.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]Por \u00faltimo, tienes las opciones <strong>hover<\/strong>. Recuerda, cuando pasas el rat\u00f3n por encima. Las opciones son la que ya has visto de colores adem\u00e1s de una animaci\u00f3n que ya hemos visto.[\/fusion_li_item][\/fusion_checklist][\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container][fusion_builder_container hundred_percent=\u00bbno\u00bb hundred_percent_height=\u00bbno\u00bb hundred_percent_height_scroll=\u00bbno\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bbwidgets-pro\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb link_color=\u00bb\u00bb link_hover_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb gradient_start_color=\u00bb\u00bb gradient_end_color=\u00bb\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; background_blend_mode=\u00bbnone\u00bb video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; type=\u00bbflex\u00bb][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; layout=\u00bb1_1&#8243; background_position=\u00bbleft top\u00bb background_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_position=\u00bball\u00bb spacing=\u00bbyes\u00bb background_image=\u00bb\u00bb background_repeat=\u00bbno-repeat\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb margin_top=\u00bb0px\u00bb margin_bottom=\u00bb0px\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_speed=\u00bb0.3&#8243; animation_direction=\u00bbleft\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb center_content=\u00bbno\u00bb last=\u00bbtrue\u00bb min_height=\u00bb\u00bb hover_type=\u00bbnone\u00bb link=\u00bb\u00bb border_sizes_top=\u00bb\u00bb border_sizes_bottom=\u00bb\u00bb border_sizes_left=\u00bb\u00bb border_sizes_right=\u00bb\u00bb first=\u00bbtrue\u00bb][fusion_title size=\u00bb2&#8243; content_align=\u00bbleft\u00bb]<\/p>\n<p><a name=\"pro\"><\/a>Widgets de versi\u00f3n Pro<\/p>\n<p>[\/fusion_title][fusion_text]<\/p>\n<p>Una vez que ya hemos visto los widgets b\u00e1sicos vamos a ver los widgets de la versi\u00f3n Pro. <strong>Recuerda que estos widgets solo est\u00e1n disponibles si optas por la versi\u00f3n de pago<\/strong>.\u00a0Si no te aparecen estos widgets es porque est\u00e1s usando la versi\u00f3n b\u00e1sica. Si has pagado por la versi\u00f3n Pro y aun as\u00ed no te aparecen los widgets de esta secci\u00f3n prueba a sincronizar de nuevo los archivos en la herramienta de Elementor que vimos antes.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-44463\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2018\/04\/tutorial-elementor-page-builder-widgets-pro.jpg\" alt=\"tutorial elementor page builder widgets pro\" width=\"1200\" height=\"600\" \/><\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Posts[\/fusion_title][fusion_text]<\/p>\n<p>Con este widget <strong>vas a poder incluir art\u00edculos que hayas creado<\/strong>. Es una forma muy sencilla de incluir una secci\u00f3n en tu p\u00e1gina Home donde aparezcan los \u00faltimos art\u00edculos, art\u00edculos destacados, etc.\u00a0Como todos los widgets se a\u00f1ade arrastrando con el rat\u00f3n el widget a la zona que queramos y despu\u00e9s configurando las opciones.\u00a0Vamos a ver a hora las opciones. Se encuentran divididas en opciones de contenido y de estilo. En las opciones de contenido tenemos la agrupaci\u00f3n de Layout.<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Skin<\/strong>: Puedes elegir Classic para que se muestre las entradas de forma sencilla y Cards para que lo hagan con un borde simulando una tarjeta.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Columns<\/strong>: Aqu\u00ed puedes elegir las columnas en las que se va a mostrar tu contenido.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Posts Per Page<\/strong>: Aqu\u00ed vas a seleccionar cuantas entradas quieres mostrar.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Image Position<\/strong>: Si eliges el skin Classic te va a aparecer esta opci\u00f3n. Para que no tengas problemas te recomiendo que elijas Top o None que no mostrar\u00e1 la imagen.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Show Image<\/strong>: Si eliges el skin Cards te va a aparecer esta otra opci\u00f3n. Puedes elegir entre mostrar o no la imagen.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Masonry<\/strong>: Con esta opci\u00f3n vas a elegir que la altura de las columnas. Si est\u00e1 desactivado, las columnas tendr\u00e1n la misma altura. Si no, la altura se adaptar\u00e1 al contenido, dando el aspecto de revista.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Tama\u00f1o de la imagen<\/strong> va a depender del tema y plugins que tengas instalados.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Image Width<\/strong>: Aqu\u00ed vas a poder escalar la imagen para hacerla m\u00e1s peque\u00f1a, si eliges 100% se mostrar\u00e1 a tama\u00f1o completo.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Title<\/strong>: Si est\u00e1 activo se mostrar\u00e1 el t\u00edtulo del art\u00edculo.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Title HTML Tag<\/strong>: Selecciona la etiqueta HTML que se usar\u00e1 con el t\u00edtulo del art\u00edculo. Si muestras tus art\u00edculos en tu p\u00e1gina Home, la etiqueta apropiada es H3. Usas un H1 para tu logotipo o t\u00edtulo de la web, un H2 para un encabezado que ponga \u201cArt\u00edculos destacados\u201d por ejemplo y el H3 para los art\u00edculos que es lo que configuras aqu\u00ed.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Excerpt<\/strong>: Aqu\u00ed vas a seleccionar si quieres mostrar un extracto del contenido de tu art\u00edculo. Si decides que s\u00ed, puedes elegir cuantos caracteres quieres mostrar.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Meta Data<\/strong>: Vas a poder elegir qu\u00e9 informaci\u00f3n de tu art\u00edculo vas a mostrar como fecha, n\u00famero de comentarios\u2026 Cuando hagas click en el cuadro te mostrar\u00e1 las opciones disponibles. Tambi\u00e9n puedes configurar el separador entre la informaci\u00f3n.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Read More<\/strong>: Decide si mostrar o no un enlace de Leer m\u00e1s para ver el art\u00edculo completo. Si decides que aparezca puedes escribir el texto que va a aparecer.[\/fusion_li_item][\/fusion_checklist][fusion_text]<\/p>\n<p>Ya hemos visto como configurar como se va a mostrar la informaci\u00f3n que se obtenga de nuestro contenido. Ahora en el siguiente bloque Query vas a poder elegir qu\u00e9 contenido quieres obtener.<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Source<\/strong>: Aqu\u00ed vas a elegir qu\u00e9 tipo de contenido quieres que se recupere, entradas, p\u00e1ginas o cualquier contenido personalizado que tengas disponible en tu web.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]Despu\u00e9s tienes una serie de opciones para <strong>filtrar el contenido<\/strong> que se obtiene. Puede elegir que se muestren entradas solo de un autor, de una categor\u00eda concreta\u2026 Lo mismo aplicado a las p\u00e1ginas.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]Tambi\u00e9n puedes configurar como se va a <strong>ordenar el contenido<\/strong>. Por ejemplo, lo puedes ordenar por fecha ascendente o descendente, por orden alfab\u00e9tico o por orden aleatorio.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]Por \u00faltimo, tienes una opci\u00f3n para poder elegir <strong>contenido que no quieres que aparezca<\/strong> en este widget.[\/fusion_li_item][\/fusion_checklist][fusion_text]<\/p>\n<p>Por \u00faltimo, puedes configurar una <strong>paginaci\u00f3n<\/strong> para navegar entre art\u00edculos. Esta opci\u00f3n tiene sentido si quieres que se pueda acceder a todos los art\u00edculos. Pero si solo quieres mostrar los \u00faltimos art\u00edculos o 3 art\u00edculos destacados por ejemplo, no tiene sentido a\u00f1adir paginaci\u00f3n.\u00a0La paginaci\u00f3n puede ser por n\u00fameros, incluyendo enlaces de Anterior y Siguiente o combinando las dos opciones.<\/p>\n<p>Una vez que ya hemos visto las opciones para a\u00f1adir contenido, vamos a ver las opciones para aplicar un estilo a esta informaci\u00f3n. Las opciones de estilo vienen separadas por el tipo de contenido. En primer lugar viene el estilo del Layout, de la distribuci\u00f3n de elementos:<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Columns Gap<\/strong>: Aqu\u00ed vas a configurar la separaci\u00f3n entre columnas. Si eliges que el contenido aparezca como una columna esta opci\u00f3n no se va a reflejar.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Rows Gap<\/strong>: Esta opci\u00f3n es igual que la anterior pero se aplica a filas. L\u00f3gicamente, para que se aprecie este ajuste tiene que existir como m\u00ednimo 2 filas.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En <strong>alineaci\u00f3n<\/strong> vas a escoger la alineaci\u00f3n de los textos del widget.[\/fusion_li_item][\/fusion_checklist][fusion_text]<\/p>\n<p>En Image vas a configurar la imagen destacada de tu contenido.<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En <strong>Border Radius<\/strong> vas a poder redondear las esquinas de la imagen.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En <strong>Spacing<\/strong> vas a poder configurar el espacio entre la imagen y el texto de tu contenido, el margen inferior de la imagen.[\/fusion_li_item][\/fusion_checklist][fusion_text]<\/p>\n<p>En <strong>Content<\/strong> vas a configurar toda la parte de tu contenido que sea texto. Esto es el t\u00edtulo, los meta datos, el extracto y el enlace de Leer m\u00e1s. Los ajustes son los mismos para todas las partes. Y son opciones muy sencillas. El color, la tipograf\u00eda y Spacing que es el mismo caso que ya hemos visto en la imagen.<\/p>\n<p>Por \u00faltimo est\u00e1n los <strong>ajustes para los enlaces de la paginaci\u00f3n<\/strong>. Lo \u00fanico a destacar que no hayamos visto antes es el color. Tienes tres colores diferentes a configurar. Normal es el que color general, Hover ya hemos visto que se aplica cuando se pasa el rat\u00f3n por encima y Active es el enlace que apunta a la p\u00e1gina en la cual se est\u00e1. Si por ejemplo est\u00e1s en la p\u00e1gina 2, el enlace que apunte a la p\u00e1gina 2 ser\u00e1 el enlace Active.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Portfolio[\/fusion_title][fusion_text]<\/p>\n<p>Que el nombre de este widget no te confunda. Con \u00e9l vas a poder recuperar las <strong>im\u00e1genes del tipo de contenido que selecciones<\/strong>. El tipo de contenido que puedas seleccionar va a depender del tema y plugins que tengas en tu WordPress.\u00a0Vamos a ver en primer lugar las opciones de\u00a0 distribuci\u00f3n (<strong>Layout<\/strong>) de las im\u00e1genes:<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Columns<\/strong>: El n\u00famero de columnas que quieres mostrar.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Posts Per Page<\/strong>: El n\u00famero de im\u00e1genes que vas a mostrar en total.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Tama\u00f1o de la imagen<\/strong>: Selecciona el tama\u00f1o que quieras entre los que tengas disponibles en tu WordPress o escribe uno a mano. No elijas un tama\u00f1o grande para no perjudicar el rendimiento de tu web.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Masonry<\/strong>: Si est\u00e1 desactivada esta opci\u00f3n todas las columnas van a tener la misma altura, si la activas cada columna tendr\u00e1 la altura que necesite consiguiendo as\u00ed el efecto que se llama Magazine.[\/fusion_li_item][\/fusion_checklist][fusion_text]<\/p>\n<p>En las opciones de Layout has configurado como quieres que se vea el contenido, en las opciones de <strong>Query vas a configurar qu\u00e9 contenido quieres mostrar<\/strong>:<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Source<\/strong>: Selecciona aqu\u00ed qu\u00e9 tipo de contenido quieres recuperar. Dependiendo del tipo de contenido podr\u00e1s filtrar el resultado. Por ejemplo, si es una entrada podr\u00e1s filtrar el resultado por autor, categor\u00eda o etiquetas.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Order<\/strong>: Aqu\u00ed vas a poder configurar como quieres ordenar el contenido. Lo puedes hacer por fecha, en orden alfab\u00e9tico o aleatorio.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Offset<\/strong>: Aqu\u00ed puedes configurar a partir de qu\u00e9 n\u00famero quieres que se empiece a recuperar el contenido. Por ejemplo, si escribes un 1, se va a empezar desde el segundo art\u00edculo (se salta 1).[\/fusion_li_item][\/fusion_checklist][fusion_text]<\/p>\n<p>Por \u00faltimo, tienes la posibilidad de incluir una barra de filtrado de contenido para que la use el usuario. Se diferencia de los filtros que has visto antes en que este filtrado va a ser p\u00fablico y lo van a poder usar los usuarios que visiten tu web.\u00a0En las opciones de Estilo existen opciones que ya has visto antes como color de espacio o espacio entre elementos.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Slides[\/fusion_title][fusion_text]<\/p>\n<p>Con este widget vas a poder crear un slider pero de diapositivas. Con diapositivas me refiero a que <strong>no te tienes que limitar a solo im\u00e1genes<\/strong> sino que tambi\u00e9n puedes escribir texto en varios formatos o enlaces.\u00a0En cada elemento del slider puedes configurar las mismas opciones. Vienen divididas en tres secciones:<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En el <strong>fondo<\/strong> puedes elegir el color o si lo prefieres puedes usar una imagen.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En el <strong>contenido<\/strong> tienes cuatro partes: el encabezado, el texto general, el bot\u00f3n y la direcci\u00f3n si quieres formar un enlace. Por \u00faltimo puedes elegir si quieres que el enlace afecte a toda la diapositiva o solo al bot\u00f3n.[\/fusion_li_item][\/fusion_checklist][fusion_text]<\/p>\n<p>Luego tienes opciones que son comunes a todas las diapositivas. Vamos a verlas:<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Altura (height)<\/strong>: La altura que van a tener las diapositivas.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Navigation<\/strong>: Puedes configurar que se pueda navegar con flechas, puntos, las dos opciones juntas o que no aparezca navegaci\u00f3n.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Pause on Hover<\/strong>: Si activas estos interruptores el pase de diapositivas se parar\u00e1 al pasar el rat\u00f3n por encima.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Autoplay<\/strong> y <strong>Autoplay Speed<\/strong>: si activas esta opci\u00f3n se iniciar\u00e1 el pase de diapositivas de forma autom\u00e1tica y adem\u00e1s podr\u00e1s configurar la velocidad a la que lo hace.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Infinite Loop<\/strong>: Al activar esta opci\u00f3n cuando se alcance la \u00faltima diapositiva se volver\u00e1 a la primera.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Transition<\/strong> y <strong>Transition Speed<\/strong>: Elige si quieres que el pase de diapositivas se haga con desplazamiento o con un fundido entre las dos diapositivas. Adem\u00e1s puedes configurar la velocidad con la que se haga.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Content Animation<\/strong>: Puedes elegir la animaci\u00f3n con la que quieres que aparezca el texto de la diapositiva.[\/fusion_li_item][\/fusion_checklist][fusion_text]<\/p>\n<p>En las opciones de <strong>Estilo<\/strong> vas a poder configurar colores, tipograf\u00edas de los distintos elementos que forman parte del slider: encabezado, texto, bot\u00f3n y navegaci\u00f3n.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Form[\/fusion_title][fusion_text]<\/p>\n<p>Con este widget vas a poder incluir de forma muy sencilla <strong>un formulario de contacto<\/strong>. Cuando un usuario use este formulario te va a llegar un email a la direcci\u00f3n que configures con el contenido del mensaje.\u00a0En este widget vas a tener que <strong>configurar m\u00e1s aspectos aparte de los habituales<\/strong>. Pero no te preocupes que vamos a verlo todo. Vamos a empezar por los campos del formulario (Form Fields):<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]Vas a tener de inicio los tres campos b\u00e1sicos de un formulario de contacto, pero t\u00fa puedes agregar los que quieras haciendo click en el bot\u00f3n <strong>Agregar Elemento<\/strong>.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Type<\/strong>: Elige el tipo de dato que va a contener el campo. Es importante y \u00fatil para que se verifique que el dato que se introduce es el que esperas. Por ejemplo, si eliges que el tipo sea email y no introduces un email v\u00e1lido no se va a poder enviar el formulario.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Label<\/strong>: Aqu\u00ed vas a configurar el texto que aparece encima de cada campo. Y adem\u00e1s es un aspecto muy importante en cuanto accesibilidad porque explica de qu\u00e9 es el campo para personas ciegas por ejemplo.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Placeholder<\/strong>: El placeholder es el texto que aparece dentro del campo y que desaparece una vez que se empieza a escribir.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Required<\/strong>: Si marcas esta opci\u00f3n el formulario no se env\u00eda si no se rellena el campo.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Input Size<\/strong>: Aqu\u00ed vas a elegir el tama\u00f1o que van a tener los campos.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]Por \u00faltimo puedes elegir si quieres mostrar las etiquetas de los campos (Label) y que a los campos obligatorios (Required) se les a\u00f1ada una peque\u00f1a marca para que el usuario lo sepa.[\/fusion_li_item][\/fusion_checklist][fusion_text]<\/p>\n<p>Para el bot\u00f3n tienes las opciones que ya hemos visto en otros widgets como son el texto que va a tener, tama\u00f1o, alineaci\u00f3n, etc.\u00a0El bloque siguiente es muy importante porque vas a <strong>configurar qu\u00e9 va a ocurrir cuando un usuario env\u00ede el formulario<\/strong>. Cuando selecciones una opci\u00f3n aparecer\u00e1 otro panel donde configurar los datos necesarios. Te explico las opciones que tienes:<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Email<\/strong>: Aqu\u00ed vas a enviar los datos que introduzca el usuario a la direcci\u00f3n de email que t\u00fa pongas. Los campos que puedes configurar son el email al que se van a enviar la informaci\u00f3n, es decir, el tuyo. El asunto, escribe algo con lo que identifiques de forma r\u00e1pida que el correo es que alguien ha completado el formulario. En email content deja [all-fields] para recibir toda la informaci\u00f3n que escriba un usuario. Y en Reply-To puedes elegir el correo que introduzca el usuario para poder contestarle directamente desde el email.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Email 2<\/strong>: Con Email 2 tienes la posibilidad de enviar la misma informaci\u00f3n a otra direcci\u00f3n de email. Tambi\u00e9n lo puedes hacer poniendo esta direcci\u00f3n en copia en las opciones de Email.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Mailchimp<\/strong>: Introduciendo el API Key que te proporciona Mailchimp en su web puedes configurar de forma r\u00e1pida que este formulario se integre con tu lista de suscriptores. Es el \u00fanico campo a configurar.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Redirect<\/strong>: Aqu\u00ed puedes escribir una direcci\u00f3n web a la que ser\u00e1 redirigido el usuario cuando env\u00ede el formulario. Por ejemplo a tu p\u00e1gina Home.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Webhook<\/strong>: Aqu\u00ed puedes escribir una p\u00e1gina web que va a procesar los datos que le pases en el formulario. Si no sabes programaci\u00f3n, no le hagas mucho caso porque con las opciones anteriores son suficientes.[\/fusion_li_item][\/fusion_checklist][fusion_text]<br \/>\n<strong>Estas opciones las puedes combinar<\/strong>, no tienes que elegir una sola. Por ejemplo, puedes elegir que se env\u00eden los datos por email a tu correo y se redirija al usuario a la p\u00e1gina Home.\u00a0Por \u00faltimo <strong>puedes agregar mensajes para mejorar la experiencia del usuario<\/strong>. Los mensajes que puedes personalizar son si el formulario se env\u00eda de forma correcta, si ocurre un error, si no se rellena alg\u00fan campo obligatorio o si se introduce informaci\u00f3n no v\u00e1lida.\u00a0En las opciones de Estilo tienes las opciones de colores, tipograf\u00eda o espaciado que ya has visto en este manual.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Login[\/fusion_title][fusion_text]<\/p>\n<p>Con este widget vas a poder configurar un <strong>login alternativo al que ofrece WordPress<\/strong>. Eso significa que lo vas a poder configurar a tu gusto y as\u00ed adaptarlo al dise\u00f1o del resto de tu web.\u00a0Las opciones son muy sencillas. En primer lugar puedes elegir si mostrar o no las etiquetas de los campos y tambi\u00e9n el tama\u00f1o de los campos de texto.\u00a0En el bot\u00f3n puedes configurar el texto que va a tener, su tama\u00f1o y la alineaci\u00f3n que quieres que tenga.\u00a0Lo m\u00e1s interesante llega en las opciones adicionales. Vamos a verlas en m\u00e1s detalle:<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Redirect After Login<\/strong>: Si activas este interruptor vas a poder configurar que una vez que el usuario se haya identificado de forma correcta, se le redirija a una p\u00e1gina que t\u00fa elijas. Por ejemplo, puedes llevarlo a la p\u00e1gina de inicio.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Lost Your Password<\/strong>, <strong>Remember me<\/strong>, <strong>Logged in Message<\/strong>: Estos interruptores van a a\u00f1adir las opciones de que aparezca un enlace para poder recuperar la contrase\u00f1a, que no se cierre la sesi\u00f3n del usuario y que aparezca un mensaje cuando se identifique.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Custom Label<\/strong>: Este interruptor es obligatorio activarlo porque te va a permitir personalizar las etiquetas que aparece. De esa manera vas a poder escribir los textos en espa\u00f1ol en lugar de ingl\u00e9s.[\/fusion_li_item][\/fusion_checklist][fusion_text]<\/p>\n<p>En los ajustes de Estilo vas a poder configurar colores, espacio entre elementos, tipograf\u00eda\u2026 como ya hemos visto.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Price List[\/fusion_title][fusion_text]<\/p>\n<p>Con este widget vas a poder escribir una serie de <strong>precios en forma de lista<\/strong>. Es muy sencillo de configurar. Tienes que escribir el t\u00edtulo y la descripci\u00f3n del producto, el precio y tienes la posibilidad de incluir una imagen y un enlace.<\/p>\n<p>En las opciones de Estilo vas a poder configurar los estilos de los distintos elementos de la manera que ya hemos visto. Colores, tipograf\u00eda, espacio entre elementos\u2026<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Price Table[\/fusion_title][fusion_text]<\/p>\n<p>Este widget es similar al anterior en su funci\u00f3n pero muestra <strong>el precio de una forma m\u00e1s visual y atractiva<\/strong>.\u00a0Est\u00e1 compuesto por varias partes. En primer lugar tienes la cabecera donde puedes escribir un t\u00edtulo y un subt\u00edtulo.\u00a0A continuaci\u00f3n tienes el bloque del precio. Aqu\u00ed puedes configurar la divisa en la que est\u00e1 el precio, la cantidad, puedes escribir el precio original si el precio est\u00e1 rebajado y puedes escribir un texto indicando si el pago es peri\u00f3dico.<\/p>\n<p>Siguiendo al precio puedes escribir <strong>una lista de caracter\u00edsticas<\/strong> que tiene tu servicio o producto.\u00a0Para terminar este bloque tienes el bot\u00f3n donde va a hacer click un posible cliente. Si tienes un bot\u00f3n tienes que configurar el enlace al que va a dirigir y un peque\u00f1o texto debajo por si quieres incluir algo m\u00e1s de informaci\u00f3n.<\/p>\n<p>Un peque\u00f1o detalle m\u00e1s que puedes a\u00f1adir una marca en la parte superior. Es muy \u00fatil si tienes varios precios y quieres que un cliente se decante m\u00e1s por uno que por otro puedes incluir esta marca que ponga algo como M\u00e1s vendido.\u00a0En las opciones de Estilo vas a poder configurar todos los elementos que hemos visto. El fondo de la cabecera, del resto del bloque, el color del precio, del bot\u00f3n, de cualquier texto\u2026 Son opciones que ya has visto y no deber\u00edas tener problemas con ellas.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Flip Box[\/fusion_title][fusion_text]<\/p>\n<p>Este widget es muy curioso y puede dar resultados espectaculares. <strong>Se trata de dos bloques de texto pero en el que el segundo solo se muestra al pasar el rat\u00f3n por encima<\/strong>, como una moneda.\u00a0Las dos cajas que tienes disponibles se llaman Front y Back y las dos se configuran de la misma forma.\u00a0Puedes elegir un elemento gr\u00e1fico que aparezca encima del texto. Tienes disponible im\u00e1genes, iconos o no poner nada. Las opciones que vas a tener si eliges una imagen o un icono son las que ya has visto.<\/p>\n<p>Adem\u00e1s del elemento gr\u00e1fico tienes un encabezado y un texto. A parte tienes otra pesta\u00f1a para poder configurar el fondo.\u00a0Por \u00faltimo tienes ajustes comunes a las dos cajas de texto que configuran las animaciones que van a ocurrir cuando pongas el rat\u00f3n encima.\u00a0En las opciones de Estilo vas a poder configurar colores de iconos, encabezados, textos\u2026 Todas opciones que ya has visto.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Countdown[\/fusion_title][fusion_text]<\/p>\n<p>En este widget vas a poder establecer <strong>una cuenta atr\u00e1s<\/strong>. Es muy \u00fatil si quieres poner una fecha l\u00edmite a la contrataci\u00f3n de un servicio o la compra de un producto.\u00a0Las opciones que permiten configurar este widget son muy f\u00e1ciles de entender.\u00a0En primer lugar tienes que elegir la fecha y hora l\u00edmites que quieres configurar.\u00a0A continuaci\u00f3n, tienes una serie de interruptores para mostrar u ocultar la informaci\u00f3n como d\u00edas, horas, minutos y segundos.<\/p>\n<p>Despu\u00e9s puedes configurar si quieres que se muestren las etiquetas y puedes personalizar el texto como ponerlo en ingl\u00e9s por ejemplo.\u00a0En las opciones de Estilo puedes configurar las cajas del contador: el color de fondo, borde\u2026 Y el color y tipograf\u00eda de los n\u00fameros y etiquetas. La forma de configurarlo es como ya hemos visto.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Share Buttons[\/fusion_title][fusion_text]<\/p>\n<p>En este widgets vas a incluir los <strong>botones para compartir la p\u00e1gina<\/strong> en las distintas redes sociales que configures.\u00a0En el bot\u00f3n Agregar Elemento vas a poder a\u00f1adir las distintas redes disponibles. Y a continuaci\u00f3n puedes configurar la etiqueta.<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>View<\/strong>: Aqu\u00ed vas a poder elegir si quieres que en el bot\u00f3n se muestre el icono, el nombre o una combinaci\u00f3n de las dos opciones.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Skin<\/strong>: Aqu\u00ed vas a elegir el dise\u00f1o que van a tener los botones. A m\u00ed me gusta el dise\u00f1o Flat por su sencillez, pero es una cuesti\u00f3n de gustos.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Shape<\/strong>: Elige si quieres un bot\u00f3n cuadrado, con las esquinas redondeadas o con forma de c\u00edrculo.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Columns<\/strong>: Si quieres configurar cuantos botones se van a incluir antes de que se a\u00f1ada una nueva l\u00ednea lo puedes hacer aqu\u00ed.[\/fusion_li_item][\/fusion_checklist][fusion_text]<\/p>\n<p>En las opciones de Estilo vas a poder seleccionar el hueco entre botones, el tama\u00f1o de los botones, de los iconos\u2026 opciones que ya hemos visto.<\/p>\n<p>Tambi\u00e9n puedes elegir que los botones tengan el color oficial de cada red social o elegir un color personalizado que se integre con el dise\u00f1o de tu web.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Template[\/fusion_title][fusion_text]<\/p>\n<p>Este widget es muy r\u00e1pido de explicar pero muy \u00fatil. Con \u00e9l vas a poder <strong>a\u00f1adir widgets o dise\u00f1os que tengas guardados como plantilla<\/strong>. As\u00ed puedes a\u00f1adir cualquier dise\u00f1o en cualquier lugar de forma r\u00e1pida y as\u00ed reutilizar trabajo que ya hayas hecho.[\/fusion_text][\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container][fusion_builder_container hundred_percent=\u00bbno\u00bb hundred_percent_height=\u00bbno\u00bb hundred_percent_height_scroll=\u00bbno\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bbwidgets-generales\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb link_color=\u00bb\u00bb link_hover_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb gradient_start_color=\u00bb\u00bb gradient_end_color=\u00bb\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; background_blend_mode=\u00bbnone\u00bb video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; type=\u00bbflex\u00bb][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; layout=\u00bb1_1&#8243; background_position=\u00bbleft top\u00bb background_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_position=\u00bball\u00bb spacing=\u00bbyes\u00bb background_image=\u00bb\u00bb background_repeat=\u00bbno-repeat\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb margin_top=\u00bb0px\u00bb margin_bottom=\u00bb0px\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_speed=\u00bb0.3&#8243; animation_direction=\u00bbleft\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb center_content=\u00bbno\u00bb last=\u00bbtrue\u00bb min_height=\u00bb\u00bb hover_type=\u00bbnone\u00bb link=\u00bb\u00bb border_sizes_top=\u00bb\u00bb border_sizes_bottom=\u00bb\u00bb border_sizes_left=\u00bb\u00bb border_sizes_right=\u00bb\u00bb first=\u00bbtrue\u00bb][fusion_title size=\u00bb2&#8243; content_align=\u00bbleft\u00bb]<\/p>\n<p><a name=\"generales\"><\/a>Widgets generales<\/p>\n<p>[\/fusion_title][fusion_text]<\/p>\n<p>Estos widgets se podr\u00edan entender como una versi\u00f3n intermedia de los dos grupos anteriores. Son m\u00e1s avanzados que los b\u00e1sicos pero menos que los de la versi\u00f3n Pro.\u00a0Con estos widgets vas a conseguir elementos muy visuales de una forma muy sencilla.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-44464\" src=\"https:\/\/ignaciosantiago.com\/wp-content\/uploads\/2018\/04\/tutorial-elementor-page-builder-widgets-generales.jpg\" alt=\"tutorial elementor page builder widgets generales\" width=\"1200\" height=\"600\" \/><\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Cuadro de imagen[\/fusion_title][fusion_text]<\/p>\n<p>Este widget vas a poder configurar un <strong>bloque que consiste en una imagen, un encabezado y un texto<\/strong>. La configuraci\u00f3n es muy sencilla.\u00a0Tienes un espacio para seleccionar una imagen, escribir un encabezado y un texto.\u00a0Lo \u00fanico diferente a destacar es que puedes configurar un enlace. Ese enlace se va a aplicar al icono y al encabezado pero no sobre la descripci\u00f3n.\u00a0En opciones de Estilo puedes configurar varios aspectos que ya hemos visto como alineaci\u00f3n del texto, color, tipograf\u00eda\u2026<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Caja de icono[\/fusion_title][fusion_text]<\/p>\n<p>Seguro que has visto este widget en muchas webs. Se usa sobre todo para describir caracter\u00edsticas de una forma m\u00e1s visual y no usar solo texto que haga el dise\u00f1o muy mon\u00f3tono. Yo mismo uso este dise\u00f1o en mi web.\u00a0En este widget tienes que distinguir entre tres partes: <strong>el icono, el encabezado y el texto<\/strong>, llamado descripci\u00f3n en el widget.\u00a0Lo bueno es que las opciones que tiene las hemos visto. Son opciones como el dise\u00f1o del icono, colores, tama\u00f1os, etc.\u00a0El enlace al igual que en el caso anterior del Cuadro de imagen se aplica al icono y al encabezado pero no a la descripci\u00f3n.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Galer\u00eda de im\u00e1genes[\/fusion_title][fusion_text]<\/p>\n<p>Con este widget vas a poder crear una<strong> galer\u00eda de im\u00e1genes que tengas subidas a tu WordPress<\/strong>. Para agregar las im\u00e1genes que quieras tienes que hacer click en A\u00f1adir Im\u00e1genes. Se te abrir\u00e1n todas las im\u00e1genes que tengas en tu web. Selecci\u00f3nalas y haz click en el bot\u00f3n Crear nueva galer\u00eda y a continuaci\u00f3n Insertar Galer\u00eda.<\/p>\n<p>Despu\u00e9s puedes configurar las im\u00e1genes como su tama\u00f1o entre los que tengas disponibles, las columnas en las que quieres que aparezcan las im\u00e1genes, el orden o si quieres que al hacer click en una imagen se abra en una ventana aparte.\u00a0En las opciones de Estilo puedes elegir el espacio entre las im\u00e1genes o si quieres ponerles un borde. Adem\u00e1s puedes configurar si quieres mostrar la leyenda de las im\u00e1genes en caso de que la tengas escrita.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Carrousel de im\u00e1genes[\/fusion_title][fusion_text]<\/p>\n<p>Aqu\u00ed vas a poder configurar un <strong>slider con im\u00e1genes<\/strong>. Este widget es muy similar al anterior solo que aqu\u00ed las im\u00e1genes van rotando en lugar de estar fijas.\u00a0La forma de agregar las im\u00e1genes es igual al widget anterior de Galer\u00eda. El resto de opciones son las propias de un slider:<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]Diapositivas a mostrar: lo m\u00e1s habitual en un slider es mostrar una \u00fanica imagen pero tambi\u00e9n puedes mostrar dos o m\u00e1s creando un efecto muy atractivo.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Diapositivas a desplazar<\/strong>: aqu\u00ed puedes configurar cuantas im\u00e1genes van a saltarse en cada iteraci\u00f3n del slider.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Estirar imagen<\/strong>: Esta opci\u00f3n solo va a ser visible si eliges una diapositiva. Lo que va a hacer es aumentar la imagen para completar todo el ancho disponible. Ten cuidado porque al aumentar la imagen se puede perder calidad.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Navegaci\u00f3n<\/strong>: Puedes elegir que aparezca la navegaci\u00f3n por flechas a los lados, por puntos en la parte inferior, los dos a la vez o no mostrar navegaci\u00f3n.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Enlace a<\/strong>: Aqu\u00ed puedes elegir si las im\u00e1genes son enlaces en los que puedas hacer click. Y adem\u00e1s si quieres que al hacer click se abra la imagen en una pantalla a parte o una direcci\u00f3n web.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Leyenda<\/strong>: Elige si quieres mostrar o no la leyenda, el t\u00edtulo o la descripci\u00f3n de la imagen en caso de que exista.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Pausar al pasar el rat\u00f3n<\/strong>: Si lo activas, el slider se parar\u00e1 al poner el rat\u00f3n encima de las im\u00e1genes.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Auto reproducir<\/strong>: Act\u00edvalo para que el slider comience solo al cargar la p\u00e1gina.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Velocidad de auto iniciado<\/strong>: Cada cuanto tiempo quieres que aparezca una nueva imagen. Est\u00e1 en milisegundos. 1000 milisegundos son un segundo.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Bucle infinito<\/strong>: Si lo activas, cuando se llegue a la \u00faltima imagen se volver\u00e1 a mostrar la primera.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Efecto<\/strong>: Puedes elegir la animaci\u00f3n al mostrar una nueva imagen. Puedes elegir en desvanecer o diapositiva que simula que una imagen sale y otra entra.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Velocidad de la animaci\u00f3n<\/strong>: Aqu\u00ed vas a configurar la velocidad con la que va a ocurrir la transici\u00f3n desde que una imagen desaparece hasta que aparece otra.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Direcci\u00f3n<\/strong>: Elige en qu\u00e9 direcci\u00f3n va a ir la animaci\u00f3n si eliges Diapositiva.[\/fusion_li_item][\/fusion_checklist][fusion_alert type=\u00bbgeneral\u00bb accent_color=\u00bb#ffffff\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb background_color=\u00bb#1c6979&#8243; border_size=\u00bb4px\u00bb icon=\u00bbfa-exclamation-triangle fas\u00bb text_align=\u00bb\u00bb margin_top=\u00bb\u00bb margin_right=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_left=\u00bb\u00bb text_transform=\u00bb\u00bb dismissable=\u00bb\u00bb box_shadow=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb]<\/p>\n<p><strong>Nota<\/strong>:\u00a0En las opciones de Estilo vas a poder configurar la posici\u00f3n y color de las flechas y de los puntos con las herramientas que ya te mostrado.<\/p>\n<p>[\/fusion_alert][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Listado de iconos[\/fusion_title][fusion_text]<\/p>\n<p>Con este widget vas a poder crear <strong>una lista donde elegir los iconos que se usan delante de cada elemento<\/strong>. Es muy sencillo de configurar.\u00a0En cada elemento puedes configurar tres cosas: el texto del elemento de la lista, el icono que va a aparecer delante y tienes la posibilidad de convertirlo en un enlace.\u00a0En las opciones de Estilo vas a poder configurar la separaci\u00f3n de los elementos de la lista, la alineaci\u00f3n y la opci\u00f3n de incluir un separador entre los elementos.\u00a0Por \u00faltimo puedes configurar el color de los iconos y del texto.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Contador[\/fusion_title][fusion_text]<\/p>\n<p>Con este widget vas a poder escribir <strong>un n\u00famero que aparece con una animaci\u00f3n<\/strong> que consiste en que van pasando los n\u00fameros anteriores. Vamos a ver las opciones que podemos configurar:<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>N\u00famero de inicio<\/strong> y <strong>N\u00famero de fin<\/strong>: Estos son los n\u00fameros entre los que va a ocurrir la animaci\u00f3n. El N\u00famero de fin es el que se va a quedar fijo una vez que termine la animaci\u00f3n. El n\u00famero de inicio no tiene que ser menor al n\u00famero de fin, si es mayor la cuenta ser\u00e1 hacia atr\u00e1s.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Prefijo<\/strong> <strong>y Sufijo de n\u00famero<\/strong>: Esta opci\u00f3n la puedes usar para por ejemplo poner un precio y que aparezca delante del n\u00famero el s\u00edmbolo del euro o d\u00f3lar. Recuerda: prefijo delante y sufijo detr\u00e1s.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Duraci\u00f3n de la animaci\u00f3n<\/strong>: Aqu\u00ed puedes configurar lo r\u00e1pido que va a ser la animaci\u00f3n. Se escribe en milisegundos, 1000 milisegundos son 1 segundo.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>Thousand Separator<\/strong>: Si escribes un n\u00famero que tenga millares, si activas esta casilla aparecer\u00e1 una coma separando de las centenas.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]<strong>T\u00edtulo<\/strong>: escribe si quieres un texto que aparecer\u00e1 debajo del n\u00famero.[\/fusion_li_item][\/fusion_checklist][fusion_alert type=\u00bbgeneral\u00bb accent_color=\u00bb#ffffff\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb background_color=\u00bb#1c6979&#8243; border_size=\u00bb4px\u00bb icon=\u00bbfa-exclamation-triangle fas\u00bb text_align=\u00bb\u00bb margin_top=\u00bb\u00bb margin_right=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_left=\u00bb\u00bb text_transform=\u00bb\u00bb dismissable=\u00bb\u00bb box_shadow=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb]<\/p>\n<p><strong>Nota<\/strong>:\u00a0En las opciones de Estilo vas a poder definir el color y la tipograf\u00eda tanto del n\u00famero como del texto.<\/p>\n<p>[\/fusion_alert][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Barra de progreso[\/fusion_title][fusion_text]<\/p>\n<p>El widget de barra de progreso es muy \u00fatil para <strong>mostrar informaci\u00f3n en forma de porcentaje<\/strong> de una manera muy atractiva a la vista. Se muestra con una animaci\u00f3n simulando la barra de progreso que puedes ver al instalar un programa por ejemplo.\u00a0En el <strong>t\u00edtulo<\/strong> vas a escribir un texto explicativo del porcentaje que se muestra.<\/p>\n<p>En el <strong>tipo<\/strong> vas a poder elegir dise\u00f1os ya incluidos que ya hemos visto como el de informaci\u00f3n (azul), \u00e9xito (verde), advertencia (naranja) o peligro (rojo).\u00a0En <strong>porcentaje<\/strong> vas a escribir el n\u00famero hasta el que se va a rellenar la barra y tambi\u00e9n puedes elegir si quieres mostrar o no el n\u00famero.\u00a0Por \u00faltimo puedes escribir un texto que aparecer\u00e1 en el interior de la barra.\u00a0En las opciones de Estilo vas a poder configurar el color de la barra y el texto y la tipograf\u00eda usada.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Recomendaci\u00f3n[\/fusion_title][fusion_text]<\/p>\n<p>Con este widget vas a poder incluir de forma muy sencilla y visual los <strong>testimonios y recomendaciones de tus clientes<\/strong>.\u00a0Se usa un texto que se corresponde con el testimonio y a continuaci\u00f3n la informaci\u00f3n de la persona que lo ha escrito. Esa informaci\u00f3n es una foto, el nombre y el trabajo que tiene.<\/p>\n<p>Las opciones que est\u00e1n disponibles se explican por s\u00ed solas. Lo \u00fanico que puede no quedar claro es los nombres dados a la posici\u00f3n de la imagen. Arriba s\u00ed est\u00e1 claro y Minipublicaci\u00f3n se pone al lado del nombre y trabajo.\u00a0Las opciones de estilo ya se han visto a lo largo del tutorial como puede ser colores o tipograf\u00edas.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Pesta\u00f1as[\/fusion_title][fusion_text]<\/p>\n<p>Con este widget vas a poder agrupar <strong>varios textos en un \u00fanico bloque<\/strong>. Para navegar por los distintos bloques vas a disponer de pesta\u00f1as en la parte superior o izquierda seg\u00fan configures.\u00a0En las opciones de estilo vas a poder configurar colores de los bordes, fondos, encabezados y texto del bloque. Todas las opciones ya las hemos visto.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Acorde\u00f3n[\/fusion_title][fusion_text]<\/p>\n<p>Con este widget vas a poder escribir <strong>bloques de texto donde solo va a ser visible el encabezado<\/strong> y donde para ver el contenido vas a tener que hacer click. Tienes que saber que al hacer click en un encabezado <strong>se cerrar\u00e1n los dem\u00e1s<\/strong> que est\u00e9n abiertos.\u00a0Agregar un elemento es tan f\u00e1cil como hacer click en Agregar elemento y escribir el encabezado y el texto que quieras.\u00a0En las opciones de Estilo vas a poder configurar los colores y fondo de los encabezados y los textos. Son opciones que ya hemos visto.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Alternar[\/fusion_title][fusion_text]<\/p>\n<p>Este widget es igual al anterior pero existe una diferencia. Aqu\u00ed <strong>cada vez que abras un bloque de texto los que ya est\u00e9n abiertos no se van a cerrar<\/strong>.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Iconos Sociales[\/fusion_title][fusion_text]<\/p>\n<p>Con este widget vas a poder configurar <strong>los enlaces a tus redes sociales y servicios online<\/strong>. Incluye todas las principales, incluso alguno poco com\u00fan como Spotify.<\/p>\n<p>[\/fusion_text][fusion_checklist icon=\u00bbfusion-prefix-icon-customcheck\u00bb iconcolor=\u00bb\u00bb hue=\u00bb\u00bb saturation=\u00bb\u00bb lightness=\u00bb\u00bb alpha=\u00bb\u00bb circle=\u00bbyes\u00bb circlecolor=\u00bb\u00bb textcolor=\u00bb\u00bb size=\u00bb16px\u00bb item_padding_top=\u00bb\u00bb item_padding_right=\u00bb\u00bb item_padding_bottom=\u00bb\u00bb item_padding_left=\u00bb\u00bb divider=\u00bb\u00bb divider_color=\u00bb\u00bb odd_row_bgcolor=\u00bb\u00bb even_row_bgcolor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]En el panel principal de configuraci\u00f3n vas a poder agregar las distintas <strong>redes sociales<\/strong>. Es muy sencillo. Haces click en Agregar elemento. Seleccionas la red social que quieras configurar y pegas el enlace a tu perfil. Elegir la red social influye en el icono que va a aparecer.[\/fusion_li_item][fusion_li_item icon=\u00bb\u00bb iconcolor=\u00bb\u00bb circle=\u00bb\u00bb circlecolor=\u00bb\u00bb]Despu\u00e9s puedes elegir la forma que van a tener los <strong>iconos<\/strong> entre Redondeado, Cuadrado y C\u00edrculo.[\/fusion_li_item][\/fusion_checklist][fusion_text]<\/p>\n<p>En las opciones de Estilo puedes seleccionar que los iconos se muestren por su color o puedes elegir t\u00fa el color que van a tener si quieres que est\u00e9 acorde al dise\u00f1o de tu web.\u00a0El resto de opciones que no te he nombrado, ya las has visto antes.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Alerta[\/fusion_title][fusion_text]<\/p>\n<p>Este widget es una especie de <strong>Caja de Texto pero con funciones a\u00f1adidas<\/strong>.\u00a0Las funciones a\u00f1adidas son estilos ya preparados, un borde destacado y un bot\u00f3n para que desaparezca el mensaje.\u00a0Los estilos, que aqu\u00ed se llaman Tipo, ya los hemos visto. Informaci\u00f3n pone un color azul, \u00c9xito para el color verde, Advertencia color amarillo y Peligro para el color rojo.\u00a0En la pesta\u00f1a de Estilo puedes configurar los colores a tu gusto.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]SoundCloud[\/fusion_title][fusion_text]<\/p>\n<p>Con este widget vas a poder a\u00f1adir un<strong> audio alojado en SoundCloud<\/strong> de forma muy sencilla.\u00a0Solo tienes que <strong>copiar y pegar la direcci\u00f3n del audio<\/strong>. Y puedes configurar el tipo de reproductor que quieres usar, uno sencillo de audio o uno m\u00e1s grande parecido a uno de v\u00eddeo.\u00a0Despu\u00e9s tienes una serie de interruptores donde configurar qu\u00e9 tipo de informaci\u00f3n quieres mostrar. Se explican por s\u00ed solos. Por ejemplo, puedes hacer que se reproduzca el audio de forma autom\u00e1tica, que aparezca el n\u00famero de reproducciones o el nombre de usuario del audio.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Shortcode[\/fusion_title][fusion_text]<\/p>\n<p>En este widget vas a poder <strong>a\u00f1adir los shortcode que proporcionan otros plugins<\/strong> para aumentar la funcionalidad de la p\u00e1gina.\u00a0Un shortcode es un c\u00f3digo del estilo [nombre_plugin id=\u201d123\u201d]. Si por ejemplo, tienes un plugin de formulario y creas uno, el plugin te va a mostrar un shortcode que puedes copiar en este widget y as\u00ed incluirlo en la p\u00e1gina que est\u00e1s dise\u00f1ando.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]HTML[\/fusion_title][fusion_text]<\/p>\n<p>Con este widget vas a poder <strong>a\u00f1adir directamente c\u00f3digo HTML en el dise\u00f1o de la p\u00e1gina<\/strong>. Es muy \u00fatil para a\u00f1adir todav\u00eda m\u00e1s funcionalidad a Elementor. La verdad es que con\u00a0la cantidad\u00a0de widgets disponibles va a ser dif\u00edcil que tengas que a\u00f1adir c\u00f3digo a mano.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Ancla de men\u00fa[\/fusion_title][fusion_text]<\/p>\n<p>Aqu\u00ed vas a poder configurar lo que en HTML se llama ancla. <strong>Se usa para poder ir a un punto en concreto dentro de una p\u00e1gina<\/strong>. Te va a quedar m\u00e1s claro con un ejemplo.\u00a0Imagina que tienes una p\u00e1gina donde presentas\u00a0tus\u00a0productos,\u00a0y tenemos un\u00a0producto\u00a0que se llama\u00a0Producto 3. Usa este widget para poner una marca en este lugar, lo llamamos\u00a0producto3.\u00a0Pues si ahora configuras un enlace en un men\u00fa as\u00ed: tupagina.com#proucto3\u00a0al pulsar en ese enlace vas a ir directamente a ese\u00a0producto, sin tener que recorrer todos los productos que aparecen antes en la p\u00e1gina.<\/p>\n<p>[\/fusion_text][fusion_title size=\u00bb3&#8243; content_align=\u00bbleft\u00bb]Barra lateral[\/fusion_title][fusion_text]<\/p>\n<p>En este widget de Elementor vas a poder usar <strong>cualquier zona de widgets de WordPress que ya tengas configurada en tu web<\/strong>. Observa que estoy distinguiendo entre widgets de Elementor y widgets de WordPress para que no te confundas.\u00a0No tienes por qu\u00e9\u00a0configurar\u00a0una barra lateral aunque por el nombre te puedas confundir.\u00a0Tienes que tener en cuenta que se pueden perder los estilos que tengas configurados en tu tema para\u00a0los widgets en la barra lateral\u00a0porque est\u00e1s poniendo un widget de WordPress en otro lugar al que est\u00e1 pensado en un principio.[\/fusion_text][\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container][fusion_builder_container hundred_percent=\u00bbno\u00bb hundred_percent_height=\u00bbno\u00bb hundred_percent_height_scroll=\u00bbno\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bbwidgets-wordpress\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb link_color=\u00bb\u00bb link_hover_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb gradient_start_color=\u00bb\u00bb gradient_end_color=\u00bb\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; background_blend_mode=\u00bbnone\u00bb video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; type=\u00bbflex\u00bb][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; layout=\u00bb1_1&#8243; background_position=\u00bbleft top\u00bb background_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_position=\u00bball\u00bb spacing=\u00bbyes\u00bb background_image=\u00bb\u00bb background_repeat=\u00bbno-repeat\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb margin_top=\u00bb0px\u00bb margin_bottom=\u00bb0px\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_speed=\u00bb0.3&#8243; animation_direction=\u00bbleft\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb center_content=\u00bbno\u00bb last=\u00bbtrue\u00bb min_height=\u00bb\u00bb hover_type=\u00bbnone\u00bb link=\u00bb\u00bb border_sizes_top=\u00bb\u00bb border_sizes_bottom=\u00bb\u00bb border_sizes_left=\u00bb\u00bb border_sizes_right=\u00bb\u00bb first=\u00bbtrue\u00bb][fusion_title size=\u00bb2&#8243; content_align=\u00bbleft\u00bb]<\/p>\n<p><a name=\"wordpress\"><\/a>Widgets de WordPress<\/p>\n<p>[\/fusion_title][fusion_text]<\/p>\n<p>Aqu\u00ed vas a encontrar <strong>los mismos widgets que tienes disponibles en la secci\u00f3n de widgets en el Escritorio de WordPress<\/strong>.\u00a0Estos widgets van a variar de una web a otra dependiendo del tema y de los plugins que tengas instalados.\u00a0La parte buena es que la configuraci\u00f3n es la misma que tienes en WordPress, por lo que no tiene ninguna configuraci\u00f3n adicional por usarlos en Elementor.[\/fusion_text][\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container][fusion_builder_container hundred_percent=\u00bbno\u00bb hundred_percent_height=\u00bbno\u00bb hundred_percent_height_scroll=\u00bbno\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb link_color=\u00bb\u00bb link_hover_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb gradient_start_color=\u00bb\u00bb gradient_end_color=\u00bb\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; background_blend_mode=\u00bbnone\u00bb video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; type=\u00bbflex\u00bb][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; layout=\u00bb1_1&#8243; background_position=\u00bbleft top\u00bb background_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_position=\u00bball\u00bb spacing=\u00bbyes\u00bb background_image=\u00bb\u00bb background_repeat=\u00bbno-repeat\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb margin_top=\u00bb0px\u00bb margin_bottom=\u00bb0px\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_speed=\u00bb0.3&#8243; animation_direction=\u00bbleft\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb center_content=\u00bbno\u00bb last=\u00bbtrue\u00bb min_height=\u00bb\u00bb hover_type=\u00bbnone\u00bb link=\u00bb\u00bb border_sizes_top=\u00bb\u00bb border_sizes_bottom=\u00bb\u00bb border_sizes_left=\u00bb\u00bb border_sizes_right=\u00bb\u00bb first=\u00bbtrue\u00bb][fusion_title size=\u00bb2&#8243; content_align=\u00bbleft\u00bb]<\/p>\n<p><a name=\"ejemplo\"><\/a>Ejemplo pr\u00e1ctico de creaci\u00f3n de una p\u00e1gina<\/p>\n<p>[\/fusion_title][fusion_text]<\/p>\n<p>A continuaci\u00f3n vas a poder ver en el v\u00eddeo un <strong>ejemplo pr\u00e1ctico en tiempo real de como crear una p\u00e1gina con Elementor<\/strong>.\u00a0Vas a poder ver con qu\u00e9 facilidad puedes crear una p\u00e1gina partiendo desde cero.<\/p>\n<p>[\/fusion_text][fusion_text][fusion_youtube id=\u00bb-XR4MOuuhQw\u00bb width=\u00bb1200&#8243; height=\u00bb600&#8243; autoplay=\u00bbfalse\u00bb api_params=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb \/][\/fusion_text][\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container][fusion_builder_container hundred_percent=\u00bbno\u00bb hundred_percent_height=\u00bbno\u00bb hundred_percent_height_scroll=\u00bbno\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bbbonus\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb link_color=\u00bb\u00bb link_hover_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb gradient_start_color=\u00bb\u00bb gradient_end_color=\u00bb\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; background_blend_mode=\u00bbnone\u00bb video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; type=\u00bbflex\u00bb][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; layout=\u00bb1_1&#8243; background_position=\u00bbleft top\u00bb background_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_position=\u00bball\u00bb spacing=\u00bbyes\u00bb background_image=\u00bb\u00bb background_repeat=\u00bbno-repeat\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb margin_top=\u00bb0px\u00bb margin_bottom=\u00bb0px\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_speed=\u00bb0.3&#8243; animation_direction=\u00bbleft\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb center_content=\u00bbno\u00bb last=\u00bbtrue\u00bb min_height=\u00bb\u00bb hover_type=\u00bbnone\u00bb link=\u00bb\u00bb border_sizes_top=\u00bb\u00bb border_sizes_bottom=\u00bb\u00bb border_sizes_left=\u00bb\u00bb border_sizes_right=\u00bb\u00bb first=\u00bbtrue\u00bb][fusion_title title_type=\u00bbtext\u00bb rotation_effect=\u00bbbounceIn\u00bb display_time=\u00bb1200&#8243; highlight_effect=\u00bbcircle\u00bb loop_animation=\u00bboff\u00bb highlight_width=\u00bb9&#8243; highlight_top_margin=\u00bb0&#8243; before_text=\u00bb\u00bb rotation_text=\u00bb\u00bb highlight_text=\u00bb\u00bb after_text=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb content_align=\u00bbleft\u00bb size=\u00bb2&#8243; font_size=\u00bb\u00bb animated_font_size=\u00bb\u00bb fusion_font_family_title_font=\u00bb\u00bb fusion_font_subset_title_font=\u00bb\u00bb fusion_font_variant_title_font=\u00bb\u00bb line_height=\u00bb\u00bb letter_spacing=\u00bb\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_top_mobile=\u00bb\u00bb margin_bottom_mobile=\u00bb\u00bb text_color=\u00bb\u00bb animated_text_color=\u00bb\u00bb highlight_color=\u00bb\u00bb style_type=\u00bbdefault\u00bb sep_color=\u00bb\u00bb animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb margin_top_small=\u00bb\u00bb margin_bottom_small=\u00bb\u00bb]<a name=\"bonus\"><\/a>Bonus: Mejores addons para Elementor Page Builder[\/fusion_title][fusion_text columns=\u00bb\u00bb column_min_width=\u00bb\u00bb column_spacing=\u00bb\u00bb rule_style=\u00bbdefault\u00bb rule_size=\u00bb\u00bb rule_color=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb]<\/p>\n<p>Elementor es un <a href=\"https:\/\/ignaciosantiago.com\/page-builder-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">page builder de WordPress<\/a> que ofrece una <strong>versi\u00f3n gratuita<\/strong> (que no est\u00e1 mal para empezar, pero que se queda peque\u00f1a enseguida) y otra <strong>versi\u00f3n PRO<\/strong> que te ofrece una<strong> funcionalidad extra<\/strong> muy interesante (sobre todo por el <strong>theme builder<\/strong>). De todas maneras, hay usuarios deseosos de m\u00e1s opciones de dise\u00f1o y widgets y, por ello, son muchos los desarrolladores que han hecho <strong>plugins para a\u00f1adir todav\u00eda m\u00e1s funcionalidad a Elementor<\/strong>. Estas son las <strong>mejores extensiones para el page builder de WordPress Elementor<\/strong>:<\/p>\n<p>[\/fusion_text][\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container][fusion_global id=\u00bb91659&#8243;][fusion_builder_container hundred_percent=\u00bbyes\u00bb hundred_percent_height=\u00bbno\u00bb hundred_percent_height_scroll=\u00bbno\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb type=\u00bbflex\u00bb][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; layout=\u00bb1_1&#8243; spacing=\u00bb\u00bb center_content=\u00bbno\u00bb link=\u00bb\u00bb target=\u00bb_self\u00bb min_height=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb background_image_id=\u00bb\u00bb background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbleft top\u00bb undefined=\u00bb\u00bb background_repeat=\u00bbno-repeat\u00bb hover_type=\u00bbnone\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_position=\u00bball\u00bb border_radius_top_left=\u00bb\u00bb border_radius_top_right=\u00bb\u00bb border_radius_bottom_left=\u00bb\u00bb border_radius_bottom_right=\u00bb\u00bb box_shadow=\u00bbno\u00bb box_shadow_vertical=\u00bb\u00bb box_shadow_horizontal=\u00bb\u00bb box_shadow_blur=\u00bb\u00bb box_shadow_spread=\u00bb\u00bb box_shadow_color=\u00bb\u00bb box_shadow_style=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb last=\u00bbtrue\u00bb border_sizes_top=\u00bb0&#8243; border_sizes_bottom=\u00bb0&#8243; border_sizes_left=\u00bb0&#8243; border_sizes_right=\u00bb0&#8243; first=\u00bbtrue\u00bb][fusion_button link=\u00bbhttps:\/\/ignaciosantiago.com\/elementor-addons\/\u00bb text_transform=\u00bb\u00bb title=\u00bb\u00bb target=\u00bb_blank\u00bb link_attributes=\u00bb\u00bb alignment=\u00bbcenter\u00bb modal=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb color=\u00bbdefault\u00bb button_gradient_top_color=\u00bb\u00bb button_gradient_bottom_color=\u00bb\u00bb button_gradient_top_color_hover=\u00bb\u00bb button_gradient_bottom_color_hover=\u00bb\u00bb accent_color=\u00bb\u00bb accent_hover_color=\u00bb\u00bb type=\u00bb\u00bb bevel_color=\u00bb\u00bb border_color=\u00bb\u00bb border_hover_color=\u00bb\u00bb size=\u00bbxlarge\u00bb stretch=\u00bbyes\u00bb icon=\u00bbfa-plus fas\u00bb icon_position=\u00bbleft\u00bb icon_divider=\u00bbno\u00bb animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb]Addons para Elementor Page Builder de WordPress[\/fusion_button][\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container][fusion_builder_container hundred_percent=\u00bbno\u00bb hundred_percent_height=\u00bbno\u00bb hundred_percent_height_scroll=\u00bbno\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bbconclusion\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb link_color=\u00bb\u00bb link_hover_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb gradient_start_color=\u00bb\u00bb gradient_end_color=\u00bb\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; background_blend_mode=\u00bbnone\u00bb video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; filter_blur=\u00bb0&#8243; filter_hue_hover=\u00bb0&#8243; filter_saturation_hover=\u00bb100&#8243; filter_brightness_hover=\u00bb100&#8243; filter_contrast_hover=\u00bb100&#8243; filter_invert_hover=\u00bb0&#8243; filter_sepia_hover=\u00bb0&#8243; filter_opacity_hover=\u00bb100&#8243; filter_blur_hover=\u00bb0&#8243; type=\u00bbflex\u00bb][fusion_builder_row][fusion_builder_column type=\u00bb1_1&#8243; layout=\u00bb1_1&#8243; background_position=\u00bbleft top\u00bb background_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb border_position=\u00bball\u00bb spacing=\u00bbyes\u00bb background_image=\u00bb\u00bb background_repeat=\u00bbno-repeat\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb margin_top=\u00bb0px\u00bb margin_bottom=\u00bb0px\u00bb class=\u00bb\u00bb id=\u00bb\u00bb animation_type=\u00bb\u00bb animation_speed=\u00bb0.3&#8243; animation_direction=\u00bbleft\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb center_content=\u00bbno\u00bb last=\u00bbtrue\u00bb min_height=\u00bb\u00bb hover_type=\u00bbnone\u00bb link=\u00bb\u00bb border_sizes_top=\u00bb\u00bb border_sizes_bottom=\u00bb\u00bb border_sizes_left=\u00bb\u00bb border_sizes_right=\u00bb\u00bb first=\u00bbtrue\u00bb][fusion_title title_type=\u00bbtext\u00bb rotation_effect=\u00bbbounceIn\u00bb display_time=\u00bb1200&#8243; highlight_effect=\u00bbcircle\u00bb loop_animation=\u00bboff\u00bb highlight_width=\u00bb9&#8243; highlight_top_margin=\u00bb0&#8243; before_text=\u00bb\u00bb rotation_text=\u00bb\u00bb highlight_text=\u00bb\u00bb after_text=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb class=\u00bb\u00bb id=\u00bb\u00bb content_align=\u00bbleft\u00bb size=\u00bb2&#8243; font_size=\u00bb\u00bb animated_font_size=\u00bb\u00bb fusion_font_family_title_font=\u00bb\u00bb fusion_font_subset_title_font=\u00bb\u00bb fusion_font_variant_title_font=\u00bb\u00bb line_height=\u00bb\u00bb letter_spacing=\u00bb\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_top_mobile=\u00bb\u00bb margin_bottom_mobile=\u00bb\u00bb text_color=\u00bb\u00bb animated_text_color=\u00bb\u00bb highlight_color=\u00bb\u00bb style_type=\u00bbdefault\u00bb sep_color=\u00bb\u00bb animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb margin_top_small=\u00bb\u00bb margin_bottom_small=\u00bb\u00bb]<\/p>\n<p><a name=\"conclusion\"><\/a>Crea una p\u00e1gina web profesional con Elementor Page Builder<\/p>\n<p>[\/fusion_title][fusion_text columns=\u00bb\u00bb column_min_width=\u00bb\u00bb column_spacing=\u00bb\u00bb rule_style=\u00bbdefault\u00bb rule_size=\u00bb\u00bb rule_color=\u00bb\u00bb content_alignment_medium=\u00bb\u00bb content_alignment_small=\u00bb\u00bb content_alignment=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb sticky_display=\u00bbnormal,sticky\u00bb class=\u00bb\u00bb id=\u00bb\u00bb margin_top=\u00bb\u00bb margin_right=\u00bb\u00bb margin_bottom=\u00bb\u00bb margin_left=\u00bb\u00bb font_size=\u00bb\u00bb fusion_font_family_text_font=\u00bb\u00bb fusion_font_variant_text_font=\u00bb\u00bb line_height=\u00bb\u00bb letter_spacing=\u00bb\u00bb text_color=\u00bb\u00bb animation_type=\u00bb\u00bb animation_direction=\u00bbleft\u00bb animation_speed=\u00bb0.3&#8243; animation_offset=\u00bb\u00bb]<\/p>\n<p>Despu\u00e9s de leer este megatutorial no vas a tener ninguna excusa para poder conseguir dise\u00f1os incre\u00edbles en tu web.\u00a0Como te he dicho al comienzo no tienes que esperar nada para poder empezar a usar Elementor.\u00a0Si no te atreves a instalarlo en tu web, <a href=\"https:\/\/potenciandotuweb.com\/instalar-wordpress-en-tu-ordenador\/\" target=\"_blank\" rel=\"noopener\">sigue este art\u00edculo e instala WordPress en tu ordenador<\/a>. <strong>As\u00ed tendr\u00e1s una web de pruebas que solo t\u00fa podr\u00e1s usar y sin miedo a meter la pata<\/strong>.<\/p>\n<p>Como te he dicho a lo largo del tutorial, no hay excusa para no empezar a usar Elementor hoy mismo. Se adapta al tema que tengas en uso, cuenta con una versi\u00f3n gratuita con la que puedes empezar a aprender a sacar todo su potencial y adem\u00e1s cuenta con el mejor rendimiento que he visto en un builder.\u00a0\u00c1nimo, empieza ahora mismo instalando Elementor.<\/p>\n<p>[\/fusion_text][\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container][fusion_global id=\u00bb49153&#8243;][fusion_global id=\u00bb79322&#8243;][fusion_global id=\u00bb79022&#8243;]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[fusion_builder_container hundred_percent=\u00bbno\u00bb hundred_percent_height=\u00bbno\u00bb hundred_percent_height_scroll=\u00bbno\u00bb hundred_percent_height_center_content=\u00bbyes\u00bb equal_height_columns=\u00bbno\u00bb menu_anchor=\u00bb\u00bb hide_on_mobile=\u00bbsmall-visibility,medium-visibility,large-visibility\u00bb status=\u00bbpublished\u00bb publish_date=\u00bb\u00bb class=\u00bb\u00bb id=\u00bb\u00bb link_color=\u00bb\u00bb link_hover_color=\u00bb\u00bb border_color=\u00bb\u00bb border_style=\u00bbsolid\u00bb margin_top=\u00bb\u00bb margin_bottom=\u00bb\u00bb padding_top=\u00bb\u00bb padding_right=\u00bb\u00bb padding_bottom=\u00bb\u00bb padding_left=\u00bb\u00bb gradient_start_color=\u00bb\u00bb gradient_end_color=\u00bb\u00bb gradient_start_position=\u00bb0&#8243; gradient_end_position=\u00bb100&#8243; gradient_type=\u00bblinear\u00bb radial_direction=\u00bbcenter center\u00bb linear_angle=\u00bb180&#8243; background_color=\u00bb\u00bb background_image=\u00bb\u00bb background_position=\u00bbcenter center\u00bb background_repeat=\u00bbno-repeat\u00bb fade=\u00bbno\u00bb background_parallax=\u00bbnone\u00bb enable_mobile=\u00bbno\u00bb parallax_speed=\u00bb0.3&#8243; background_blend_mode=\u00bbnone\u00bb video_mp4=\u00bb\u00bb video_webm=\u00bb\u00bb video_ogv=\u00bb\u00bb video_url=\u00bb\u00bb video_aspect_ratio=\u00bb16:9&#8243; video_loop=\u00bbyes\u00bb video_mute=\u00bbyes\u00bb video_preview_image=\u00bb\u00bb filter_hue=\u00bb0&#8243; filter_saturation=\u00bb100&#8243; filter_brightness=\u00bb100&#8243; filter_contrast=\u00bb100&#8243; filter_invert=\u00bb0&#8243; filter_sepia=\u00bb0&#8243; filter_opacity=\u00bb100&#8243; [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":19387,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":0,"footnotes":""},"categories":[204,209,201],"tags":[],"class_list":["post-19386","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugins","category-tutoriales","category-wordpress"],"_links":{"self":[{"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/posts\/19386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/comments?post=19386"}],"version-history":[{"count":0,"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/posts\/19386\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/media\/19387"}],"wp:attachment":[{"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/media?parent=19386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/categories?post=19386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/tags?post=19386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}