Wix webové stránky od nuly - mřížky galerie

• Duben 20, 2024

V tomto tutoriálu přidáme do našeho webu Wix galerii, kterou jsme vytvořili z prázdné šablony. Začínat od nuly je skvělý způsob, jak se naučit základům.

Na rozdíl od šablon Wix, které nejsou zaměnitelné, můžete kdykoli přepnout typy galerií pro nový vzhled. Existuje mnoho druhů galerií, od mřížky zdiva až po voštinu. Každá galerie má své vlastní funkce. Pojďme se podívat na základní gridovou (portrétní) galerii.

1. V levé nabídce klikněte na ikonu Plus a v seznamu vyberte Galerie.
   
   
2. Chcete-li zobrazit náhled a popis, umístěte ukazatel myši nad každou miniaturu galerie.
   
   
3. Nyní přetáhněte galerii mřížky na stránku.
   
   
4. Pomocí úchytů pro změnu velikosti můžete změnit velikost mřížky podle potřeby. Změnil jsem velikost mřížky na šířku stránky 980.
   
   V tomto okamžiku má galerie několik zástupných obrázků. Pojďme si je nechat prozatím a pracujeme na přizpůsobení nastavení galerie pro naše potřeby.
   
   Nastavení galerie mřížky
   
   Image Scaling - Máte možnost, aby byl váš obrázek oříznut nebo upraven tak, aby se vešel do rámečku. Nastavení Autocrop automaticky ořízne obrázky tak, aby se vešly do rámečku, a volba Přizpůsobit změní velikost obrázku tak, aby se vešel do rámečku.
   
   Po kliknutí - Máte tři možnosti, co se stane, když kliknete na obrázek galerie. Jedna možnost, aby se nic nestalo. Druhým je otevření obrázku jako vyskakovacího okna. Třetí je otevření odkazu. Ve většině případů je vyskakovací okno dobrou volbou, protože obraz je zobrazen ve větší velikosti. Pokud však chcete poslat návštěvníka na jinou stránku, použijte možnost Otevřít odkaz.
   
   
5. Vyberte galerii a v rozbalovací nabídce klikněte na ikonu Nastavení.
   
   
6. V okně Nastavení mřížky vyhledejte sekci Jak se obrázky chovají. Zvolte Autocrop nebo Fit.
   
   
7. V části Po klepnutí nastavte jednu ze tří možností.
   
   Design galerie
   
   Jak bylo uvedeno výše, můžete kdykoli přepínat návrhy galerie. Ale pokračujme přizpůsobením našeho návrhu mřížky. Pro návrh mřížky můžeme přizpůsobit ohraničení, rohy, stín a text.
   
   
8. Když je galerie stále vybrána, klikněte na ikonu Design (štětec).
   
   
9. Pro nastavení okraje můžeme změnit barvu, neprůhlednost a šířku okraje. Ponecháme výchozí nastavení šířky nastavené na 0, a tedy bez ohraničení.
   
   
10. Poloměr rohu - Klikněte na ikonu poloměru rohu a nastavte poloměr levého horního rohu, jak chcete. Jak ikona odkazu naznačuje, další tři rohy se budou aktualizovat, aby odpovídaly.
    
    
11. Shadow - Vyberte ikonu Shadow. Chcete-li přidat vržený stín, klepněte na přepínač Povolit stín a nastavte stín, úhel, vzdálenost, velikost, rozostření a barvu / krytí.
    
    
12. Text - Klepnutím na ikonu T nastavíte možnosti pro nastavení názvu, popisu a dalšího textu. Pojďme změnit text z výchozího na naše textové téma odstavce 1. Opakujte pro text Popis.
    
    Nastavení rozvržení
    
    Pro návrh galerie mřížky můžeme řídit počet sloupců a řádků pro miniatury. Můžeme také ovládat mezery mezi miniaturami a způsob, jakým je text zobrazen na obrázku.
    
    
13. Když je galerie stále vybrána, klikněte v rozbalovací nabídce na ikonu Rozvržení.
    
    
14. Pomocí posuvníku nastavte počet sloupců a řádků. Přidání dalších sloupců a řádků povede k menšímu zobrazení miniatur v mřížce.
    
    
15. Pomocí posuvníku Mezery můžete zvětšit počet pixelů mezi miniaturami. Přidáním více místa zmenšíte velikost miniatur.
    
    
16. Pod posuvníky je sekce zarovnání textu. Máte možnost zobrazit text vlevo, vpravo nebo uprostřed.
    
    

Screenshoty používané se svolením Wix.com, Inc.

Video Návody: Como hacer Responsive Design | Codigo para una Pagina Responsive (Duben 2024).