Web Sitenize Flipbook Nasıl Gömülür?

Siteniz için bir PDF dosyasını kolayca etkileşimli bir flipbook’a dönüştürebilirsiniz. Kod gerektirmeyen bir widget kullanarak güzel broşürler ve dergiler hızlıca oluşturun ve ürünlerinizi, hizmetlerinizi, kılavuzlarınızı ve raporlarınızı yeni bir biçimde sunun.
ChatGPT’in ne düşündüğünü gör Canlı Widget Düzenleyicisini Aç
Tarafından
How to Embed Flipbook on Website?

Web Siteniz İçin Ücretsiz Flipbook Gömme

Hızlı bir şekilde PDF dosyasını dijital flipbook’a dönüştürmenin yolu mu arıyorsunuz? Elfsight ile herhangi bir web sitesine kolayca etkileşimli çevrimiçi broşürler ekleyebilirsiniz. Elfsight’in Flipbook widget’ı, kod gerektirmeyen bir yol ile ücretsiz bir flipbook gömme işlemini mümkün kılar:

  1. Editörde senaryonuza uygun bir şablon seçin.
  2. PDF dosyanızı yükleyin veya bağlantı ekleyin ve flipbook’a dönüştürün.
  3. Web siteniz için kurulum kodunu alın ve istediğiniz sayfaya yapıştırın.

Canlı görünümü görmek için kaydolmanıza gerek yok. Editor’da deneyin! ⇩

Herhangi Bir Web Sitesine Flipbook Nasıl Gömülür

Kod kullanmadan siteniz için kusursuz bir flipbook yaratabilirsiniz. Düzenleyicide başlayın ve projenizi tamamlayın. Sonucu beğenecek ve flipbooku sitenize eklemek isteyecekseniz hesap oluşturmanıza gerek yoktur.

  1. Flipbook’u web sitenize ekleyin. Hazır olduğunuzda ‘Web sitesine ekle’ tuşuna basın ve aracınızın HTML kodunu alın. Kodu kullanarak flipbook’u herhangi bir web sitesi platformuna yerleştirebilirsiniz.

Özel flipbook’unuzu en popüler CMS platformlarına ve web sitesi oluşturucularına nasıl ekleyebileceğinizi görelim.

Flipbook’u HTML Web Sitesine Göm

html

HTML sitenizde belirli bir sayfaya buton widget’ını eklemek kolaydır. Oluşturduğunuz kodu Elfsight’ten gerekli noktaya yapıştırın.

  1. Web sitenizin arka ucuna erişin. Yönetim panelinizden HTML kodunu düzenleyebilmeniz, widget’in sorunsuz entegrasyonunu sağlar.
  2. Hesaplayıcı kodunu ekleyin. Web sitenizde widget’in görünmesini istediğiniz konumu seçin ve butonunuzun HTML kodunu ekleyin.
  3. Değişikliklerinizi kaydedin. Her şeyin beklendiği gibi çalışıp sayfada tutarlı göründüğünü kontrol edin.

HTML ile Flipbook Oluştur→ 

WordPress Web SitesineFlipbook Göm

wordpress

Sağlanan kodu bir bloğa yapıştırarak kod gerektirmeyen widget’inizi hızla sitenize ekleyebilirsiniz. Böylece butonunuz tam olarak istediğiniz yerde görünecektir.

  1. WordPress hesabınıza giriş yapın. HTML kodunda değişiklik yapmak için yönetici panelinde çalışmanız gerekecek.
  2. Go to ‘Pages’ and choose the page you want. İş hedeflerinizi ve eklentiyi belirli bir alana eklemenin nedenlerini aklınızda bulundurun.
  3. Özel HTML Bloğu Ekle. Butonun gömüleceği web sitesinin gerekli bölümünde görünmesi gerekir.
  4. Bu bloğa üretilen kodu ekleyin. Sayfayı güncelleyin ve widget’in çalıştığını kontrol edin.

WordPress’te Flipbook Oluştur →

Wix Sitesi’nde Flipbook’i Göm

wix

Wix sitesi için gerekli sayfaya widget kodunu ve HTML düğmesini eklemek kolaydır. Elfsight’ten aldığınız özel kod, sayfaların istenen alanıyla sorunsuz bütünleşir.

  1. Wix web sitesi düzenleyicinize erişin. Wix hesabınıza giriş yapın ve düzenlemek istediğiniz siteyi seçin. Sitenizin kontrol paneline gidin ve web sitesi düzenleyiciyi açmak için ‘Siteyi Düzenle’ üzerine tıklayın.
  2. Widget için bir HTML bloğu ekleyin. Sol taraftaki menüdeki Artı simgesine tıklayın ve Gömme bölümüne gidin. ‘Özel Gömümler’ sekmesi altında ‘Bir Widget Göm’ seçeneğini kullanarak sayfanıza yeni bir HTML bloğu ekleyin.
  3. Buton widgetinin HTML kodunu ekleyin. Tıkla ‘Kodu Gir’ ve Buton widget editörü tarafından sağlanan kurulum kodunu yapıştırın. Kodu girdikten sonra sayfanıza widget’i gömmek için ‘Güncelle’ye basın.
  4. Widget’in boyutlarını ve konumunu ayarlayın. Sayfadaki yerleşimini ve boyutlarını doğru şekilde ayarlayın; uyumlu ve görsel olarak çekici görünmesi için yeniden boyutlandırıp konumlandırın.
  5. Mobil cihazlar için optimize et. Mobil düzenleyiciye geçin ve gerekli ayarlamaları yapın. Widget’in mobilde harika göründüğünden emin olun, ardından düzeni beğendiğinizde değişiklikleri yayınlayın.

Wix’te Flipbook Oluştur →

Flipbook’u Shopify Web Sitesine Göm

Shopify sitenizin herhangi bir sayfasına HTML düğmesini hızlıca ekleyebilirsiniz. Sadece Elfsight’ten hazırlanmış kodu sitenizin gerekli alanına yapıştırmanız yeterli.

  1. Shopify yönetim paneline gidin. Web sitenizin ‘Çevrimiçi Mağaza’ alanını bulun.
  2. Açılır menüden ‘Özelleştir’ seçin. Sol taraftaki menüden ‘Bölüm Ekle’ yi seçin.
  3. Özel İçerik bölümünde, ‘Ekle’ye tıklayın. Önceden kurulmuş Shopify parçalarını kaldırmanız gerekecek.
  4. ’Özel HTML’ı Seçin. İçerik Ekle menüsünde bulacağınız seçenektir.
  5. HTML bölümünü bulun. Form kurulum kodunu ekleyebileceğiniz ve tüm değişiklikleri kaydedebileceğiniz yer budur.

Shopify’da Flipbook Oluştur→

Squarespace web sitene Flipbook göm

squarespace

Herkes hızlıca özelleştirilebilir düğmeyi Squarespace sitesi üzerinde istediğiniz sayfaya gömebilir. Tek yapmanız gereken, Elfsight’ten üretilen kodu sayfadaki belirli bir bloğa yapıştırmaktır.

  1. Squarespace hesabınıza giriş yapın. Squarespace hesabınıza giriş yapın ve widget için sitenizi seçin. Sitenizin kontrol paneline gidin ve düzenlemek istediğiniz siteyi seçin.
  2. Web Sitesi bölümüne gidin. Form aracını eklemek istediğiniz sayfayı seçin. Ana menüden Web Sitesi bölümüne gidin ve istediğiniz sayfayı seçin.
  3. Düzenle’ye tıklayın ve ardından ‘Bölüm Ekle’ye basın. Seçili sayfada ‘Düzenle’ye tıklayın ve ardından widget’ın çalışmasını istediğiniz yerde ‘Bölüm Ekle’yi seçin. Bu, sayfanızda widget için yeni bir bölüm oluşturmanıza olanak tanır.
  4. Bir kod bloğu ekleyin. ‘Boş bir bölüm ekle’yi seçin, ardından ‘Blok Ekle’yi tıklayın ve listeden ‘Kod’ı seçin. Buraya Buton’un widget kodunuzu ekleyeceksiniz.
  5. Widget’in kurulum kodunu ekleyin. ‘Düzenle’ simgesine tıklayın, Buton widget kurulum kodunu yapıştırın ve bloğun genişliğini ayarlayın. Sayfanızda widget’in düzgün konumlandığını ve görsel olarak çekici göründüğünü garanti edin.

