Szia! Örülök, hogy itt vagy ツ
A tartalomjegyzékből kiválaszthatod a kért stíílus kódot, kattintással a megfelelő elemhez kerülsz.
Akkor kezdhetünk is dolgozni.
Tartalomjegyzék
#1. Szöveg kiemelése egy adott színnel
Ha egy szövegrészt szeretnél kiemelni egy adott színnel, csak jelöld ki a szövegből azokat a szavakat amelyeket kiemelnél( U̲) és használd a következő kódot a szövegelemre:
<style>
#Id u {
text-decoration: none !important;
background-color: #000000;
}
</style>
Cseréld le a vastaggal szedett elemeket a sajátodra (szövegelem ID és a háttérszín)
Szöveg kiemelése háttérszínnel
#2. Szöveg aláhúzása egy adott színnel
Ha egy szövegrészt szeretnél aláhúzni egy adott színnel, csak jelöld ki a szöveget ( U̲)
és használd a következő kódot a szövegelemre:
<style>
#headline-d28a072a u {
text-decoration-color: #50E3C2 !important;
}
</style>
A text headline ID-ja mindenkinél és minden elemnél más és más, ezért fontos, hogy lecseréld a sajátodra.
Húzz a text elem fölé egy html elemet
Az “edit code”-ra kattintva tedd be a kimásolt kódot.
#headline-d28a072a cseréld le a saját szövegelem azonosítódra és a text-decoration-color: #........... ide a te színkódodat illeszd be és íme:
Szöveg aláhúzás más színnel
#3. Ragyogás effekt a címben
Formázd meg a szöveged, méret és betűtípus majd húzz egy HTML elemet a szöveg fölé és illeszd be a következő kódot:
<style>
/* Glowing Effect to Text */
#elementID {
text-shadow: 0 0 5px #5DABB8, 0 0 10px #5DABB8, 0 0 15px #5DABB8, 0 0 20px #ff00ff;
}
/* Additional styling to ensure the glow is visible */
#elementID {
color: #fff; /* Text color */
font-weight: bold;
font-size: 24px; /* Adjust as needed */
}
</style>
A feketével jelölt elemek tetszőleges színre, méretre állíthatóak.
Large Call to Action Headline
#4. Pulzáló szöveg
Húzz egy html elemet a szöveg fölé és illeszd be a következő kódot
<style>
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
#ID{
animation: blink 2s infinite;
color: #ff0000;
}
</style>
A szöveg ID-t és a színt ne feledd kicserélni a sajátodra.
A color: lehet szövegesen mint, red, yellow, blue stb. vagy a megfelelő #HEX vagy RGB kód.
Nyugodtan próbáld ki elrontani nem tudod ☺
Pulzáló szöveg
#5. Mozgó gradiens színek alkalmazása szövegeken
Húzz a szöveg fölé egy html elelmet és illeszd be a következő kódot:
<style>
#ID {
background: linear-gradient(90deg, #ffff00, #0000ff) ;
background-clip: text !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
animation: slide 4s linear infinite;
background-size: 200% auto;
}
@keyframes slide {
100% {
background-position: -200% center;
}
}
</style>
Az #ID elemet cseréld a saját szöveg elemedre és a színeket tetszés szerint alakítatod
Large Call to Action Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias, numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt, recusandae.
#6. Kép animálás
Húzz a képe elem fölé egy html elemet és illeszd be a következő kódot:
<style>
#image-f8f8f515 {
animation: morph 8s ease-in-out infinite 1s;
}
@keyframes morph {
0% {
border-radius: 60% 40% 30% 70%/60% 30% 70% 40%
}
50% {
border-radius: 30% 60% 70% 40%/50% 60% 30% 60%
}
100% {
border-radius: 60% 40% 30% 70%/60% 30% 70% 40%
}
}
</style>
Large Call to Action Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias, numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt, recusandae.
#7. Ragyogó blokk árnyék
Ha egy blokkot szeretnél árnyékolni, akkor ezt a kódot illeszd be a blokk elem főlé html segítségével.
<style>
#row-94c3c7e7 {
box-shadow: 0 4px 8px #00ffff, 0 6px 20px #00ffff;
}
/* colored shadow */
#row-94c3c7e7 {
box-shadow: 0 4px 8px #00ffff, 0 6px 20px #00ffff; /* red shadow with hex code and alpha for transparency */
}
/* padding and background to ensure the shadow is visible */
#row-94c3c7e7{
padding: 20px;
background-color: #990011;
margin: 20px 0;
}
</style>
A #row-94c3c7e7 ID-t cseréld a sajátodra, a 00ffff szín az árnyék színe. és a 990011 szín pedig a doboz belső színe.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias, numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt, recusandae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias, numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt, recusandae.
Ugyanez sárga ányékkal, az árnyék szín: #F2EA02 és a doboz szín fehér
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias, numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt, recusandae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias, numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt, recusandae.
#8. Színátmenet hozzáadása egy gombhoz
Készítsd el a gombod, írd be a szöveget, az URL-t és utánna egy html elemet húzz a gomb fölé, és tedd be ezt a kódot:
<style>
#ID {
background: rgb(76,58,180);
background: linear-gradient(90deg, rgba(76,58,180,1) 0%, rgba(96,53,215,1) 25%, rgba(29,199,253,1) 50%, rgba(50,227,192,1) 75%, rgba(69,252,130,1) 100%);
}
</style>
A cssgradient.io oldalon el tudod készíteni a színátmeneted, csak ki kell másolnod és beillesztened a kódsorba.
Gyakorlatilag a két background sort kell lecserélned a sajátodra, az elem ID-val egyetemben.
#9. Lebegő gomb egér ráhúzáskor
<style>
#BUTTON-ID {
transition: 0.5s;
background-size: 200% auto;
display: block;
}
#BUTTON-ID:hover {
background-position: right center; /* change the direction of the change here */
text-decoration: none;
transform: translateY(-10px);
}
</style>
Ha minden gomb elemhez szeretnéd alkalmazni, akkor így tedd be a gomb változót.:
[id^="button-"].
Elég az oldalon egy helyen elhelyezni.
Most húzd az egeret a gomb fölé és nézd meg mi történik:
#10. Gradiens fedvény hozzáadása a szakaszokhoz
HTML/CSS
Használd a következő CSS-kódot
- Itt megtalálhatod a tökéletes színátmenetet a CSS Gradient segítségével
Kattints ide, hogy az oldalra juss:
- Add hozzá a HTML/CSS elemet az oldaladhoz, és add hozzá a következő kódot:
<style>
#SECTIONID {
background-image:
linear-gradient(GRADIENTHERE),
url('URLHERE');
width: 100%;
text-align: center;
}
</style>
- Cseréld le a FEKETE szöveget a kért elemekkel
#SECTIONID: Az a szakasz, amelyhez hozzá szeretnéd adni a fedvényt.
GRADIENTHERE: A CSSGradient.io webhelyről kapott gradiens kód
URLHERE: A háttérként használni kívánt kép URL- je
Large Call to Action Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias, numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt, recusandae.
#11. Képek animációja görgetéskor
Követendő lépések
- Add hozzá a következő kódot az oldalbeállításokban a fejlécedhez
Az oldalon jobb oldalt fent a Popups mellett: Setting->"Edit header code"
Le kell görgess bal oldali panelen az oldal aljára és oda illeszd be ezt a kódot:
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
- A következő kódot az oldal láblécébe kell beillesztened
Ugyanúgy oldalbeállítások: Setting->"Edit footer code"
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({
// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
offset: 120, // offset (in px) from the original trigger point
delay: 0, // values from 0 to 3000, with step 50ms
duration: 400, // values from 0 to 3000, with step 50ms
easing: 'ease', // default easing for AOS animations
anchorPlacement: 'top-bottom',
});
</script>
- Add hozzá a HTML/CSS Systeme.io elemet, ahol az animációt szeretnéd használni.
<img data-aos="ANIMATION" width="100%" src="ImageLinkHere">
A fekete elemeket le kell cseréld.
Az ANIMATION helyére tedd be a kódba az animáció nevét (pl. flip-left)
ImageLinkHere helyére a kép URL-jét illeszd be. (Pl: https://d1yei2z3i6k35z.cloudfront.net/5541462/65632147efc84_41.webp)
A HTML elemet húzd közvetlen a kép felé és oda illeszd a már kész kódod.
Valami ilyesminek kell kinéznie:
<img data-aos="flip-left"width="100%"https://d1yei2z3i6k35z.cloudfront.net/5541462/65632147efc84_41.webp">
A képeid URL-jét két módon is eléred:
1. amikor feltöltöd a képet és kiválasztod azt a feltöltési ablakban a jobb gombra kattintva válaszd ki a "képhivatkozás másolása" így a vágólapra került a kép URL-je csak illeszd a megfelelő helyre.
2. az előnézeti módban a képed fölé vidd az egeret, itt is a jobb gombot lenyomva válaszd a "képhivatkozás, vagy képcím" másolása lehetőséget. Ugyanúgy vágólapra másoltad.
Fade Animations
- fade
- fade-up
- fade-down
- fade-left
- fade-right
- fade-up-right
- fade-up-left
- fade-down-right
- fade-down-left
Flip Animations
- flip-up
- flip-down
- flip-left
- flip-right
Zoom Animations
- zoom-in
- zoom-in-up
- zoom-in-down
- zoom-in-left
- zoom-in-right
- zoom-out
- zoom-out-up
- zoom-out-down
- zoom-out-left
- zoom-out-right
fade-down
flip-left