CSS kódok

Szia! Örülök, hogy itt vagy ツ

A tartalomjegyzékből kiválaszthatod a kért stíluskódot, kattintással a megfelelő elemhez kerülsz.

Akkor kezdhetünk is dolgozni.

#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

Vissza a tartalomjegyzékre

#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

Vissza a tartalomjegyzékre

#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

Vissza a tartalomjegyzékre

#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

Vissza a tartalomjegyzékre

#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.

Vissza a tartalomjegyzékre

#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.

Vissza a tartalomjegyzékre

#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.

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.

Vissza a tartalomjegyzékre

#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.

Ez a színátmenetes gomb

Vissza a tartalomjegyzékre

#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:

Vissza a tartalomjegyzékre

#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:

https://cssgradient.io/

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.

Vissza a tartalomjegyzékre

#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:

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

Vissza a tartalomjegyzékre

#12. Egész doboz színváltás egér ráhúzásakor

Az elem kódja:

<style>

#row-662a2f79 {

background-color: #ffffff;

-webkit-transition: background-color 0.4s linear;

-moz-transition: background-color 0.4s linear;

-o-transition: background-color 0.4s linear;

-ms-transition: background-color 0.4s linear;

transition: background-color 0.4s linear;

}

#row-662a2f79:hover {

background-color: #30E4F7;

}

</style>

#row-662a2f79: Ez az elem azonosítója (ID-je), a te dobozodra mutat.

hover: Ez a CSS azt jelenti, hogy az elemre rámutat az egér.

background-color: #30E4F7;:

Ez adja meg az új háttérszínt akkor, amikor az egér az elem fölé kerül.

Tehát, amikor az egér az adott #row-662a2f79 doboz fölé mozdul, a CSS működésbe lép, és a háttérszín fehérből (#ffffff) élénk ciánkékre (#30E4F7) vált.

Cseréld le a saját elemeiddel

Miért érdemes megvenned?

Rakéta sebességgel megtalálod amit keresel

Nem kell órákat, napokat töltened a kereséssel

Garantálom, hogy lesz közben egy csomó ötleted

Tűzd ki a könyvjelződbe, mindig meg fogod taláni

Vissza a tartalomjegyzékre

#13. Színváltó doboz háttér

Változtatsd meg a dobozok háttérszínét egér ráhúzáskor:

Húzz be egy 3 szakasos elrendezést és a 3 szakaszba tegyél be mindegyikbe külön - külön egy egy szakaszt. Ezen szakaszok ID-át fogjuk használni.

Itt a kód:

<style>

#row-56cb4b52,

#row-633cdd7c,

#row-33e95d09 {

background-color: #990011 !important;

color: #000000 !important;

transition: background-color 0.4s linear, color 0.4s linear;

}

#row-56cb4b52:hover,

#row-633cdd7c:hover,

#row-33e95d09:hover {

background-color: #000000 !important;

color: #990011 !important;

}

</style>

Menj be a Page Builderbe.
Húzz be egy Custom HTML blokkot (vagy használd a meglévőt).
Másold be a fenti teljes kódrészt – csak ezt.
Mentsd el (Save), majd Publish az oldaladat.
Frissítsd a publikált oldalt, és teszteld, hogy az adott három elem (azonosítóik: #row-56cb4b52, #row-633cdd7c, #row-33e95d09) valóban fehér hátterűvé és piros szövegűvé változik-e hover alatt.

🔧 Mi történik

Első szabály beállítja, hogy alapban piros (#990011) a doboz és fehér a szöveg.
transition gondoskodik arról, hogy a színváltás sima legyen (0.4 másodperc lineáris animációval).
Második szabály hatályba lép, amikor az egér fölé kerül: fekete háttér, fehér szöveg.

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.

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.

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.

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.

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.

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.

Vissza a tartalomjegyzékre

#14. Több képes csúszka

<!DOCTYPE html>

<title>Running Image</title>

<style>

.carousel-container {

overflow: hidden;

width: 100%;

}

.carousel {

display: flex;

will-change: transform;

}

.carousel img {

width: 100px;

height: 100px;

margin-right: 10px;

flex-shrink: 0;

}

@media (max-width: 768px) {

.carousel img {

width: 300px !important;

height: 300px !important;

}

</style>

</div>

let speed = 40;

let direction = 'left';

let animationFrameId;

function startCarousel() {

cancelAnimationFrame(animationFrameId);

const carousel = document.getElementById('carousel');

const totalWidth = carousel.scrollWidth;

let scrollAmount = 0;

function step() {

const images = carousel.getElementsByTagName('img');

const imageWidth = images[0].offsetWidth + parseInt(getComputedStyle(images[0]).marginRight);

scrollAmount += direction === 'left' ? -speed / 60 : speed / 60;

if (direction === 'left' && Math.abs(scrollAmount) >= imageWidth) {

carousel.appendChild(carousel.firstElementChild);

scrollAmount += imageWidth;

} else if (direction === 'right' && Math.abs(scrollAmount) >= imageWidth) {

carousel.insertBefore(carousel.lastElementChild, carousel.firstElementChild);

scrollAmount -= imageWidth;

}

carousel.style.transform = `translateX(${scrollAmount}px)`;

animationFrameId = requestAnimationFrame(step);

}

animationFrameId = requestAnimationFrame(step);

}

document.addEventListener('DOMContentLoaded', function () {

startCarousel();

});

</script>

</body>

</html>

Running Image

Egyszerű változat

<style>

#rawhtml-8f1cdf20 {

overflow: hidden;

width: 100%;

}

#rawhtml-8f1cdf20 .carousel-track {

display: flex;

gap: 20px;

animation: scroll 12s linear infinite;

}

#rawhtml-8f1cdf20 .carousel-track img {

width: 150px;

height: 150px;

margin-right: 4px;

object-fit: cover;

}

@keyframes scroll {

0% { transform: translateX(0); }

100% { transform: translateX(-50%); }

}

@media (max-width: 768px) {

#rawhtml-8f1cdf20 .carousel-track img {

width: 300px;

height: 300px;

}

</style>

</div>

🌀 Működés

A .carousel-track folyamatosan balra mozog a scroll kulcssframes hatására.
A képek duplázása biztosítja a zökkenőmentes végtelen hurkot.
A @keyframes scroll 100% -50% eltolásával egyszerre mozog az egész sor.
A 12 másodperces animációt tetszőlegesen gyorsíthatod (pl. 8s‑re).

🎯 További testreszabás

Sebesség: módosítsd a scroll 12s értékét.
Képméret: állítsd át az img szélességet és magasságot.
Távolság: változtathatod a margin-right: 4px értéket.
Képek száma: ha több képet szeretnél használni, egyszerűen illeszd be az URL-eket, majd ismételd őket a duplázáshoz.

⚠️ Mi történik, ha nem egységes méretű képeket használunk?

Elmozdulás / ugrálás – Az eltérő méretű képek miatt a .carousel-track animáció közben eltolódik, ami ugráló hatást ad
Esztétikai és UX problémák – A kisebb és nagyobb képek közötti váltások vizuálisan zavaróak lehetnek, különösen egy végtelen görgetésnél.

✅ Három megoldás:

1. Egységesített képméretek előkészítése

Előre szerkeszd a képeket, hogy mind azonos szélességű és arányú legyen (pl. 150×150 vagy 300×300). Ezzel biztonságosan elkerülöd az eltolásokat és a hibás animációkat.

A modern böngészők támogatják a gap használatát

Ez biztosítja, hogy minden képszélesség között pontosan 20px távolság legyen.

A csúszka irányának megváltoztatásához egyszerűen módosítani kell a CSS @keyframes animációját, illetve a translateX értékeket felcserélni. Ezzel a csúszka jobbról balra helyett balról jobbra fog futni. 0%-nál balra helyezkedik (kezdet), 100%-nál vissza 0-ra – így jobbról balra helyett balról jobbra irányú mozgást kapunk.

<style>

#rawhtml-8f1cdf20 .carousel {

overflow: hidden;

width: 100%;

}

#rawhtml-8f1cdf20 .carousel-track {

display: flex;

gap: 20px; /* képek közti távolság */

animation: scroll-reverse 12s linear infinite;

}

#rawhtml-8f1cdf20 .carousel-track img {

width: 150px;

height: 150px;

object-fit: cover;

}

@keyframes scroll-reverse {

0% { transform: translateX(-50%); }

100% { transform: translateX(0); }

}

@media (max-width: 768px) {

#rawhtml-8f1cdf20 .carousel-track img {

width: 300px;

height: 300px;

}

</style>

</div>

Vissza a tartalomjegyzékre

#15. Vissza a tetejére gomb

Nyisd meg az oldal szerkesztőjét a Systeme.io-ban.
A jobb oldali vagy alsó panelról válaszd ki a „Raw HTML”/„Custom HTML” blokkot,

A megjelenő szerkesztőablakba írd be:

html

MásolásSzerkesztés

ére">↑</button>

Head be azt illeszd be

<style>

#scrollTopBtn {

display: none;

position: fixed;

bottom: 20px;

right: 20px;

z-index: 9999;

background-color: #000;

color: #fff;

border: none;

border-radius: 50%;

padding: 12px;

cursor: pointer;

font-size: 18px;

box-shadow: 0 2px 6px rgba(0,0,0,0.3);

transition: opacity 0.3s, transform 0.3s;

}

#scrollTopBtn:hover {

background-color: #258CB2;

}

</style>

A footerbe meg ezt:

document.addEventListener("DOMContentLoaded", () => {

const btn = document.getElementById("scrollTopBtn");

if (!btn) return;

window.addEventListener("scroll", () => {

btn.style.display = window.scrollY > 200 ? "block" : "none";

});

btn.addEventListener("click", () => {

window.scrollTo({ top: 0, behavior: "smooth" });

});

</script>

Íme, hogyan módosíthatod egyszerűen a gomb hátterét, a nyíl színét, a méretét és egyéb stílusait — közvetlenül a CSS-ben, amit a Page Settings → Head részbe illesztesz

👇

<style>

#scrollTopBtn {

/* ✅ Háttérszín módosítása */

background-color: #000; /* → változtasd #000 helyett pl. #FF0000, #30E4F7, stb. */

/* ✅ Nyíl (szöveg) színének beállítása */

color: #fff; /* → legyen pl. #000, #30E4F7, stb. */

/* ✅ Méret, forma és pozíció */

width: 50px; /* → szélesség */

height: 50px; /* → magasság */

padding: 0; /* opcionális belső margó, ha fix méret van */

font-size: 24px; /* nyíl mérete */

border-radius: 8px; /* sarkok lekerekítése, 50% kerek gombhoz */

position: fixed;

bottom: 25px;

right: 25px;

}

#scrollTopBtn:hover {

/* Hover állapot finomhangolása */

background-color: #222; /* sötétebb árnyalat */

opacity: 0.9;

transform: scale(1.1); /* kicsit „nagyobbodik” hoverkor */

}

</style>

Tulajdonság

background-color

color

width + height

font-size

border-radius

padding

bottom, right

transform: scale()

Mit változtat

Gomb háttere

A nyíl színe

Gomb mérete (négyzet vagy téglalap)

Nyíl mérete és olvashatósága

Sarkok íve, ha 50% → kerek lesz a gomb

Belső tér – ha fix méret, ezt nullára érdemes

Távolság a képernyő széleitől

Nagyítás hoverkor, hogy „liftes” legyen

A szöveg színe és háttere változik

<style>

#text-e8bb7907{

background: #30e4f7;

color: #990011;

}

::-moz-selection {

background: #30e4f7;

color: #990011;

}

</style>

Vissza a tartalomjegyzékre

#16. Képkeretek

Más más keretet adhatsz a képeidnek, használd ezeket a kódokat:

<style>

#image ID { clip-path: megfelelő kódot keresd meg; !important; }

</style>

Húzz be egy HTML elemet a képed alá, add meg a kép ID -át a kódban, másold ki és mentsd el.

Olyan formára alakítja a képed ahogy itt látod.

Jobbra mutat

<style>

#image ID { clip-path: polygon(0 0,86% 0,100% 50%,86% 100%,0 100%) !important; }

</style>

Háromszög alakzat

<style>

#image ID{ clip-path: polygon(50% 0%, 0% 100%, 100% 100%); !important; }

</style>

Trapéz

<style>

#image ID { clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); !important; }

</style>

Paralelogramma

<style>

#image ID { clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); !important; }

</style>

Rombusz

<style>

#image ID { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); !important; }

</style>

Ötszög

<style>

#image ID { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); !important; }

</style>

Hatszög

<style>

#image ID {clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);!important; }

</style>

Hétszög

<style>

#image ID {clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);!important; }

</style>

Nyolcszög

<style>

#image ID {clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);!important; }

</style>

Kilencszög

<style>

#image ID {clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);!important; }

</style>

Tízszög

<style>

#image ID {clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);!important; }

</style>

Fazetta

<style>

#image ID {clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);!important; }

</style>

Robbet

<style>

#image ID {clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);!important; }

</style>

Balra nyíl

<style>

#image ID {clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);!important; }

</style>

Jobbra nyíl

<style>

#image ID {clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%)}

</style>

Left point

<style>

#image ID {clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);!important; }

</style>

Right point

<style>

#image ID {clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);!important; }

</style>

Left Chevron

<style>

#image ID {clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);}

</style>

Right Chevron

<style>

#image ID {clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);}

</style>

Csillag

<style>

#image ID {clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);!important; }

</style>

Üzenet

<style>

#image ID {clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);}

</style>

Keret

<style>

#image ID {clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);}

</style>

Kör

<style>

#image ID {clip-path: circle(50% at 50% 50%);}

</style>

3D jobbra

<style>

#image ID {clip-path: polygon(0 0,100% 0,100% 80%,0 100%)}

</style>

3D balra

<style>

#image ID {clip-path: polygon(0 0,100% 0,100% 100%,0 80%)}

</style>

Slant right

<style>

#image ID {clip-path: polygon(0 0,100% 0,100% 100%,0 80%)}

</style>

Vissza a tartalomjegyzékre

#17. Rajzolós SVG

🚀 Komplett példa használatra

1️⃣ Page Settings → Custom Code → Head

<style>

.svg-draw {

width: 100%;

max-width: 800px;

margin: 40px auto;

display: block;

}

.svg-draw text {

font-size: 48px;

font-family: sans-serif;

fill: none;

stroke: #30E4F7;

stroke-width: 2;

stroke-dasharray: 1000;

stroke-dashoffset: 1000;

animation: drawAnimation 3s ease-out forwards;

}

