OxyMade İncelemesi: Oksijen Profesyonelleri İçin İnanılmaz Tailwind Tabanlı Çerçeve/Tasarım Seti

Bu makale, Oxygen Builder için OxyMade Framework ve tasarım seti teklifini gözden geçirecektir. Bir ajans olarak, bu aracı son birkaç proje için kullanıyoruz ve kesinlikle seviyoruz.

Bu makalede, tonlarca zaman kazanmak, tutarlı web siteleri oluşturmak ve iş akışımızı daha verimli hale getirmek için nasıl kullandığımızı ayrıntılarıyla anlatacağız. Hem çerçeveye hem de tasarım setlerine ve OxyMade'in kullanıcılarına sunduğu arka uç gösterge panosuna bir göz atacağız.

Son olarak, şirketin kendisine, sundukları desteğe, güncellemelerin sıklığına ve ağırlığına ve ayrıca OxyMade'in fiyatlandırmasına bir göz atacağız. Bu makale, OxyMade ile ilgili, bilinçli bir alıcı kararı vermenize yardımcı olacak, hepsi bir arada bir bilgi kaynağı olmayı amaçlamaktadır.

Lafı daha fazla uzatmadan OxyMade Framework incelememize ve Oxygen Builder için tasarım seti koleksiyonuna geçelim.

Oxygen Builder'da Neden Bir Çerçeve Kullanılır?

Bu ürünün çekilişi, onu kullanan kişiler arasında farklılık gösterecektir.

Sıfırdan web siteleri oluşturan daha profesyonel web tasarım ajansları, muhtemelen çerçeveden tasarım seti kitaplığından çok daha fazla keyif alacaklardır. Oxygen Builder ile şirketi için hızlı ve profesyonel bir web sitesi oluşturmak isteyen biri, tasarım setlerine daha fazla odaklanabilir.

Bir ajans olarak, bu aracın sunduğu çerçeve inanılmaz. Boşluk, renkler, boyutlandırma, en boy oranları ve daha fazlası için yüzlerce yardımcı program CSS sınıfından oluşur ve popüler Tailwind CSS çerçevesini temel alır. Bu makalenin sonraki bölümünde ayrıntılara gireceğiz, ancak önce çerçevelerin neden bu kadar faydalı olduğundan bahsedelim!

Şahsen, Tailwind çerçevesini bir sabit kodlama web sitesinde denedim ve gerçekten beğenmedim. Neden olduğundan emin değilim, ancak OxyMade kullanarak ikinci kez geri döndüğümde (elbette, ham Tailwind çerçevesi değil, bunun yerine Oxygen Builder için değiştirilmiş), kesinlikle sevdim.

Bootstrap gibi diğer CSS çerçevelerine kıyasla gerçekten hızlı bir şekilde Tailwind hakkında konuşalım. Tailwind CSS çerçevesinin arkasındaki ideoloji, Bootstrap gibi eski tekliflerle karşılaştırıldığında biraz farklıdır. Bu, Foundation ve Bulma'nın tümü eski UI kitleri olarak sınıflandırılabilir.

