=== Diagonal Responsive View === Contributors: giorgiobianchi Donate link: https://ko-fi.com/giorgiobianchi Tags: diagonal, responsive, elementor, wpbakery, media block Requires at least: 5.8 Tested up to: 6.9 Stable tag: 1.2.0 Requires PHP: 7.4 License: MIT License URI: https://mit-license.org/ Renders a diagonal, responsive content + media block (image or video) with optional button. Works via shortcode, Elementor, or WPBakery. == 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.** == 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. == Usage — Shortcode == Shortcode name: `diag_resp_view` Basic example: `[diag_resp_view]Your HTML 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"]

Content here.

[/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` == Frequently Asked Questions == = 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. == Screenshots == 1. Diagonal block with image panel and CTA button — desktop view. 2. Elementor widget controls panel. 3. WPBakery element configuration popup. == 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 == Upgrade Notice == = 1.0.0 = Initial release. No upgrade needed.