Renders a diagonal, responsive content + media block (image or video) with optional button. Works via shortcode, Elementor, or WPBakery.

giorgiobianchi

Diagonal Responsive View 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.
It integrates natively with Elementor (dedicated widget) and WPBakery Page Builder (Visual Composer element), and can also be used anywhere via shortcode.
Key features:
<ul>
<li>Diagonal/masked split layout — content on one side, image or looping video on the other</li>
<li>Flip option to swap media and content order</li>
<li>On mobile the written content is shown on swipe (left or right)</li>
<li>Optional styled button with full color, radius, alignment, and CSS class controls</li>
<li>Adjustable mask tilt (20°, 30°, 40°)</li>
<li>Native Elementor widget (drag-and-drop, live preview)</li>
<li>Native WPBakery element (backend and frontend editor)</li>
<li>Plain shortcode support for any editor or theme</li>
</ul>
Optimized for desktop, tablet, and mobile devices.
<h3>Usage — Shortcode</h3>
Shortcode name: <code>diag_resp_view</code>
Basic example:
<pre><code>[diag_resp_view]Your HTML content here[/diag_resp_view]
</code></pre>
Advanced example:
<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"]Content here.[/diag_resp_view]
</code></pre>
Supported attributes (defaults in parentheses):
<ul>
<li><code>title</code> (<code>Diagonal Responsive View</code>) — text field used as block title</li>
<li><code>flip_media</code> (<code>no</code>) — <code>yes</code> to swap media and content order on desktop</li>
<li><code>is_video</code> (<code>no</code>) — <code>yes</code> to use <code>media_url</code> as a looping background video</li>
<li><code>show_button</code> (<code>no</code>) — <code>yes</code> to render a CTA button</li>
<li><code>button_text</code> (<code>Click Here</code>) — button label</li>
<li><code>button_link</code> (<code>''</code>) — plain URL or WPBakery <code>vc_link</code> format (<code>url:...|target:_blank</code>)</li>
<li><code>button_bg_color</code> (<code>#0041C2</code>) — button background color</li>
<li><code>button_border_radius</code> (<code>5px</code>) — button border radius</li>
<li><code>button_text_color</code> (<code>#FFFFFF</code>) — button text color</li>
<li><code>button_css_classes</code> (<code>''</code>) — extra CSS classes for the button</li>
<li><code>button_align</code> (<code>left</code>) — <code>left</code>, <code>center</code>, or <code>right</code></li>
<li><code>media_url</code> (<code>''</code>) — URL to a video file (used when <code>is_video="yes"</code>)</li>
<li><code>image_id</code> (<code>''</code>) — WordPress attachment ID for the image</li>
<li><code>mask_tilt</code> (<code>20</code>) — tilt angle: <code>20</code>, <code>30</code>, or <code>40</code></li>
</ul>
The shortcode wrapper uses the class <code>diag-responsive-view</code> for custom CSS targeting.
<h3>Usage — Elementor</h3>
<ol>
<li>Open a page in Elementor.</li>
<li>Search for Diagonal Responsive View in the widget panel (category: General).</li>
<li>Drag it into your layout and configure content, media, and button settings via the panel controls.</li>
</ol>
Alternatively, use the Elementor Shortcode widget and paste the <code>diag_resp_view</code> shortcode directly.
<h3>Usage — WPBakery (Visual Composer)</h3>
<ol>
<li>Open a page in the WPBakery editor (backend or frontend).</li>
<li>Click Add Element → search for Diagonal Responsive View.</li>
<li>Configure content, media, and button settings via the element popup.</li>
</ol>
You can also insert the shortcode directly into WPBakery text blocks or the classic editor.
<h3>For Developers</h3>
<ul>
<li>Shortcode handler: <code>diag_resp_view</code> — see <code>diag-resp-view.php</code></li>
<li>Elementor widget class: <code>DiagRespViewElementorWidget</code> — registered in <code>includes/elementor-config.php</code></li>
<li>WPBakery mapping base: <code>diag_resp_view</code> — registered in <code>includes/vc-config.php</code></li>
<li>CSS handle: <code>diag-resp-style</code> — file: <code>assets/css/diag-resp-style.css</code></li>
</ul>

Alternatives to Diagonal Responsive View

Top alternatives