Diagonal Responsive View

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:

</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

• Open a page in Elementor.

• Search for Diagonal Responsive View in the widget panel (category: General).

• 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)

• Open a page in the WPBakery editor (backend or frontend).

• Click Add Element → search for Diagonal Responsive View.

• 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