Randevu Al
Randevu Al
Diş Hekimliği Webflow şablonu nasıl kullanılır
Bu sayfa, şablonun nasıl yapılandırıldığını ve kendi projeniz için nasıl özelleştirebileceğinizi anlamanıza yardımcı olacaktır.
Özellikle Stil Kılavuzu, CMS ve GSAP animasyonlarında büyük değişiklikler yapmadan önce bu kılavuzu okumanızı öneririz.
Genel stiller ve tasarım sistemi
Dentistry uses a simple design system built with global classes and variables. All main typography, colors, spacing, and buttons are defined in the Style Guide page and in the Webflow Variables panel.
- Başlıklar (H1–H6) ve paragraflar tipografi değişkenlerine bağlıdır.
- Marka renkleri, nötr tonlar ve vurgular renk değişkenleri olarak saklanır.
- Common components such as buttons, sections, and containers use reusable classes.
Renkleri özelleştirme
Bu şablon, tüm renkleri zahmetsizce değiştirebilmenizi sağlar ve bu değişiklikler sitenin tamamına anında yansır.
To adjust a color, navigate to the Variables panel, then choose the color you wish to modify.
SVG öğe rengi
In order to change the color of SVGs, Download .svg file from Assets and open it to any text editor. Change HEX color code with color of your choice and replace updated .svg file with the current file.
Yazı tiplerini değiştirme
To adjust the font family, navigate to the Variables panel, then choose the font family you wish to modify.
If you want to change fonts, you can always go toSite Settings > Fonts.There, you will be able to upload custom fonts, use Google Fonts, or even connect your Adobe Fonts account.
Once you've uploaded a font fromSite Settings, navigate to the Variables panel, then choose the font family you uploaded.
Başlangıç Sayfası
The “Starter Page” template provides a solid foundation for building your pages. It includes a pre-designed header, footer, and a blank section with a container to help you get started quickly.
Başlangıç Sayfasını çoğaltın ve diğer sayfalardan bölümler düzenlemeye veya eklemeye başlayın.
Şablon Desteği
We'll be glad to help you out with your queries. Please contact us at theWebflow template support pageand you shall hear back very soon.
Başlangıç Sayfasını çoğaltın ve diğer sayfalardan bölümler düzenlemeye veya eklemeye başlayın.
Önemli notlar:
- SVG: For the best visual experience, we recommend using SVG icons and logotypes. You can explore a wide selection of SVG icons on Icon Finder or download them from the icons web app.
- Image Formats: There are mainly 2 common file types that are used for web images which are JPEG and PNG. For images with a Flat Background use JPEG images, for images with a Transparent background use PNG images.
- Compress images: For a better loading site, compress existing image to AVIF or WebP files with the built-in Image conversion tool.
- SEO: Before publishing your site, make sure to edit the Title Tag, Meta Description, etc. For more information on SEO and how to optimize your website, Visit Add SEO title and meta description and SEO and Webflow: the essential guide.
GSAP Ekleme, Kaldırma ve Devre Dışı Bırakma
- Add Animation: just apply Animation class like "card", "card-wrapper"
- Animasyonu Kaldırma: ilgili sınıfı öğeden silmeniz yeterlidir.
- Disable Animation: You can also disable animation completely by removing the GSAP script or commenting it out.
Sayaç GSAP Animasyonları Nasıl Kullanılır
<script>
gsap.registerPlugin(ScrollTrigger);
document.querySelectorAll(".counter").forEach(counter => {
let targetValue = +counter.getAttribute("data-target");
gsap.fromTo(counter,
{ innerText: 0 },
{
innerText: targetValue,
duration: 2,
ease: "power1.out",
snap: { innerText: 1 },
scrollTrigger: {
trigger: counter,
start: "top 80%",
once: true
},
onUpdate: function () {
counter.innerText = Math.floor(counter.innerText);
}
}
);
});
</script>
gsap.registerPlugin(ScrollTrigger);
document.querySelectorAll(".counter").forEach(counter => {
let targetValue = +counter.getAttribute("data-target");
gsap.fromTo(counter,
{ innerText: 0 },
{
innerText: targetValue,
duration: 2,
ease: "power1.out",
snap: { innerText: 1 },
scrollTrigger: {
trigger: counter,
start: "top 80%",
once: true
},
onUpdate: function () {
counter.innerText = Math.floor(counter.innerText);
}
}
);
});
</script>
Kart GSAP Animasyonları Nasıl Kullanılır
<script>
document.querySelectorAll(".card-wrapper").forEach(wrapper => {
gsap.from(wrapper.querySelectorAll(".card"), {
opacity: 0,
y: 50,
scale: 0.8,
duration: 0.6,
ease: "power2.out",
stagger: 0.2,
scrollTrigger: {
trigger: wrapper,
start: "top 80%",
toggleActions: "play none none reverse"
}
});
});
</script>
document.querySelectorAll(".card-wrapper").forEach(wrapper => {
gsap.from(wrapper.querySelectorAll(".card"), {
opacity: 0,
y: 50,
scale: 0.8,
duration: 0.6,
ease: "power2.out",
stagger: 0.2,
scrollTrigger: {
trigger: wrapper,
start: "top 80%",
toggleActions: "play none none reverse"
}
});
});
</script>
Notlar ve İpuçları
- Bu sınıflar şablonun GSAP animasyonlarına otomatik bağlanır: ek kodlamaya gerek yoktur.
- Akıcı hareket için kayan şeritlerde hafif görseller/SVG’ler kullanın.
- Animasyonlar, kullanıcının Azaltılmış Hareket tercihine otomatik olarak uyar.
- Bir öğe animasyon almıyorsa, sarmalayıcı sınıf adlarının tam olarak eşleştiğini doğrulayın.
