{"id":11365,"date":"2015-12-22T08:05:15","date_gmt":"2015-12-22T07:05:15","guid":{"rendered":"https:\/\/eltallerdelbit.com\/?p=11365"},"modified":"2020-09-02T11:09:33","modified_gmt":"2020-09-02T09:09:33","slug":"personalizaciones-header-divi","status":"publish","type":"post","link":"https:\/\/eltallerdelbit.com\/personalizaciones-header-divi\/","title":{"rendered":"Personalizaciones del Header para Divi"},"content":{"rendered":"<h2>Vamos a ver unas cuantas <strong>personalizaciones del header en Divi<\/strong>, esa fant\u00e1stica plantilla para WordPress.<\/h2>\n<p>&nbsp;<\/p>\n<ul>\n<li>\n<h3><span style=\"text-decoration: underline;\">Cambiar el color de fondo, de s\u00f3lido a semi-transparente cuando se hace scrolling<\/span><\/h3>\n<p>&nbsp;\n<\/li>\n<\/ul>\n<pre lang=\"javascript\">\r\n\/*Estado original*\/\r\n#main-header {background-color: rgba(31,31,31,1);}\r\n \r\n\/*Estado de Scrolling*\/\r\n#main-header.et-fixed-header {background-color: rgba(31,31,31,0.5);}\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\">El efecto de este tip CSS ser\u00e1 el siguiente:<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\">As\u00ed se ver\u00e1 el header al cargar la p\u00e1gina, se ver\u00e1 solido :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\" size-full wp-image-11367 aligncenter\" src=\"https:\/\/eltallerdelbit.com\/wp-content\/uploads\/2015\/12\/header-solido-divi.jpg\" alt=\"header solido divi\" width=\"550\" height=\"82\" srcset=\"https:\/\/eltallerdelbit.com\/wp-content\/uploads\/2015\/12\/header-solido-divi.jpg 550w, https:\/\/eltallerdelbit.com\/wp-content\/uploads\/2015\/12\/header-solido-divi-300x45.jpg 300w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\">Y as\u00ed se ver\u00e1 el header (semi-transparente) cuando hagamos scrolling en la p\u00e1gina:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"  wp-image-11366 aligncenter\" src=\"https:\/\/eltallerdelbit.com\/wp-content\/uploads\/2015\/12\/header-divi-efecto-solido-a-semi-transparente.jpg\" alt=\"header divi efecto solido a semi-transparente\" width=\"552\" height=\"53\" srcset=\"https:\/\/eltallerdelbit.com\/wp-content\/uploads\/2015\/12\/header-divi-efecto-solido-a-semi-transparente.jpg 500w, https:\/\/eltallerdelbit.com\/wp-content\/uploads\/2015\/12\/header-divi-efecto-solido-a-semi-transparente-300x29.jpg 300w\" sizes=\"(max-width: 552px) 100vw, 552px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Por supuesto podemos cambiar el color del fondo RGB y la opacidad deseada.<\/p>\n<p>&nbsp;<br \/>\n<br \/>\n&nbsp;<\/p>\n<ul>\n<li>\n<h3><span style=\"text-decoration: underline;\">Cambiar el tama\u00f1o de fuente del <a href=\"\/trucos-divi-numero-telefono-en-secondary-menu\/\" title=\"Trucos Divi: A\u00f1adir otro n\u00famero de tel\u00e9fono en secondary menu\" rel=\"noopener noreferrer\" target=\"_blank\">tel\u00e9fono y el email<\/a> en la barra superior de la <strong>cabecera Divi<\/strong> (Top header)<\/span><\/h3>\n<p>&nbsp;\n<\/li>\n<\/ul>\n<pre lang=\"javascript\">\r\n\/* top header *\/\r\n   #et-info-phone { font-size:130% } \/* phone number *\/\r\n   #et-info-email { font-size:130% } \/* email address *\/\r\n   #et-info { font-size:130% } \/* both at once *\/<\/pre>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\">El efecto de este tip CSS ser\u00e1 el siguiente:<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\">Tama\u00f1o por defecto del tel\u00e9fono y el email antes de aplicar el tip CSS:<\/p>\n<p style=\"text-align: center;\">\u00a0<img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/eltallerdelbit.com\/wp-content\/uploads\/2015\/12\/cambiar-tamano-fuente-telefono-y-email-en-header-divi.jpg\" alt=\"cambiar tama\u00f1o fuente telefono y email en header divi\" width=\"500\" height=\"124\" class=\"aligncenter size-full wp-image-29008\" srcset=\"https:\/\/eltallerdelbit.com\/wp-content\/uploads\/2015\/12\/cambiar-tamano-fuente-telefono-y-email-en-header-divi.jpg 500w, https:\/\/eltallerdelbit.com\/wp-content\/uploads\/2015\/12\/cambiar-tamano-fuente-telefono-y-email-en-header-divi-300x74.jpg 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><br \/>\n&nbsp;<\/p>\n<p style=\"text-align: center;\">Tama\u00f1o m\u00e1s grande del tel\u00e9fono y el email, tras aplicar el tip CSS:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/eltallerdelbit.com\/wp-content\/uploads\/2015\/12\/cambiar-tamano-fuente-telefono-y-email-en-header.jpg\" alt=\"cambiar tama\u00f1o fuente telefono y email en header\" width=\"500\" height=\"158\" class=\"aligncenter size-full wp-image-29005\" srcset=\"https:\/\/eltallerdelbit.com\/wp-content\/uploads\/2015\/12\/cambiar-tamano-fuente-telefono-y-email-en-header.jpg 500w, https:\/\/eltallerdelbit.com\/wp-content\/uploads\/2015\/12\/cambiar-tamano-fuente-telefono-y-email-en-header-300x95.jpg 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>&nbsp;<br \/>\n<br \/>\n&nbsp;<\/p>\n<ul>\n<li style=\"text-align: center;\">\n<h3 style=\"text-align: left;\"><span style=\"text-decoration: underline;\">Aplicar a la <strong><a href=\"\/email-caracteres-especiales-top-header-divi\/\" title=\"Email con car\u00e1cteres especiales en la top header de Divi\" rel=\"noopener noreferrer\" target=\"_blank\">cabecera Divi<\/a><\/strong> un borde inferior grueso<\/span><\/h3>\n<\/li>\n<\/ul>\n<pre lang=\"javascript\">\r\n\/* header bottom border *\/\r\n    #main-header {border-bottom: 10px solid #f7ead9;}<\/pre>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\">Efecto de este tip CSS:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\" size-full wp-image-11370 aligncenter\" src=\"https:\/\/eltallerdelbit.com\/wp-content\/uploads\/2015\/12\/Aplicar-a-la-cabecera-un-borde-inferior-grueso.jpg\" alt=\"Aplicar a la cabecera Divi un borde inferior grueso\" width=\"500\" height=\"62\" srcset=\"https:\/\/eltallerdelbit.com\/wp-content\/uploads\/2015\/12\/Aplicar-a-la-cabecera-un-borde-inferior-grueso.jpg 500w, https:\/\/eltallerdelbit.com\/wp-content\/uploads\/2015\/12\/Aplicar-a-la-cabecera-un-borde-inferior-grueso-300x37.jpg 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Como podemos ver, el borde inferior grueso es de color azul. Podemos elegir el color adecuado en hexadecimal y el tama\u00f1o de borde en p\u00edxeles, para personalizar nuestro borde inferior grueso.<\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"text-align: center;\">\n<h3 style=\"text-align: left;\"><span style=\"text-decoration: underline;\">Ocultar la cabecera cuando hacemos scroll hacia abajo<\/span><\/h3>\n<\/li>\n<\/ul>\n<pre lang=\"javascript\">\/* hide header on scroll *\/\r\n  .et-fixed-header { display:none; }<\/pre>\n<p>Simple. Oculta la cabecera cuando hacemos scroll.<\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"text-align: center;\">\n<h3 style=\"text-align: left;\"><span style=\"text-decoration: underline;\">Ocultar la cabecera totalmente<\/span><\/h3>\n<\/li>\n<\/ul>\n<pre lang=\"javascript\">\r\n\/* hide header *\/\r\n  #main-header { display:none; }\r\n  #page-container { padding-top:0px !important } \/* moves rest of the page up *\/\r\n<\/pre>\n<p>Igual, pero elimina la cabecera totalmente.<\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"text-align: center;\">\n<h3 style=\"text-align: left;\"><span style=\"text-decoration: underline;\">Eliminar la sombra gris bajo la cabecera<\/span><\/h3>\n<\/li>\n<\/ul>\n<pre lang=\"javascript\">\r\n\/* hide header shadow *\/\r\n  #main-header{ \r\n   -webkit-box-shadow:none!important; \r\n   -moz-box-shadow:none !important; \r\n   box-shadow:none !important;}<\/pre>\n<p>&nbsp;<\/p>\n<p>Origen de esta entrada:\u00a0<a href=\"https:\/\/quiroz.co\/divi-tutorials-much\/divi-snippets-css-php\/\" target=\"_blank\" rel=\"noopener noreferrer\">Divi Snippets and Hacks<\/a><br \/>\n&nbsp;<\/p>\n\n<div style=\"font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>Vamos a ver unas cuantas personalizaciones del header en Divi, esa fant\u00e1stica plantilla para WordPress.<\/p>\n","protected":false},"author":1,"featured_media":11950,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false},"categories":[157],"tags":[1063,469],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/eltallerdelbit.com\/wp-json\/wp\/v2\/posts\/11365"}],"collection":[{"href":"https:\/\/eltallerdelbit.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eltallerdelbit.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eltallerdelbit.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eltallerdelbit.com\/wp-json\/wp\/v2\/comments?post=11365"}],"version-history":[{"count":0,"href":"https:\/\/eltallerdelbit.com\/wp-json\/wp\/v2\/posts\/11365\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/eltallerdelbit.com\/wp-json\/wp\/v2\/media\/11950"}],"wp:attachment":[{"href":"https:\/\/eltallerdelbit.com\/wp-json\/wp\/v2\/media?parent=11365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eltallerdelbit.com\/wp-json\/wp\/v2\/categories?post=11365"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eltallerdelbit.com\/wp-json\/wp\/v2\/tags?post=11365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}