Bölüm Bölücüleri Tasarımınıza Dolaylı Olarak Nasıl Uygularsınız (Bölüm 2: Modüller)

Bölüm bölücülerin satırlara ve modüllere dolaylı olarak uygulanmasıyla ilgili blog gönderisinin ikinci bölümüne hoş geldiniz! Bu yazının birinci bölümünde, satırlara bölüm ayırıcılar uyguladık ve adım adım benzersiz ve çarpıcı bir tasarım oluşturduk. Bu yazının ikinci bölümünde, modüller dışında aynı şeyi yapacağız.

Bu yaklaşım için iki sürüm oluşturacağız: biri masaüstü, diğeri tablet ve telefon için. Tablet ve telefon sürümü gerçekten gerekli olmasa da, daha küçük ekran boyutlarında modüllerin her birine ayrı ayrı bir bölüm ayırıcı eklemenize yardımcı olacaktır.

Hadi hadi bakalım!

Ön izleme

Yaklaşmak

• Bu yazının 1. bölümünde yaptığımızla aşağı yukarı aynı yaklaşımı kullanıyoruz
• Ayırıcı ve bölüm arka planı aynı renge sahiptir
• Bu şekilde, ayırıcı ve bölüm arka planı, ayırıcı başka bir arka plan rengiyle temas edene kadar karışacaktır.
• Bu durumda, Blurb Modüllerine bölüm bölücüler uyguluyoruz
• Satırlardan farklı olarak, bu, bölücünün bölüm içeriğinin üstüne yerleştirilmesini gerektirir.
• Modülümüzün içeriğiyle örtüşmediğinden emin olmak için modüle ekstra üst dolgu ekleyeceğiz (bölücü yüksekliğiyle dengede)
• Yalnızca masaüstü sürümüyle gitmeyi seçebilirsiniz, ancak bölüm ayırıcıyı her modüle de uygulamak istiyorsanız, ayrı bir tablet ve telefon sürümü oluşturmanız gerekir.
• Tablet ve telefon sürümü, her modülü yeni bir bölüme yerleştirecek ve söz konusu modüle ayrılmış bir bölüm ayırıcıya sahip olacaktır.

Masaüstü Sürümünü Yeniden Oluştur

Yeni Bölüm Ekle

Arka plan rengi

Önce masaüstü sürümünü oluşturmaya başlayacağız. Bu sürüm yalnızca bir bölüm içerir. Normal bir bölüm ekledikten sonra, arka plan rengi olarak '#abd7f2' kullanın.

Üst Bölücü

Sonraki Tasarım sekmesine gidin ve aşağıdaki Bölücüyü ekleyin (bölümünüzle aynı rengi içerir):

• Bölücü Stili: Listede Bul
• Bölücü Rengi: #abd7f2
• Bölücü Yüksekliği: 182px
• Bölücü Düzenlemesi: Bölüm İçeriğinin Üstünde

görünürlük

Tablet ve telefon için ayrı bir sürüm oluşturacağımız için, bölüm ayarlarının Görünürlük alt kategorisinde bu bölümün tamamını telefon ve tablette devre dışı bırakmamız gerekecek.

Yeni Satır Ekle

Sütun Yapısı

Bölüm ayarlarınızla işiniz bittiğinde, aşağıdaki sütun yapısına sahip bir satır ekleyin:

Sütun 1'e Blurb Modülü Ekle

Simge Seç

Bu satırın ilk sütununa bir Blurb Modülü ekleyeceğiz. Bu Blurb Modülünün ayarlarını değiştirdikten sonra, onu kalan sütunlar için yeniden kullanacağız. İçeriğinizi ekleyin, Görüntü ve Simge alt kategorisini açın ve istediğiniz simgeyi seçin.

Arka plan rengi

Ardından, Blurb Modülünüzün arka plan rengi olarak '#a95abc' ekleyin.

Simge Ayarları

Tasarım sekmesine gidin ve simgenizin görünümünü değiştirin:

• Simge Rengi: #ffffff
• Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 52px

Başlık Metni Ayarları

Ardından, başlık metni ayarlarınızı değiştirin:

• Başlık Yazı Tipi Ağırlığı: Ultra Kalın
• Başlık Metni Hizalama: Orta
• Başlık Metin Rengi: #ffffff
• Başlık Metin Boyutu: 27px

Gövde Metni Ayarları

Ayrıca Blurb Modülümüzün gövde metninde de bazı değişiklikler yapacağız:

• Gövde Metni Hizalama: Orta
• Gövde Metni Rengi: #ffffff

aralık

Aşağıdaki yazdırma ekranında fark edebileceğiniz gibi, bu Blurb Modülü için biraz üst dolguya ihtiyacımız olacak. Bu, ayırıcının Blurb Modülünüzün içerdiği içerikle çakışmasını önleyecektir:

