Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
This short tutorial will show you how to add and animate an icon inside of a button.
To change the alignment of the built-in Components, use the Margin setting under the Spacing Control. Watch the video below to learn more about setting the alignment of an object, including how to center an object.
Set the left and right margin to "Auto" to center the component.
Set the left margin to "0" and the right margin to "Auto" to left align the component.
Set the left margin to "auto" and the right margin to "0" to left align the component.
Set the scrolling Anchor speed using Smooth Scroll JS Library.
If you want to control the scroll timing (and other options such as easing) when scrolling to an anchor then you can use the Smooth Scroll js library.
To add Smooth Scroll to yoru project, put the following in your project’s Template, just before the closing </head>
tag.
Note the speed option in the docs say this:
[speed] is a number representing the amount of time in milliseconds that it should take to scroll 1000px. Scroll distances shorter than that will take less time, and scroll distances longer than that will take more time. The default is 300ms.
If you need/want your Anchor link to stop (or leave some space) before a Component on the page you can use the Scroll Padding Tailwind Utility class.
Place the following class scroll-mt-[300px]
in the CSS Classes box under Advanced on the Component you're scrolling too. This class will set a offset of 300px, but you can change it to the pixel value you require.
During the winter you might want to add snow to your website…
Adding a snow effect to your website is a fun way to bring festive cheer to your projects in December. It creates a cozy seasonal atmosphere, delights visitors, and adds personality to your design, making your site more memorable and shareable. In this tutorial, we’ll show you how to easily implement a lightweight snow animation using JavaScript in Elements, perfect for enhancing your holiday-themed websites.
The completed project file is included below for your convenience.
Links to the resources used int he Tutorial:
Snowstorm JS Script by Scott Schiller: https://www.schillmania.com/projects/snowstorm/
If you'd like to create the Custom Component show in the Tutorial, copy and paste the following code into the the Template Properties areas in Elements.
Place the following code in your Template:
Place the following code into the Properties:
The following tutorial will show you how to make a two coloumn layout in Elements either the flex or grid components.
The following tutorial will show you how to quickly create a website banner with background image and overlayed text.
This tutorial will show you how to design and build a flexible card for use on your website.
How to make a sticky menu and change it's visual properties on scroll
To make a menu sticky, you need to put the menu and all contents in a container (site wrapper) along with making the following changes to the menu settings:
Layout > Position set to Sticky.
Layout > Z-Index > Custom set to 100.
Layout > Type > Uniform > Inset 0.
Watch the following tutorial to see how to build a Sticky Menu, along with adding a drop shadow and frosted glass effect.
In this advanced tutorial we use some Javascript to adjust the look of the menu when the user scrolls down the page.
You can click here to open the Space Demo Project in Elements.
Adding and Removing Standard CSS Classes:
Adding and Removing Tailwind Classes: