Grundläggande layout

Struktur av en slidde-webbsida

Slidde.co använder en enkel fyralagersstruktur:

Sida

Sida-lagret är högst upp och används för att ställa in globala stilar som typsnitt, färger och länkstilar, eftersom CSS-egenskaper är ärftliga.

Valfritt kan du använda CSS-variabler för att göra din mall mer användarvänlig.

Om du inte kan välja Sida-elementet direkt, använd alternativet Välj sida i verktygsfältet.

Funktionen Hash-sektion kan simulera en webbplats med flera sidor. Kolla in denna demo: Demo Link

Bildspel

En Bildspel är det första nivåelementet under en Sida, som används för att segmentera innehåll.

• Enkla sidor, som "länk i bio"-sidor, kan ha endast en Slide.
• Komplexa landningssidor kan innehålla flera sektioner som #header, #hero, #works, #contact, #footer.

En Ankar-ID (HTML ID) är i grunden ett HTML-ID. Namnge dem baserat på innehållet inom Bildspel för enkel navigering med länkar som “#ID”. Läs mer om skip-länkar.

För att dölja en Bildspel från den slutliga webbplatsen men behålla dem sparade, markera attributet Dold. Detta liknar PowerPoints dolda bilder och kan också användas för handledningar.

Funktionen Klistrig är för flytande navigeringsfält eller andra element. Se ett exempel här: Sticky Demo

Behållare

En Behållare hanterar responsiva bredder och fler-kolumnsvisningar.

• Mobil- och skrivbordsbredder skiljer sig vanligtvis. Använd attributet Bredd i en Behållare för anpassningsbara bredder över enheter.
• Kolumner definierar hur många kolumner som finns i en container. Du kan ställa in bredder som x/12 (t.ex. två 6/12 kolumner för 50% bredd vardera).

Varje kolumn kan också ha inställningar för horisontell och vertikal justering.

Annat

Andra element är inline-element, som kan placeras inuti containern.

Genom att följa detta strukturerade tillvägagångssätt kan du enkelt skapa visuellt tilltalande, responsiva webbsidor med Slidde.co.