Squarespace’te Flipbook Oluştur →

Webflow Web Sitesi’ne Flipbook Gömme

webflow

Webflow sayfalarına widget eklemek kolaydır; yalnızca düğmenizin ürettiği HTML kodunu ilettiğiniz yere bir Gömme öğesi eklemeniz yeterlidir.

  1. Webflow’da başlayın. Webflow hesabınıza giriş yapın ve widget’i yerleştirmek istediğiniz siteyi seçin.
  2. Gömme Widget’ı. Webflow düzenleyicisinde Artı simgesine tıklayın. Ardından sol menüden Göm öğesini sürükleyip bırakın ve düğmenin gösterileceği konumu seçin.
  3. Kodu Ekleme. Görünen HTML Gömme Kod Editörü’ne form kurulum kodunu yapıştırın. Ardından, ‘Kaydet ve Kapat’ düğmesine tıklayın.
  4. Özelleştirme ve Yayınlama. Düğmenin ayarlarını yapın, ardından “Yayınla”ya basın ve hangi alan adlarının etkinleştirileceğini seçin.

Webflow ile Flipbook Oluştur →

Elementor Web Sitesi Üzerine Flipbook Göm

elementor

Elementor’a Buton widget’ını kolayca ekleyebilirsiniz. Widget kodunu yapıştıracağınız sayfada boş bir blok olması yeterlidir.

  1. WordPress Arka Ucundan Başlayın. WordPress sitenizin arka ucuna giriş yapın, ‘Sayfalar’ bölümüne gidin ve Buton Bileşeni eklemek için sayfayı seçin.
  2. Elementor düzenlemeye başlayın. Seçili sayfayı özelleştirmeye başlamak için ‘Elementor ile Düzenle’yi seçin.
  3. HTML elemanını ekle. HTML öğesini sayfanıza sürükle-bırak özelliğini kullanarak yerleştirin.
  4. Widget’in kodunu web sitesine ekleyin. Elfsight ile düğmenin HTML kodunu HTML Kod Kutusuna yapıştırın.
  5. Güncelle ve keyfini çıkarın. Değişikliklerinizi uygulamak için ‘Güncelle’ye tıklayın ve gömülü butonla sayfanızın nasıl dönüştüğünü görün.

Elementor’da Flipbook Oluştur →

Web Sitesi İçin Flipbook Kullanmanın Avantajları

Ancak neden Elfsight ile bir flipbook oluşturalım ki, web sitenize sadece bir PDF dosyası yüklemek yerine? Elfsight Flipbook widget’ının özelliklerine dayanarak bu görsel olarak çekici yaklaşımı seçmenin kısa bir avantaj listesi:

#1 Çalışmanızı daha çarpıcı bir şekilde sergileyin

Kâğıt sesleriyle gerçekçi sayfa çevirimi ve gezinme için kullanışlı kontroller sayesinde, sunacağınız her şeye daha derin bir profesyonellik katacak: ürünler, hizmetler, raporlar, işletmenin zaman çizelgeleri, yönergeler, vb.

#2 Müşterilerin Görüntüleme Deneyimini Geliştirin

Görüntülemek için yakınlaştırma ve tam ekran görünümü veya tek sayfa modu gibi işlevler flipbook içeriğini ayrıntılı olarak incelemeyi kolaylaştırır. Her kullanıcı dosyanızı okuyabilir; widget tüm cihazlar ve ekranlar için optimize edilmiştir.

