Title: Diagonal Responsive View Author: giorgiobianchi Published: 2026年3月11日 Last modified: 2026年6月24日 --- プラグインを検索 ![](https://s.w.org/plugins/geopattern-icon/diagonal-responsive-view.svg) # Diagonal Responsive View 作者: [giorgiobianchi](https://profiles.wordpress.org/giorgiobianchi/) [ダウンロード](https://downloads.wordpress.org/plugin/diagonal-responsive-view.1.3.2.zip) * [詳細](https://ja.wordpress.org/plugins/diagonal-responsive-view/#description) * [レビュー](https://ja.wordpress.org/plugins/diagonal-responsive-view/#reviews) * [インストール](https://ja.wordpress.org/plugins/diagonal-responsive-view/#installation) * [開発](https://ja.wordpress.org/plugins/diagonal-responsive-view/#developers) [サポート](https://wordpress.org/support/plugin/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 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` ## インストール 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 7.0. ## 評価 このプラグインにはレビューがありません。 ## 貢献者と開発者 Diagonal Responsive View はオープンソースソフトウェアです。以下の人々がこのプラグ インに貢献しています。 貢献者 * [ giorgiobianchi ](https://profiles.wordpress.org/giorgiobianchi/) [“Diagonal Responsive View” をあなたの言語に翻訳しましょう。](https://translate.wordpress.org/projects/wp-plugins/diagonal-responsive-view) ### 開発に興味がありますか ? [コードを閲覧](https://plugins.trac.wordpress.org/browser/diagonal-responsive-view/) するか、[SVN リポジトリ](https://plugins.svn.wordpress.org/diagonal-responsive-view/) をチェックするか、[開発ログ](https://plugins.trac.wordpress.org/log/diagonal-responsive-view/) を [RSS](https://plugins.trac.wordpress.org/log/diagonal-responsive-view/?limit=100&mode=stop_on_copy&format=rss) で購読してみてください。 ## 変更履歴 #### 1.3.2 * Fine tuned animation on scroll slide images #### 1.3.1 * Added animation on scroll slide images #### 1.3.0 * Implemented flip card visualisation as default for mobile devices #### 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 ## メタ * バージョン **1.3.2** * 最終更新日 **5日前** * 有効インストール数 **10未満** * WordPress バージョン ** 5.8またはそれ以降 ** * 検証済み最新バージョン: **7.0** * PHP バージョン ** 7.4またはそれ以降 ** * 言語 * [English (US)](https://wordpress.org/plugins/diagonal-responsive-view/) * タグ * [elementor](https://ja.wordpress.org/plugins/tags/elementor/)[responsive](https://ja.wordpress.org/plugins/tags/responsive/) [WPBakery](https://ja.wordpress.org/plugins/tags/wpbakery/) * [詳細を表示](https://ja.wordpress.org/plugins/diagonal-responsive-view/advanced/) ## 評価 レビューはまだ送信されていません。 [Your review](https://wordpress.org/support/plugin/diagonal-responsive-view/reviews/#new-post) [すべてのレビューを見る](https://wordpress.org/support/plugin/diagonal-responsive-view/reviews/) ## 貢献者 * [ giorgiobianchi ](https://profiles.wordpress.org/giorgiobianchi/) ## サポート 意見や質問がありますか ? [サポートフォーラムを表示](https://wordpress.org/support/plugin/diagonal-responsive-view/) ## 寄付 このプラグインが今後も改善できるよう応援しませんか ? [ このプラグインに寄付 ](https://ko-fi.com/giorgiobianchi)