Title: Diagonal Responsive View
Author: giorgiobianchi
Published: <strong>മാർച്ച്‌ 11, 2026</strong>
Last modified: മാർച്ച്‌ 11, 2026

---

Search plugins

![](https://s.w.org/plugins/geopattern-icon/diagonal-responsive-view.svg)

# Diagonal Responsive View

 By [giorgiobianchi](https://profiles.wordpress.org/giorgiobianchi/)

[Download](https://downloads.wordpress.org/plugin/diagonal-responsive-view.1.2.0.zip)

 * [Details](https://ml.wordpress.org/plugins/diagonal-responsive-view/#description)
 * [Reviews](https://ml.wordpress.org/plugins/diagonal-responsive-view/#reviews)
 *  [Installation](https://ml.wordpress.org/plugins/diagonal-responsive-view/#installation)
 * [Development](https://ml.wordpress.org/plugins/diagonal-responsive-view/#developers)

 [Support](https://wordpress.org/support/plugin/diagonal-responsive-view/)

## Description

**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:**

 * Diagonal/masked split layout — content on one side, image or looping video on
   the other
 * Flip option to swap media and content order
 * On mobile the written content is shown on swipe (left or right)
 * Optional styled button with full color, radius, alignment, and CSS class controls
 * Adjustable mask tilt (20°, 30°, 40°)
 * Native Elementor widget (drag-and-drop, live preview)
 * Native WPBakery element (backend and frontend editor)
 * Plain shortcode support for any editor or theme

**Optimized for desktop, tablet, and mobile devices.**

### Usage — Shortcode

Shortcode name: `diag_resp_view`

Basic example:

    ```
    [diag_resp_view]Your <strong>HTML</strong> content here[/diag_resp_view]
    ```

Advanced example:

    ```
    [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"]<p>Content here.</p>[/diag_resp_view]
    ```

**Supported attributes** (defaults in parentheses):

 * `title` (`Diagonal Responsive View`) — text field used as block title
 * `flip_media` (`no`) — `yes` to swap media and content order on desktop
 * `is_video` (`no`) — `yes` to use `media_url` as a looping background video
 * `show_button` (`no`) — `yes` to render a CTA button
 * `button_text` (`Click Here`) — button label
 * `button_link` (`''`) — plain URL or WPBakery `vc_link` format (`url:...|target:
   _blank`)
 * `button_bg_color` (`#0041C2`) — button background color
 * `button_border_radius` (`5px`) — button border radius
 * `button_text_color` (`#FFFFFF`) — button text color
 * `button_css_classes` (`''`) — extra CSS classes for the button
 * `button_align` (`left`) — `left`, `center`, or `right`
 * `media_url` (`''`) — URL to a video file (used when `is_video="yes"`)
 * `image_id` (`''`) — WordPress attachment ID for the image
 * `mask_tilt` (`20`) — tilt angle: `20`, `30`, or `40`

The shortcode wrapper uses the class `diag-responsive-view` for custom CSS targeting.

### Usage — Elementor

 1. Open a page in Elementor.
 2. Search for **Diagonal Responsive View** in the widget panel (category: General).
 3. Drag it into your layout and configure content, media, and button settings via 
    the panel controls.

Alternatively, use the Elementor **Shortcode** widget and paste the `diag_resp_view`
shortcode directly.

### Usage — WPBakery (Visual Composer)

 1. Open a page in the WPBakery editor (backend or frontend).
 2. Click **Add Element**  search for **Diagonal Responsive View**.
 3. Configure content, media, and button settings via the element popup.

You can also insert the shortcode directly into WPBakery text blocks or the classic
editor.

### For Developers

 * Shortcode handler: `diag_resp_view` — see `diag-resp-view.php`
 * Elementor widget class: `DiagRespViewElementorWidget` — registered in `includes/
   elementor-config.php`
 * WPBakery mapping base: `diag_resp_view` — registered in `includes/vc-config.php`
 * CSS handle: `diag-resp-style` — file: `assets/css/diag-resp-style.css`

## Installation

 1. Upload the plugin folder to `/wp-content/plugins/` or install it via the WordPress
    admin Plugins screen  Add New  Upload Plugin.
 2. Activate the plugin from the **Plugins** screen in your WordPress admin.
 3. Use the plugin via Elementor, WPBakery, or shortcode.

## FAQ

### Does this plugin work without Elementor or WPBakery?

Yes. The shortcode `[diag_resp_view]` works in any editor, including the WordPress
Block Editor (Gutenberg), classic editor, or any theme that supports shortcodes.

### Can I use a video instead of an image?

Yes. Set `is_video="yes"` and provide a `media_url` pointing to a self-hosted video
file (e.g. `.mp4`). The video will loop silently as a background panel.

### What tilt angles are supported?

The UI controls support tilt values of `20`, `30`, and `40` degrees via the `mask_tilt`
attribute.

### Is it compatible with the latest version of WordPress?

Yes, it has been tested up to WordPress 6.9.1.

## Reviews

ഈ പ്ലഗിന് റിവ്യൂകൾ ഒന്നുമില്ല.

## Contributors & Developers

“Diagonal Responsive View” is open source software. The following people have contributed
to this plugin.

Contributors

 *   [ giorgiobianchi ](https://profiles.wordpress.org/giorgiobianchi/)

[Translate “Diagonal Responsive View” into your language.](https://translate.wordpress.org/projects/wp-plugins/diagonal-responsive-view)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/diagonal-responsive-view/),
check out the [SVN repository](https://plugins.svn.wordpress.org/diagonal-responsive-view/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/diagonal-responsive-view/)
by [RSS](https://plugins.trac.wordpress.org/log/diagonal-responsive-view/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

#### 1.2.0

 * Fixed vertical stretch for image and video

#### 1.1.2

 * Added title control with default parameter
 * Added Mobile optimization

#### 1.1.1

 * Updated README.txt
 * Author URI reference

#### 1.0.0

 * Initial release
 * Shortcode `diag_resp_view` with full attribute support
 * Native Elementor widget
 * Native WPBakery element
 * Adjustable mask tilt (20, 30, 40 degrees)
 * Optional CTA button with full style controls

## Meta

 *  Version **1.2.0**
 *  Last updated **1 മാസം ago**
 *  Active installations **Fewer than 10**
 *  WordPress version ** 5.8 അല്ലെങ്കില്‍ അതിലും ഉയര്‍ന്നത് **
 *  Tested up to **6.9.4**
 *  PHP version ** 7.4 അല്ലെങ്കില്‍ അതിലും ഉയര്‍ന്നത് **
 *  Language
 * [English (US)](https://wordpress.org/plugins/diagonal-responsive-view/)
 * Tags
 * [elementor](https://ml.wordpress.org/plugins/tags/elementor/)[responsive](https://ml.wordpress.org/plugins/tags/responsive/)
   [WPBakery](https://ml.wordpress.org/plugins/tags/wpbakery/)
 *  [Advanced View](https://ml.wordpress.org/plugins/diagonal-responsive-view/advanced/)

## Ratings

No reviews have been submitted yet.

[Your review](https://wordpress.org/support/plugin/diagonal-responsive-view/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/diagonal-responsive-view/reviews/)

## Contributors

 *   [ giorgiobianchi ](https://profiles.wordpress.org/giorgiobianchi/)

## Support

Got something to say? Need help?

 [View support forum](https://wordpress.org/support/plugin/diagonal-responsive-view/)

## Donate

Would you like to support the advancement of this plugin?

 [ Donate to this plugin ](https://ko-fi.com/giorgiobianchi)