{"id":12764,"date":"2025-02-17T21:45:13","date_gmt":"2025-02-17T18:45:13","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-gelismis-e-ticaret-urun-izgaralari-ve-detay-sayfalari\/"},"modified":"2025-02-17T21:45:13","modified_gmt":"2025-02-17T18:45:13","slug":"tailwind-css-ile-gelismis-e-ticaret-urun-izgaralari-ve-detay-sayfalari","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-gelismis-e-ticaret-urun-izgaralari-ve-detay-sayfalari\/","title":{"rendered":"Tailwind CSS ile Geli\u015fmi\u015f E-Ticaret \u00dcr\u00fcn Izgaralar\u0131 ve Detay Sayfalar\u0131"},"content":{"rendered":"<p><body><\/p>\n<p>Tailwind CSS ile Geli\u015fmi\u015f E-Ticaret \u00dcr\u00fcn Izgaralar\u0131 ve Detay Sayfalar\u0131<\/p>\n<p>Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlere Tailwind CSS kullanarak etkileyici ve kullan\u0131c\u0131 dostu e-ticaret \u00fcr\u00fcn izgaralar\u0131 ve detay sayfalar\u0131 olu\u015fturmay\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim.  Bu rehberde, geli\u015fmi\u015f \u00f6zelliklere sahip, responsive ve SEO dostu tasar\u0131mlar olu\u015fturman\u0131za yard\u0131mc\u0131 olacak ipu\u00e7lar\u0131 ve kod \u00f6rnekleri bulacaks\u0131n\u0131z.  Ba\u015flayal\u0131m!<\/p>\n<h2>\u00dcr\u00fcn Izgaras\u0131 Tasar\u0131m\u0131<\/h2>\n<p>\u00d6ncelikle, \u00fcr\u00fcnlerinizi d\u00fczenli ve \u00e7ekici bir \u015fekilde sergileyen bir \u00fcr\u00fcn izgaras\u0131 olu\u015fturmam\u0131z gerekiyor.  Tailwind CSS&#8217;in g\u00fc\u00e7l\u00fc s\u0131n\u0131f yap\u0131s\u0131, bu i\u015flemi olduk\u00e7a kolayla\u015ft\u0131r\u0131yor.  \u00d6rne\u011fin, \u00fc\u00e7 s\u00fctunlu bir izgara olu\u015fturmak i\u00e7in a\u015fa\u011f\u0131daki kodu kullanabiliriz:<\/p>\n<pre><code class=\"language-html\">\n&lt;div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\"&gt;\n  &lt;div class=\"bg-white rounded-lg shadow-md p-4\"&gt;\n    &lt;img src=\"urun1.jpg\" alt=\"\u00dcr\u00fcn 1\" class=\"w-full h-48 object-cover mb-2\"&gt;\n    &lt;h2 class=\"text-lg font-bold mb-1\"&gt;\u00dcr\u00fcn Ad\u0131 1&lt;\/h2&gt;\n    &lt;p class=\"text-gray-600 text-sm\"&gt;\u00dcr\u00fcn A\u00e7\u0131klamas\u0131 1&lt;\/p&gt;\n    &lt;p class=\"text-green-500 font-bold mt-2\"&gt;100 TL&lt;\/p&gt;\n  &lt;\/div&gt;\n  &lt;!-- Di\u011fer \u00fcr\u00fcnler i\u00e7in benzer div'ler ekleyin --&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>Bu kodda,  <code>grid<\/code>, <code>grid-cols-1<\/code> (k\u00fc\u00e7\u00fck ekranlarda tek s\u00fctun), <code>md:grid-cols-3<\/code> (orta ve b\u00fcy\u00fck ekranlarda \u00fc\u00e7 s\u00fctun), ve <code>gap-4<\/code> (\u00fcr\u00fcnler aras\u0131 bo\u015fluk) s\u0131n\u0131flar\u0131n\u0131 kullan\u0131yoruz.  Ayr\u0131ca, her \u00fcr\u00fcn i\u00e7in ayr\u0131 bir div olu\u015fturarak, g\u00f6rsel, ba\u015fl\u0131k, a\u00e7\u0131klama ve fiyat bilgilerini d\u00fczenliyoruz.  Elbette, bu sadece bir \u00f6rnek.  Kendi ihtiya\u00e7lar\u0131n\u0131za g\u00f6re \u00f6zelle\u015ftirebilirsiniz. <\/p>\n<h2>Detay Sayfas\u0131 Tasar\u0131m\u0131<\/h2>\n<p>\u00dcr\u00fcn izgaras\u0131nda t\u0131klanan bir \u00fcr\u00fcne ait detayl\u0131 bilgiyi i\u00e7eren sayfa ise detay sayfas\u0131d\u0131r. Detay sayfas\u0131nda; y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc \u00fcr\u00fcn foto\u011fraflar\u0131, detayl\u0131 a\u00e7\u0131klamalar, m\u00fc\u015fteri yorumlar\u0131 ve sat\u0131n alma butonlar\u0131 gibi \u00f6zellikler yer almal\u0131d\u0131r.  Tailwind CSS ile responsive ve etkileyici bir detay sayfas\u0131 olu\u015fturmak i\u00e7in a\u015fa\u011f\u0131daki \u00f6rne\u011fi inceleyebilirsiniz:<\/p>\n<pre><code class=\"language-html\">\n&lt;div class=\"container mx-auto p-4\"&gt;\n  &lt;div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\"&gt;\n    &lt;img src=\"urun1.jpg\" alt=\"\u00dcr\u00fcn 1\" class=\"w-full object-cover\"&gt;\n    &lt;div&gt;\n      &lt;h1 class=\"text-3xl font-bold mb-4\"&gt;\u00dcr\u00fcn Ad\u0131 1&lt;\/h1&gt;\n      &lt;p class=\"text-gray-700 mb-4\"&gt;\u00dcr\u00fcn A\u00e7\u0131klamas\u0131 1&lt;\/p&gt;\n      &lt;p class=\"text-green-500 font-bold text-2xl mb-4\"&gt;100 TL&lt;\/p&gt;\n      &lt;button class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\"&gt;Sepete Ekle&lt;\/button&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>Bu \u00f6rnekte, \u00fcr\u00fcn foto\u011fraf\u0131 ve \u00fcr\u00fcn bilgilerini iki s\u00fctuna ay\u0131rd\u0131k.  Daha fazla bilgi ve g\u00f6rsel ekleyerek sayfay\u0131 zenginle\u015ftirebilirsiniz.  Ayr\u0131ca,  m\u00fc\u015fteri yorumlar\u0131 i\u00e7in bir b\u00f6l\u00fcm eklemek,  sat\u0131\u015flar\u0131 art\u0131rmak i\u00e7in olduk\u00e7a etkili bir y\u00f6ntemdir.  Bunun i\u00e7in, yorumlar\u0131 dinamik olarak y\u00fcklemek i\u00e7in bir JavaScript k\u00fct\u00fcphanesi kullanabilirsiniz.<\/p>\n<h2>Geli\u015fmi\u015f \u00d6zellikler<\/h2>\n<p>Tailwind CSS ile daha da geli\u015fmi\u015f \u00f6zellikler ekleyebilirsiniz.  \u00d6rne\u011fin, \u00fcr\u00fcn filtreleme, s\u0131ralama, arama ve kullan\u0131c\u0131 hesap y\u00f6netimi gibi \u00f6zellikler,  e-ticaret sitenizin kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir. Bu geli\u015fmi\u015f \u00f6zellikler i\u00e7in,  JavaScript ve bir backend sistemi ile entegre \u00e7al\u0131\u015fman\u0131z gerekebilir.  Daha fazla bilgi i\u00e7in  <a href=\"https:\/\/fatihsoysal.com\">fatihsoysal.com<\/a>  sitesini ziyaret edebilirsiniz.<\/p>\n<p>Son olarak,  uygulaman\u0131n responsive (duyarl\u0131) olmas\u0131na \u00f6zen g\u00f6sterin.  Tailwind CSS&#8217;in  medya sorgulamalar\u0131  (\u00f6rne\u011fin, <code>md:<\/code>, <code>lg:<\/code>) ile farkl\u0131 ekran boyutlar\u0131na g\u00f6re d\u00fczenlemeler yapabilirsiniz.  Bu,  kullan\u0131c\u0131lar\u0131n farkl\u0131 cihazlar \u00fczerinden sitenizi rahatl\u0131kla kullanabilmesini sa\u011flar.<\/p>\n<p>Umar\u0131m bu makale, Tailwind CSS ile geli\u015fmi\u015f e-ticaret \u00fcr\u00fcn izgaralar\u0131 ve detay sayfalar\u0131 olu\u015fturman\u0131z konusunda size yard\u0131mc\u0131 olmu\u015ftur.  Ba\u015far\u0131lar\u0131n\u0131z i\u00e7in bol \u015fanslar!  Daha fazla bilgi ve kaynak i\u00e7in <a href=\"https:\/\/tailwindcss.com\/\">Tailwind CSS resmi sitesini<\/a> ziyaret edebilirsiniz.<\/p>\n<p>#Etiketler: Tailwind CSS, E-ticaret, \u00dcr\u00fcn Izgaras\u0131, Detay Sayfas\u0131, Responsive Tasar\u0131m, Web Tasar\u0131m, Geli\u015fmi\u015f \u00d6zellikler, \u00dcr\u00fcn Filtreleme, \u00dcr\u00fcn S\u0131ralama, \u00dcr\u00fcn Arama, Kullan\u0131c\u0131 Hesap Y\u00f6netimi, JavaScript, Backend Sistemi, SEO<\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"Tailwind CSS ile Geli\u015fmi\u015f E-Ticaret \u00dcr\u00fcn Izgaralar\u0131 ve Detay Sayfalar\u0131 Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlere Tailwind&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-12764","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tailwind CSS ile Geli\u015fmi\u015f E-Ticaret \u00dcr\u00fcn Izgaralar\u0131 ve Detay Sayfalar\u0131<\/title>\n<meta name=\"description\" content=\"Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlere Tailwind CSS kullanarak etkileyici ve kullan\u0131c\u0131 dostu e-ticaret \u00fcr\u00fcn izgaralar\u0131 ve detay sayfalar\u0131 olu\u015fturmay\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu rehberde, geli\u015fmi\u015f \u00f6zelliklere sahip, responsive ve SEO dostu tasar\u0131mlar olu\u015fturman\u0131za yard\u0131mc\u0131 olacak ipu\u00e7lar\u0131 ve kod \u00f6rnekleri bulacaks\u0131n\u0131z. Ba\u015flayal\u0131m!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-gelismis-e-ticaret-urun-izgaralari-ve-detay-sayfalari\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tailwind CSS ile Geli\u015fmi\u015f E-Ticaret \u00dcr\u00fcn Izgaralar\u0131 ve Detay Sayfalar\u0131\" \/>\n<meta property=\"og:description\" content=\"Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlere Tailwind CSS kullanarak etkileyici ve kullan\u0131c\u0131 dostu e-ticaret \u00fcr\u00fcn izgaralar\u0131 ve detay sayfalar\u0131 olu\u015fturmay\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu rehberde, geli\u015fmi\u015f \u00f6zelliklere sahip, responsive ve SEO dostu tasar\u0131mlar olu\u015fturman\u0131za yard\u0131mc\u0131 olacak ipu\u00e7lar\u0131 ve kod \u00f6rnekleri bulacaks\u0131n\u0131z. Ba\u015flayal\u0131m!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-gelismis-e-ticaret-urun-izgaralari-ve-detay-sayfalari\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-17T18:45:13+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-gelismis-e-ticaret-urun-izgaralari-ve-detay-sayfalari\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-gelismis-e-ticaret-urun-izgaralari-ve-detay-sayfalari\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Tailwind CSS ile Geli\u015fmi\u015f E-Ticaret \u00dcr\u00fcn Izgaralar\u0131 ve Detay Sayfalar\u0131\",\"datePublished\":\"2025-02-17T18:45:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-gelismis-e-ticaret-urun-izgaralari-ve-detay-sayfalari\/\"},\"wordCount\":538,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-gelismis-e-ticaret-urun-izgaralari-ve-detay-sayfalari\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-gelismis-e-ticaret-urun-izgaralari-ve-detay-sayfalari\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-gelismis-e-ticaret-urun-izgaralari-ve-detay-sayfalari\/\",\"name\":\"Tailwind CSS ile Geli\u015fmi\u015f E-Ticaret \u00dcr\u00fcn Izgaralar\u0131 ve Detay Sayfalar\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-02-17T18:45:13+00:00\",\"description\":\"Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlere Tailwind CSS kullanarak etkileyici ve kullan\u0131c\u0131 dostu e-ticaret \u00fcr\u00fcn izgaralar\u0131 ve detay sayfalar\u0131 olu\u015fturmay\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu rehberde, geli\u015fmi\u015f \u00f6zelliklere sahip, responsive ve SEO dostu tasar\u0131mlar olu\u015fturman\u0131za yard\u0131mc\u0131 olacak ipu\u00e7lar\u0131 ve kod \u00f6rnekleri bulacaks\u0131n\u0131z. Ba\u015flayal\u0131m!\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-gelismis-e-ticaret-urun-izgaralari-ve-detay-sayfalari\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-gelismis-e-ticaret-urun-izgaralari-ve-detay-sayfalari\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-gelismis-e-ticaret-urun-izgaralari-ve-detay-sayfalari\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tailwind CSS ile Geli\u015fmi\u015f E-Ticaret \u00dcr\u00fcn Izgaralar\u0131 ve Detay Sayfalar\u0131\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Tailwind CSS ile Geli\u015fmi\u015f E-Ticaret \u00dcr\u00fcn Izgaralar\u0131 ve Detay Sayfalar\u0131","description":"Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlere Tailwind CSS kullanarak etkileyici ve kullan\u0131c\u0131 dostu e-ticaret \u00fcr\u00fcn izgaralar\u0131 ve detay sayfalar\u0131 olu\u015fturmay\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu rehberde, geli\u015fmi\u015f \u00f6zelliklere sahip, responsive ve SEO dostu tasar\u0131mlar olu\u015fturman\u0131za yard\u0131mc\u0131 olacak ipu\u00e7lar\u0131 ve kod \u00f6rnekleri bulacaks\u0131n\u0131z. Ba\u015flayal\u0131m!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-gelismis-e-ticaret-urun-izgaralari-ve-detay-sayfalari\/","og_locale":"tr_TR","og_type":"article","og_title":"Tailwind CSS ile Geli\u015fmi\u015f E-Ticaret \u00dcr\u00fcn Izgaralar\u0131 ve Detay Sayfalar\u0131","og_description":"Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlere Tailwind CSS kullanarak etkileyici ve kullan\u0131c\u0131 dostu e-ticaret \u00fcr\u00fcn izgaralar\u0131 ve detay sayfalar\u0131 olu\u015fturmay\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu rehberde, geli\u015fmi\u015f \u00f6zelliklere sahip, responsive ve SEO dostu tasar\u0131mlar olu\u015fturman\u0131za yard\u0131mc\u0131 olacak ipu\u00e7lar\u0131 ve kod \u00f6rnekleri bulacaks\u0131n\u0131z. Ba\u015flayal\u0131m!","og_url":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-gelismis-e-ticaret-urun-izgaralari-ve-detay-sayfalari\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-02-17T18:45:13+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"4 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-gelismis-e-ticaret-urun-izgaralari-ve-detay-sayfalari\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-gelismis-e-ticaret-urun-izgaralari-ve-detay-sayfalari\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Tailwind CSS ile Geli\u015fmi\u015f E-Ticaret \u00dcr\u00fcn Izgaralar\u0131 ve Detay Sayfalar\u0131","datePublished":"2025-02-17T18:45:13+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-gelismis-e-ticaret-urun-izgaralari-ve-detay-sayfalari\/"},"wordCount":538,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-gelismis-e-ticaret-urun-izgaralari-ve-detay-sayfalari\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-gelismis-e-ticaret-urun-izgaralari-ve-detay-sayfalari\/","url":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-gelismis-e-ticaret-urun-izgaralari-ve-detay-sayfalari\/","name":"Tailwind CSS ile Geli\u015fmi\u015f E-Ticaret \u00dcr\u00fcn Izgaralar\u0131 ve Detay Sayfalar\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-02-17T18:45:13+00:00","description":"Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlere Tailwind CSS kullanarak etkileyici ve kullan\u0131c\u0131 dostu e-ticaret \u00fcr\u00fcn izgaralar\u0131 ve detay sayfalar\u0131 olu\u015fturmay\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu rehberde, geli\u015fmi\u015f \u00f6zelliklere sahip, responsive ve SEO dostu tasar\u0131mlar olu\u015fturman\u0131za yard\u0131mc\u0131 olacak ipu\u00e7lar\u0131 ve kod \u00f6rnekleri bulacaks\u0131n\u0131z. Ba\u015flayal\u0131m!","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-gelismis-e-ticaret-urun-izgaralari-ve-detay-sayfalari\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-gelismis-e-ticaret-urun-izgaralari-ve-detay-sayfalari\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-gelismis-e-ticaret-urun-izgaralari-ve-detay-sayfalari\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tailwind CSS ile Geli\u015fmi\u015f E-Ticaret \u00dcr\u00fcn Izgaralar\u0131 ve Detay Sayfalar\u0131"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/12764","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=12764"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/12764\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=12764"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=12764"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=12764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}