Divi: Nejlepší WordPress téma všech dob!

více Stahování 901.000, Divi je nejoblíbenější téma WordPress na světě. Je kompletní, snadno použitelný a je dodáván s více než šablonami 62 zdarma.

Chcete vědět, jak umístit modul Blurb z divi zvýrazněné při rozmazání ostatních?

Bez ohledu na typ Webové stránky stavíte, je pravděpodobné, že v určitém okamžiku budete chtít vidět seznam různých služeb, fází a dalších. 

Jedním z nejjednodušších způsobů, jak vytvořit takový seznam atraktivním způsobem, je použít modul Blurb from divi. Moduly Blurb vám umožňují krásně strukturovat obsah seznamu a zároveň vám poskytují nekonečné možnosti návrhu.

V tomto tutoriálu to uděláme o krok dále a ukážeme vám, jak zvýraznit modul Blurb při najetí myší a rozmazat ostatní, které jste zobrazili. Je to skvělý způsob, jak zdůraznit jeden modul Blurb najednou, aniž byste nechali ostatní moduly Blurb rozptylovat čtenáře. 

Pojďme.

přehled

Než se ponoříme do tohoto tutoriálu, pojďme se rychle podívat na výsledek na různých velikostech obrazovky.

Stolní počítač

zvýrazněte modul Divi Blurb a zároveň rozmažte ostatní

Mobilní verze

zvýrazněte modul Divi Blurb a zároveň rozmažte ostatní

Začněme navrhovat s Divi

Přidejte novou sekci

Barva pozadí

Začněte přidáním běžné sekce na novou stránku nebo na stránku, na které právě pracujete. 

Můžete se také poradit: Divi: Jak vytvořit sekci členů týmu jako kolotoč

Otevřete nastavení sekce a změňte barvu pozadí.

  • Pozadí: #eaeaea

Vzdálenost

Přidejte také hodnoty mezer.

  • Okraj (nahoře, dole, vlevo a vpravo): 2vw
  • Výplň (nahoře a dole): 0px

Hranice

Doplňte parametry řezu přidáním poloměru ohraničení.

  • Zaoblené rohy: 20px

Přidat nový řádek

Struktura kolony

Pokračujte přidáním nového řádku do sekce pomocí následující struktury sloupců:

Rozměry

Bez přidání jakýchkoli modulů otevřete nastavení linky a změňte nastavení velikosti.

  • Vyrovnat výšky sloupců: ANO
  • Šířka: 90 %
  • Maximální šířka: 1 pixelů
  • Minimální výška: 500 pixelů (počítač), automaticky (tablet a telefon)

Vlastní CSS (hlavní prvek)

Zarovnejte obsah sloupce přidáním jednoho řádku kódu CSS do prvku hlavního řádku.

Vytvořte si snadno svůj web pomocí Elementoru

Elementor vám umožní tvořit Snadno a zdarma jakýkoli design webových stránek nebo blogu s profesionálním vzhledem. Přestaňte platit hodně za web, který si můžete udělat sami.

align-items: center;
Modul Divi's Blurb

Přidejte modul Blurb do sloupce 1

Přidat obsah

Jediný modul, který v tomto tutoriálu používáme, je modul Blurb.

Tento modul však můžete nahradit libovolným modulem dle vašeho výběru, pokud přidáte třídu CSS, kterou budeme sdílet v dalších krocích. 

Přidejte první modul Blurb do sloupce 1 a vložte obsah podle svého výběru.

Vyberte ikonu

Poté vyberte ikonu.

  • Použít ikonu: ANO
  • Ikona: Viz snímek obrazovky

Přechod na pozadí (přejetí myší)

Poté použijte přechod pozadí pouze při najetí myší.

  • Přechodové zastávky
    • 20 %: #ffffff
    • 80 %: #0f1bff
  • Typ gradientu: Lineární

Nastavení ikon (počítač)

Přepnout na kartu Design modulu a změňte nastavení ikon následovně:

  • Barva ikony: #ffffff
  • Obrázek/ikona Zaoblené rohy: 50px
  • Šířka okraje obrázku/ikony: 5 pixelů
  • Barva ohraničení: #ffffff
  • Umístění obrázku/ikony: Nahoře
  • Zarovnání obrázku/ikony: vlevo

