{"id":25295,"date":"2018-03-15T00:00:00","date_gmt":"2018-03-14T18:30:00","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?post_type=docs&#038;p=25295"},"modified":"2023-12-06T17:02:04","modified_gmt":"2023-12-06T11:32:04","slug":"custom-header","status":"publish","type":"docs","link":"https:\/\/git-staging.wpastra.com\/es\/docs\/custom-header\/","title":{"rendered":"Encabezado personalizado"},"content":{"rendered":"<p>Utilizando el m\u00f3dulo Site Builder disponible con Astra Pro, puede dise\u00f1ar una cabecera personalizada. Consulte <a href=\"https:\/\/git-staging.wpastra.com\/es\/docs\/custom-layouts-pro\/\">documento<\/a>Para empezar, el m\u00f3dulo de dise\u00f1o personalizado.<\/p>\n\n\n\n<p>Se trata de una funci\u00f3n premium disponible con el <strong>Complemento Astra Pro<\/strong> plugin. Para utilizar estas funciones profesionales, es necesario tener el plugin <a href=\"https:\/\/wordpress.org\/themes\/astra\/\">Tema Astra<\/a> junto con el Addon Astra Pro instalado en su sitio web.<\/p>\n\n\n\n<p>Al seleccionar un dise\u00f1o de cabecera se sustituir\u00e1 la cabecera actual del sitio por el contenido del dise\u00f1o personalizado. En este caso, los ajustes del personalizador no se aplicar\u00e1n al encabezado personalizado.<\/p>\n\n\n\n<p>Puedes dise\u00f1ar cabeceras con cualquier page builder y establecerlas en todo el sitio o en una p\u00e1gina\/post en particular con reglas de visualizaci\u00f3n.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo crear un dise\u00f1o de cabecera<\/h2>\n\n\n\n<p>Antes de empezar a utilizar el Constructor de Sitios, aseg\u00farese de haber instalado y activado el plugin Astra Pro. Adem\u00e1s, actualice tanto el&nbsp;<a href=\"https:\/\/wordpress.org\/themes\/astra\/\">Tema Astra<\/a>&nbsp;y Astra Addon a las \u00faltimas versiones para acceder al Constructor de Sitios.<\/p>\n\n\n\n<p>Despu\u00e9s, ve al panel de control de WordPress, haz clic en Astra, luego en M\u00f3dulos Astra Pro y activa el bot\u00f3n Site Builder.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-168573-1.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"460\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-168573-1-1024x460.png\" alt=\"How to Create a Header Layout\" class=\"wp-image-169220\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-168573-1-1024x460.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-168573-1-300x135.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-168573-1-768x345.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-168573-1-18x8.png 18w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-168573-1.png 1048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Una vez que active el Constructor de Sitios, podr\u00e1 ver el Constructor de Sitios en Astra en el panel de control de WordPress.<\/p>\n\n\n\n<p>Tras hacer clic en el Creador de sitios, puede explorar el renovado Creador de sitios a trav\u00e9s de la secci\u00f3n Todos los dise\u00f1os.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-168573-2.png\"><img decoding=\"async\" width=\"1024\" height=\"476\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-168573-2-1024x476.png\" alt=\"\" class=\"wp-image-169221\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-168573-2-1024x476.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-168573-2-300x140.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-168573-2-768x357.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-168573-2-18x8.png 18w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-168573-2.png 1047w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Desde el panel de control del constructor de sitios, puede crear una plantilla de cabecera.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-168573-3.png\"><img decoding=\"async\" width=\"1024\" height=\"476\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-168573-3-1024x476.png\" alt=\"\" class=\"wp-image-169222\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-168573-3-1024x476.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-168573-3-300x140.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-168573-3-768x357.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-168573-3-18x8.png 18w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-168573-3.png 1047w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Tras hacer clic en el bot\u00f3n \"Crear nuevo\", se le redirigir\u00e1 al editor de p\u00e1ginas, donde podr\u00e1 acceder a la configuraci\u00f3n del Creador de Sitios.<\/p>\n\n\n\n<p>Si hace clic en el icono Astra en la esquina superior derecha, abrir\u00e1 el panel de Configuraci\u00f3n del Constructor de Sitios. M\u00e1s abajo, encontrar\u00e1 el resumen de las opciones de Tipo de dise\u00f1o de cabecera.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/header.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"476\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/header-1024x476.png\" alt=\"\" class=\"wp-image-169227\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/header-1024x476.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/header-300x140.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/header-768x357.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/header-1536x714.png 1536w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/header-18x8.png 18w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/header.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>En la configuraci\u00f3n de pegajoso, puedes elegir que tu encabezado personalizado sea pegajoso o no. Si establece que el encabezado se pegue en la parte superior de la p\u00e1gina, puede decidir si debe encogerse o no. Si activas el efecto de encogimiento, se eliminar\u00e1 todo el espacio superior e inferior de la cabecera. Adem\u00e1s, puede elegir pegar el encabezado en escritorio y\/o m\u00f3vil.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-5.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1047\" height=\"487\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-5.png\" alt=\"\" class=\"wp-image-169230\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-5.png 1047w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-5-300x140.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-5-1024x476.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-5-768x357.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-5-18x8.png 18w\" sizes=\"(max-width: 1047px) 100vw, 1047px\" \/><\/a><\/figure>\n\n\n\n<p>Puede elegir que su cabecera personalizada se muestre en todo el sitio web o en p\u00e1ginas\/post espec\u00edficos con la opci\u00f3n Mostrar en. Incluso puede excluir una p\u00e1gina\/post en particular a\u00f1adi\u00e9ndolos a la Regla de exclusi\u00f3n.<\/p>\n\n\n\n<p>Puede decidir un rol de usuario para el que la cabecera personalizada debe ser visible. Para los usuarios excluidos, la cabecera configurada con las opciones del personalizador ser\u00e1 visible.<\/p>\n\n\n\n<p><strong>Por ejemplo:&nbsp;<\/strong>Si desea mostrar un encabezado personalizado en todo el sitio Web, excepto en la p\u00e1gina 404 para todos los usuarios que hayan iniciado sesi\u00f3n, debe configurar las siguientes opciones -<\/p>\n\n\n\n<p>Mostrar en: Todo el sitio web<\/p>\n\n\n\n<p>No mostrar en: P\u00e1gina 404<\/p>\n\n\n\n<p>Roles de usuario: Conectado<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-6.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"476\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-6-1024x476.png\" alt=\"\" class=\"wp-image-169231\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-6-1024x476.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-6-300x140.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-6-768x357.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-6-18x8.png 18w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-6.png 1047w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Adem\u00e1s, puede ver la opci\u00f3n Visibilidad del dispositivo. Esta opci\u00f3n le permite elegir un dispositivo para mostrar el dise\u00f1o del encabezado. Solo tiene que marcar la casilla de verificaci\u00f3n de los dispositivos necesarios: escritorio, tableta y m\u00f3vil.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"476\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-7-1024x476.png\" alt=\"\" class=\"wp-image-169232\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-7-1024x476.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-7-300x140.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-7-768x357.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-7-18x8.png 18w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-7.png 1047w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Por \u00faltimo, puede establecer una hora de inicio y una hora de finalizaci\u00f3n para la visibilidad de la presentaci\u00f3n. Establezca una fecha y hora de duraci\u00f3n para la presentaci\u00f3n.<\/p>\n\n\n\n<p>El dise\u00f1o ser\u00e1 visible durante el tiempo seleccionado.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-8.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"476\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-8-1024x476.png\" alt=\"\" class=\"wp-image-169233\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-8-1024x476.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-8-300x140.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-8-768x357.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-8-18x8.png 18w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/12\/word-image-166721-8.png 1047w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Una vez finalizado el tiempo de duraci\u00f3n, el dise\u00f1o personalizado establecido como cabecera se desactivar\u00e1. As\u00ed, la cabecera dise\u00f1ada con el personalizador Astra se mostrar\u00e1 autom\u00e1ticamente m\u00e1s adelante.&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>Utilizando el m\u00f3dulo Site Builder disponible con Astra Pro, puede dise\u00f1ar una cabecera personalizada. Por favor, consulte el documento, para empezar, el m\u00f3dulo de Dise\u00f1o Personalizado. Esta es una caracter\u00edstica premium disponible con el plugin Astra Pro Addon. Para utilizar estas caracter\u00edsticas pro, es necesario tener el tema Astra junto con el Astra Pro Addon [...]<\/p>","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"docs_category":[134],"docs_tag":[],"class_list":{"0":"post-25295","1":"docs","2":"type-docs","3":"status-publish","5":"docs_category-site-builder-module"},"spectra_custom_meta":{"_yoast_wpseo_primary_docs_category":["134"],"_wp_old_slug":[""],"_wp_page_template":["default"],"_edit_lock":["1701943426:89"],"_edit_last":["89"],"onesignal_meta_box_present":["1"],"onesignal_send_notification":[""],"site-sidebar-layout":["default"],"site-content-layout":["default"],"theme-transparent-header-meta":["default"],"_yoast_wpseo_content_score":["60"],"wpil_sync_report3":["1"],"wpil_links_inbound_internal_count":["3"],"wpil_links_inbound_internal_count_data":["a:3:{i:0;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:39:\"https:\/\/wpastra.com\/docs\/custom-header\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:4:\"post\";O:15:\"Wpil_Model_Post\":5:{s:2:\"id\";s:5:\"24651\";s:5:\"title\";s:23:\"Custom Layouts Overview\";s:4:\"type\";s:4:\"post\";s:7:\"content\";s:3848:\"<!-- wp:core-embed\/youtube {\"url\":\"https:\/\/www.youtube.com\/watch?v=FWRkzJQwcKU\",\"type\":\"video\",\"providerNameSlug\":\"youtube\",\"className\":\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"} -->\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.youtube.com\/watch?v=FWRkzJQwcKU\n<\/div><\/figure>\n<!-- \/wp:core-embed\/youtube -->\n\n<!-- wp:paragraph -->\n<p>This is a premium feature available with Astra Pro Addon plugin. To use these pro features, you need to have the <a href=\"https:\/\/wordpress.org\/themes\/astra\">Astra theme<\/a> along with the Astra Pro Addon installed on your website.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Custom Layouts is a very powerful module offered in Astra Pro. With this module, you can create a totally custom header, footer, 404 pages as well as custom content or code on various hook locations.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"customBackgroundColor\":\"#cae3f3\"} -->\n<p style=\"background-color:#cae3f3\" class=\"has-background\"><strong>Quick Steps on How to Create Custom Layouts Using the Custom Layout Module<\/strong><br><strong>Step 1:<\/strong> Make sure you have the Astra Pro Addon plugin installed and activated. <a href=\"https:\/\/wpastra.com\/docs\/how-to-install-astra-pro-addon-plugin\/\">How to Install Astra Pro Addon plugin?<\/a><br><strong>Step 2:<\/strong> Activate the Custom Layouts module from the Astra Options under the <em>WordPress Dashboard > Appearance > Astra Options<\/em><br><strong>Step 3:<\/strong> Visit customizer [ <em>Appearance > Astra Options > Custom Layouts<\/em> ] to edit Custom Layouts settings<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":39531,\"align\":\"center\",\"linkDestination\":\"media\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-custom-layout.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-custom-layout.png\" alt=\"\" class=\"wp-image-39531\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>After activating a module click on <strong>Settings<\/strong> option to get started.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":39534,\"align\":\"center\",\"linkDestination\":\"media\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-custom-layout-add.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-custom-layout-add.png\" alt=\"\" class=\"wp-image-39534\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now you will see a new&nbsp;<strong>Custom Layouts<\/strong>&nbsp;menu under the Appearance tab:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Once&nbsp;you add a new layout, you will see options as below:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":39535,\"linkDestination\":\"media\"} -->\n<figure class=\"wp-block-image\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-setting.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-setting.png\" alt=\"\" class=\"wp-image-39535\"\/><\/a><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Select the option from the dropdown, where the custom layout will be appended.&nbsp;Please check dedicated articles on the links below for available with each layout:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><strong><a href=\"https:\/\/wpastra.com\/docs\/custom-header\/\">Header<\/a><\/strong><\/li><li><strong><a href=\"https:\/\/wpastra.com\/docs\/custom-footer\/\">Footer<\/a><\/strong><\/li><li><strong><a href=\"https:\/\/wpastra.com\/docs\/custom-404-page\/\">404 Page<\/a><\/strong><\/li><li><strong><a href=\"https:\/\/wpastra.com\/docs\/custom-layout-hooks\/\">Hooks<\/a><\/strong><\/li><\/ul>\n<!-- \/wp:list -->\";s:5:\"links\";O:8:\"stdClass\":4:{s:4:\"view\";s:44:\"https:\/\/wpastra.com\/docs\/custom-layouts-pro\/\";s:4:\"edit\";N;s:6:\"export\";s:68:\"https:\/\/wpastra.com\/wp-admin\/post.php?area=wpil_export&post_id=24651\";s:7:\"refresh\";s:99:\"https:\/\/wpastra.com\/wp-admin\/admin.php?page=link_whisper&type=post_links_count_update&post_id=24651\";}}s:6:\"anchor\";s:6:\"Header\";s:15:\"added_by_plugin\";b:0;}i:1;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:39:\"https:\/\/wpastra.com\/docs\/custom-header\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:4:\"post\";O:15:\"Wpil_Model_Post\":5:{s:2:\"id\";s:5:\"28020\";s:5:\"title\";s:49:\"Elementor Free vs Pro: Which One Should You Pick?\";s:4:\"type\";s:4:\"post\";s:7:\"content\";s:12614:\"<!-- wp:paragraph -->\n<p>Need help deciding between <a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" rel=\"noopener\">Elementor<\/a> vs <a href=\"https:\/\/wpastra.com\/go\/elementor\/\" rel=\"noopener\">Elementor Pro<\/a> for your website? Should you break out your wallet and pay for Elementor Pro, or will you be just fine using the free version of Elementor that's available at WordPress.org?<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In this post, we want to help answer those questions so that you can create an awesome website with the right tool for <em>you<\/em>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>We'll start by discussing the <a href=\"https:\/\/docs.elementor.com\/article\/146-benefits-elementor-pro?ref=1352\" rel=\"noopener\">differences between Elementor and Elementor Pro<\/a>. Then, we'll try to help you pick between the two with some quick bullet points in each tool's favor.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Elementor vs Elementor Pro: The Main Differences<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Elementor Pro is technically an <em>add-on<\/em> for the free Elementor plugin. That is, if you purchase Elementor Pro, you'll have both the free Elementor plugin <strong>and<\/strong> the Elementor Pro plugin active on your site.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>That technicality is important because it sets up how things work:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Elementor Pro is everything you get in Elementor<strong>...plus more added on<\/strong>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So what's \"more\"? And do you actually need \"more\"?<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Let's discuss...<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Elementor Pro Adds 30 New Widgets <\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>First off, Elementor Pro just plain gives you more widgets to build your pages with - <strong>30 of them to be exact<\/strong>. Here's the full list:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":28104,\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-elementor-pro-1-1024x617.png\" alt=\"elementor vs elementor pro elements\" class=\"wp-image-28104\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>While you don't <em>need <\/em>these widgets to build pages that look great, they will make your designs more functional. And a secondary benefit is that they can actually eliminate the need for some third-party plugins.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>For example, the <strong>Form<\/strong> widget lets you build customized forms right from the Elementor interface, the <strong>Slider<\/strong> widget lets you include performance-optimized sliders, and&nbsp;the <strong>Posts<\/strong> widget lets you display your latest blog posts in a grid.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Those are all things you'd otherwise need a separate plugin for.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Additionally, if you're running a WooCommerce store, you'll love the addition of a variety of WooCommerce-specific widgets.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Learn how Astra can <a href=\"https:\/\/wpastra.com\/woocommerce-theme\/\">help you build your WooCommerce store<\/a> with Elementor.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Elementor Pro isn't the only way to add more widgets, though. A plugin like <a href=\"https:\/\/uaelementor.com\/\" rel=\"noopener\">Ultimate Addons for Elementor<\/a> also adds new widgets to the free version of Elementor (<em>as well as Elementor Pro, if you have both<\/em>).<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Elementor Pro Unlocks The Full Template Library<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Elementor comes with a large template library, but most of the templates are locked in the free version. <strong>Elementor Pro unlocks them<\/strong>. With Elementor Pro, you can use every single page template and block in the library:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":28105,\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-elementor-pro-2.png\" alt=\"elementor pro templates\" class=\"wp-image-28105\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>While this is a benefit, you can actually find plenty of additional templates for the regular version of Elementor <em>without<\/em> purchasing Elementor Pro.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>For example, all of the <a href=\"https:\/\/wpastra.com\/ready-websites\/\">Astra Starter Sites<\/a> are built with the free version of Elementor. So if you <a href=\"https:\/\/wpastra.com\/\">use the Astra theme<\/a>, you can still access all those templates without paying for Elementor.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Elementor Pro Adds Powerful New Functionality<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Beyond those new widgets and templates, this section houses <strong>the most valuable Elementor Pro additions<\/strong>, <em>especially since the release of Elementor Pro 2.0<\/em>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Here are the new features that you get with Elementor Pro:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Full Theme Building Functionality <\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Elementor Pro lets you use the same drag-and-drop interface to build your <em>entire theme<\/em>, including your header, footer, and post templates:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":28106,\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-elementor-pro-3.png\" alt=\"elementor pro theme building\" class=\"wp-image-28106\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>If you want to build <em>everything<\/em> with Elementor, that's a powerful reason to choose Elementor Pro.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>But if you just want to, say, create a custom header or footer for your site, you don't actually need full theme building - <a href=\"https:\/\/wpastra.com\/docs\/custom-header\/\">Astra Pro's Custom Layout module<\/a>&nbsp;lets you design your own custom header or footer without the need for Elementor Pro.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3> Live Custom CSS<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>While the free version of Elementor lets you add custom CSS classes and IDs, Elementor Pro lets you <strong><em>directly add CSS styles to individual widgets or sections<\/em><\/strong>:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":28107,\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-elementor-pro-4.png\" alt=\"elementor pro custom css\" class=\"wp-image-28107\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>If you like to use your own custom CSS, this is a big productivity boost.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Global Widgets <\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Global widgets will save you a lot of time if you're planning to reuse the same widget on multiple pages.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Similar to saving a widget as a template, they let you quickly reuse the same design...<strong>but with a twist<\/strong>:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you ever want to update a global widget in the future, any changes you make will automatically get pushed out to every instance of that global widget.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Embed Anywhere <\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Embed Anywhere lets you insert Elementor templates anywhere on your site using shortcodes or widgets.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>For example, you could use this feature to design a CTA that goes in your site's sidebar via a widget.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Combined with theme building, this gives you yet another way to apply the Elementor interface to your entire website.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>So do all of those new features mean you absolutely need Elementor Pro? <\/strong>Well, it depends...<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>You'll Probably Be Fine With Elementor If\u2026 <\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>If these apply to you, you'll likely be happy with just <a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" rel=\"noopener\">the free version<\/a>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><strong>Just want to design some \"basic\" but good-looking content. <\/strong>That is, you don't need advanced widgets like pricing tables or forms.<\/li><li><strong>Don't work with custom CSS very often.<\/strong> You'll still be able to add custom CSS classes and IDs, you just miss out on the live code editor for individual widgets and sections.<\/li><li><strong>Are already using a flexible theme.<\/strong> For example, <a href=\"https:\/\/wpastra.com\/\">Astra Pro<\/a> can help give you some of the functionality you'd get in Elementor Pro, like the ability to create custom headers and footers.<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:heading -->\n<h2>You Should Definitely Get Elementor Pro If\u2026 <\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>If these apply to you, you'll probably want to <a href=\"https:\/\/wpastra.com\/go\/elementor\/\" rel=\"noopener\">pay for Elementor Pro<\/a>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><strong>Plan to build more complex content and landing pages.<\/strong> The extra widgets really come in handy when you start getting outside basic pages.<\/li><li><strong>Are using WooCommerce.<\/strong> The WooCommerce widgets give you a ton of flexibility.<\/li><li><strong>Like using your own CSS.<\/strong> Being able to add CSS directly to widgets and sections can really speed up your workflow.<\/li><li><strong>Want to build your entire theme using the Elementor interface.<\/strong> Just remember to still <a href=\"https:\/\/wpastra.com\/is-theme-required-if-you-have-a-theme-builder\/\">pick a quality theme <em>even if you're using Elementor's theme builder<\/em><\/a>.<\/li><li><strong>Like having access to all the templates<\/strong>, though you can still use <a href=\"https:\/\/wpastra.com\/ready-websites\/\">Astra Starter Sites<\/a> with the free version of Elementor.<\/li><li><strong>Plan to reuse the same widget across multiple pages.<\/strong> Global widgets will be your best friend!<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:heading -->\n<h2>Elementor vs Elementor Pro: It Shouldn't Be A Hard Question<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Because Elementor Pro is an add-on for Elementor, you shouldn't stress about making this decision <em>right now<\/em>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Just start with the free version of <a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" rel=\"noopener\">Elementor<\/a> and see if it can meet your needs. If you ever feel limited, you'll be able to seamlessly <a href=\"https:\/\/wpastra.com\/go\/elementor\/\" rel=\"noopener\">upgrade to Elementor Pro<\/a> just by uploading the Elementor Pro plugin - there's no configuration process and you won't lose any of your work.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>And no matter which version of Elementor you choose, the <a href=\"https:\/\/wpastra.com\/\">Astra theme<\/a> is built to be both Elementor and Elementor Pro's best friend. With Astra, you'll get:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>A performance-oriented foundation to make your Elementor designs load crazy fast.<\/li><li>Flexible page controls that let you disable certain page\/post elements so they don't get in the way of your Elementor design.<\/li><li>Easy global style controls via the WordPress Customizer to more easily control how your Elementor designs look.<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>Learn more about <a href=\"https:\/\/wpastra.com\/theme-for-elementor\/\">why Astra is the best theme for Elementor users<\/a>. Then, go create something awesome with Elementor and Astra!<\/p>\n<!-- \/wp:paragraph -->\";s:5:\"links\";O:8:\"stdClass\":4:{s:4:\"view\";s:39:\"https:\/\/wpastra.com\/elementor-free-pro\/\";s:4:\"edit\";N;s:6:\"export\";s:68:\"https:\/\/wpastra.com\/wp-admin\/post.php?area=wpil_export&post_id=28020\";s:7:\"refresh\";s:99:\"https:\/\/wpastra.com\/wp-admin\/admin.php?page=link_whisper&type=post_links_count_update&post_id=28020\";}}s:6:\"anchor\";s:32:\"Astra Pro's Custom Layout module\";s:15:\"added_by_plugin\";b:0;}i:2;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:39:\"https:\/\/wpastra.com\/docs\/custom-header\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:4:\"post\";O:15:\"Wpil_Model_Post\":5:{s:2:\"id\";s:5:\"28121\";s:5:\"title\";s:61:\"Elementor vs Divi Builder: A Hands-on Page Builder Comparison\";s:4:\"type\";s:4:\"post\";s:7:\"content\";s:25984:\"<!-- wp:paragraph -->\n<p>Looking for some help deciding between <a href=\"https:\/\/wpastra.com\/go\/elementor\/\" target=\"_blank\" rel=\"noopener noreferrer\">Elementor<\/a> vs <a href=\"https:\/\/www.elegantthemes.com\/plugins\/divi-builder\/\" target=\"_blank\" rel=\"noopener noreferrer\">Divi Builder<\/a> as your go-to page builder?<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Both are massively popular WordPress page builders. And each has a similarly massive community of designers and enthusiasts.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2><strong>So how can you pick between the two?<\/strong><\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>That's where we're here to help!<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>We've written a detailed, objective comparison of these two page builders.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>We're not looking to pick sides, so don't expect a single recommendation at the end of this. <strong>But we are looking to dig in and provide a much deeper comparison than you'd get from looking at each page builder's feature list<\/strong>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>By the end, you should have all the information you need to make your own informed decision.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Let's jump in!<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Elementor vs Divi Builder: Comparing The Interfaces<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>While both Elementor and Divi Builder offer front-end drag-and-drop editing, each plugin's interface uses a different approach.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>With Elementor, you'll do most of your work from a fixed sidebar, while Divi Builder utilizes more floating buttons.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Elementor<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Elementor divides its interface into two core sections:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><strong>1<\/strong> - a live preview of your design that you can edit with drag and drop.<\/li><li><strong>2 <\/strong>- a sidebar where you can add new elements, apply styling, and access other functionality. <em>You can hide this sidebar if you ever want a quick fullscreen preview<\/em>.<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:image {\"id\":28122,\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-divi-0-1-1024x543.png\" alt=\"Elementor vs Divi Builder interface\" class=\"wp-image-28122\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>To add a new design element to your page, you just drag it over from the list in your sidebar:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":28123,\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-divi-0-2.gif\" alt=\"elementor add element\" class=\"wp-image-28123\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>And Elementor supports inline editing for elements with text. That means to edit any of the text on your page, you just need to click and type (<em>like you would in a Word document<\/em>). You can also use the text editor in the sidebar, if desired. The two automatically sync*:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":28124,\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-divi-0-3.gif\" alt=\"elementor inline editing\" class=\"wp-image-28124\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p><em>*You can see that as we type directly on the page, the text in the sidebar editor automatically updates as well<\/em>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Divi Builder<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Unlike Elementor, Divi Builder gives you access to both front-end visual editing and back-end editing. <em>Realistically<\/em>, most people will probably just stick to the visual editor, so that's what we'll focus on. But if you <em>are<\/em> the type of person who likes back-end editing, you do have that option with Divi Builder.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>The visual editor interface is quite a bit different than Elementor. The first thing that you'll probably notice is that there's no fixed sidebar like with Elementor. Instead, you access everything with floating buttons that open various popups:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":28125,\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-divi-1.gif\" alt=\"divi interface\" class=\"wp-image-28125\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>For example, if you want to insert a new module, you'll use a floating popup:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":28126,\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-divi-2.png\" alt=\"divi builder add module\" class=\"wp-image-28126\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you get some modules on the page, you can use inline editing to directly edit text on the page just like with Elementor:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":28127,\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-divi-3.gif\" alt=\"divi builder rearrange\" class=\"wp-image-28127\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>And you can use drag and drop to reposition elements on the page:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":28128,\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-divi-4.gif\" alt=\"divi inline editing\" class=\"wp-image-28128\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Though it's mostly personal preference, you should consider whether you prefer Elementor's more static approach to its interface versus Divi Builder's approach where you're clicking floating buttons (<em>that can change positions depending on your design setup<\/em>).<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Elementor vs Divi Builder: Modules And Sections<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>To actually build your designs, you're going to rely on your chosen page builder's library of modules and elements. In this section, we'll compare the building blocks that both Elementor and Divi Builder offer.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Elementor<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>To build your designs, Elementor gives you three types of elements:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><strong>Sections<\/strong> - these are the largest group. You can include columns and widgets inside a section.<\/li><li><strong>Columns <\/strong>- these help you divide your page vertically. You can resize columns using drag and drop.<\/li><li><strong>Widgets <\/strong>- these are the actual design elements you'll use, like text, a button, etc.<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>In its free version, Elementor gives you <strong>28 widgets<\/strong> to build your designs. With Elementor Pro, you get access to 30 new widgets for a total of <strong>58 widgets<\/strong>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can view the full list below:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":28129,\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-divi-5.png\" alt=\"elementor widgets list\" class=\"wp-image-28129\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>You can also add additional widgets to Elementor using third-party add-ons like <a href=\"https:\/\/uaelementor.com\/\">Ultimate Addons for Elementor<\/a>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Divi Builder<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Divi Builder similarly gives you three different building blocks, though with some different names:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><strong>Section<\/strong> - the largest container.<\/li><li><strong>Row <\/strong>- rows fit inside sections and let you use different column layouts to divide your page vertically. You cannot resize these columns with drag and drop, but you can assign custom widths using CSS or choose from Divi Builder's pre-built column layouts.<\/li><li><strong>Modules <\/strong>- these are the actual design elements that you'll use.<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>There's no free version of Divi Builder, so there's only one set of <strong>36 modules<\/strong>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can view the full list below:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":28130,\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-divi-6.png\" alt=\"divi builder module list\" class=\"wp-image-28130\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Like Elementor, you can also find third-party plugins that add additional modules to Divi Builder.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Elementor vs Divi Builder: Styling Options<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Both Elementor and Divi Builder are highly praised for their styling options. So if you're a designer, you'll love all the settings you get to control how your design looks and you can be confident that these two page builders are both pushing the envelope with their styling options.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Elementor<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>When you first install Elementor, it will automatically apply its own styles to the content that you create. But by accessing the plugin's settings, you can turn this functionality off and use your theme's global styles instead:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image -->\n<figure class=\"wp-block-image\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-beaver-builder-8-1.png\" alt=\"theme styles\"\/><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>If you're using the <a href=\"https:\/\/wpastra.com\/\">Astra theme<\/a>, this setting is helpful because it lets you use <a href=\"https:\/\/wpastra.com\/docs-category\/astra-customizer-settings\/\">Astra's Customizer controls<\/a> to set up your global styles, which will save you a lot of time in comparison to having to manually edit each individual element.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Once you dig into the actual Elementor interface, Elementor gives you three different tabs to control how every section, column, and widget looks and functions:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":28131,\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-divi-7-1024x590.png\" alt=\"elementor styling options\" class=\"wp-image-28131\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>In the <strong>Content <\/strong>and <strong>Style<\/strong> tabs, you can set up basic controls like alignment, colors, and typography. These controls vary depending on the type of element that you're working with.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>And in the <strong>Advanced<\/strong> tab, you can control settings like custom margins\/padding, whether or not to hide a specific element on certain devices, and a lot more.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>For many design settings, you can also set up separate styling settings depending on a user's device, which helps you create more customized responsive designs:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":28132,\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-divi-8.png\" alt=\"responsive controls\" class=\"wp-image-28132\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>And if you have Elementor Pro, you can directly add custom CSS to individual elements for even more control:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":28133,\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-divi-9.png\" alt=\"elementor custom css\" class=\"wp-image-28133\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>You'll see your custom CSS applied right away on the live preview.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Divi Builder<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Like Elementor, Divi Builder similarly gives you three different tabs to control your various elements:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><strong>Content<\/strong> - basic settings like text.<\/li><li><strong>Design<\/strong> - covers everything from alignment to colors, shadows, animation, and more.<\/li><li><strong>Advanced <\/strong>- lets you add custom CSS and control responsive visibility.<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:image {\"id\":28134,\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-divi-10.png\" alt=\"divi builder styling options\" class=\"wp-image-28134\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Like Elementor, you can apply many of the design settings differently depending on a user's device:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":28135,\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-divi-11.png\" alt=\"divi builder responsive controls\" class=\"wp-image-28135\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>And if you like working with custom CSS, you have plenty of flexibility because Divi Builder makes it easy to add CSS both to the main element, as well as before\/after the main element:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":28136,\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-divi-12.png\" alt=\"divi custom css\" class=\"wp-image-28136\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:heading -->\n<h2>Elementor vs Divi Builder: Template Libraries<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Both Elementor and Divi Builder give you large pre-made template libraries to help you quickly build out sites. In this section, we'll compare how each builder's library works and what you get.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Elementor<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Since the release of Elementor 2.0, Elementor now offers two different types of templates:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><strong>Pages<\/strong> - these are full-page designs.<\/li><li><strong>Blocks <\/strong>- these are designs for <em>individual sections<\/em> of a page. For example, you can find blocks for a \"Contact\" section.<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>If you're using the free version of Elementor, you get access to ~<strong>40 page templates<\/strong> and a larger number of block templates. You can also save any of your own designs as templates to reuse them later.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>And if you want access to more templates, Elementor Pro unlocks the full template library, which gives you access to <strong>hundreds of page and block templates<\/strong>:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":28137,\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-divi-13.png\" alt=\"elementor templates\" class=\"wp-image-28137\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>If you're using Astra, you can also get access to a variety of pre-made websites based on Elementor and Astra via <a href=\"https:\/\/wpastra.com\/ready-websites\/\">Astra Starter Sites<\/a>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Divi Builder<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Elegant Themes recently redid the entire Divi Builder template library. The new system is a <strong>major upgrade<\/strong>, both in terms of the number of templates available and how you work with them.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You now get access to <strong>350+ templates<\/strong> spread across <strong>45+ layout packs<\/strong>:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":28138,\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-divi-14-1024x505.png\" alt=\"divi builder templates\" class=\"wp-image-28138\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>A \"layout pack\" is essentially a set of themed templates. For example, you might have 8 different templates that, combined, help you build an entire restaurant website.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Like Elementor, you can also save your own designs as templates to reuse them later.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Elementor vs Divi Builder: Theme Building<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>This section isn't really a comparison because, <em>for now<\/em>, Elementor is the only one that offers full theme building via Elementor Pro.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>By \"full theme building\", we mean that you can actually use the same Elementor interface to build every single part of your theme - including your header, footer, and template parts.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>When you utilize Elementor's theme building functionality, you first choose where you want to apply your template:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":28139,\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-divi-15.png\" alt=\"elementor theme building\" class=\"wp-image-28139\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Then, you can build your template using the Elementor interface and a special set of <strong>Theme Elements<\/strong>. These theme elements let you bring in dynamic information from your site. For example, you can find elements for <strong>Post Title<\/strong>, <strong>Author Box<\/strong>, etc.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":28140,\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-divi-16.png\" alt=\"elementor theme widgets\" class=\"wp-image-28140\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>And when you publish your template, you can control exactly which content to use the template for:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":28141,\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-divi-17.png\" alt=\"elementor theme templates\" class=\"wp-image-28141\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Divi Builder doesn't offer anything similar right now. But if you're using Divi Builder with the Astra theme, you can still build custom headers or footers with Divi Builder (<em>or Elementor<\/em>) using <a href=\"https:\/\/wpastra.com\/docs\/custom-header\/\">Astra Pro's Custom Layout module functionality<\/a>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Elementor vs Divi Builder: Other Smaller Considerations<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Beyond the one-to-one comparisons above, each page builder offers some unique features that can't be directly compared. That's what this section is for...<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Elementor<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:list -->\n<ul><li><strong>Global widgets<\/strong> - with global widgets, you can reuse the same widget in multiple spots on your site and then update every instance of that widget just by editing the global widget once.<\/li><li><strong>Embed anywhere <\/strong>- using shortcodes or sidebar widgets, you can embed your saved Elementor templates anywhere on your site, including your sidebar and footer.<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:image {\"id\":28142,\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-divi-18-1024x401.png\" alt=\"elementor embed anywhere\" class=\"wp-image-28142\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Divi Builder<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:list -->\n<ul><li><strong>A\/B Testing<\/strong> - Divi Builder lets you run A\/B tests for different modules to see which performs better for a specific goal. This can help you optimize the content that you build with Divi Builder.<\/li><li><strong>User Role Editor <\/strong>- Divi Builder includes a detailed Role Editor interface that lets you control exactly which actions different users can take. You can even disable individual modules for specific user roles.<\/li><li><strong>Global modules <\/strong>- like Elementor's global widgets, these let you add a single module to multiple pages and then update all of them at once.<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:image {\"id\":28143,\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/06\/elementor-vs-divi-19.png\" alt=\"divi builder role editor\" class=\"wp-image-28143\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:heading -->\n<h2>Elementor vs Divi Builder: Pricing<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Of these two page builders, Elementor is the only one that offers a free version at WordPress.org. Divi Builder is exclusively premium.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you're happy to pay, here's how pricing stacks up for Elementor Pro vs Divi Builder:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>There are three Elementor Pro plans:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><strong>1 site<\/strong> \u2013 $49<\/li><li><strong>3 sites<\/strong> \u2013 $99<\/li><li><strong>Unlimited sites<\/strong> \u2013 $199<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>There is no lifetime option. Each plan includes one year of support and updates. After that first year, you'll need to renew <em>if you want to continue receiving support and updates<\/em>. Active customers get a 25% renewal discount to continue support\/updates.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Even if you don't renew, Elementor Pro will continue to function, though.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Divi Builder is available as part of the Elegant Themes membership package. There are two different prices for this package:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><strong>$89<\/strong> - use on unlimited websites with one year of support and updates.<\/li><li><strong>$249 <\/strong>- use on unlimited websites with <strong>lifetime <\/strong>support and updates.<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:heading -->\n<h2>Final Thoughts On Elementor vs Divi Builder<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>You'll find thousands of happy users on each side of the aisle, so there's no clear winner here. To help you make your decision, though, here are some of the most key differences between Elementor vs Divi Builder.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Elementor has\u2026<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>A generous free version at WordPress.org<\/li><li>More widgets to build your designs (if you have Elementor Pro)<\/li><li>Full theme building functionality (with Elementor Pro)<\/li><li>A static interface with a set sidebar<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https:\/\/wpastra.com\/go\/elementor\/\" target=\"_blank\" rel=\"noopener noreferrer\">Get Elementor<\/a><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Divi Builder has\u2026<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><em>Maybe <\/em>a little bit deeper styling options, though it's pretty close<\/li><li>More templates with the new <strong>Template Library<\/strong><\/li><li>A dynamic interface with lots of floating buttons<\/li><li>Back-end editing<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https:\/\/www.elegantthemes.com\/plugins\/divi-builder\/\" target=\"_blank\" rel=\"noopener noreferrer\">Get Divi Builder<\/a><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Additionally, the teams behind both Elementor and Divi Builder do a great job of regularly pushing out quality new features, so you'll have a great development team backing you no matter which page builder you choose.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>And both Elementor and Divi Builder also integrate well with <a href=\"https:\/\/wpastra.com\/\">the Astra theme<\/a>, so you can take advantage of Astra's helpful functionality with either page builder (learn more about <a href=\"https:\/\/wpastra.com\/theme-for-elementor\/\">why Astra is the perfect theme for page builders<\/a>).<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong><em>Now it's your turn - which of these two page builders do you prefer and why?<\/em><\/strong><\/p>\n<!-- \/wp:paragraph -->\";s:5:\"links\";O:8:\"stdClass\":4:{s:4:\"view\";s:46:\"https:\/\/wpastra.com\/elementor-vs-divi-builder\/\";s:4:\"edit\";N;s:6:\"export\";s:68:\"https:\/\/wpastra.com\/wp-admin\/post.php?area=wpil_export&post_id=28121\";s:7:\"refresh\";s:99:\"https:\/\/wpastra.com\/wp-admin\/admin.php?page=link_whisper&type=post_links_count_update&post_id=28121\";}}s:6:\"anchor\";s:46:\"Astra Pro's Custom Layout module functionality\";s:15:\"added_by_plugin\";b:0;}}"],"wpil_links_outbound_internal_count":["0"],"wpil_links_outbound_internal_count_data":["a:0:{}"],"wpil_links_outbound_external_count":["4"],"wpil_links_outbound_external_count_data":["a:4:{i:0;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:44:\"https:\/\/wpastra.com\/docs\/custom-layouts-pro\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:8:\"document\";s:15:\"added_by_plugin\";b:0;}i:1;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:35:\"https:\/\/wordpress.org\/themes\/astra\/\";s:4:\"host\";s:13:\"wordpress.org\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:11:\"Astra theme\";s:15:\"added_by_plugin\";b:0;}i:2;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:70:\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-custom-header.png\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:113:\"<img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-custom-header.png\" alt=\"\" class=\"wp-image-39380\"\/>\";s:15:\"added_by_plugin\";b:0;}i:3;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:73:\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-header-positions.png\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:116:\"<img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-header-positions.png\" alt=\"\" class=\"wp-image-39376\"\/>\";s:15:\"added_by_plugin\";b:0;}}"],"wpil_sync_report2_time":["2019-10-18T13:25:20+00:00"],"tap_disable_autolinker":["no"],"tap_autolink_inside_heading":["global"],"tap_autolink_random_placement":["global"],"tap_post_autolinker_limit":["0"],"_ppc_meta_key":["a:8:{s:20:\"ppc_key5d92f85d42273\";s:60:\"Images &amp; Names Correctly. Title &amp; Alt Tags are Given\";s:8:\"ppc_key4\";s:15:\"Formatting Done\";s:8:\"ppc_key2\";s:23:\"Featured Image Assigned\";s:8:\"ppc_key3\";s:17:\"Category Selected\";s:8:\"ppc_key5\";s:15:\"Title is Catchy\";s:8:\"ppc_key6\";s:22:\"Social Images Assigned\";s:8:\"ppc_key7\";s:8:\"Done SEO\";s:8:\"ppc_key8\";s:28:\"Spelling and Grammar Checked\";}"],"_yoast_wpseo_title":["How to Design a Custom Header with Custom Layout Module of Astra?"],"wp_last_modified_info":["February 23, 2022 @ 8:43 AM"],"wplmi_shortcode":["[lmt-post-modified-info]"],"_yoast_wpseo_estimated-reading-time-minutes":["3"],"_ht_kb_post_views_count":["19"],"_ht_kb_usefulness":["0"],"_ht_article_order_134":["25295"],"views":["10860"],"helpful":["23"],"unhelpful":["37"],"redirects":["16"],"rank_math_primary_docs_category":["134"],"rank_math_title":["How to Design a Custom Header with Custom Layout Module of Astra?"],"rank_math_news_sitemap_robots":["index"],"rank_math_robots":["a:1:{i:0;s:5:\"index\";}"],"rank_math_analytic_object_id":["1167"],"rank_math_seo_score":["23"],"rank_math_internal_links_processed":["1"],"rank_math_og_content_image":["a:2:{s:5:\"check\";s:32:\"a84d56399e26bf5539100dbe5923dfce\";s:6:\"images\";a:1:{i:0;i:169220;}}"],"_wpml_media_duplicate":["1"],"_uag_custom_page_level_css":[""],"ast-site-content-layout":["default"],"adv-header-id-meta":[""],"stick-header-meta":[""],"astra-migrate-meta-layouts":["set"],"_trp_automatically_translated_slug_es_ES":["cabecera-personalizada"],"pfd_related_docs":[""],"_uag_page_assets":["a:9:{s:3:\"css\";s:2495:\".wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-top svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-top .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-bottom svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-bottom .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__video-wrap video{opacity: 1;}.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1200px);max-width: var(--inner-content-custom-width);width: 100%;flex-direction: column;align-items: center;justify-content: center;flex-wrap: nowrap;row-gap: 0px;column-gap: 0px;}.wp-block-uagb-container.uagb-block-debf2792{box-shadow: 0px 0px   #00000070 ;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;overflow: visible;border-color: inherit;row-gap: 0px;column-gap: 0px;}@media only screen and (max-width: 976px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1024px);max-width: var(--inner-content-custom-width);width: 100%;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}@media only screen and (max-width: 767px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 767px);max-width: var(--inner-content-custom-width);width: 100%;flex-wrap: wrap;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}\";s:2:\"js\";s:0:\"\";s:18:\"current_block_list\";a:5:{i:0;s:14:\"core\/paragraph\";i:1;s:12:\"core\/heading\";i:2;s:10:\"core\/image\";i:3;s:14:\"uagb\/container\";i:4;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1778698478\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"]},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"Anjali","author_link":"https:\/\/git-staging.wpastra.com\/es\/author\/anjalic\/"},"uagb_comment_info":0,"uagb_excerpt":"Using the Site Builder module available with Astra Pro, you can design a custom header. Please refer document, to begin with, the Custom Layout module. This is a premium feature available with the Astra Pro Addon plugin. To use these pro features, you need to have the Astra theme along with the Astra Pro Addon&hellip;","_links":{"self":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/25295"}],"collection":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/comments?post=25295"}],"version-history":[{"count":0,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/25295\/revisions"}],"wp:attachment":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media?parent=25295"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_category?post=25295"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_tag?post=25295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}