@keyframes drawAnimation {

to {

stroke-dashoffset: 0;

fill: #30E4F7;

}

</style>

2️⃣ Raw HTML blokk – SVG kód a tetszőleges szöveggel

Tetszőleges szöveged itt

</text>

</svg>

🛠 Testreszabási lehetőségek

Szín módosítása:
- stroke: #30E4F7; és fill: #30E4F7; (ez az animáció végén megjelenő szín)
Animáció hossza:
- animation: drawAnimation 3s ease-out forwards; → pl. 2s vagy 4s
Vonalvastagság:
- stroke-width: 2; → 1–4px között változtatható
Betűméret:
- font-size: 48px; → módosítható igény szerint
Vonalrajzolás finomítása:
- stroke-dasharray: 1000; stroke-dashoffset: 1000; → növeld csökkentsd, hogy jobban igazodjon a szöveg hosszához

végtelen animációval

🔄 1. CSS – Page Settings → Custom Code → Head

Illeszd be ezt:

<style>

.svg-draw {

width: 100%;

max-width: 800px;

margin: 40px auto;

display: block;

}

.svg-draw text {

font-size: 48px;

font-family: sans-serif;

fill: none;

stroke: #30E4F7;

stroke-width: 2;

stroke-dasharray: 1000;

stroke-dashoffset: 1000;

animation: drawLoop 3s linear infinite;

}

@keyframes drawLoop {

to {

stroke-dashoffset: 0;

}

</style>

📝 2. HTML – Raw HTML blokk

Másold be a Raw HTML blokkba, ahol szeretnéd látni az animációt.

Tetszőleges szöveged

</text>

</svg>

#18. WhatsApp "megosztom" gomb

Ha valaki rákattint erre a gombra, megnyílik nála a WhatsApp, és el tudja küldeni az oldalad linkjét egy ismerősének vagy egy csoportba. A WhatsApp Click to Chat funkciója közvetlenül meg tudja nyitni a WhatsAppot vagy a WhatsApp Webet.

Nem kell kézzel kimásolnia a linket, mert a gomb automatikusan beleírja az üzenetbe az oldal címét és linkjét.

Mit kell beállítanod?

Semmit.

Csak másold be a teljes kódot egy Systeme.io Raw HTML elembe. A gomb mindig azt az oldalt fogja megosztani, amelyiken éppen van.

Fontos

A látogató dönti el, hogy kinek küldi el az oldalt. A gomb nem küld üzenetet automatikusan.

Hogyan tedd be a Systeme.io oldaladba?

Nyisd meg az oldalt szerkesztésre.

Húzz be egy Raw HTML elemet.

Másold bele a teljes kódot.

Mentsd el az oldalt.

Nyisd meg az élő oldalt, és ott teszteld.

A Raw HTML elem tartalma nem mindig látszik tökéletesen a szerkesztőben, ezért mindig az élő oldalon ellenőrizd.

<!-- =========================================

KG – WhatsApp megosztó gomb

========================================== -->

<span>Megosztás WhatsAppon</span>

</button>

</div>

<style>

/* Csak a WhatsApp-gombra érvényes CSS */

.kg-scope-whatsapp-share {

width: 100%;

max-width: 420px;

margin: 20px auto;

}

.kg-scope-whatsapp-share .kg-whatsapp-share-button {

display: flex;

align-items: center;

justify-content: center;

gap: 11px;

width: 100%;

min-height: 56px;

padding: 13px 22px;

border: 0;

border-radius: 12px;

background-color: #25d366;

color: #ffffff;

box-shadow: 0 8px 22px rgba(37, 211, 102, 0.25);

font-family: inherit;

font-size: 16px;

font-weight: 700;

cursor: pointer;

transition:

transform 0.2s ease,

box-shadow 0.2s ease;

}

.kg-scope-whatsapp-share .kg-whatsapp-share-button:hover {

transform: translateY(-2px);

box-shadow: 0 11px 27px rgba(37, 211, 102, 0.35);

}

.kg-scope-whatsapp-share .kg-whatsapp-share-button:active {

transform: translateY(0);

}

.kg-scope-whatsapp-share .kg-whatsapp-share-button:focus-visible {

outline: 3px solid #111111;

outline-offset: 3px;

}

.kg-scope-whatsapp-share .kg-whatsapp-share-icon {

display: flex;

align-items: center;

justify-content: center;

width: 29px;

height: 29px;

border: 2px solid currentColor;

border-radius: 50%;

}

</style>

(function () {

"use strict";

const buttons = document.querySelectorAll(

".kg-scope-whatsapp-share .kg-whatsapp-share-button"

);

buttons.forEach(function (button) {

button.addEventListener("click", function () {

/* Elsősorban a canonical URL-t használjuk. */

const canonical = document.querySelector(

'link[rel="canonical"]'

);

const pageUrl = canonical

? canonical.href

: window.location.href.split("#")[0];

const pageTitle =

document.title || "Ezt az oldalt érdemes megnézned";

const message =

pageTitle + "\n\n" +

"Nézd meg ezt az oldalt:\n" +

pageUrl;

const whatsappUrl =

"https://wa.me/?text=" +

encodeURIComponent(message);

window.open(

whatsappUrl,

"_blank",

"noopener,noreferrer"

);

});

})();

</script>

A látogatónak nem kell linket másolnia vagy keresgélnie — egy kattintással megoszthatja az oldalad, elmentheti Pinterestre, vagy átléphet a YouTube-csatornádra

Vissza a tartalomjegyzékre

#19. Facebook "megosztom" gomb

Ha valaki rákattint, megnyílik a Facebook megosztási ablaka.

Ott a látogató el tudja dönteni, hogy:

a saját profilján osztja meg;
egy csoportba teszi ki;
üzenetben küldi tovább;
vagy ír mellé saját szöveget.

A gomb automatikusan a jelenlegi oldal linkjét adja át a Facebooknak.

Mit kell beállítanod?

Semmit.

Másold be a teljes kódot egy Systeme.io Raw HTML elembe, és már működik is.

Fontos

A Facebookon megjelenő kép, cím és leírás nem a gombból érkezik.

Ezeket az oldal megosztási vagy Open Graph beállításai határozzák meg, magyarán az oldal beállításnál a - Social media image -nál mindenképp tölts fel képet!

Hogyan tedd be a Systeme.io oldaladba?

Nyisd meg az oldalt szerkesztésre.

Húzz be egy Raw HTML elemet.

Másold bele a teljes kódot.

Mentsd el az oldalt.

Nyisd meg az élő oldalt, és ott teszteld.

A Raw HTML elem tartalma nem mindig látszik tökéletesen a szerkesztőben, ezért mindig az élő oldalon ellenőrizd.

<!-- =========================================

KG – Facebook megosztó gomb

========================================== -->

<span>Megosztás Facebookon</span>

</button>

</div>

<style>

/* Csak a Facebook-gombra érvényes CSS */

.kg-scope-facebook-share {

width: 100%;

max-width: 420px;

margin: 20px auto;

}

.kg-scope-facebook-share .kg-facebook-share-button {

display: flex;

align-items: center;

justify-content: center;

gap: 11px;

width: 100%;

min-height: 56px;

padding: 13px 22px;

border: 0;

border-radius: 12px;

background-color: #1877f2;

color: #ffffff;

box-shadow: 0 8px 22px rgba(24, 119, 242, 0.25);

font-family: inherit;

font-size: 16px;

font-weight: 700;

cursor: pointer;

transition:

transform 0.2s ease,

box-shadow 0.2s ease;

}

.kg-scope-facebook-share .kg-facebook-share-button:hover {

transform: translateY(-2px);

box-shadow: 0 11px 27px rgba(24, 119, 242, 0.35);

}

.kg-scope-facebook-share .kg-facebook-share-button:active {

transform: translateY(0);

}

.kg-scope-facebook-share .kg-facebook-share-button:focus-visible {

outline: 3px solid #111111;

outline-offset: 3px;

}

.kg-scope-facebook-share .kg-facebook-share-icon {

display: flex;

align-items: center;

justify-content: center;

width: 29px;

height: 29px;

border: 2px solid currentColor;

border-radius: 50%;

font-family: Arial, sans-serif;

font-size: 23px;

font-weight: 800;

}

</style>

(function () {

"use strict";

const buttons = document.querySelectorAll(

".kg-scope-facebook-share .kg-facebook-share-button"

);

buttons.forEach(function (button) {

button.addEventListener("click", function () {

const canonical = document.querySelector(

'link[rel="canonical"]'

);

const pageUrl = canonical

? canonical.href

: window.location.href.split("#")[0];

const facebookUrl =

"https://www.facebook.com/sharer/sharer.php?u=" +

encodeURIComponent(pageUrl);

window.open(

facebookUrl,

"kgFacebookShare",

"width=680,height=620,resizable=yes,scrollbars=yes"

);

});

})();

</script>

A látogatónak nem kell linket másolnia vagy keresgélnie — egy kattintással megoszthatja az oldalad, elmentheti Pinterestre, vagy átléphet a YouTube-csatornádra

Vissza a tartalomjegyzékre

#20. Pinterest mentés gomb

A Pinterest-gombbal a látogató elmentheti az oldaladon található egyik képet a saját Pinterest-táblájára.

Kattintás után a Pinterest megmutatja az oldalon található képeket, és a látogató kiválaszthatja, melyiket szeretné elmenteni.

Ez különösen hasznos lehet például:

recepteknél;
idézetes képeknél;
infografikáknál;
lakberendezési ötleteknél;
oktatóanyagoknál;
vizuális inspirációknál.

Mit kell beállítanod?

Általában semmit.

Másold be a teljes kódot egy Systeme.io Raw HTML elembe.

Fontos

Érdemes az oldalra legalább egy szép, jól olvasható képet tenni, mert a Pinterest ezt fogja felajánlani mentésre.

A Pinteresthez tartozó scriptet egy oldalon csak egyszer kell betölteni.

Ha több Pinterest-gombot használsz ugyanazon az oldalon, a scriptet ne másold be többször.

Hogyan tedd be a Systeme.io oldaladba?

Nyisd meg az oldalt szerkesztésre.

Húzz be egy Raw HTML elemet.

Másold bele a teljes kódot.

Mentsd el az oldalt.

Nyisd meg az élő oldalt, és ott teszteld.

A Raw HTML elem tartalma nem mindig látszik tökéletesen a szerkesztőben, ezért mindig az élő oldalon ellenőrizd.

<!-- =========================================

KG – Pinterest mentés gomb

A Pinterest scriptet oldalanként csak

egyszer szabad betölteni.

========================================== -->

href="https://www.pinterest.com/pin/create/button/"

class="kg-pinterest-save-button"

data-pin-do="buttonBookmark"

data-pin-custom="true"

<span>Mentés Pinterestre</span>

</a>

</div>

<style>

/* Csak a Pinterest-gombra érvényes CSS */

.kg-scope-pinterest-save {

width: 100%;

max-width: 420px;

margin: 20px auto;

}

.kg-scope-pinterest-save .kg-pinterest-save-button {

display: flex;

align-items: center;

justify-content: center;

gap: 11px;

width: 100%;

min-height: 56px;

padding: 13px 22px;

border-radius: 12px;

box-sizing: border-box;

background-color: #e60023;

color: #ffffff !important;

box-shadow: 0 8px 22px rgba(230, 0, 35, 0.25);

font-family: inherit;

font-size: 16px;

font-weight: 700;

text-decoration: none !important;

cursor: pointer;

transition:

transform 0.2s ease,

box-shadow 0.2s ease;

}

.kg-scope-pinterest-save .kg-pinterest-save-button:hover {

transform: translateY(-2px);

box-shadow: 0 11px 27px rgba(230, 0, 35, 0.35);

}

.kg-scope-pinterest-save .kg-pinterest-save-button:active {

transform: translateY(0);

}

.kg-scope-pinterest-save .kg-pinterest-save-button:focus-visible {

outline: 3px solid #111111;

outline-offset: 3px;

}

.kg-scope-pinterest-save .kg-pinterest-save-icon {

display: flex;

align-items: center;

justify-content: center;

width: 29px;

height: 29px;

border: 2px solid currentColor;

border-radius: 50%;

font-family: Georgia, serif;

font-size: 21px;

font-weight: 700;

}

</style>

<script

type="text/javascript"

async

defer

src="https://assets.pinterest.com/js/pinit.js"

></script>

A látogatónak nem kell linket másolnia vagy keresgélnie — egy kattintással megoszthatja az oldalad, elmentheti Pinterestre, vagy átléphet a YouTube-csatornádra

Mentés Pinterestre

Vissza a tartalomjegyzékre

#21. YouTube-csatorna gomb

Ez a gomb nem az oldalt osztja meg a YouTube-on, mert a YouTube nem úgy működik, mint a Facebook vagy a WhatsApp.

A gomb arra jó, hogy a látogatót átvigye a YouTube-csatornádra.

Ott meg tudja nézni a videóidat, és fel is tud iratkozni a csatornádra.

Mit kell beállítanod?

A kódban ezt a részt kell megkeresned: href="https://www.youtube.com/@CSATORNANEV"

A CSATORNANEV helyére írd be a saját YouTube-csatornád nevét vagy teljes linkjét.

Például:.

href="https://www.youtube.com/@GabiKenez-funnel_builder"

Fontos

A gomb nem iratkoztatja fel automatikusan a látogatót.

Először megnyitja a csatornát, és ott a látogató saját maga tud feliratkozni.

Hogyan tedd be a Systeme.io oldaladba?

Nyisd meg az oldalt szerkesztésre.

Húzz be egy Raw HTML elemet.

Másold bele a teljes kódot.

Mentsd el az oldalt.

Nyisd meg az élő oldalt, és ott teszteld.

A Raw HTML elem tartalma nem mindig látszik tökéletesen a szerkesztőben, ezért mindig az élő oldalon ellenőrizd.

<!-- =========================================

KG – YouTube-csatorna gomb

========================================== -->

href="https://www.youtube.com/@CSATORNANEV"

class="kg-youtube-button"

target="_blank"

rel="noopener noreferrer"

</span>

<span>YouTube-csatorna megnyitása</span>

</a>

</div>

<style>

/* Csak a YouTube-gombra érvényes CSS */

.kg-scope-youtube-button {

width: 100%;

max-width: 420px;

margin: 20px auto;

}

.kg-scope-youtube-button .kg-youtube-button {

display: flex;

align-items: center;

justify-content: center;

gap: 11px;

width: 100%;

min-height: 56px;

padding: 13px 22px;

border-radius: 12px;

box-sizing: border-box;

background-color: #ff0000;

color: #ffffff !important;

box-shadow: 0 8px 22px rgba(255, 0, 0, 0.25);

font-family: inherit;

font-size: 16px;

font-weight: 700;

text-decoration: none !important;

transition:

transform 0.2s ease,

box-shadow 0.2s ease;

}

.kg-scope-youtube-button .kg-youtube-button:hover {

transform: translateY(-2px);

box-shadow: 0 11px 27px rgba(255, 0, 0, 0.35);

}

.kg-scope-youtube-button .kg-youtube-button:active {

transform: translateY(0);

}

.kg-scope-youtube-button .kg-youtube-button:focus-visible {

outline: 3px solid #111111;

outline-offset: 3px;

}

.kg-scope-youtube-button .kg-youtube-icon {

display: flex;

align-items: center;

justify-content: center;

width: 33px;

height: 24px;

border-radius: 7px;

background-color: #ffffff;

}

.kg-scope-youtube-button .kg-youtube-play {

width: 0;

height: 0;

margin-left: 3px;

border-top: 6px solid transparent;

border-bottom: 6px solid transparent;

border-left: 10px solid #ff0000;

}

</style>

A látogatónak nem kell linket másolnia vagy keresgélnie — egy kattintással megoszthatja az oldalad, elmentheti Pinterestre, vagy átléphet a YouTube-csatornádra.

YouTube-csatorna megnyitása

Vissza a tartalomjegyzékre

Kenéz Gabriella I • Adatvédelmi irányelvek • ÁSZF

Cookie adatok kezelése