Nastavení ikony ukazatele myši

Při najetí myší změňte různé barvy ikon.

  • Barva ikony (umístění myši): #0f1bff
  • Barva pozadí obrázku/ikony (umístění myši): #f7f7f7

Nastavení textu nadpisu

Pokračujte změnou nastavení textu nadpisu.

  • Název Písmo: Source Sans Pro
  • Tloušťka písma: Tučné
  • Styl písma nadpisu: TT (velká písmena)

Nastavení textu nadpisu po najetí myší

Při najetí myší změňte barvu textu nadpisu.

  • Barva textu nadpisu: #ffffff

Nastavení textu popisu (počítač)

Chcete prodávat své produkty na internetu?

Stáhněte si zdarma WooCommerce, nejlepší pluginy pro e-commerce pro prodej vašich fyzických a digitálních produktů na WordPress a snadné vytvoření vašeho online obchodu. Ideální pro začátečníky.

Dále jsou nastavení hlavního textu.

  • Body Font: Open Sans
  • Výška linie těla: 2 m

Nastavení textu popisu po najetí myší

Při umístění kurzoru použijte barvu textu.

  • Barva textu těla (umístění myši): #ffffff

Vzdálenost

Dále přejděte na nastavení mezer a přidejte vlastní hodnoty odsazení.

  • Výplň (nahoře, dole, vlevo a vpravo): 50 pixelů

Box Shadow (počítač)

Používáme i krabicový stín.

  • Síla rozostření rámečku: 80px
  • Síla rozprostření stínu rámečku: -20px
  • Barva stínu: rgba (255,255,255,0.18)

Box Shadow (Hover)

Změňte barvu stínu vznášení.

  • Barva stínu: rgba (0,0,0,0.18)

CSS třídy

A aby došlo k efektu rozostření, budeme muset našemu modulu Blurb přiřadit třídu CSS. Později v článku použijeme tuto třídu CSS v kódu JQuery.

  • CSS Třída: blurb-item

Dvakrát naklonujte modul Blurb a umístěte duplikáty do zbývajících sloupců

Jakmile dokončíte modul Blurb ve sloupci 1, můžete jej dvakrát naklonovat a umístit duplikáty do zbývajících sloupců řádku.

Naklonujte celou řadu

Řádek můžete klonovat tolikrát, kolikrát chcete, v závislosti na tom, kolik modulů Blurb chcete na stránce zobrazit.

Přizpůsobte moduly Blurb jednotlivě

Samozřejmě budete muset upravit individuální obsah každého modulu Blurb.

Přidat nový řádek

Struktura kolony

Přidejte další řádek do sekce pomocí následující struktury sloupců:

Vzdálenost

Otevřete nastavení čar a ve výchozím nastavení odstraňte všechna horní a spodní výplň. To pomůže snížit prostor obsazený tímto řádkem.

  • Výplň (nahoře a dole): 0px

Přidejte modul kódu do sloupce

Vložte kód JQuery a CSS

Přidejte modul Code do sloupce řádku a vložte nějaký kód JQuery a CSS, aby se efekt projevil. 

Nezapomeňte vložit kód JQuery mezi značky skriptu a kód CSS mezi značky stylu, jak můžete vidět na tiskové obrazovce níže.

jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);
 
$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');
 
});
});

Čtěte také: Divi: Jak vytvořit sekci Reference ve formě mřížky

.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}

přehled

Nyní, když jsme prošli všemi kroky, pojďme se konečně podívat, jak to vypadá na různých velikostech obrazovky.

Stolní počítač

zvýrazněte modul Divi Blurb a zároveň rozmažte ostatní

Mobilní verze

zvýrazněte modul Divi Blurb a zároveň rozmažte ostatní

Stáhnout DIVI hned!!!

závěr

V tomto článku jsme vám ukázali, jak být kreativní s moduly Blurb, které sdílíte na svém Webové stránky

Konkrétně jsme vám ukázali, jak zvýraznit modul Blurb při umístění kurzoru rozmazáním ostatních, které jste zobrazili. 

Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.

Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci projektů vytváření internetových stránek.

Neváhejte se také podívat na našeho průvodce na Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.

Mezitím sdílejte tento článek na různých sociálních sítích.

...

%d blogerům se líbí tato stránka: