Divi: Najlepšia WordPress tému všetkých čias!

viac Stahovanie 901.000, Divi je najobľúbenejšia WordPress tému na svete. Je kompletný, ľahko použiteľný a je dodávaný s viac než 62 bezplatnými šablónami.

Souhaitez savoir comment mettre un module Blurb de divi en surbrillance tout en floutant les autres ?

Bez ohľadu na typ webové stránky que vous construisez, il y a de fortes chances qu’à un moment donné, vous souhaitiez afficher une liste de différents services, étapes et plus encore. 

L’un des moyens les plus simples d’aborder la création d’une telle liste de manière attrayante consiste à utiliser le module Blurb de divi. Les modules Blurb vous permettent de structurer magnifiquement le contenu de la liste tout en vous offrant des possibilités de conception infinies.

V tomto návode to urobíme o krok ďalej a ukážeme vám, ako zvýrazniť modul Blurb pri umiestnení kurzora myši a rozmazať ostatné, ktoré ste zobrazili. Je to skvelý spôsob, ako zdôrazniť jeden modul Blurb naraz, bez toho, aby ostatné moduly Blurb rozptyľovali čitateľa. 

Poďme.

prehľad

Pred ponorením sa do tohto tutoriálu sa pozrime na výsledok na rôznych veľkostiach obrazovky.

Stolný počítač

zvýraznite modul Divi Blurb, zatiaľ čo ostatné rozmažete

Verzia pre mobilné zariadenia

zvýraznite modul Divi Blurb, zatiaľ čo ostatné rozmažete

Začnime navrhovať s Divi

Pridajte novú sekciu

Farba pozadia

Začnite pridaním bežnej sekcie na novú stránku alebo stránku, na ktorej práve pracujete. 

Môžete sa tiež poradiť: Divi: Ako vytvoriť sekciu členov tímu ako kolotoč

Otvorte nastavenia sekcie a zmeňte farbu pozadia.

  • Pozadie: #eaeaea

riadkovanie

Pridajte aj hodnoty medzier.

  • Okraj (hore, dole, vľavo a vpravo): 2vw
  • Výplň (horná a dolná časť): 0 pixelov

Hranice

Doplňte parametre sekcie pridaním polomeru okraja.

  • Zaoblené rohy: 20px

Pridať nový riadok

Štruktúra stĺpca

Pokračujte pridaním nového riadka do sekcie pomocou nasledujúcej štruktúry stĺpcov:

Dimenzovanie

Zatiaľ bez pridania modulov otvorte nastavenia linky a zmeňte nastavenia veľkosti.

  • Vyrovnať výšky stĺpcov: ÁNO
  • Šírka: 90 %
  • Maximálna šírka: 1 pixelov
  • Minimálna výška: 500 pixelov (stolný počítač), automaticky (tablet a telefón)

Vlastný CSS (hlavný prvok)

Zarovnajte obsah stĺpca pridaním jedného riadka kódu CSS do prvku hlavného riadka.

Ľahko vytvorte svoje webové stránky pomocou Elementoru

Elementor vám umožňuje vytvárať Jednoducho a zadarmo akýkoľvek dizajn webovej stránky alebo blogu s profesionálnym vzhľadom. Prestaňte platiť veľa za webovú stránku, ktorú môžete urobiť sami.

align-items: center;
Modul Divi's Blurb

Pridajte modul Blurb do stĺpca 1

Pridajte obsah

Jediný modul, ktorý používame v tomto návode, je modul Blurb.

Tento modul však môžete nahradiť ľubovoľným modulom podľa vášho výberu, pokiaľ pridáte triedu CSS, ktorú budeme zdieľať v ďalších krokoch. 

Pridajte prvý modul Blurb do stĺpca 1 a vložte obsah podľa vlastného výberu.

Vyberte ikonu

Potom vyberte ikonu.

  • Použite ikonu: ÁNO
  • Ikona: Pozrite si snímku obrazovky

Prechod pozadia (umiestnenie kurzora myši)

Potom použite prechod pozadia iba pri umiestnení kurzora myši.

  • Prechodové zarážky
    • 20 %: #ffffff
    • 80 %: #0f1bff
  • Typ gradientu: Lineárny

Nastavenia ikon (počítač)

Prepnúť na kartu dizajn modulu a zmeňte nastavenia ikon nasledovne:

  • Farba ikony: #ffffff
  • Obrázok/ikona zaoblené rohy: 50 pixelov
  • Šírka okraja obrázka/ikony: 5 pixelov
  • Farba orámovania: #ffffff
  • Umiestnenie obrázka/ikony: Hore
  • Zarovnanie obrázka/ikony: Doľava

Nastavenia ikony kurzora myši

Zmeňte farby rôznych ikon pri umiestnení kurzora myši.

  • Farba ikony (umiestnenie myši): #0f1bff
  • Farba pozadia obrázka/ikony (umiestnenie kurzora myši): #f7f7f7

Nastavenia názvu nadpisu

Pokračujte zmenou nastavení textu nadpisu.

  • Názov Font: Source Sans Pro
  • Hrúbka písma: tučné
  • Štýl písma nadpisu: TT (veľké písmená)

Nastavenia textu nadpisu umiestnením kurzora myši

Zmeňte farbu textu nadpisu pri umiestnení kurzora myši.

  • Farba textu nadpisu: #ffffff

Nastavenia textu popisu (počítač)

Chcete predávať svoje produkty na internete?

Stiahnite si zadarmo WooCommerce, najlepšie doplnky elektronického obchodu na predaj vašich fyzických a digitálnych produktov na WordPress a jednoduché vytvorenie vášho online obchodu. Ideálne pre začiatočníkov.

Ďalej sú nastavenia textu tela.

  • Písmo tela: Open Sans
  • Výška línie tela: 2 m

Nastavenia textu popisu umiestnením kurzora myši

Pri umiestnení kurzora myši použite farbu textu.

  • Farba textu tela (umiestnenie kurzora myši): #ffffff

riadkovanie

Ďalej prejdite na nastavenia medzier a pridajte vlastné hodnoty výplne.

  • Výplň (hore, dole, vľavo a vpravo): 50 pixelov

Box Shadow (počítač)

Používame aj krabicový tieň.

  • Sila rozmazania rámčeka: 80px
  • Sila rozpätia tieňa rámčeka: -20px
  • Farba tieňa: rgba (255,255,255,0.18)

Box Shadow (umiestnenie kurzora myši)

Zmeňte farbu vznášajúceho sa tieňa.

  • Farba tieňa: rgba (0,0,0,0.18)

Triedu CSS

A aby došlo k efektu rozmazania, budeme musieť nášmu modulu Blurb priradiť triedu CSS. Ďalej v článku použijeme túto triedu CSS v kóde JQuery.

  • CSS Trieda: blorb-item

Dvakrát naklonujte modul Blurb a umiestnite duplikáty do zostávajúcich stĺpcov

Po dokončení modulu Blurb v stĺpci 1 ho môžete dvakrát naklonovať a umiestniť duplikáty do zostávajúcich stĺpcov riadku.

Naklonujte celý riadok

Riadok môžete klonovať toľkokrát, koľkokrát chcete, v závislosti od toho, koľko modulov Blurb chcete na svojej stránke zobraziť.

Prispôsobte moduly Blurb jednotlivo

Samozrejme, budete musieť upraviť individuálny obsah každého modulu Blurb.

Pridať nový riadok

Štruktúra stĺpca

Pridajte do sekcie ďalší riadok pomocou nasledujúcej štruktúry stĺpcov:

riadkovanie

Otvorte nastavenia linky a predvolene odstráňte všetky horné a spodné vypchávky. Pomôže to znížiť priestor, ktorý zaberá tento riadok.

  • Výplň (horná a dolná časť): 0 pixelov

Pridajte modul kódu do stĺpca

Vložte kód JQuery a CSS

Pridajte modul Code do stĺpca riadku a vložte nejaký kód JQuery a CSS, aby sa efekt prejavil. 

Nezabudnite vložiť kód JQuery medzi značky skriptu a kód CSS medzi značky štýlu, ako môžete vidieť na obrazovke tlače nižšie.

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

Prečítajte si tiež: Divi: Ako vytvoriť sekciu Referencie vo forme mriežky

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

prehľad

Teraz, keď sme prešli všetkými krokmi, poďme sa konečne pozrieť na to, ako to vyzerá na rôznych veľkostiach obrazovky.

Stolný počítač

zvýraznite modul Divi Blurb, zatiaľ čo ostatné rozmažete

Verzia pre mobilné zariadenia

zvýraznite modul Divi Blurb, zatiaľ čo ostatné rozmažete

Stiahnite si DIVI teraz!!!

záver

Dans cet article, nous vous avons montré comment faire preuve de créativité avec les modules Blurb que vous partagez sur votre webové stránky

Konkrétne sme vám ukázali, ako zvýrazniť modul Blurb pri umiestnení kurzora myši rozmazaním ostatných, ktoré ste zobrazili. 

Dúfame, že vás tento návod inšpiruje pre vaše ďalšie Divi projekty. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.

Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok.

Neváhajte si pozrieť aj nášho sprievodcu na Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.

Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.

...

%d bloggerov sa páči táto stránka: