{"id":288069,"date":"2026-03-11T11:38:18","date_gmt":"2026-03-11T11:38:18","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/diagonal-responsive-view\/"},"modified":"2026-03-11T12:32:58","modified_gmt":"2026-03-11T12:32:58","slug":"diagonal-responsive-view","status":"publish","type":"plugin","link":"https:\/\/es.wordpress.org\/plugins\/diagonal-responsive-view\/","author":23462528,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.2.0","stable_tag":"1.2.0","tested":"6.9.4","requires":"5.8","requires_php":"7.4","requires_plugins":null,"header_name":"Diagonal Responsive View","header_author":"Giorgio Bianchi","header_description":"Adds a responsive diagonal layout block with dynamic content, optional styled button, image or video media, and configurable mask tilt. Fully compatible with Elementor (WYSIWYG widget) and WPBakery (vc_map element). Output is rendered via an external HTML\/CSS template using the [diag_resp_view] shortcode.","assets_banners_color":"","last_updated":"2026-03-11 12:32:58","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/ko-fi.com\/giorgiobianchi","header_plugin_uri":"https:\/\/github.com\/GiorgioBianchiVR\/diagonal-resposive-view","header_author_uri":"https:\/\/github.com\/GiorgioBianchiVR\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":171,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.1.2":{"tag":"1.1.2","author":"giorgiobianchi","date":"2026-03-11 11:39:57"},"1.2.0":{"tag":"1.2.0","author":"giorgiobianchi","date":"2026-03-11 12:32:58"}},"upgrade_notice":{"1.0.0":"<p>Initial release. No upgrade needed.<\/p>"},"ratings":[],"assets_icons":[],"assets_banners":[],"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.1.2","1.2.0"],"block_files":[],"assets_screenshots":[],"screenshots":{"1":"Diagonal block with image panel and CTA button \u2014 desktop view.","2":"Elementor widget controls panel.","3":"WPBakery element configuration popup."},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[257530,76538,257531,606,23283],"plugin_category":[],"plugin_contributors":[257532],"plugin_business_model":[],"class_list":["post-288069","plugin","type-plugin","status-publish","hentry","plugin_tags-diagonal","plugin_tags-elementor","plugin_tags-media-block","plugin_tags-responsive","plugin_tags-wpbakery","plugin_contributors-giorgiobianchi","plugin_committers-giorgiobianchi"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/diagonal-responsive-view.svg","icon_2x":false,"generated":true},"screenshots":[],"raw_content":"<!--section=description-->\n<p><strong>Diagonal Responsive View<\/strong> renders a diagonal, responsive split-layout block combining a content area and a media panel (image or looping video), with an optional call-to-action button.<\/p>\n\n<p>It integrates natively with <strong>Elementor<\/strong> (dedicated widget) and <strong>WPBakery Page Builder<\/strong> (Visual Composer element), and can also be used anywhere via shortcode.<\/p>\n\n<p><strong>Key features:<\/strong><\/p>\n\n<ul>\n<li>Diagonal\/masked split layout \u2014 content on one side, image or looping video on the other<\/li>\n<li>Flip option to swap media and content order<\/li>\n<li>On mobile the written content is shown on swipe (left or right)<\/li>\n<li>Optional styled button with full color, radius, alignment, and CSS class controls<\/li>\n<li>Adjustable mask tilt (20\u00b0, 30\u00b0, 40\u00b0)<\/li>\n<li>Native Elementor widget (drag-and-drop, live preview)<\/li>\n<li>Native WPBakery element (backend and frontend editor)<\/li>\n<li>Plain shortcode support for any editor or theme<\/li>\n<\/ul>\n\n<p><strong>Optimized for desktop, tablet, and mobile devices.<\/strong><\/p>\n\n<h3>Usage \u2014 Shortcode<\/h3>\n\n<p>Shortcode name: <code>diag_resp_view<\/code><\/p>\n\n<p>Basic example:<\/p>\n\n<pre><code>[diag_resp_view]Your &lt;strong&gt;HTML&lt;\/strong&gt; content here[\/diag_resp_view]\n<\/code><\/pre>\n\n<p>Advanced example:<\/p>\n\n<pre><code>[diag_resp_view title=\"Example Title\" flip_media=\"yes\" is_video=\"no\" show_button=\"yes\" button_text=\"Learn more\" button_link=\"url:https:\/\/example.com|target:_blank\" button_bg_color=\"#ff0000\" button_border_radius=\"8px\" button_text_color=\"#ffffff\" button_align=\"center\" image_id=\"123\" mask_tilt=\"30\"]&lt;p&gt;Content here.&lt;\/p&gt;[\/diag_resp_view]\n<\/code><\/pre>\n\n<p><strong>Supported attributes<\/strong> (defaults in parentheses):<\/p>\n\n<ul>\n<li><code>title<\/code> (<code>Diagonal Responsive View<\/code>) \u2014 text field used as block title<\/li>\n<li><code>flip_media<\/code> (<code>no<\/code>) \u2014 <code>yes<\/code> to swap media and content order on desktop<\/li>\n<li><code>is_video<\/code> (<code>no<\/code>) \u2014 <code>yes<\/code> to use <code>media_url<\/code> as a looping background video<\/li>\n<li><code>show_button<\/code> (<code>no<\/code>) \u2014 <code>yes<\/code> to render a CTA button<\/li>\n<li><code>button_text<\/code> (<code>Click Here<\/code>) \u2014 button label<\/li>\n<li><code>button_link<\/code> (<code>''<\/code>) \u2014 plain URL or WPBakery <code>vc_link<\/code> format (<code>url:...|target:_blank<\/code>)<\/li>\n<li><code>button_bg_color<\/code> (<code>#0041C2<\/code>) \u2014 button background color<\/li>\n<li><code>button_border_radius<\/code> (<code>5px<\/code>) \u2014 button border radius<\/li>\n<li><code>button_text_color<\/code> (<code>#FFFFFF<\/code>) \u2014 button text color<\/li>\n<li><code>button_css_classes<\/code> (<code>''<\/code>) \u2014 extra CSS classes for the button<\/li>\n<li><code>button_align<\/code> (<code>left<\/code>) \u2014 <code>left<\/code>, <code>center<\/code>, or <code>right<\/code><\/li>\n<li><code>media_url<\/code> (<code>''<\/code>) \u2014 URL to a video file (used when <code>is_video=\"yes\"<\/code>)<\/li>\n<li><code>image_id<\/code> (<code>''<\/code>) \u2014 WordPress attachment ID for the image<\/li>\n<li><code>mask_tilt<\/code> (<code>20<\/code>) \u2014 tilt angle: <code>20<\/code>, <code>30<\/code>, or <code>40<\/code><\/li>\n<\/ul>\n\n<p>The shortcode wrapper uses the class <code>diag-responsive-view<\/code> for custom CSS targeting.<\/p>\n\n<h3>Usage \u2014 Elementor<\/h3>\n\n<ol>\n<li>Open a page in Elementor.<\/li>\n<li>Search for <strong>Diagonal Responsive View<\/strong> in the widget panel (category: General).<\/li>\n<li>Drag it into your layout and configure content, media, and button settings via the panel controls.<\/li>\n<\/ol>\n\n<p>Alternatively, use the Elementor <strong>Shortcode<\/strong> widget and paste the <code>diag_resp_view<\/code> shortcode directly.<\/p>\n\n<h3>Usage \u2014 WPBakery (Visual Composer)<\/h3>\n\n<ol>\n<li>Open a page in the WPBakery editor (backend or frontend).<\/li>\n<li>Click <strong>Add Element<\/strong> \u2192 search for <strong>Diagonal Responsive View<\/strong>.<\/li>\n<li>Configure content, media, and button settings via the element popup.<\/li>\n<\/ol>\n\n<p>You can also insert the shortcode directly into WPBakery text blocks or the classic editor.<\/p>\n\n<h3>For Developers<\/h3>\n\n<ul>\n<li>Shortcode handler: <code>diag_resp_view<\/code> \u2014 see <code>diag-resp-view.php<\/code><\/li>\n<li>Elementor widget class: <code>DiagRespViewElementorWidget<\/code> \u2014 registered in <code>includes\/elementor-config.php<\/code><\/li>\n<li>WPBakery mapping base: <code>diag_resp_view<\/code> \u2014 registered in <code>includes\/vc-config.php<\/code><\/li>\n<li>CSS handle: <code>diag-resp-style<\/code> \u2014 file: <code>assets\/css\/diag-resp-style.css<\/code><\/li>\n<\/ul>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin folder to <code>\/wp-content\/plugins\/<\/code> or install it via the WordPress admin Plugins screen \u2192 Add New \u2192 Upload Plugin.<\/li>\n<li>Activate the plugin from the <strong>Plugins<\/strong> screen in your WordPress admin.<\/li>\n<li>Use the plugin via Elementor, WPBakery, or shortcode.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20this%20plugin%20work%20without%20elementor%20or%20wpbakery%3F\"><h3>Does this plugin work without Elementor or WPBakery?<\/h3><\/dt>\n<dd><p>Yes. The shortcode <code>[diag_resp_view]<\/code> works in any editor, including the WordPress Block Editor (Gutenberg), classic editor, or any theme that supports shortcodes.<\/p><\/dd>\n<dt id=\"can%20i%20use%20a%20video%20instead%20of%20an%20image%3F\"><h3>Can I use a video instead of an image?<\/h3><\/dt>\n<dd><p>Yes. Set <code>is_video=\"yes\"<\/code> and provide a <code>media_url<\/code> pointing to a self-hosted video file (e.g. <code>.mp4<\/code>). The video will loop silently as a background panel.<\/p><\/dd>\n<dt id=\"what%20tilt%20angles%20are%20supported%3F\"><h3>What tilt angles are supported?<\/h3><\/dt>\n<dd><p>The UI controls support tilt values of <code>20<\/code>, <code>30<\/code>, and <code>40<\/code> degrees via the <code>mask_tilt<\/code> attribute.<\/p><\/dd>\n<dt id=\"is%20it%20compatible%20with%20the%20latest%20version%20of%20wordpress%3F\"><h3>Is it compatible with the latest version of WordPress?<\/h3><\/dt>\n<dd><p>Yes, it has been tested up to WordPress 6.9.1.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.2.0<\/h4>\n\n<ul>\n<li>Fixed vertical stretch for image and video<\/li>\n<\/ul>\n\n<h4>1.1.2<\/h4>\n\n<ul>\n<li>Added title control with default parameter<\/li>\n<li>Added Mobile optimization<\/li>\n<\/ul>\n\n<h4>1.1.1<\/h4>\n\n<ul>\n<li>Updated README.txt<\/li>\n<li>Author URI reference<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release<\/li>\n<li>Shortcode <code>diag_resp_view<\/code> with full attribute support<\/li>\n<li>Native Elementor widget<\/li>\n<li>Native WPBakery element<\/li>\n<li>Adjustable mask tilt (20, 30, 40 degrees)<\/li>\n<li>Optional CTA button with full style controls<\/li>\n<\/ul>","raw_excerpt":"Renders a diagonal, responsive content + media block (image or video) with optional button. Works via shortcode, Elementor, or WPBakery.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/es.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/288069","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/es.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/es.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/es.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=288069"}],"author":[{"embeddable":true,"href":"https:\/\/es.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/giorgiobianchi"}],"wp:attachment":[{"href":"https:\/\/es.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=288069"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/es.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=288069"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/es.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=288069"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/es.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=288069"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/es.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=288069"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/es.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=288069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}