#3 Markanızı Daha Etkileyici ve İlgili Hale Getirin

Sunduğunuz içeriğin görünümünü daha tutarlı kılmak için arka planı ve tema rengini özelleştirebilirsiniz. Eklediğiniz özel CSS ve JS ile flipbook’inizi web sitenize doğal bir parçası haline getirmek için mükemmel sonucu elde edebilirsiniz.

Dijital Flipbook Oluşturmanın Alternatif Yolları

Üçüncü taraf çözümlerden—widgetler ve eklentiler gibi—hoşlanmıyor olabilirsiniz; yine de web sitenize yükleyebileceğiniz kusursuz bir flipbook yazılımına ihtiyacınız varsa, oluşturmaya yardımcı olacak daha pek çok yol mevcut.

#1 Dijital Flipbook’lar İçin Masaüstü Yazılımı

Masaüstü yazılımlar, çok sayıda özelleştirme seçeneğiyle profesyonel ve cilalanmış flipbook’lar için harika bir seçenek. Adobe InDesign gibi araçlar etkileşimli özelliklerle sayfa tasarımları yapmanıza olanak tanır; FlippingBook Publisher ise medya ve markalaşmayı eklemek için yerleşik seçeneklerle flipbook oluşturmayı kolaylaştırır. Her ikisi de çevrimdışı çalışma esnekliği sağlar ve ihtiyaçlarınıza uygun yüksek kaliteli sonuçlar üretir.

Masaüstü Çözümlerinin Avantajları

  • Çevrimdışı erişim. İnternet bağlantısı olmadan çalışın; güvenli ortamlarda veya hareket halindeki projeler için idealdir.
  • Gelişmiş Özelleştirme. Çoklu ortamlar, etkileşimli öğeler ve ayrıntılı marka kimliği desteği.
  • Yüksek kaliteli çıktılar. Yumuşak animasyonlar ve duyarlı tasarımlarla profesyonel düzeyde flipbook’lar üretir.

Masaüstü Çözümlerinin Dezavantajları

  • Maliyet. Çoğu masaüstü yazılımı abonelik veya yüksek peşin maliyetle gelir.
  • Öğrenme Eğrisi. Gelişmiş özelliklere hâkim olmak zaman alabilir.
  • Cihaz Bağımlılığı. Yazılımın kurulu olduğu sisteme bağlı, bu da işbirliğine dayalı çalışmayı daha az esnek kılar.

#2 HTML5 Flipbook Oluşturma

Biraz kod yazmayı biliyorsanız, HTML5 flipbook oluşturma eşsiz bir esneklik sunar. Turn.js veya PDF.js gibi kütüphaneleri kullanarak, sitenize sorunsuz entegre olan tamamen özelleştirilebilir flipbook’lar oluşturabilirsiniz. Bu araçlar size benzersiz özellikler, animasyonlar ve etkileşimli öğeler ekleme imkanı verir; böylece tam yaratıcı kontrol sizde olur.

HTML5 Flipbook’larının Avantajları

  • Tam Özelleştirme. Flipbook’un her yönü markanıza ve web sitenizin stiline uyacak şekilde özelleştirilebilir.
  • Ölçeklenebilirlik. Analitikler veya benzersiz animasyonlar gibi özel özellik gereksinimleri olan büyük ölçekli projeler için ideal.
  • Modern teknoloji. HTML5, tüm cihazlarda ve tarayıcılarda duyarlı tasarım ve sorunsuz performans sağlar.

HTML5 Flipbook’larının Dezavantajları

  • Kodlama becerileri gerekir. Uygulamayı hayata geçirmek ve özelleştirmek için geliştirme bilgisine veya yetenekli bir geliştiriciye ihtiyacınız olacak.
  • Zaman alıcı. Sıfırdan bir flipbook oluşturmak veya kütüphaneleri özelleştirmek, hazır araçlardan çok daha fazla zaman alabilir.
  • Kutudan çıktığı gibi sınırlı özellikler. Yazılım araçlarının aksine HTML5 kütüphaneleri, hazır arayüzler veya şablonlar sunmaz; baştan inşa etmek için daha fazla çaba gerekir.