• Üst Dolgu: 150 piksel
• Sağ Dolgu: 20px
• Alt Dolgu: 50px
• Sol Dolgu: 20px

Sınır

Daha sonra sol alt ve sağ alta bazı yuvarlak '20 piksel' köşeleri uygulayacağız.

Kutu Gölge

Biraz derinlik oluşturmak için, ayarlarınızda ilk kutu gölgesi seçeneğini de etkinleştirebilirsiniz.

Blurb Modülünü Klonla ve 2. Sütundaki Yeri

Arka Plan Rengini Değiştir

1. sütundaki Blurb Modülünü değiştirmeyi bitirdik. Artık bu modülü klonlayabilir, ikinci sütuna yerleştirebilir ve arka plan rengini '#3c85c1' olarak değiştirebiliriz.

Blurb Modülünü Klonla ve 3. Sütundaki Yeri

Arka Plan Rengini Değiştir

Blurb Modülünü bir kez daha klonlayın, sütun 3'e yerleştirin ve arka plan rengi olarak '#7277f9' kullanın.

Tablet ve Telefon Sürümünü Yeniden Oluştur

Yeni Bölüm Ekle

Arka plan rengi

Tablet ve telefon versiyonu daha hassas bir yaklaşım gerektirir. Bölüm ayırıcı, bölümün başında görünmese de bölümün bir parçası olarak kalır. Daha küçük ekran boyutlarında, Blurb Modules yatay yerine dikey olarak görünecektir. Bu yüzden Blurb Modüllerinin her biri için ayrı bir bölüm ekleyeceğiz. Yeni bir normal bölüm ekleyin ve arka plan rengi olarak tekrar '#abd7f2' kullanın.

Üst Bölücü

Masaüstü sürümü için yaptığımızla aynı üst ayırıcıyı kullanıyoruz:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: #abd7f2
• Bölücü Yüksekliği: 182px
• Bölücü Düzenlemesi: Bölüm İçeriğinin Üstünde

aralık

Daha sonra bu bölüme bazı özel dolgular ekleyeceğiz:

• Üst Dolgu: 20px
• Alt Dolgu: 0px

görünürlük

Bu bölüm tablet ve mobil sürümün bir parçasıdır, bu nedenle bu bölümü Masaüstünde Görünürlük alt kategorisinde devre dışı bırakacağız.

Yeni Satır Ekle

Sütun Yapısı

İki sütunlu bir satır kullanmak yerine bir sütun kullanacağız.

Klon Sütun 1 Masaüstü Sürümünün Blurb Modülü ve Sütundaki Yeri

Boyutlandırmayı Değiştir

Bu sütuna kopyalayıp yerleştirebileceğimiz masaüstü Blurb Modülü zaten var. Değiştirmemiz gereken tek şey Boyutlandırma:

• Genişlik: %63 (Tablet), %99 (Telefon)
• Modül Hizalaması: Merkez

Tüm Bölümü İki Kez Klonla

Blurb Modüllerinin Arka Plan Rengini Değiştirin

Şimdi, bu bölümü iki kez klonlayın. İkinci Blurb Modülünüzün arka plan rengini '#3c85c1' olarak değiştirin.

Benzer şekilde, üçüncü Blurb Modülünüzün arka plan rengini '#7277f9' olarak değiştirin.

Bölücü Stili #2

Üst Bölücü Stili

Buna veya başka herhangi bir tasarıma farklı bölücü stilleri uygulayabilirsiniz. Listede aşağıdaki bölücü stili bulun:

Bölücü Stili #3

Üst Bölücü Stili

Ayrıca aşağıdaki bölücü stiliyle de gidebilirsiniz:

Bölücü Stili #4

Üst Bölücü Stili

Veya artan Bölücü Yatay Tekrarı '17x' gerektiren son bölücü stili.

Ön izleme

Artık tüm adımların üzerinden geçtik, bu eğitimde Blurb Modüllerine uyguladığımız farklı bölüm ayırıcılara son bir göz atalım:

Son düşünce

Bu iki bölümlük yazı için bu kadar! İlk bölümde, satırlara dolaylı olarak bölüm bölücülerin nasıl ekleneceğini gösterdik. Bu gönderiye, adım adım yeniden yarattığımız çarpıcı bir tasarımla eşlik ettik. Bu ikinci bölümde senaryoyu değiştirdik ve modüllere bölüm bölücüler uyguladık. Masaüstünde olduğu gibi tablet ve telefonda aynı etkiye sahip olmak için iki sürüm oluşturduk. Herhangi bir sorunuz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!