Andre_99
-
Posts
6 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by Andre_99
-
-
-
I have manged to move the arrow longer down. So my issue is solved
Thanks for replay anyways! -
On 5/10/2021 at 10:10 PM, Wolfsilon said:
Hello there,
To add an animated arrow down element, we'll need to use a Code Block and Custom CSS.
1) Create a Code Block and place the block directly underneath the "Get A Quote" button.
2) In the Code Block menu, you'll see "<p> hello world! </p>" -- Remove the entire line and replace it with the following:
<div class="arrow"> <span></span> </div>
3) You can now save and close the page editor. Return to "Home" and navigate to Design > Custom CSS.
4) To animate and place the element onto your website you can paste the following into the Custom CSS box:
.arrow{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .arrow span{ display: block; width: 30px; height: 30px; border-bottom: 3px solid #000; border-right: 3px solid #000; transform: rotate(45deg); margin: -10px; animation: animate 1.8s ease infinite; } @keyframes animate { 0%{ opacity: 0; transform: rotate(45deg) translate(-20px,-20px); } 50%{ opacity: 1; } 100%{ opacity: 0; transform: rotate(45deg) translate(20px,20px); } }
5) You should start to see the arrow animate downward in the center of the page, directly under the "Get A Quote" button.
You can customize the "stroke" of the arrow by adjusting the dimensions of the Border-Bottom and Border-Right "px" properties.
You can adjust the color of the arrow ("stroke") by inserting a hex/rgb/rgba color of your choice. Simply replace the "#000" with the color/format of your choice for both Border-Bottom and Border-Right.
You can adjust the speed of the downwards animation by entering new timings and transitions. The CSS format of the animation shown above is listed below and I would encourage you to experiment with different properties for transition-duration and timing-function.
Let me know if you need any additional help. Hope this provided a solution for you!
Cheers,
Dan
The arrow and codes worked perfect!
but i have an issue. the arrow is to highly placed on my site. i want to be just at very bottom of my background photo.
i made a circle of where i would like the arrow to be placed compared to where it is placed
-
On 5/25/2020 at 12:32 AM, tuanphan said:
Add to Home > Design > Custom CSS
/* First name */ .field.first-name .caption-text { visibility: hidden; } .field.first-name .caption-text:before { visibility: visible; content: "Voornaam"; } /* last name */ .field.last-name .caption-text { visibility: hidden; } .field.last-name .caption-text:before { visibility: visible; content: "Achternaam"; }
Thanks Alot. Worked perfect for me aswell
Changing the date format of blog posts
in Customize with code
Posted
Okay so it seems like to change to an European format date. it does work if you change it to English (United Kingdom) The format will change immediately to dd/mm/yyyy.
However i had my settings on Norwegian. yet the Date format was not in an European format. So changing to English (United Kingdom) is the most easy way to do it