Elementor glossary explained

Free Digital Tools, Website, WordPress

Banner image

Showing a full image

  • Size > Cover 

Showing only a part of an image

  • Size > Auto 

Rolling image as you scroll

  • Style > Background  
    • Attachment > Fixed > 
    • Repeat > No repeat
    • Size > Cover

Button

  • Advanced > Border Radius > 5, 5, 5, 5

Corner (rounded)

Changing its shape

  • Border radius
  • 0 = right angle, 10 = round, 20 = more round 

Changing inner margins

  • Edit button > Style > Padding

FAQ

How to create FAQ

  • Accordion

How to keep all answers closed at the start

  • Elementor page > select HTML > insert it right above FAQ (Accordion) > copy & paste the below code
<style class="accordion-closed-on-load">
body:not(.elementor-editor-active) .elementor-widget-accordion .elementor-tab-content {
display: none!important;
}
</style>
<script>
window.addEventListener('load', function() {
setTimeout(function(){
document.querySelector('.accordion-closed-on-load').remove();
let accordionsElems = document.querySelectorAll('.elementor-widget-accordion')
accordionsElems.forEach(e => {
let activeTitle = e.querySelector('.elementor-tab-title.elementor-active');
let activeContent = e.querySelector('.elementor-tab-content.elementor-active')
jQuery(activeContent).hide();
activeTitle.classList.remove('elementor-active');
activeContent.classList.remove('elementor-active');
activeContent.setAttribute('hidden','hidden');
activeTitle.setAttribute('aria-expanded',false);
activeTitle.setAttribute('aria-selected',false);
activeTitle.setAttribute('tabindex',-1);
});
},100);
});
</script>

Filterable gallery (Addons for Elementor)

Changing from one image to another

  • Additional Options > Autoplay speed
  • 2000 is faster than 5000

Transitioning from one image to another

  • Additional Options > Animated speed
  • 200 is faster than 500

Smooth looping from last image back to first

  • Additional Options > Indefinite loop
  • choose YES

Image rolling in

  • Effect > Slide or Fade

Filling up the entire column 

  • Image Carousel > Slide to show: 1

Enlarging an image with a click

  • Image Carousel > Link > Media file 

Image Size

Fix height or width of image

  • edit container > layout > width / min height

Image carousel 

Changing from one image to another

  • Additional Options > Autoplay speed
  • 2000 is faster than 5000

Transitioning from one image to another

  • Additional Options > Animated speed
  • 200 is faster than 500

Smooth looping from last image back to first

  • Additional Options > Indefinite loop
  • choose YES

Image rolling in

  • Effect > Slide or Fade

Filling up the entire column 

  • Image Carousel > Slide to show: 1

Enlarging an image with a click

  • Image Carousel > Link > Media file 

Inner section missing (it's gone forever)

  • put all images in a container top to bottom > go to layout > direction > row

Inner section - how to show right column before left column in mobile version

  • how to show image before text / text before image / left on top / right on top
  • select section (not column) > advanced >  responsive > reverse column (mobile)

Shadow

  • Advanced > Border
  • Border Radius
    • 5, 5, 5, 5
  • Box shadow
    • horizontal: 0
    • vertical: 20
    • blur: 28
    • spread: 0
    • position: outline
  • for containers, border is found under “Style” not “Advanced”

Transparent header

Change top menu color

  • customize > header > search / trigger > transparent state

Related Posts

1 thought on “Elementor glossary explained”

Leave a Comment

Your email address will not be published. Required fields are marked *