Bu kalıbı takip etmek yerine, Tailwind bir yardımcı sınıf çerçevesidir. Bu, önceden tasarlanmış bir temaya veya bileşenlere sahip olmadığı, bunun yerine web sitenizde tutarlı duyarlı tasarım elde etmek için kullandığınız birkaç yardımcı program sınıfına sahip olduğu anlamına gelir. Bazı insanlar (tailwind'i sabit kodlanmış bir web sitesinde ilk denediğimde benim gibi), yükseklik, en boy oranı, kenar boşluğu gibi şeyleri tanımlamak için bir sürü CSS sınıfı kullanıyorsanız, HTML işaretlemesinin kullanışsız hale gelmesinden hoşlanmazlar. ve dolgu.

Örneğin, şöyle bir div'imiz olabilir (OxyMade sınıflarını kullanarak): <div class=”mb-6 p-6 w-full center text-left text-xl”></div>

Aşağıdaki kod, dolguyu, yüksekliği ve kenar boşluğunu ayarlayacaktır. Ayrıca içindeki öğeleri ortalamak için esnek kullanır.

Bu OxyMade Çerçevesinden gerçekten hoşlanıyorum, ancak Oxygen Builder ile herhangi bir çerçeve türünü kullanmanın çok büyük bir zaman kazandırdığını ve herhangi bir profesyonel iş akışına uyarlanması gerektiğini belirtmekte fayda var.

İnsanların bir sabit kodlama web sitesinde sıfırdan CSS stilleri oluşturmamalarının bir nedeni var. Oxygen Builder, OxyMade gibi bir çerçeve kullanmanıza veya sınıfları kendiniz manuel olarak içe aktarmanıza (İsviçre Bıçağı kullanarak) ve bunları belirli öğelere uygulamanıza izin veren tek sayfa oluşturucudur.

Bu nedenle, bu sınıf yönetimi özelliğine sahip WordPress ekosistemindeki tek sayfa oluşturucu olur, yani onunla çerçeveleri kullanabilir ve yarı zamanda çok daha profesyonel ve tutarlı bir ürün elde edebilirsiniz!

Oxygen Builder ile web siteleri oluştururken iş akışınıza herhangi bir çerçeveyi benimsemek, çok tutarlı olan daha verimli bir yapıya yol açacaktır. Oxygen'deki her bir öğe için gelişmiş ayarlara girmek ve aynı şeyleri tekrar tekrar ayarlamak yerine, yalnızca duyarlı olması için oluşturulmuş sınıfları kullanırsınız.

Tek tek öğeler üzerinde ince ayar yapmanız gerekiyorsa, yerel Oxygen Builder stil sistemini kullanarak ve bunu belirli öğenin kimliğine uygulayarak bunları geçersiz kılabilirsiniz.

Bu yüzden bir çerçeve kullanmak istiyorsunuz. Şimdi, OxyMade Framework'e bir göz atalım ve onunla birlikte gelen tüm faydaları size gösterelim.

OxyMade Video İnceleme

Bu makalede tartışılan içeriğin çoğunu kapsayan bir video incelemesi hazırladık. Bir göz atmayı ve abone olmayı unutmayın.

OxyMade Çerçeve İncelemesi

Daha önce de belirtildiği gibi, bu Tailwind tabanlı iyi özellikli bir çerçevedir. Bu yardımcı program sınıflarını öğelere basitçe ekleyerek ve kaldırarak dolgu, boyutlandırma, boşluk ve daha fazlasını değiştirmenize olanak tanıyan bir yardımcı program sınıfı koleksiyonuyla birlikte gelir.

Kafanızı karıştıracak çok sayıda CSS sınıfı olsa da, kenar boşluğu, esnek, dolgu ve boyutlandırma gibi en popüler olanları oldukça hızlı bir şekilde öğreneceksiniz. Ayrıca, bu çerçevede yer alan tüm sınıfları listeleyen, kullanımı çok kolay bir CSS hile sayfası da var.

Oxygen Builder'da birkaç web sitesi oluşturmak için bu çerçeveyi kullandıktan sonra, hiçbir zaman ek bir sınıfa ihtiyacım olmadı. Tutarlı bir site oluşturmak için ihtiyacınız olan her şeye gerçekten sahiptir. En iyi şeylerden biri, CSS ızgarası için kenar boşluğu, dolgu ve boşluğun aynı olmasıdır. Örneğin, mb-8 p-8 ve gap-8'in tümü sonuçlanacak ve bu öğeler boyunca tutarlı bir görünüm olacaktır.

Ek olarak, metnin boyutunu ayarlayabiliriz. Bu çerçevede yer alan her bir sınıf gibi, boyutlandırma da tamamen duyarlı ve akıcıdır. Ekran boyutu küçüldükçe metin de küçülecektir. Tüm metin ve öğelerin boyutlandırılması için çerçeveyi kullandığınız sürece, web sitesi orantılı olarak küçülür, yani OxyMade ve Oxygen ile duyarlı bir web sitesi oluşturmak için neredeyse hiçbir şey yapmanız gerekmez.

Bu tür sınıfların birçok yinelemesi vardır, ancak basit adlandırma sistemi nedeniyle, hangi sınıfın giyileceğini hatırlamak çok kolaydır. Sadece sayıları eşleştirin ve hazırsınız.

Nasıl çalışır

Çerçeveyi web sitenize yüklediğinizde, OxyMade iki özel stil sayfasının yanı sıra oluşturucuya birkaç sınıf aktaracaktır. Güncellemelerde, yeni değişiklikler bu stil sayfalarının ve sınıfların üzerine yazılır.

Yüklemeden sonra, çerçevenin sunduğu tüm sınıflara, bunları oluşturucudaki özel seçici alanına yazarak erişebilirsiniz:

Sınıfı uyguladıktan sonra stiller de uygulanır. Bu araç aynı zamanda yardımcı bir sınıf kilitleme sistemine sahiptir, yani bir çerçeve sınıfında yanlışlıkla değişiklik yapmayacaksınız.

Renk Sistemi

Kullandığımız sınıfların yaklaşık %80'i öğeleri boşluk ve boyutlandırmaya yönelikken, geri kalanı renkleri ayarlamak içindir. Bu, OxyMade Çerçevesinin büyük bir satış noktasıdır ve renk şemalarını kolayca değiştirmenize olanak tanır. Dijital bir ajans olarak bu çok yardımcı oluyor.

Müşterilerimizin proje sonuna kadar renk şeması üzerinde karar vermelerine gerek yoktur. Aslında, web sitesi kurulduğunda, renk şemalarını değiştirebilir ve onlara çeşitli fikirlerin ekran görüntülerini gönderebiliriz. Bunun nedeni, bu renk sisteminin tam da bunu yapmaya yönelik çok modüler olmasıdır.

Fayda odaklı bir çerçeveye sahip her şey gibi, renkler sınıflara sahip öğelere uygulanır. Bölümlerin ve div'lerin arka planını, yazı tipi renklerini ve daha fazlasını renklendirmek için sınıfları kullanabilirsiniz. Arka uç oluşturucuda bulunan kullanışlı OxyMade renk sistemini de kullanabilirsiniz; Renk panelini açıp kapatın, kullanmak istediğiniz renge tıklayın ve çıktıyı Oxygen Builder ayarlarındaki renk alanına yapıştırın.

İşte bu macunun nasıl görüneceğine dair bir örnek:

var(-birincil-renk)

Bu renk sistemi, genel olarak renk uygulamak için kullanılan CSS sınıfları içindeki CSS değişkenlerini kullanır. OxyMade için WordPress arka uç ayarları sayfasında renk paletimizi değiştirebiliyoruz. Burada yapılan herhangi bir değişiklik, CSS değişkenlerini kullandığımız için web sitesinin ön ucuna uygulanacaktır.

Bu, tüm renklerinizin merkezi yönetimine tek bir yerden, bunları web sitenize uygulamanın kolay bir yoluna ve ihtiyaç duyarsanız küresel değişikliklere sahip olduğunuz anlamına gelir. Ajansımı mutlu eden ek özellikler arasında bu renkleri içe ve dışa aktarma, önceden tanımlanmış dış görünümleri kullanma ve hatta Oxygen yerel renklerini düzenleme (ki bu, OxyMade kurulduğunda aslında kullanmadığımız bir şeydir çünkü bu sistem diğerlerinden çok daha üstündür). Şu).

Duyarlı/Akışkan Yazı Tipleri ve Boşluk

Bundan yukarıda bahsettik, ancak gözden geçirmeye değer: OxyMade Framework'e dahil edilen sınıfta bir yazı tipi boyutu bulunan bu boşluk sınıflarının tümü akıcı ve duyarlıdır. Bu, bir mobil cihazda iyi çalışan bir masaüstü web sitesi elde etmek için yapmanız gereken işi ciddi şekilde en aza indirir. Oxygen içindeki her bir kesme noktası için yazı tipi boyutunu ayarlamak yerine, başlık ve metin yardımcı sınıflarını kullanırsanız, bunlar zaten akıcı ve duyarlıdır.

Örneğin, büyük metin için bir sınıf şöyle görünür:

Yazı tipi boyutu: min(max(3.9rem, calc(3.9rem + ((1vw – 0.32rem) * 2.625))), 6rem)

Bu akıcı ve duyarlı tasarım, dolgu, kenar boşluğu, CSS ızgarası ve daha fazlası için geçerlidir:

Diğer öğeler

Çerçeve, yönetici arka ucundaki OxyMade ayarlar sayfasında bulunan ek özelliklerle birlikte gelir.

Oksijen varsayılanlarını sıfırlayabilir, bu eklentiyi yüklemeden öncekine sıfırlayabilir ve ön uç stil sayfalarını yönetebilirsiniz.

