內容簡介
Diagonal Responsive View 外掛提供一個對角線的響應式分割佈局區塊，結合內容區域與媒體面板（圖片或循環影片），並可選擇性加入行動呼籲按鈕，適合各種裝置使用。
【主要功能】
• 對角線分割佈局，內容與媒體並排顯示
• 媒體與內容順序翻轉選項
• 手機上可左右滑動顯示文字內容
• 可自訂樣式的行動呼籲按鈕
• 可調整遮罩傾斜角度（20°、30°、40°）
• 原生支援 Elementor 與 WPBakery
外掛標籤
開發者團隊
原文外掛簡介
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 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
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