);
$this->add_control(
- 'content_image',
+ 'title',
[
- 'label' => __( 'Content Image', 'cube' ),
- 'type' => Controls_Manager::MEDIA,
- 'label_block' => true,
- 'default' => [
- 'url' => Utils::get_placeholder_image_src(),
- ],
+ 'label' => __( 'Title', 'elementor' ),
+ 'type' => Controls_Manager::TEXTAREA,
+ 'placeholder' => __( 'Enter your title', 'elementor' ),
+ 'default' => '',
+ ]
+ );
+
+ $this->add_control(
+ 'body',
+ [
+ 'label' => __('Body', 'cube'),
+ 'type' => Controls_Manager::TEXTAREA,
+ 'default' => '',
]
);
protected function render() {
$id = 'header_slideshow_' . $this->get_id();
- $content_image = $this->get_settings('content_image');
+ $title = $this->get_settings('title');
+ $body = $this->get_settings('body');
$images_desktop = $this->get_settings('images_desktop');
$images_mobile = $this->get_settings('images_mobile');
*/
?>
- <?php if (isset($content_image['id']) && $content_image['id'] > 0): ?>
+ <?php if (!empty($title) || !empty($body)): ?>
+
+ <h1 class="header-slideshow-content elementor-element elementor-invisible"
+ data-settings='{"animation":"fadeInRight","animation_delay":0}'
+ data-element_type="section">
+ <span class="block text-xl mb-2"><?= $title ?></span>
+ <span class="block text-2xl"><?= $body ?></span>
+ </h1>
- <img src="<?= wp_get_attachment_image_url($content_image['id']) ?>"
- class="header-slideshow-content elementor-element elementor-invisible"
- data-settings='{"animation":"fadeInRight","animation_delay":0}'
- data-element_type="section"
- alt="<?= __('Bienvenue au CCV Montpellier - centre de chirurgie vertébrale de Montpellier') ?>">
<?php endif; ?>
</div>
&-content
- width: 50% // Size ratio for intermediate screens
- max-width: 620px !important
- z-index: 10
- position: absolute
- constrain(bottom, 9.2vw)
- left: 6.4vw // Not using constrain because this shouldn't be capped on lower limits
-
- +above($content-max-width)
- left: 126px // From mockup
+ .header-slideshow & // Need some extra specificity to override H1 CSS
+ @apply text-purple-dark px-5 py-3
+ background: rgba(#fff, 0.8)
+ width: 50% // Size ratio for intermediate screens
+ max-width: 870px
+ z-index: 10
+ position: absolute
+ constrain(bottom, 9.2vw)
+ left: 6.4vw // Not using constrain because this shouldn't be capped on lower limits
+ margin-bottom: 0
+ text-transform: none
+
+ +above($content-max-width)
+ left: 126px // From mockup
+
+ +below($breakpoint-slideshow)
+ bottom: 4em
- +below($breakpoint-slideshow)
- bottom: 4em
+ +below($breakpoint-slideshow-images)
+ width: 75%
- +below($breakpoint-slideshow-images)
- width: 75%
+ &:before
+ constrain(left, -1.7vw)
- .elementor-editor-active &, .elementor-editor-preview &
- visibility: visible // Animation doesn't trigger in the editor for some reason so just show it
+ .elementor-editor-active &, .elementor-editor-preview &
+ visibility: visible // Animation doesn't trigger in the editor for some reason so just show it