Divi ile Benzersiz Bir Açılış Sayfası Oluşturmak için Yan ve Dikey Metin Kullanma

Geçtiğimiz birkaç yılın web tasarımlarına baktığınızda, parlak renkler, asimetrik şekiller ve çift tonlardan oluşan bir desen fark etmeden edemezsiniz, Gerçekten benzersiz web sitesi tasarımları şu anda trend. Ve çoğu zaman öylece duran kelimelerinizi alıp dikey metin haline getirmekten daha cesur ne olabilir?

O halde bugünün öğreticisini inceleyelim ve #verticaltext trendini elde etmek için ne gerektiğini görelim.

Ne Yapacaksın

Bugün size anlattıklarımın nihai sonucu basit, temiz ve — söylemeye cesaret edebilir miyim? – şık. Dikey metin, aşırı kullanmak isteyeceğiniz bir efekt değildir, bu yüzden belki bir konser programı ya da belki ders saatlerinin bir listesi olduğunu düşünüyorum. Hatta bir yemek kamyonu menüsü veya konum programı. Temel olarak, hızlı ve hem dikkat çekici hem de akılda kalıcı olması gereken herhangi bir bilgi.

Şimdi bunu sizin için gerçekleştirmeye başlayalım!

Divi ile Benzersiz Bir Açılış Sayfası Oluşturmak için Yan ve Dikey Metin Kullanma

Youtube Kanalımıza Abone Olun

Bir Özel Bölüm ekleyin!

Divi'de yeni bir sayfa açtığınızda karşınıza neredeyse boş bir tuval çıkıyor. Normal bir bölümle başlarsınız. Ama normal bir bölüm istemiyoruz. Özel bölüm istiyoruz. Mavi + daireye basın, ortadaki özel bölüm düğmesini tıklayın ve yeni modda en sonuncuyu seçin. Sonra o sıkıcı eski normal bölümü silin.

Şimdi, size davranılmayı hak ettiğiniz gibi davranacak parlak, turuncu bir özel bölüm kaldı – özel. Bunun içine eklemek istediğiniz şey şudur: sol sütunda 1 metin modülü ve sağ sütunda 4 metin modülü bulunan iki sütunlu bir satır. Ardından, sağdaki bağımsız noktada tek bir görüntü modülü kullanacaksınız.

Ayrıca unutmayın: Bu, görsel oluşturucu içindeki Tel Çerçeve Görünümüdür ve tıpkı arka uç oluşturucu gibi çalışır, ancak daha hızlıdır. Denemediyseniz, lütfen bir şans verin. Gerçekten harika.

Sonraki Durak: Özel CSS

Tamamen CSS ile ilgili olmasanız bile, bu snippet'lerin kullanımı ve uygulanması basittir ve her satırın ne yaptığını bilmeniz için kodu yorumladığınızdan emin oldum. WP yerleşik linterinin metin yönlendirmesini sevmediğini unutmayın : upright; . Onsuz, bu işe yaramaz. Bu sarı üçgeni görmezden gelebileceğiniz bir durum.

.sideways-text {
transform: rotate(90deg); /* makes entire paragraphs and lines rotate sideways */
}

.vertical-yellow {
text-orientation: upright; /* makes individual characters stand upright, not whole lines like transform: rotate */
writing-mode: vertical-lr; /* continues left-to-right at line break */
color: yellow;
font-size:2rem; /* this will make the body text twice the relative size of the default set for the whole site */
line-height: 200%; /* line height is VISUALLY line-width when it's vertical */
text-transform: uppercase;
font-family: monospace; /* this just pretties up the whole deal, making all characters the same width */
}

.vertical-white {
text-orientation: upright;
writing-mode: vertical-lr;
color: white;
font-size:2rem;
line-height: 200%;
text-transform: uppercase;
font-family: monospace;
}

Bu kodu kopyalayıp Divi Tema Seçeneklerinin Özel CSS alanına (Genel sekmesi altında) yapıştırabilirsiniz.

Tasarımınız için ihtiyaç duyduğunuz şekilde sınıf adlarını ve renklerini ayarlamaktan çekinmeyin. Kullandığım arka planla sarı ve beyazın görünüşünü beğendim. Arka plandan bahsetmişken…

Arka Planınızı Yapmak

Bence bu tür cesur siteler pek de doğal olmayan renk paletleriyle harika görünüyor. Çift tonlar şu sıralar çok trend, ben de böyle bir şey istedim. Görüntülerinizin renklerini çift ton olarak ayarlamanın birçok yolu vardır, ancak Flywheel'de Photoshop'u nasıl kullanacağınıza dair harika bir öğretici vardır. Ancak bu sefer Photoshop kullanmadım – sadece Snagit'te oynadım ve sevdiğim bir şey yaptım.

Joy'un harika fotoğraflarından birini temel olarak kullandım. (Bu resmi indirmekten çekinmeyin ve istediğiniz gibi kullanın!). İşte orijinal:

Biraz kırptım (2000×1333'ten 2000×920'ye) ve sağ alt köşedeki Efektler penceresini açtım ve Renk Ayarlama ayarlarıyla oynadım.

• Parlaklık: -13%
• Kontrast: -1%
• Renk tonu: -157
• Doygunluk: %13
• Gama: 1.69

Oldukça Çift tonlu değil, ama onunla çalışmak için bana paleti aynı tür verdi.

Bu yapıldıktan sonra Divi ile inşaata gittim.

Divi ile yapmak

Metnimiz gibi, sol üstten başlayalım ve sayfanın aşağısına doğru ilerleyelim. Öncelikle modül ayarlarının Admin Label bölümünde tüm modülleri sizin için etiketlemeye özen gösterdim. Tel Çerçeve Görünümü'nü kullanarak satır içinde de yazabilirsiniz.

Yan Metin

Yan metni tek bir CSS satırı ile yaptık: transform: döndürme(90deg); Bunun bir metin dönüşümü olmadığına dikkat edin , sadece transform . Bu, bu modüldeki herhangi bir şey – resimler, videolar vb. – 90 derece döndürüleceği anlamına gelir. (Ya da koyduğunuz miktar).

Divi ayarları için şu değişiklikleri yapmak istiyorsunuz:

• Tasarım sekmesi, Aralık: %45 üst dolgu, %15 sol dolgu
• Gelişmiş sekmesi, CSS Kimliği ve Sınıfları: CSS sınıfı alanında "yan metin" (sınıf olduğunu belirtmek için "." olmadan)

Dikey Başlık Metni

Dikey Başlık Metin kutusu için… kesinlikle hiçbir şey yapmanız gerekmez. Bunu H2'ye ayarladım ve kaydet'e bastım (Yönetici Etiketi vermenin dışında). (Bu, merak ediyorsanız, Görsel Oluşturucu'daki Izgara Görünümüdür.)

Dikey Aylar, Tarihler, Saatler

Bunlar yine üst üste yığılmış metin modülleridir. Daha önce girdiğimiz CSS nedeniyle içerik kutusuna istediğinizi yazabilirsiniz, dikey olarak çıkacaktır. Yeni bir paragraf girip başladığınızda, bu öncekinin solunda olacaktır ( yazma modu sayesinde : dikey-lr; snippet). Yeni paragrafları sağa istiyorsanız, bunu yazma moduna değiştirebilirsiniz: dikey-rl; burada son iki harf soldan sağa veya sağdan sola temsil eder.

Bu, bu modüllerin her biri için aynıdır. Yaptığım tek özelleştirme, dikey-sarı veya dikey-beyaz CSS sınıfını eklemekti. Bunun sebebi evet tek aralıklı ve büyük harfle girdiğimiz CSS çok yardımcı oluyor ama Divi Specialty bölümü zaten içeriğin iyi yer alması için dizilmiş durumda. Bu yüzden normal yerine uzmanlık kullanmayı seçtim. Çoğu bölüm, satır ve sütunun genellikle yaptığından çok daha az kenar boşlukları, dolgu ve hizalama ile oynamayı gerektirir.

Şimdi, bunu yaptığınızda arka plan resminize bağlı olarak, bazı şeyleri kenar boşlukları veya farklı özel bölümlerle hareket ettirmeniz gerekebilir. Merkez odaklı bir arka plan resminin bu tür siteler için iyi çalıştığını düşünüyorum, ancak ana öğenin solda veya sağda (veya üstte veya altta, hatta) olduğu bir resminiz varsa, konumlandırma biraz daha ince ayar gerektirebilir.

Başka bir şey: ayrıca birden çok kelime yazabilirsiniz. Bu örnek sadece satır başına bir kelime olacak. Tüm cümleler iyidir, ancak okunması daha zor. Kısa tutun, ancak yalnızca solo kelimelerle sınırlı değilsiniz.

Yalnız Görüntü Modülü

Buraya isteğe bağlı olarak bir modül eklemeyi düşünüyorum. Uzmanlık bölümünün bir parçası olarak orada ve bence çoğu durumda bir logo güzel görünüyor. Ancak boş bırakmak isterseniz yapabilirsiniz. Divi uzmanlık bölümünün sağladığı boşluk, sayfanın geri kalanını ne olursa olsun hizalı tutar. Bu, arka arkaya değil, yani kapsayıcıya verdiğiniz stil ve boşluktan ve üstüne ve altına yerleştirdiğiniz öğelerden bağımsızdır.

Son sonuç

Bu zarif efektlerle yaratabileceğiniz şeylerle gurur duyacağınızı düşünüyorum. İşte yukarıdaki adımların size bir kez daha kazandıracağı şey.

İşte aldın

Divi'den elde ettiğiniz gülünç sayıda seçeneği (özel bölümler gibi) yalnızca birkaç havalı (ve bir tür belirsiz) CSS satırıyla birleştirdiğinizde, gerçekten benzersiz sayfalar oluşturabilirsiniz. Bu etki her site için kesinlikle doğru olmasa da, yan ve dikey metinlerin eklenmesi, sayfaları gerçekten öne çıkarabilir ve geleneksel bir açılış sayfasından daha akılda kalıcı olmasını sağlayabilir. Öyleyse Divi Nation, devam edin ve dikey metin ve yan döndürmelerle ne kadar harika şeyler yapabileceğinizi görün.

Yan veya dikey metinle ne gibi harika efektler yapabildiniz?