EVOLUTION-MANAGER
Edit File: section.html
<section id="{{:: shortcode.$id }}" class="section mask-{{ shortcode.options.mask }} {{ shortcode.options.visibility }} {{ shortcode.options.class }}" ng-class="{dark: shortcode.options.dark == 'true', 'has-mask': shortcode.options.mask,'has-parallax' : shortcode.options.parallax, 'uxb-sticky-section': shortcode.options.sticky == 'true', 'has-hover': shortcode.options.borderHover}"> <div class="section-bg fill" data-parallax-container=".section" data-parallax-background ng-attr-data-parallax="-{{ shortcode.options.parallax }}" > <img ng-if="shortcode.options.bg" class="bg" ng-style="{ 'objectPosition': shortcode.options.bgPos }" wp-attachment="shortcode.options.bg" wp-attachment-size="shortcode.options.bgSize" alt="" /> <div ng-if="shortcode.options.videoMp4" class="video-overlay fill"></div> <video ng-if="shortcode.options.videoMp4" class="video-bg no-click {{shortcode.options.videoVisibility}}" preload="auto" autoplay="true" loop="loop" muted="muted"> <source ng-if="shortcode.options.videoMp4" ng-src="{{shortcode.options.videoMp4}}" type="video/mp4"> <source ng-if="shortcode.options.videoOgg" ng-src="{{shortcode.options.videoOgg}}" type="video/ogg"> <source ng-if="shortcode.options.videoWebm" ng-src="{{shortcode.options.videoWebm}}" type="video/webm"> </video> <div ng-if="shortcode.options.bgOverlay" class="section-bg-overlay fill"></div> <div ng-if="shortcode.options.effect" class="effect-{{shortcode.options.effect}} bg-effect fill no-click"></div> <div ng-if="shortcode.options.border" class="is-border is-{{shortcode.options.borderStyle}}" ng-class="{['hover-'+shortcode.options.borderHover ] : shortcode.options.borderHover}" ng-style="{ 'borderRadius': shortcode.options.borderRadius+'px', 'borderWidth': shortcode.options.border, 'margin': shortcode.options.borderMargin, 'borderColor': shortcode.options.borderColor, }" ></div> <button ng-if="shortcode.options.scrollForMore" class="scroll-for-more icon absolute bottom h-center z-5"> <i class="icon-angle-down" style="font-size:42px;"></i> </button> </div> <div ng-if="shortcode.options.dividerTop" class="ux-shape-divider ux-shape-divider--top ux-shape-divider--style-{{shortcode.options.dividerTop}}" ng-class="{'ux-shape-divider--flip': shortcode.options.dividerTopFlip == 'true','ux-shape-divider--to-front': shortcode.options.dividerTopToFront == 'true'}"> <ng-include ng-if="$ctrl.store.flatsomeUrl" src="$ctrl.store.flatsomeUrl + '/assets/img/dividers/' + shortcode.options.dividerTop + '.svg'"></ng-include> </div> <div ng-if="shortcode.options.divider" class="ux-shape-divider ux-shape-divider--bottom ux-shape-divider--style-{{shortcode.options.divider}}" ng-class="{'ux-shape-divider--flip': shortcode.options.dividerFlip == 'true','ux-shape-divider--to-front': shortcode.options.dividerToFront == 'true'}"> <ng-include ng-if="$ctrl.store.flatsomeUrl" src="$ctrl.store.flatsomeUrl + '/assets/img/dividers/' + shortcode.options.divider + '.svg'"></ng-include> </div> <div class="section-content relative"> <content></content> </div> <style> #{{:: shortcode.$id }} {min-height: {{ shortcode.options.height }};} #{{:: shortcode.$id }} {background-color: {{ shortcode.options.bgColor }}!important;} #{{:: shortcode.$id }} {padding-top: {{ shortcode.options.padding }}; padding-bottom: {{ shortcode.options.padding }};} #{{:: shortcode.$id }} {margin-bottom: {{ shortcode.options.margin }};} #{{:: shortcode.$id }} .section-bg-overlay {background-color: {{ shortcode.options.bgOverlay }} } #{{:: shortcode.$id }} .ux-shape-divider--top svg {height: {{ shortcode.options.dividerTopHeight }}; width: calc({{ shortcode.options.dividerTopWidth }}% + 2px); } #{{:: shortcode.$id }} .ux-shape-divider--top .ux-shape-fill {fill: {{ shortcode.options.dividerTopFill }}; } #{{:: shortcode.$id }} .ux-shape-divider--bottom svg {height: {{ shortcode.options.dividerHeight}}; width: calc({{ shortcode.options.dividerWidth }}% + 2px); } #{{:: shortcode.$id }} .ux-shape-divider--bottom .ux-shape-fill {fill: {{ shortcode.options.dividerFill }}; } </style> </section>