Använda Knapp och länkar, kan du lägga till vilken typ av Länk (1) till sektionen. Du kan lägga till en knapp/textlänk/bildlänk/ikon/avgränsare.
Du kan duplicera (2), Redigera (3) eller Radera (4) den befintliga knappen/länken.
I den här artikeln:
Lägg till knappar/länkar
- För att lägga till någon typ av länk till avsnittet, klicka på + Lägg till knapp alternativ.
Ocuco-landskapet + Lägg till knapp alternativet ger fyra sätt att lägga till en länk. Utöver detta kan du också lägga till separatorer för att lägga till mellanrum mellan knappar/länkar. Följande är alternativen:
Knappen
Lägg till en knapp i listobjektet.
Du kommer att kunna uppdatera:
- Knappetikett – Ange synlig text på din knapp. Det här är vad användarna kommer att se och klicka på.
- Knapplänk – Ange URL eller åtgärd knappen ska utlösas när man klickar på den.
- Målfönster – Välj om länken ska öppnas i samma flik eller ett ny flik.
- Knappstil – Välj knappstilen som standard (ställs in i Knappar och länkar fliken i avsnittet Design), Solid, Outline eller en textlänk.
-
- Standard: Följer din webbplats temainställningar.
- Fast: En fet, fylld knapp.
- Disposition: Transparent bakgrund med en kantlinje.
- Textlänk: Enkel, ren textstil (ingen knappruta).
- Knappform – Ställ in a anpassad form för varje enskild knapp inom sektionen. Detta låter dig åsidosätta den globala knappformen som definierats under Designinställningar, vilket ger dig mer kontroll över hur varje knapp visas. De tillgängliga formerna är Kvadratisk, Rundad och Pilformad.
- Knappfärg – Anpassa knappens färgschema:
-
- Standard: Ärver temainställningar.
- Invertera: Vänder om färgerna på knappens text/bakgrund.
- Custom: Gör att du kan välja specifika text- och bakgrundsfärger.
- Button Text - Om du använder Anpassad knappfärg, kan du ställa in textfärg (etikett) härifrån.
- Knappbakgrund – Finns även under Anpassad, och ställer in knappens bakgrundsfärg. Kombinera detta med textfärg för maximal läsbarhet och stil.
- Knappikon – Lägg till en ikon bredvid din knappetikett. Du kan välja mellan olika ikonalternativ.
- Layout – Kontrollera ikonens placering i förhållande till etiketten. Tillgängliga layoutalternativ är:
-
- Etikett + Ikon: Text visas först, följt av ikonen.
- Ikon + Etikett: Ikonen visas först, sedan texten.
- Etikett + Ikon (Bred): Text och ikoner arrangerade med mer utfyllnad, lämpliga för bredare knappar.
- Ikon + Etikett (Bred): Ikon först, bredare utfyllnadslayout.
- Ikon Färg – Välj färg på knappikonen. Du kan antingen ställa in den till Button Text färg eller Varumärke Färg.
Inställningar för knappstil
Du hittar dessa inställningar under Fliken Stil av sektioner. Med dessa inställningar kan du finjustera utseendet, avståndet och layouten för knappar på din Pixpa-webbplats för bättre designkontroll och responsivitet:
- Knappstorlek – Välj storlek på knappen (t.ex. Liten, Mellan, Stor). Detta justerar utfyllnaden och teckenstorleken så att den passar din design.
- Mellanrum mellan knappar – Styr det horisontella avståndet mellan flera knappar. Du kan använda vw-enheter (viewport width) för responsivt avstånd.
- Utrymme ovanför knappar – Lägger till vertikalt avstånd ovanför knappen/knapparna. Detta hjälper till att separera dem från innehållet ovan, mätt i %.
- Textlänk – Justerar teckenstorleken för knapptextlänkar (särskilt användbart när man använder en "Textlänk"-stil istället för en traditionell knapp).
- Bild som knapp (storlek) – Om du använder en bild istället för en traditionell knapp definierar den här inställningen bildens visningsstorlek (i pixlar).
- Knappbredd – Välj hur bred knappen ska visas:
-
- Standard: Standardbredd baserad på knappinnehåll
- Stor / Extra stor: Bredare knappar för mer fokus
- Full bredd: Knappen sträcker sig över hela containerns bredd
Textlänk
Lägg till textlänk till listobjektet.
Du kommer att kunna uppdatera:
- Ställ in textetikett.
- ange textlänk.
- Målfönster – Välj att öppna sidan i samma eller ett nytt fönster.
Bild
Lägg till en bild och länka den till valfri sida.
- När du har laddat upp bilden visas den på det här sättet. Klicka på länken för att redigera den.
- Härifrån kan du:
- Ladda/Ändra bilden.
- Knapplänk – Ange länken.
- Målfönster – Välj att öppna sidan i samma eller ett nytt fönster.
Webbplatstitel kommer att användas som alt-text för knappens bild för att förbättra sökbarheten.
Social ikon
- Lägg till en social ikon till listobjektet.
Du kan hantera:
- Den sociala ikonen som ska länkas.
- Ange din relevanta sociala profilsökväg.
- Målfönster – Välj att öppna sidan i samma eller ett nytt fönster.
Separator
Ocuco-landskapet Separator alternativet låter dig infoga avstånd mellan knappar eller länkar.
Detta är användbart för att skapa visuell separation mellan knappar som är placerade nära varandra. Du kan lägga till en avgränsare från Knapp och länkar panelen precis som du lägger till andra knappar.
- Avståndet mellan knapparna styrs av Vaddering – Överdel inställningen i avgränsaren. Genom att justera detta värde ökar eller minskar du det vertikala avståndet mellan knappar som är placerade tätt tillsammans.
- En avgränsare länkar inte någonstans – den skapar helt enkelt ett vertikalt utrymme.
- Du kan flytta den uppåt eller nedåt för att justera avståndet mellan objekten efter behov.
Stilalternativ för knappar och länkar
Ocuco-landskapet stilalternativ kommer att vara närvarande under Stil fliken medan du hanterar avsnittet.
Du kommer att ha flera stilalternativ för knappen och länkarna enligt följande:
Knapp och länkar
- ange Mellanslag mellan knapp/länkar som har lagts till.
- ange Mellanslag ovanför knapp/länkar.
- Välj hovring Effekt för knappen/länkarna.
- Välj storleken på normalknappen som du har lagt till i Knapp/länkar.
- ange bildknappens höjd om du har lagt till en bildlänk i Knapp/länkar.
- ange storleken på ikonknappen om du har lagt till en social ikon i Knapp/länkar.
Om du har lagt till en social ikon i Knapp/länkar ovan, då:
- Välj Typ av social ikon/Form.
- Välj Social ikon färgstil. Om du har valt Märkesfärg, då ärvs ikonens varumärkesfärg.
Om du har valt Vald färg alternativ ovan då:
-
- ange Social ikon färg.
- ange Social ikon bakgrundsfärg.
Exempelvis
Anta att du har lagt till en Amazon social länk i Knapp/länkar, och specificerade ikonfärg som röd och ikonbakgrundsfärg som grön, då kommer ikonen att visas som nedan:
