{"id":4743,"date":"2019-07-01T19:24:37","date_gmt":"2019-07-01T17:24:37","guid":{"rendered":"https:\/\/bluekea.com\/blog\/?p=4743"},"modified":"2021-02-24T16:32:04","modified_gmt":"2021-02-24T15:32:04","slug":"nuevos-banners-hero-de-imagen-con-titulo-y-texto-para-tu-web","status":"publish","type":"post","link":"https:\/\/bluekea.com\/blog\/webs-para-fotografos\/nuevos-banners-hero-de-imagen-con-titulo-y-texto-para-tu-web","title":{"rendered":"Nuevos banners \u00abhero\u00bb de imagen con t\u00edtulo y texto para tu web"},"content":{"rendered":"\n<p>Hace unos d\u00edas presentamos la m\u00e1s reciente <a href=\"https:\/\/bluekea.com\/blog\/actualidad\/novedades-en-bluekea-editor-de-contenidos-ampliado-opciones-de-portada-un-nuevo-diseno-y-mucho-mas\">actualizaci\u00f3n de Bluekea<\/a>, que permite a los propietarios de nuestras webs crear cualquier tipo de contenidos de un modo muy f\u00e1cil y con resultados profesionales. Todo ello mediante nuestro nuevo editor de contenidos por m\u00f3dulos.<\/p>\n\n\n\n<p>Este es el primer art\u00edculo de una serie en la que vamos a introducir varios tipos de elementos incluidos en el nuevo editor. Comenzamos con las im\u00e1genes a modo de banner -tambi\u00e9n llamadas <em>hero<\/em>&#8211; con texto superpuesto.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Qu\u00e9 es una imagen \u00abbanner hero\u00bb<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"624\" src=\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2019\/06\/banner-1024x624.jpg\" alt=\"Nuevos banners &quot;hero&quot; de imagen con t\u00edtulo y texto para tu web\" class=\"wp-image-4736\" srcset=\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2019\/06\/banner-1024x624.jpg 1024w, https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2019\/06\/banner-300x183.jpg 300w, https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2019\/06\/banner-768x468.jpg 768w, https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2019\/06\/banner-900x548.jpg 900w, https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2019\/06\/banner.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>En el dise\u00f1o de webs de los \u00faltimos tiempos es muy habitual ver este tipo de elementos: una imagen que ocupa todo el ancho del navegador, de extremo a extremo (<em>a sangre<\/em>, para los nost\u00e1lgicos) y generalmente con un texto en gran tama\u00f1o en color blanco o negro contrastado con la imagen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">D\u00f3nde utilizarlo en tu web<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>En la portada de tu web, como encabezado principal. Es quiz\u00e1 la aplicaci\u00f3n m\u00e1s habitual de este tipo de im\u00e1genes, bien con imagen est\u00e1tica o como pase de fondo. Para ello en Bluekea disponemos ya de una portada especial con este formato -llamada <em>Slogan<\/em>-.<\/li><li>Como encabezado de cualquier p\u00e1gina dentro de tu web. Es un m\u00e9todo muy efectivo y visual para destacar qu\u00e9 tipo de contenidos va a encontrar nuestr@ visitante.<\/li><li>Como encabezado o separador de distintas secciones dentro de una misma p\u00e1gina de tu web. Por ejemplo podemos tener una p\u00e1gina donde explicamos nuestras especialidades fotogr\u00e1ficas, o las ventajas que tiene contratarnos. Podemos crear una serie de apartados, con una imagen banner y un titular introduciendo cada apartado y a continuaci\u00f3n un texto m\u00e1s largo y algunas fotos como contenido principal de dicho apartado.<\/li><li>Como encabezado o separador de las distintas p\u00e1ginas o secciones en webs de p\u00e1gina \u00fanica, es decir aquellas en las que podemos acceder a toda la web haciendo scroll hacia abajo.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo crear un banner de imagen en Bluekea<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"552\" src=\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2019\/06\/Captura-de-pantalla-2019-06-26-a-las-17.47.21-1024x552.jpg\" alt=\"C\u00f3mo crear un banner de imagen en Bluekea\" class=\"wp-image-4749\" srcset=\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2019\/06\/Captura-de-pantalla-2019-06-26-a-las-17.47.21-1024x552.jpg 1024w, https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2019\/06\/Captura-de-pantalla-2019-06-26-a-las-17.47.21-300x162.jpg 300w, https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2019\/06\/Captura-de-pantalla-2019-06-26-a-las-17.47.21-768x414.jpg 768w, https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2019\/06\/Captura-de-pantalla-2019-06-26-a-las-17.47.21-900x485.jpg 900w, https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2019\/06\/Captura-de-pantalla-2019-06-26-a-las-17.47.21.jpg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Es muy f\u00e1cil con el nuevo editor de contenidos por bloques de Bluekea:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Accede a tu panel de control.<\/li><li>Crea una nueva p\u00e1gina, o abre una de tus p\u00e1ginas existentes.<\/li><li>Si se trata de una p\u00e1gina de texto e im\u00e1genes, trabajaremos en la pesta\u00f1a <strong>Contenidos<\/strong>. Si es otro tipo de p\u00e1gina, vamos a la pesta\u00f1a <strong>Texto y m\u00f3dulos<\/strong>. <\/li><li>Pulsamos el bot\u00f3n <strong>A\u00f1adir m\u00f3dulo<\/strong>. Si queremos insertar el banner despu\u00e9s de otro m\u00f3dulo existente, basta pulsar el bot\u00f3n de a\u00f1adir debajo de dicho m\u00f3dulo. Seleccionamos <strong>imagen con titular<\/strong>.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"712\" src=\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2019\/06\/Captura-de-pantalla-2019-06-26-a-las-17.47.43-1024x712.jpg\" alt=\"Crear un banner de imagen para tu p\u00e1gina de fot\u00f3grafo en Bluekea\" class=\"wp-image-4750\" srcset=\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2019\/06\/Captura-de-pantalla-2019-06-26-a-las-17.47.43-1024x712.jpg 1024w, https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2019\/06\/Captura-de-pantalla-2019-06-26-a-las-17.47.43-300x209.jpg 300w, https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2019\/06\/Captura-de-pantalla-2019-06-26-a-las-17.47.43-768x534.jpg 768w, https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2019\/06\/Captura-de-pantalla-2019-06-26-a-las-17.47.43-900x626.jpg 900w, https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2019\/06\/Captura-de-pantalla-2019-06-26-a-las-17.47.43.jpg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Ya tenemos nuestro nuevo banner listo para llenarlo de contenidos. En primer lugar subiremos la <strong>imagen<\/strong>. Para ello recomendamos una foto en jpg a unos 1900px de ancho, siempre en formato jpg, perfil de color sRGB y una compresi\u00f3n jpg en torno al 70%.<\/p>\n\n\n\n<p>A continuaci\u00f3n escribimos directamente los textos, y seleccionamos las opciones de tama\u00f1o y alineaci\u00f3n. Tambi\u00e9n disponemos de distintos formatos de encabezados H1, H2, etc. que son adecuados para el posicionamiento en buscadores. Disponemos de dos elementos de texto: un titular a gran tama\u00f1o, a modo de t\u00edtulo o slogan, y un texto m\u00e1s peque\u00f1o que puede servir de introducci\u00f3n o subt\u00edtulo.<\/p>\n\n\n\n<p>Es importante que el texto destaque claramente sobre la imagen. Nuestros textos siempre son en color blanco, por lo que si la imagen tiene zonas claras el texto no se leer\u00e1 bien. Para evitar esto, dispones de un <strong>control de opacidad<\/strong> que oscurece la foto en varios grados para conseguir el contraste m\u00e1s adecuado.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Este es el primer art\u00edculo de una serie en la que vamos a introducir varios tipos de elementos incluidos en el nuevo editor. Comenzamos con las im\u00e1genes a modo de banner -tambi\u00e9n llamadas hero- con texto superpuesto. <a href=\"https:\/\/bluekea.com\/blog\/webs-para-fotografos\/nuevos-banners-hero-de-imagen-con-titulo-y-texto-para-tu-web\">Sigue leyendo <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":4750,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[67],"tags":[],"class_list":["post-4743","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webs-para-fotografos"],"_links":{"self":[{"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/posts\/4743","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/comments?post=4743"}],"version-history":[{"count":12,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/posts\/4743\/revisions"}],"predecessor-version":[{"id":5217,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/posts\/4743\/revisions\/5217"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/media\/4750"}],"wp:attachment":[{"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/media?parent=4743"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/categories?post=4743"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/tags?post=4743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}