CSS sınıflarını ve klasörlerini yönetebilirsiniz.

Modülleri ve elektrikli aletleri de yönetebilirsiniz. Bu, yardımcı program sınıflarını kilitlemenize ve sınıfları birleştirmenize izin veren bir araç içerir. Yardımcı program sınıflarını kimliklere değiştirmenize izin veren başka bir araç. OxyMade tasarım seti önizleme web sitesinden alınan kodu siteye yapıştırmanıza izin veren başka bir araç.

Kendi bölümüne ihtiyaç duymayan, ancak belirtilmesi gereken son bir şey, öğelere eklenmesi çok kolay bir ton vurgulu stili olduğu gerçeğidir. Basitçe üzerine gelme stilini seçin, üzerine gelme stilinin uygulanmasını istediğiniz öğeyi seçin ve Tamam'a tıklayın.

Bu, bu incelemenin çerçeve bölümünü sonuçlandırmaktadır. Bu aracın açık ara en sevdiğimiz özelliğidir ve konu web siteleri oluşturmaya geldiğinde bize saatler kazandırdı. Tüm bu sınıfların tutarlılığı ve yanıt verebilirliği, kısa sürede profesyonel görünümlü web siteleri oluşturmayı çok kolaylaştırır.

Özellikle Tailwind adlı yardımcı program odaklı CSS çerçevesine aşina değilseniz alışmak biraz zaman alır, ancak sınıfları ezberlemeye başladığınızda ve bunun nasıl çalıştığının arkasındaki ideolojiyi anladığınızda, inanılmaz derecede etkileneceksiniz.

OxyMade Bloklara ve Tasarım Setlerine Bir Bakış

OxyMade satın alırken erişeceğiniz iki ana özellikten ikincisi bloklar ve tasarım setleridir. Bunlar, CSS çerçevesini kullanan Oxygen Builder için önceden hazırlanmış öğelerdir. Bu blokları alıp doğrudan Oxygen web sitenize aktarabilirsiniz.

Bu CSS çerçevesini kullanarak yüksek kaliteli, profesyonel görünümlü bir web sitesi oluşturmak isteyen, ancak zamandan tasarruf etmek isteyen veya nereden başlayacağını bilmeyen biri için bu tasarım setleri sizin için yapılmıştır.

Diğer tekliflerle karşılaştırıldığında, bu satın almayla alacağınız bileşenlerin çokluğu OxyMade'in değerini gözler önüne seriyor. Oxygen web sitesinde kullanılabilecek 1000'den fazla bireysel bloktan oluşan 25'ten fazla kategori vardır.

Her biri farklı bir temayı kapsayan sekiz ana set vardır. Örneğin, bir hizmet olarak yazılım web siteleri/başlangıçlar için bir tane ve restoranlar için bir tane daha var.

