Made by Anouk

View Original

Hoe kan ik een verticale lijn in Squarespace toevoegen? Volg deze simpele stappen.

Made by Anouk

Squarespace biedt geweldige functionaliteiten om je website er strak en professioneel uit te laten zien. Ik ben dol op het gebruik van een horizontale lijn als scheiding of om extra dimensie aan je website toe te voegen. Helaas heeft Squarespace geen optie voor een verticale lijn block.

Een verticale lijn in Squarespace kan echter helpen om informatie horizontaal te splitsen of als decoratie om de aandacht naar beneden te trekken. Maar hoe realiseer je dit?

Het is eigenlijk heel simpel en kan je Squarespace website een stuk mooier en gebruiksvriendelijker maken. Klaar om te starten? Lees dan vooral verder.

Voeg in 3 stappen een verticale lijn in Squarespace toe

See this content in the original post

Stap 1: maak de verticale lijn met html

Voeg eerst HTML toe op de plek waar je de verticale lijn wilt hebben in je Squarespace webpagina.

Voeg een Code Block toe op de gewenste locatie en vervang de voorbeeldtekst door de volgende HTML code:

<div class="verticale-lijn"></div>

TIP: Pas de naam van de div class aan zoals jij wilt. In dit voorbeeld heet het “verticale-lijn”, maar als je verschillend opgemaakte verticale lijnen op je Squarespace website wilt, kun je elke lijn een unieke naam geven.

Maak je geen zorgen als je nog geen verticale lijn op de pagina ziet! We moeten de verticale lijn nog stijlen met aangepaste CSS codering.

See this content in the original post

Stap 2: style de verticale lijn met css

Ga naar het Custom CSS paneel (Pages > Website Tools > Custom CSS) en plak de volgende code om de verticale lijn op je website weer te geven op alle schermformaten, ook op mobiele schermen.

//VERTICALE LIJN
@vertLineThickness: 1px;
#siteWrapper .code-block .sqs-block-content {
  position: unset;
}
  .code-block .verticale-lijn {
    height: 10px;
    &:before {
    content: '';
    position: absolute;
    height: 100%;
    width: @vertLineThickness;
    background: var(--section-divider-stroke-color, #3d3d3d);
    left: 50%;
    transform: translateX(-50%);
  }
 }

Als je de verticale lijn alleen op grote schermen wilt weergeven, gebruik dan deze code in het Custom CSS paneel:

//VERTICALE LIJN
@media screen and (min-width: 768px) {
  @vertLineThickness: 1px;
#siteWrapper .code-block .sqs-block-content {
  position: unset;
}
  .code-block .verticale-lijn {
    height: 10px;
    &:before {
    content: '';
    position: absolute;
    height: 40%;
    width: @vertLineThickness;
    background: var(--section-divider-stroke-color, #3d3d3d);
    left: 50%;
    transform: translateX(-50%);
  }
 }
}

TIP: Als je een andere naam hebt gebruikt voor de div class dan verticale-lijn in de HTML code, moet je deze naam ook in de CSS gebruiken. Bijvoorbeeld, als je de div class “vertical-1” hebt genoemd, vervang dan “.verticale-lijn” door “.vertical-1” in de CSS code.

See this content in the original post

Stap 3: bewerk het naar jouw behoeften

Laten we bekijken wat deze eigenschappen betekenen en hoe je de lijn naar wens kunt aanpassen:

  • background: var(--section-divider-stroke-color, #3d3d3d) ➝ De achtergrondkleur van de verticale lijn. In dit voorbeeld is de kleur donkergrijs (#3d3d3d). Je kunt dit vervangen door de HEX code van jouw keuze.

  • @vertLineThickness: 1px; ➝ De dikte van de verticale lijn. Verhoog dit getal voor een dikkere lijn.

  • height: 100% ➝ De hoogte van de verticale lijn binnen de Code Block. Pas dit aan om de lijn korter te maken.

Als je klaar bent met het aanpassen van de CSS code, klik dan op Save en ververs je pagina om de verticale lijn te zien verschijnen.

Dat is het! Vrij eenvoudig, toch?

In slechts 3 stappen heb je HTML en CSS gebruikt om je Squarespace website te voorzien met een verticale lijn. Voel je vrij om te experimenteren met de CSS en verschillende aanpassingen uit te proberen!

Wil je je Squarespace skills verbeteren? Check deze handige tips.👇