// Add our custom layout controls to the "Layout" section in the "Advanced" tab of each element
// Note: for normal widgets, section_id for the Layout section is '_section_style',
// while for containers, it is called 'section_layout' (due to different implementation of Containers)
- if (in_array($section_id, ['section_style_image'])) {
+ if (in_array($section_id, ['section_style_image','cube-formatted-text.default'])) {
$element->add_control(
'responsive',
[
'l-2xl' => 'L ↔ 2XL (38px — 86px)',
'2xl-custom' => '2XL (72px — 86px)',
'36-126' => '(36px — 126px)',
+ '74-126' => '(74px - 126px)',
'2xl-5xl' => '2XL ↔ 5XL (72px — 126px)'
];
}
?>
</{$html_tag[$marker_type]}>
<?php
- echo "<button class='btn display-all-lists'>Tout afficher <span class='counter'></span></button>";
+ if(sizeof($items) > 11) {
+ echo "<button class='btn display-all-lists'>Tout afficher <span class='counter'></span></button>";
+ }
echo "</div>";
}
}
\ No newline at end of file
);
}
protected function controls() {
+ $this->add_control(
+ 'above_title',
+ [
+ 'label' => __( 'Above title', 'elementor' ),
+ 'type' => Controls_Manager::TEXT,
+ 'placeholder' => __( 'Enter your above title', 'elementor' ),
+ 'default' => 'Abovetitle',
+ ]
+ );
+
$this->add_control(
'title',
[
ut aliquip ex ea commodo consequat.',
]
);
+
+ $this->add_control(
+ 'image',
+ [
+ 'label' => esc_html__( 'Choose Image', 'textdomain' ),
+ 'type' => Controls_Manager::MEDIA,
+ 'default' => [
+ 'url' => \Elementor\Utils::get_placeholder_image_src(),
+ ],
+ ]
+ );
+
+ $this->add_control(
+ 'gallery_position',
+ [
+ 'label' => esc_html__( 'Position', 'elementor' ),
+ 'type' => Controls_Manager::SELECT,
+ 'default' => 'gallery-right',
+ 'options' => [
+ 'gallery-right' => 'right',
+ 'gallery-left' => 'left',
+ ],
+ ]
+ );
}
protected function styleControls() {
+ $this->add_control(
+ 'text_color',
+ [
+ 'label' => esc_html__( 'Abovetitle text Color', 'cube' ),
+ 'type' => Controls_Manager::COLOR,
+ 'selectors' => [
+ '{{WRAPPER}} .highlight' => 'color: {{VALUE}}',
+ ],
+ ]
+ );
+ $this->add_control(
+ 'color',
+ [
+ 'label' => esc_html__( 'Abovetitle background color', 'cube' ),
+ 'type' => Controls_Manager::COLOR,
+ 'selectors' => [
+ '{{WRAPPER}} .highlight-bar' => 'background-color: {{VALUE}}',
+ ],
+ ]
+ );
$this->add_control(
'text_size',
[
*/
protected function render() {
- $title = $this->get_settings('title');
- $title_tag = $this->get_settings('title_tag');
- $subtitle = $this->get_settings('subtitle');
- $subtitle_tag = $this->get_settings('subtitle_tag');
- $body = $this->parse_text_editor($this->get_settings('body'));
$size = $this->get_settings('text_size') ? $this->get_settings('text_size') : 'large';
$size_classes = [
'large' => 'text-lg',
];
- // Inline Editing settings
- $this->add_inline_editing_attributes('title', 'none');
- $this->add_inline_editing_attributes('subtitle', 'none');
- $this->add_inline_editing_attributes('body', 'none');
-
// CSS Classes for elements
$this->add_render_attribute('title', 'class', ["text-block-title font-bold text-xl $size_classes[$size]"]);
$this->add_render_attribute('subtitle', 'class', ["text-block-subtitle font-bold text-md"]);
$this->add_render_attribute('body', 'class', ['text-block-body']);
+ $settings = $this->get_controls_settings();
+ $attributes = $this->get_render_attributes();
+
// Rendered content
- echo '<div class="text-block">';
- if (!empty($title)) echo "<{$title_tag} {$this->get_render_attribute_string('title')}>$title</{$title_tag}>";
- if (!empty($subtitle)) echo "<{$subtitle_tag} {$this->get_render_attribute_string('subtitle')}>$subtitle</{$subtitle_tag}>";
- if (!empty($body)) echo "<div {$this->get_render_attribute_string('body')}>$body</div>";
- echo '</div>';
+ echo view("widgets/text-image", compact("settings", "attributes"));
}
protected function backboneTemplate(){ ?>
* @access protected
*/
protected function content_template() {
- self::backboneTemplate();
+ //self::backboneTemplate();
}
}
\ No newline at end of file
}
echo '
<div class="text '.$active.'">
+ <img src="'.$item['background_image']['url'].'" />
<h3 class="text-2xl">'.$item['title'].'</h3>
<p>
'.$item['text'].'
//display: grid !important
body:not(.home)
+ .elementor-section:nth-child(1)
+ margin-bottom: 36px
.elementor-section:nth-child(2)
- margin-top: -84px
+ +screen-size(small-desktop)
+ margin-top: -112px
h1,h2,h3,h4,h5,h6
&:not(.highlight)
.gallery-columns-2
display: flex
align-items: center
+
+.elementor-widget-cube-highlight-title
+ +screen-size(small-desktop, 'max')
+ width: 100% !important
--space-2xs-xs: clamp(0.50rem, calc(0.42rem + 0.39vw), 0.75rem)
--space-xs-s: clamp(0.75rem, calc(0.67rem + 0.39vw), 1.00rem)
--space-s-m: clamp(1.00rem, calc(0.84rem + 0.78vw), 1.50rem)
+ --space-s-m-2: clamp(0.88rem, calc(0.71rem + 0.71vw), 1.31rem)
--space-m-l: clamp(1.50rem, calc(1.32rem + 0.81vw), 2.00rem)
- --space-l-xl: clamp(2.13rem, calc(1.11rem + 5.08vw), 5.38rem)
+ --space-l-xl: clamp(2.125rem, calc(1.11rem + 5.08vw), 5.38rem)
--space-xl-2xl: clamp(3.00rem, calc(2.69rem + 1.56vw), 4.00rem)
--space-2xl-3xl: clamp(4.00rem, calc(3.38rem + 3.13vw), 6.00rem)
--space-3xl-4xl: clamp(6.00rem, calc(5.69rem + 1.56vw), 7.00rem)
--space-20-44: clamp(1.25rem, calc(0.70rem + 2.44vw), 2.75rem)
--space-36-126: clamp(2.25rem, calc(0.19rem + 9.15vw), 7.88rem)
+ --space-74-126: clamp(4.63rem, calc(3.44rem + 5.28vw), 7.88rem)
--space-56-128: clamp(3.50rem, calc(1.85rem + 7.32vw), 8.00rem)
--step--2: clamp(1.93rem, calc(1.58rem + 1.74vw), 3.04rem)
width: 100%;
z-index: 99;
transition: all .3s;
+ top: 0;
img {
width: 100%;
transition: all .3s;
.home-carousel
position: relative
- height: 100vh //798px
+ height: 0 //87vh //798px
+ padding-bottom: 42.25%
overflow: hidden
.carousel
&-slide
li
width: 100%
+screen-size(tablet, 'max')
- &:nth-child(n + 2)
+ &:nth-child(n + 11)
display: none
visibility: hidden
.elementor-widget-cube-organisation
.elementor-widget-container
display: grid
- grid-template-columns: repeat(2, 1fr)
- +gap
+ grid-gap: 38px 0
+ +screen-size(small-desktop)
+ grid-template-columns: repeat(2, 1fr)
+ +gap
.organisation-gallery
display: grid
- grid-template-columns: repeat(3, 1fr)
- +special-gap(2.976)
+ grid-template-columns: repeat(2, 1fr)
+ grid-gap: 37px 18px
+ +screen-size(phone)
+ grid-template-columns: repeat(3, 1fr)
+ +special-gap(2.976)
.img-container
height: 0
border-radius: 3px
.elementor-widget-cube-organisation
.text-block
- width: 66.666666%
margin: 0 auto
+ display: flex
+ flex-direction: column
+ word-break: break-word
+ +screen-size(small-desktop)
+ width: 66.666666%
-.elementor-col-50
- .elementor-widget-cube-highlight-title,
- .elementor-widget-cube-formatted-text,
- .elementor-widget-cube-textwith-btn,
- .elementor-widget-text-editor,
- .elementor-widget-cube-textwith-btn
- width: 83.33%
- margin: 0 auto
+.elementor-section
+ &.first //"first" class is added in section edit
+ .text-block
+ &-above-title
+ margin-bottom: var(--space-l-xl)
.text-block
+ display: grid
+ +special-gap(0)
+ +screen-size(small-desktop)
+ grid-template-columns: repeat(12, 1fr)
+ //grid-template-rows: 1fr auto auto 1fr
+ align-items: center
+ height: fit-content
&-title,
&-subtitle
margin-bottom: 21px
+ &.gallery-left
+ +screen-size(small-desktop)
+ .text-block
+ &-above-title
+ grid-area: 1 / 8 / 2 / 12
+ &-image
+ grid-area: 1 / 1 / 6 / 7
+ &-title
+ grid-area: 2 / 8 / 3 / 12
+ &-subtitle
+ grid-area: 3 / 8 / 4 / 12
+ &-body
+ grid-area: 4 / 8 / 5 / 12
+ .text-block-above-title
+ margin-bottom: 38px
+ +screen-size(small-desktop)
+ margin-bottom: 43px
+
+ &.gallery-right
+ +screen-size(small-desktop)
+ .text-block
+ &-above-title
+ grid-area: 1 / 2 / 2 / 6
+ &-image
+ grid-area: 1 / 7 / 6 / 13
+ &-title
+ grid-area: 2 / 2 / 3 / 6
+ &-subtitle
+ grid-area: 3 / 2 / 4 / 6
+ &-body
+ grid-area: 4 / 2 / 5 / 6
+
+ &-image
+ align-self: flex-start
+ +screen-size(small-desktop, 'max')
+ margin-bottom: 18px
+
+ &-subtitle
+ font-size: 20px
.text-blockbtn
display: grid
+ +special-gap(0)
+screen-size(small-desktop)
grid-template-columns: repeat(12, 1fr)
+ grid-template-rows: 1fr auto auto 1fr
align-items: center
- +special-gap(0)
+ height: fit-content
&.gallery-left
+screen-size(small-desktop)
.text-blockbtn
&-above-title
position: relative
width: max-content
+ align-self: end
+ margin-bottom: var(--space-s-m-2)
&:after
content: ""
position: absolute
background-color: inherit
&-title
margin-bottom: 21px
+ &-gallery
+ +screen-size(small-desktop, 'max')
+ margin-bottom: 18px
&-body
margin-bottom: 24px
+ &-btn
+ align-self: start
.sticky-nav
display: grid
- grid-template-columns: repeat(2, 1fr)
+ +screen-size(small-desktop)
+ grid-template-columns: repeat(2, 1fr)
.leftside
- width: 66.66%
+ width: 100%
margin: 0 auto
+ +screen-size(small-desktop)
+ width: 66.66%
.text
- margin-bottom: var(--space-56-128)
+ margin-bottom: clamp(3.50rem, calc(-2.54rem + 26.83vw), 20.00rem)
*
transition: all .3s
&:not(.active)
- *
- color: #DDDDDD
+ +screen-size(small-desktop)
+ *
+ color: #DDDDDD
h3
margin-bottom: var(--space-m-l)
+ img
+ display: block
+ margin-bottom: 18px
+ +screen-size(small-desktop)
+ display: none
.rightside
position: sticky
height: 0
padding-bottom: 107.3%
margin-top: calc(-32px - var(--space-l-2xl))
+ display: none
+ +screen-size(small-desktop)
+ margin-left: 10px
+ display: block
img
position: absolute
top: 0
--- /dev/null
+<div class="text-block {{ $settings['gallery_position'] }}">
+ <p class="text-block-above-title highlight text-lg relative font-bold">
+ <span class='relative z-1'>{{ $settings['above_title'] }}</span>
+ <span class='highlight-bar'></span>
+ </p>
+
+ <div class="text-block-image">
+ <img class="" src="{{ $settings['image']['url'] }}" />
+ </div>
+
+ @if($settings['title'])
+ <{{$settings['title_tag']}} class="{{implode(' ',$attributes['title']['class'])}}">
+ {!! $settings['title'] !!}
+ </{{$settings['title_tag']}}>
+ @endif
+
+ @if($settings['subtitle'])
+ <{{$settings['subtitle_tag']}} class={{implode(' ',$attributes['subtitle']['class'])}}>
+ {!! $settings['subtitle'] !!}
+ </{{$settings['subtitle_tag']}}>
+ @endif
+
+ <div class="{{implode(' ',$attributes['body']['class'])}}">{!! $settings['body'] !!}</div>
+
+</div>