{"id":37460,"date":"2022-04-20T15:05:35","date_gmt":"2022-04-20T15:05:35","guid":{"rendered":"https:\/\/wordpress.org\/patterns\/pattern\/elegance-offset-media-text-with-background-stretched-to-the-right-edge-es_es\/"},"modified":"2026-04-19T05:09:18","modified_gmt":"2026-04-19T05:09:18","slug":"elegance-offset-media-text-with-background-stretched-to-the-right-edge-es_es","status":"publish","type":"wporg-pattern","link":"https:\/\/wordpress.org\/patterns\/pattern\/elegance-offset-media-text-with-background-stretched-to-the-right-edge-es_es\/","title":{"rendered":"Elegancia: Medios de comunicaci\u00f3n y texto desplazados con el fondo estirado hacia el borde derecho"},"content":{"rendered":"\n<div class=\"wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-ddf0b1ba wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background:linear-gradient(90deg,rgba(0,0,0,0) 60%,rgb(0,0,0) 60%);flex-basis:382px\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/img.rawpixel.com\/s3fs-private\/rawpixel_images\/website_content\/a010-markusspiske-mar19-1812-1868.jpg?w=1200&amp;h=1200&amp;fit=clip&amp;crop=default&amp;dpr=1&amp;q=75&amp;vib=3&amp;con=3&amp;usm=15&amp;cs=srgb&amp;bg=F4F4F3&amp;ixlib=js-2.2.1&amp;s=5813a61381054a8977b777675d9b418f\" alt=\"\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-white-color has-black-background-color has-text-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:618px\">\n<div class=\"wp-block-group has-white-background-color has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"margin-top:0px;margin-bottom:0px;padding-top:4vw;padding-right:0px;padding-bottom:0px;padding-left:0px\"><\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:15%;padding-right:10%;padding-bottom:15%;padding-left:10%\">\n<h2 class=\"wp-block-heading\" style=\"font-size:14px;font-style:normal;font-weight:700;line-height:1;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;text-transform:uppercase;letter-spacing:0.2em\">\u2014 Lo que hacemos<\/h2>\n\n\n\n<p class=\"has-x-large-font-size wp-block-paragraph\" style=\"font-style:normal;font-weight:700;line-height:1.2\">Dise\u00f1o creativo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:24px;font-style:normal;font-weight:500;line-height:1.4\">S\u00f3lo una frase corta. Este es un texto de demostraci\u00f3n que debes sobreescribir.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">S\u00f3lo una frase corta. Escribe tu propio texto de copia aqu\u00ed. Este es s\u00f3lo un texto de demostraci\u00f3n que debes sobrescribir. S\u00f3lo una frase corta.<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-style:normal;font-weight:700\"><a href=\"#0\">Seguir leyendo <span aria-hidden=\"true\" class=\"wp-exclude-emoji\">\u2192<\/span><\/a><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-black-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group has-white-background-color has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"margin-top:0px;margin-bottom:0px;padding-top:4vw;padding-right:0px;padding-bottom:0px;padding-left:0px\"><\/div>\n<\/div>\n<\/div>\n","protected":false},"author":13265138,"parent":35266,"template":"","meta":{"_crdt_document":"","jetpack_post_was_ever_published":false,"wpop_keywords":"CTA, LLAMADA A LA ACCI\u00d3N, Compensar, estirado, oscuro, elegante, medios y texto, cascada","wpop_description":"Dise\u00f1o creativo que simula una imagen y un texto desplazados con un fondo oscuro debajo de la secci\u00f3n de texto que se extiende hasta el borde derecho de la pantalla. La imagen parece estar desplazada verticalmente por encima de la columna de texto, creando un efecto de cascada, escalonado. El texto contiene un t\u00edtulo, una descripci\u00f3n y un enlace m\u00e1s.","wpop_viewport_width":800,"wpop_block_types":[""],"wpop_locale":"es_ES","wpop_wp_version":"","wpop_contains_block_types":"core\/column,core\/columns,core\/group,core\/heading,core\/image,core\/paragraph,core\/spacer","footnotes":""},"pattern-categories":[3,13,6],"pattern-keywords":[],"wporg-pattern-flag-reason":[],"class_list":["post-37460","wporg-pattern","type-wporg-pattern","status-publish","hentry","wporg-pattern-category-columns","wporg-pattern-category-images","wporg-pattern-category-text"],"category_slugs":["columns","images","text"],"keyword_slugs":[],"pattern_content":"<!-- wp:columns {\"align\":\"full\",\"style\":{\"spacing\":{\"blockGap\":{\"top\":\"0px\",\"left\":\"0px\"}}}} -->\n<div class=\"wp-block-columns alignfull\"><!-- wp:column {\"width\":\"\"} -->\n<div class=\"wp-block-column\"><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column {\"width\":\"382px\",\"style\":{\"color\":{\"gradient\":\"linear-gradient(90deg,rgba(0,0,0,0) 60%,rgb(0,0,0) 60%)\"}}} -->\n<div class=\"wp-block-column has-background\" style=\"background:linear-gradient(90deg,rgba(0,0,0,0) 60%,rgb(0,0,0) 60%);flex-basis:382px\"><!-- wp:image {\"sizeSlug\":\"full\",\"linkDestination\":\"none\",\"style\":{\"color\":[],\"border\":{\"radius\":{\"topLeft\":null,\"topRight\":null,\"bottomRight\":null}}}} -->\n<figure class=\"wp-block-image size-full\"><img src=\"https:\/\/img.rawpixel.com\/s3fs-private\/rawpixel_images\/website_content\/a010-markusspiske-mar19-1812-1868.jpg?w=1200&amp;h=1200&amp;fit=clip&amp;crop=default&amp;dpr=1&amp;q=75&amp;vib=3&amp;con=3&amp;usm=15&amp;cs=srgb&amp;bg=F4F4F3&amp;ixlib=js-2.2.1&amp;s=5813a61381054a8977b777675d9b418f\" alt=\"\" \/><\/figure>\n<!-- \/wp:image --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column {\"width\":\"618px\",\"backgroundColor\":\"black\",\"textColor\":\"white\"} -->\n<div class=\"wp-block-column has-white-color has-black-background-color has-text-color has-background\" style=\"flex-basis:618px\"><!-- wp:group {\"style\":{\"spacing\":{\"padding\":{\"top\":\"4vw\",\"right\":\"0px\",\"bottom\":\"0px\",\"left\":\"0px\"},\"margin\":{\"top\":\"0px\",\"bottom\":\"0px\"}}},\"backgroundColor\":\"white\"} -->\n<div class=\"wp-block-group has-white-background-color has-background\" style=\"margin-top:0px;margin-bottom:0px;padding-top:4vw;padding-right:0px;padding-bottom:0px;padding-left:0px\"><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:group {\"style\":{\"spacing\":{\"padding\":{\"top\":\"15%\",\"right\":\"10%\",\"bottom\":\"15%\",\"left\":\"10%\"}}}} -->\n<div class=\"wp-block-group\" style=\"padding-top:15%;padding-right:10%;padding-bottom:15%;padding-left:10%\"><!-- wp:heading {\"style\":{\"typography\":{\"textTransform\":\"uppercase\",\"letterSpacing\":\"0.2em\",\"fontSize\":\"14px\",\"fontStyle\":\"normal\",\"fontWeight\":\"700\",\"lineHeight\":\"1\"},\"spacing\":{\"margin\":{\"top\":\"0px\",\"right\":\"0px\",\"bottom\":\"0px\",\"left\":\"0px\"}}}} -->\n<h2 style=\"font-size:14px;font-style:normal;font-weight:700;line-height:1;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;text-transform:uppercase;letter-spacing:0.2em\">\u2014 Lo que hacemos<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph {\"style\":{\"typography\":{\"fontStyle\":\"normal\",\"fontWeight\":\"700\",\"lineHeight\":\"1.2\"}},\"fontSize\":\"x-large\"} -->\n<p class=\"has-x-large-font-size\" style=\"font-style:normal;font-weight:700;line-height:1.2\">Dise\u00f1o creativo.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"24px\",\"fontStyle\":\"normal\",\"fontWeight\":\"500\",\"lineHeight\":\"1.4\"}}} -->\n<p style=\"font-size:24px;font-style:normal;font-weight:500;line-height:1.4\">S\u00f3lo una frase corta. Este es un texto de demostraci\u00f3n que debes sobreescribir.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>S\u00f3lo una frase corta. Escribe tu propio texto de copia aqu\u00ed. Este es s\u00f3lo un texto de demostraci\u00f3n que debes sobrescribir. S\u00f3lo una frase corta.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:spacer {\"height\":\"50px\"} -->\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<!-- \/wp:spacer -->\n\n<!-- wp:paragraph {\"style\":{\"typography\":{\"fontStyle\":\"normal\",\"fontWeight\":\"700\"}}} -->\n<p style=\"font-style:normal;font-weight:700\"><a href=\"#0\">Seguir leyendo \u2192<\/a><\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:group --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column {\"backgroundColor\":\"black\"} -->\n<div class=\"wp-block-column has-black-background-color has-background\"><!-- wp:group {\"style\":{\"spacing\":{\"padding\":{\"top\":\"4vw\",\"right\":\"0px\",\"bottom\":\"0px\",\"left\":\"0px\"},\"margin\":{\"top\":\"0px\",\"bottom\":\"0px\"}}},\"backgroundColor\":\"white\"} -->\n<div class=\"wp-block-group has-white-background-color has-background\" style=\"margin-top:0px;margin-bottom:0px;padding-top:4vw;padding-right:0px;padding-bottom:0px;padding-left:0px\"><\/div>\n<!-- \/wp:group --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns -->","favorite_count":0,"author_meta":{"name":"WebMan Design | Oliver Juhas","url":"https:\/\/wordpress.org\/patterns\/author\/webmandesign","avatar":"https:\/\/secure.gravatar.com\/avatar\/34c19c0923466a5bf3c232ad7885b9985cd075c79ac0beb4b802c3ee80d71452?s=64&d=mm&r=g"},"unlisted_reason":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/37460","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern"}],"about":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/types\/wporg-pattern"}],"version-history":[{"count":3,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/37460\/revisions"}],"predecessor-version":[{"id":81444,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/37460\/revisions\/81444"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wporg\/v1\/users\/webmandesign"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/media?parent=37460"}],"wp:term":[{"taxonomy":"wporg-pattern-category","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-categories?post=37460"},{"taxonomy":"wporg-pattern-keyword","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-keywords?post=37460"},{"taxonomy":"wporg-pattern-flag-reason","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern-flag-reason?post=37460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}