Read More Expand (Widget)
Section id can be anything (not just section. even element, inner section, column, etc.
when you put the section id on the readmore widget, the element / section with that id will appear greyed out in editor and disappear from normal flow. When read more is clicked, that element is shown (in the original position).
If there’s multiple section, the readmore won’t move automatically to the bottom. E.g :
To Make the read more button appear below the section, we need to :
- instead of making 1 read more button with 3 section, make 3 read more button with 1 section
- each read more section only contain the readmore for the next section. E.g :
Unfold (Widget)
It can Hide Text partially, and also template. change the width of Fold & Unfold state also change the button style
Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Unfold Widget Example Using Template
Demo Template 1
Hotspot (Widget)
We can put Link in the hotspot & set it’s icon. But sadly we can’t put image in the tooltip
Anything can Be Tooltip (in Advanced tab)
Sometimes the preview tooltip doesn’t work when the widget is put inside the inner section, (but still works in actuality)
Sticky Column ( in Column > Advanced > Sticky Column)
Sticky Column (50 spacing)
This Column content will be scrolled and stop at the bottom of column
Longer Height Next Column
Sticky Column 2 (100 spacing)
This Column content will be scrolled and stop at the bottom of column
Longer Height Next Column
Particle.js (Section > Advanced > Jet Tricks > Enable Particles)
Need some time to fiddle to get the correct animation.
From widget : https://particles.js.org/
from google (better) : https://vincentgarreau.com/particles.js/
Instead of downloading the json multiple time, go to Codepen, copy from : {“particles” …. “retina_detect”:true}
Parallax Scroll (Elements > Advanced > Jet Tricks > Enable Parallax)
The Advanced > Jet Tricks > parallax Scroll only available on widgets, not on column / section. on Section (Parallax background etc), use the feature from jet elements.
To make the Parallax effect more apparent, put 1 of the parallax element to invert so 1 is going up and 1 is going down
Sarah Hofner
Linguist
But In Actuallity By Default Ementor also provide parallax in ( Motion Effect > Scrolling Effect) :
And I would say Elementor’s Motion Effect > Scrolling Effect is better since it can combine multiple effect in 1 element :
- Vertical Scroll
- Horizontal Scroll
- Transparancy
- Blur
- Rotate
- Scale
- Effect Relative to (Viewport / Entire page)
Satellite Effect (Elements > Advanced > Jet Tricks > Enable Parallax)
Satellite Effect can only be applied in Elements. Put negative z-index to put the satellite behind your element
Satellite effect is adding Extra Text, Icon, or Image, at a position relative to the element , you can have CSS filter to the element (blur, hue, contrast, etc),
Sometimes the satellite effect will not appear in editor (bug). If the satellite effect disappear, you need to trigger the element that have the satellite effect to reload, e.g : add space, then remove it or add section then remove it
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.