Flipbook Widget Şablonları

Özel flipbook’iniz için hazır şablonlarla kolay bir başlangıç yapın. En çok beğeneceğiniz şablonu seçebilir ve özel durumunuza göre her şeyi değiştirebilirsiniz.

Şablon Kataloğu

40’tan fazla Flipbook şablonunu keşfedin

Her kullanım için hazır şablonları inceleyin veya kendi tasarımınızı oluşturun!
HTML Restaurant Menu template
Web sitenize bir flipbook eklentisi kurun ve restoran menüsünü yüksek çözünürlükte gösterin.
HTML Newspaper template
Web sitene flipbook eklentisi ekleyin ve ziyaretçilerle zarif tasarımlı bir gazete ile etkileşim kurun.
HTML Fashion Lookbook template
Bir web sitesine Flipbook widget’ı eklemek, moda lookbook sunumlarınızı unutulmaz bir yolculuğa dönüştürmenizi sağlar.
HTML Booklet template
Dikkat çekici bir kitapçık göstermek için web sitenize flipbook aracı oluşturun.
HTML Travel Guide template
Bir web sitesine flipbook şablonu ekleyin ve özenle hazırlanmış bir seyahat rehberiyle keşfetme tutkusu uyandırın.
HTML Photo Album template
Bir web sitesi için Flipbook eklentisi oluşturun ve değerli anılarınızı zamansız bir fotoğraf albümüne dönüştürün.
HTML Newsletter template
bir web sitesi için flipbook widget’ı oluşturarak etkileşimi artırın ve etkileşimli bir bültene sahip olun.
HTML Recipe Book Collection template
Bir web sitesine flipbook eklentisi eklemek, tarif koleksiyonlarını ve yemek kitaplarını etkileşimli biçimde paylaşmanıza yardımcı olabilir.
Uygun Şablon Bulunamadı?
Kullanımı kolay yapılandırıcımızla ihtiyacınız olan widget’ı kolayca derleyebilirsiniz.

Sonuç

Sonuç olarak, Elfsight’in kod gerektirmeyen Flipbook widget ile bir flipbook gömmek, sitenizi yükseltmenin basit ama güçlü bir yolu. Standart PDF’lerden farklı olarak bu Flipbook, popüler web sitesi oluşturucularına sorunsuz entegrasyon sağlar, görsel olarak çekici ve tamamen özelleştirilebilir bir tasarım sunar ve sitenizin stiline uyum sağlar.

Sezgisel gezinme kontrolleriyle okuyucular daha akıcı ve etkileşimli bir deneyim yaşar. Belgelerinizi etkileşimli, özenle hazırlanmış Kitapçıklara dönüştürün ve içeriğinizi zahmetsizce öne çıkarın!

Alternatif bir yol olarak, herhangi bir metin ve görsel materyali sergilemek için flipbook oluşturmanın başka yöntemlerini de ele aldık.

Daha Fazla Bilgi İçin?

Umarız bu rehber faydalı olmuştur! Herhangi bir web sitesi için özel bir flipbook oluşturmayı öğrenmek için bizimle iletişime geçmekten çekinmeyin. Elfsight’ta, deneyiminizin sorunsuz ve başarılı olmasını sağlayan kodsuz widget çözümleri sunmaya odaklanıyoruz.

Canlı Topluluk ile fikir ve uzmanlıklar paylaşılıyor. Geliştirmeler için önerilerinize her zaman açığız. Bunları İstek Listemize ekmekten çekinmeyin.

Makale tarafından
Teknik İçerik Uzmanı
Ivan, Elfsight’te teknik içerik uzmanıdır. Farklı platformlar için entegrasyonlar ve manuel iş yükünü azaltan otomasyon iş akışlarını kapsayan pratik API rehberleri ve geliştirici belgeleri yazar.