Kullanmadığımız, ancak başka hiçbir yerde bulunmayan benzersiz bir özellik, OxyMade sayfa oluşturucudur. Mega tasarım kümesindeki tüm öğelere göz atmanıza, bunları bir sayfaya sürükleyip bırakmanıza ve ardından bu kodu kopyalayıp Oxygen Builder'ınıza yapıştırmanıza olanak tanır. Bu uygulamayla, kullanıma hazır tam sayfalar oluşturabilirsiniz – oldukça temiz.

Bir ajans olarak, genellikle müşterilerimiz için özel siteler tasarlarız. Bununla birlikte, bazı kişisel projeler için bu blokları web sitem için iyi bir temel oluşturmak için kullandım, daha sonra bunu düzenleyeceğim ve tasarım dilime ve web sitesinin yönüne uyacak şekilde değiştireceğim. Bu tasarım setlerinin, her şeyi sıfırdan oluşturmak yerine, hazır yapıları web sitelerinde uygulamak ve gerektiğinde eklemek isteyenler tarafından kullanıldığını görebiliyordum.

Tüm bu bloklar tamamen duyarlı ve kullanıma hazır. Sadece üç veya dört bölümü bir araya getirebilir, metni değiştirebilir, genel renkleri değiştirebilir ve birkaç dakika içinde yayına hazır özel bir web sitesine sahip olabilirsiniz.

OxyMade Destek ve Belgeler

Bu şirketin OxyMade Framework ve tasarım setleri için sunduğu destek ve belgeler benzersizdir. Birincil destek kanalı bir Facebook grubudur; bu, ekibin sorulara ne kadar hızlı yanıt verdiğini ilk elden gördüğümüz anlamına gelir.

Ayrıca müşteri öneri ve isteklerini dinlemelerini de çok seviyoruz. Örneğin, birkaç ay önce bir CSS temizleme özelliği istendi ve düzgün bir şekilde uygulandı.

Bu ürünün belgelerinin yanı sıra CSS hile sayfası da kolay anlaşılır, iyi tasarlanmış ve kullanımı basittir. Bir çerçeve kullanma konusunda yanlış gidecek pek çok şey yok. Tüm CSS sınıflarını içe aktardığı sürece, gitmeniz iyi olur. Aynı şey tasarım seti için de geçerli. Bunları web sitenize dahil etmenin belirli bir yolu vardır, ancak yönergeler açıktır ve bunları uyguladığınız sürece birkaç dakika içinde çalışmaya başlayacaksınız.

OxyMade Geliştiricileri ve Ekibi

Bu incelemenin fiyatlandırma bölümüne geldiğimizde bunu daha ayrıntılı olarak ele alacağız, ancak bu ömür boyu bir anlaşma olarak sunuluyor. Ürünler ömür boyu fırsatlara sahip olduğunda, arkasındaki ekip ve şirkete güvenmek ve anlamak önemlidir.

Bu aracın arkasındaki geliştiriciler ve ekip, yüksek kaliteli destek ve inanılmaz bir ürün sunan, topluluğun saygın üyeleridir. Şirketin kurucusuyla ileri geri gittik ve bu teklifin çerçevesini ve özelliklerini gelecekte de geliştirmeye devam edeceğine güveniyoruz.

OxyMade Fiyatlandırma

Bununla birlikte, bu aracın fiyatlandırmasına bir göz atalım:

OxyMade, ürünlerini satın alırken size iki seçenek sunar. İlk seçenek 149 dolardan geliyor. Bu size mega sette bulunan tüm tasarım öğelerine, ayrıca çerçeveye, sınırsız web sitesine yükleme yeteneği ve bu bireysel sette gelecekteki güncellemelere ömür boyu erişim sağlar.

İkinci seçenek 229 $ 'dan gelir ve çerçevenin yanı sıra tüm tasarım setlerine, öncelikli desteğe, ömür boyu güncellemelere ve sınırsız web sitesine yükleme becerisine erişmenizi sağlar. Bu aynı zamanda güç modüllerini (çerçeve için) içerirken, ilk seçenek içermez.

Satın alırken, peşin ödeme yapabilir veya ücreti bir taksit planına bölebilirsiniz. Bu, Oxygen Builder'a yeni başlayan biri için onu biraz daha erişilebilir kılıyor.

Ayrıca, yukarıda bahsedilen desteği, güvenle satın alabilmeniz için 14 günlük para iade garantisi ve güvenli bir ödeme alacaksınız.

Şimdi soru şu: “Buna değer mi?”. Bizim için bu kocaman bir evet. Ve bence hem ajanslar hem de bireyler için kocaman bir evet. Tek bir web sitesi oluşturuyorsanız, önceden oluşturulmuş tasarım setlerini kullanarak ve ardından stili ve metni değiştirerek kendinize çok zaman kazandıracaksınız. Bu size bir web sitesi oluşturmak için inanılmaz bir temel sağlar. Beğendiğiniz bir tasarım seti veya elemanı bulmak ve ardından bunu Oxygen sitesine eklemek çok kolay.

Bir ajanssanız, çerçeve size her gün tam anlamıyla saatler kazandıracaktır. Oxygen ile kullanılan herhangi bir çerçeve iyi bir fikirdir, ancak OxyMade'in kullandığı Tailwind yaklaşımı benzersiz ve faydalıdır. Tailwind'in başlangıcında bu yaklaşımı sevmedim. Şimdi, bu yaklaşım olmadan yaşayamam.

Çerçeve, muhtemelen ihtiyaç duyacağınız her sınıfla birlikte gelir ve daha fazlası, basit adlandırma yapısı nedeniyle hatırlaması çok kolaydır ve sürekli gelişir. Her ay eklenen renk sistemi, CSS temizleme ve ek özellikler, bu ürünü favorilerimizden biri haline getirmeye devam ediyor.

Toplum da bunun doğru olduğunu düşünüyor. Oxygen Builder'ı satın aldıktan sonra yapılabilecek en önemli satın alma hakkında soru sorulduğunda, bu ve hidrojen paketi ilk iki ve en popüler yanıttır.

OxyMade VS Yarışması

Oxygen Builder için iki ana çerçeve/tasarım seti vardır. Birincisi OxyMade, ikincisi OxyNinja. Bu ürün hakkında daha fazla bilgi için OxyNinja incelememizi okumanızı tavsiye ederim. Bütçen varsa tavsiyem ikisini de al. OxyMade'in Oxygen'de standart web siteleri oluşturmak için inanılmaz bir sistem olduğunu düşünüyorum, ancak özel öğeler (OxyNinja'nın inanılmaz ve güçlü bir kaydırıcısı var) ve WooCommerce tasarım setleri söz konusu olduğunda eksik.

Diğer taraftan, OxyMade'in sunduğu çerçeve, OxyNinja ile gelen çerçeveden çok daha iyidir.

Son Düşüncelerimiz

Bu ürünün Oxygen Builder resmi Facebook grubunda en çok tavsiye edilen ürünlerden biri olmasının bir nedeni var. Bunun nedeni, sürekli olarak güncellenen ve ömür boyu bir anlaşma olarak sunulan inanılmaz derecede yüksek kaliteli bir araçtır. Çerçeve size tonlarca saat kazandıracak ve tutarlı, iyi tasarlanmış, duyarlı web siteleri oluşturmanıza yardımcı olacaktır. Tasarım setleri çerçeveye dayalıdır ve daha sonra global renkleri, yazı tiplerini ve ek değişkenleri değiştirerek değiştirebileceğiniz web sitesi için yapı düzenleme açısından size bir ton zaman kazandıracaktır.

Tasarım setlerinin demolarını önizleyebileceğiniz, CSS hile sayfasına bir göz atabileceğiniz ve kendiniz için bir karar alabileceğiniz OxyMade web sitesine gitmenizi şiddetle tavsiye ederim. OxyMade ile ilgili başka sorularınız varsa, aşağıdaki yorumlar bölümünde bize ulaşmaktan çekinmeyin. İki web sitesi projesi için bu çerçeveyi kullanarak 30'dan fazla derleme saatini harcadık, bu nedenle sonlarına ve sonuçlarına oldukça aşinayız.