CMS Styling - Text och Knappar
Många komponenter i vår plattformsbyggare har textelement i sig. I den här guiden beskrivs hur du kan redigera utformningen av dessa textelement.
I det här avsnittet om grundläggande styling får du den information du behöver för att få dina textelement att stämma överens med plattformens övergripande design. I avsnittet om avancerad styling längre ner får du ytterligare tips om du vill skapa en mer avancerad design för din plattform när du hanterar text och knappar.
Om du vill ha mer information om CMS-styling kan du söka i Tailwind CSS-guiderna som finns tillgängliga på https://tailwindcss.com/docs.
Följande stilar, från den minsta till den största, bestämmer storleken på texten: text-sm, text-base, text-lg, text-xl, text-2xl, text3xl, text4xl, text5xl, text6xl, text-7xl, text-8xl, text-9xl.
Det finns många olika färger att välja mellan i Tailwind CSS-guiderna. För en ljus textfärg på en mörk bakgrund rekommenderar vi att du använder text-zinc-100 (en något off-white färg) och för en mörk textfärg på en ljus bakgrund rekommenderar vi att du använder text-grey-900 (en något off-black färg).
I de allmänna inställningarna (plattform - hantera plattform) kan du lägga till specifika färger som du kan tillämpa genom att använda text-primary, text-accent, text-customColor1, ..., text-customColor5. Vissa textelement på din plattform kommer som standard att ha text-primary styling tillämpad. Att ställa in dessa anpassade färger är ett bra sätt att säkerställa en konsekvent användning av dina varumärkesfärger på plattformen.
Du hittar en fullständig lista över färger som är tillgängliga i Tailwind på https://tailwindcss.com/docs/customizing-colors.
Det finns en mängd olika typsnittsvikter för att avgöra hur fet texten visas. Vi föreslår att du använder font-normal, font-medium, font-bold och font-black. Du kan använda stilen italics för att få texten att visas i kursiv stil. Observera att beroende på vilket typsnitt som används på din plattform (väljs i allmänna inställningar) kanske vissa typsnittsvikter inte är tillgängliga.
I vissa situationer kanske du vill använda mer avancerad styling på dina texter, t.ex. en bakgrundsfärg och en ram eller, för klickbara länkar, en visuell förändring när du håller muspekaren över texten. Nedan följer några tips som visar avancerade stylingsmetoder som vi använder mest frekvent på våra plattformar.
Observera att vissa knappelement på din plattform redan har en del av denna styling, så i så fall bör du redigera den befintliga stylingen om du vill ändra färg, storlek eller något annat av stylingelementen.
För att få din text att sticka ut på sidan, eller för att visuellt indikera att texten är klickbar, kanske du vill lägga till en bakgrundsfärg bakom texten. För att göra detta lägger vi till stylingen bg-#### (där #### representerar färgstylingen, t.ex. bg-orange-600 eller bg-customColor1).
Detta skapar en bakgrund som ligger tätt intill texten, men vanligtvis vill vi att rutan ska vara något större än texten, så vi lägger till lite utfyllnad för att göra detta. Om vi vill lägga till lika mycket utfyllnad på alla sidor kan vi lägga till p-4 för att lägga till 4 enheter utfyllnad. Om vi vill lägga till mer horisontell utfyllnad och mindre vertikal utfyllnad kan vi istället lägga till px-6 och py-2 (”x” representerar den horisontella axeln och ”y” representerar den vertikala axeln).
Du kanske inte gillar de fyrkantiga hörnen och vill skapa något med en mjukare rundad look. För att göra detta lägger vi till stylingen rounded-## (där ## representerar storleken på de rundade kanterna, som varierar från rounded-sm upp till rounded-3xl, och sedan rounded-full för en helt rundad stil).
Om du också vill lägga till en ram på den här rutan måste du definiera tre element: Ramens bredd, ramens stil och ramens färg. Vi föreslår antingen border (storlek 1 enhet) eller border-2 för bredden och border-solid för stilen. Valet av färg är upp till dig att bestämma, och detta använder stylingformatet border-#### (t.ex. border-white eller border-customColor2).
För klickbara länkar/knappar kanske du vill att texten ska ändras visuellt när du håller muspekaren över den, för att visa att användarna kan klicka på texten.
För alla hover-animationer använder vi klassen hover: med stylingformatet hover:#### (t.ex. hover:bg-customColor1 eller hover:text-red-300).
I exemplet nedan är bakgrunden gjord mörkare när du håller muspekaren över rutan. För att göra detta lägger vi till hover:bg-orange-800, eftersom orange-800 är en mörkare nyans av orange jämfört med orange-600, som vi har som standardbakgrundsfärg.
När du har gjort ändringar i plattformsredigeraren ska du alltid komma ihåg att trycka på ”Spara” längst ned till vänster för att spara dina ändringar och få en förhandsgranskning till höger.
Om du är nöjd med dina ändringar trycker du på ”Publicera” för att göra dem tillgängliga på plattformen. Du kan också trycka på ”Släng utkast” för att radera alla dina ändringar efter den senaste publiceringen.
Grundläggande styling av text
I det här avsnittet om grundläggande styling får du den information du behöver för att få dina textelement att stämma överens med plattformens övergripande design. I avsnittet om avancerad styling längre ner får du ytterligare tips om du vill skapa en mer avancerad design för din plattform när du hanterar text och knappar.
Om du vill ha mer information om CMS-styling kan du söka i Tailwind CSS-guiderna som finns tillgängliga på https://tailwindcss.com/docs.
Storlek på texten
Följande stilar, från den minsta till den största, bestämmer storleken på texten: text-sm, text-base, text-lg, text-xl, text-2xl, text3xl, text4xl, text5xl, text6xl, text-7xl, text-8xl, text-9xl.
Färg på texten
Det finns många olika färger att välja mellan i Tailwind CSS-guiderna. För en ljus textfärg på en mörk bakgrund rekommenderar vi att du använder text-zinc-100 (en något off-white färg) och för en mörk textfärg på en ljus bakgrund rekommenderar vi att du använder text-grey-900 (en något off-black färg).
I de allmänna inställningarna (plattform - hantera plattform) kan du lägga till specifika färger som du kan tillämpa genom att använda text-primary, text-accent, text-customColor1, ..., text-customColor5. Vissa textelement på din plattform kommer som standard att ha text-primary styling tillämpad. Att ställa in dessa anpassade färger är ett bra sätt att säkerställa en konsekvent användning av dina varumärkesfärger på plattformen.
Du hittar en fullständig lista över färger som är tillgängliga i Tailwind på https://tailwindcss.com/docs/customizing-colors.
Typsnittsvikt och kursiv stil
Det finns en mängd olika typsnittsvikter för att avgöra hur fet texten visas. Vi föreslår att du använder font-normal, font-medium, font-bold och font-black. Du kan använda stilen italics för att få texten att visas i kursiv stil. Observera att beroende på vilket typsnitt som används på din plattform (väljs i allmänna inställningar) kanske vissa typsnittsvikter inte är tillgängliga.
Avancerad styling av text och knappar
I vissa situationer kanske du vill använda mer avancerad styling på dina texter, t.ex. en bakgrundsfärg och en ram eller, för klickbara länkar, en visuell förändring när du håller muspekaren över texten. Nedan följer några tips som visar avancerade stylingsmetoder som vi använder mest frekvent på våra plattformar.
Observera att vissa knappelement på din plattform redan har en del av denna styling, så i så fall bör du redigera den befintliga stylingen om du vill ändra färg, storlek eller något annat av stylingelementen.
Bakgrundsfärg
För att få din text att sticka ut på sidan, eller för att visuellt indikera att texten är klickbar, kanske du vill lägga till en bakgrundsfärg bakom texten. För att göra detta lägger vi till stylingen bg-#### (där #### representerar färgstylingen, t.ex. bg-orange-600 eller bg-customColor1).
Detta skapar en bakgrund som ligger tätt intill texten, men vanligtvis vill vi att rutan ska vara något större än texten, så vi lägger till lite utfyllnad för att göra detta. Om vi vill lägga till lika mycket utfyllnad på alla sidor kan vi lägga till p-4 för att lägga till 4 enheter utfyllnad. Om vi vill lägga till mer horisontell utfyllnad och mindre vertikal utfyllnad kan vi istället lägga till px-6 och py-2 (”x” representerar den horisontella axeln och ”y” representerar den vertikala axeln).
Rundade hörn och ram
Du kanske inte gillar de fyrkantiga hörnen och vill skapa något med en mjukare rundad look. För att göra detta lägger vi till stylingen rounded-## (där ## representerar storleken på de rundade kanterna, som varierar från rounded-sm upp till rounded-3xl, och sedan rounded-full för en helt rundad stil).
Om du också vill lägga till en ram på den här rutan måste du definiera tre element: Ramens bredd, ramens stil och ramens färg. Vi föreslår antingen border (storlek 1 enhet) eller border-2 för bredden och border-solid för stilen. Valet av färg är upp till dig att bestämma, och detta använder stylingformatet border-#### (t.ex. border-white eller border-customColor2).
Visuella förändringar när du håller muspekaren
För klickbara länkar/knappar kanske du vill att texten ska ändras visuellt när du håller muspekaren över den, för att visa att användarna kan klicka på texten.
För alla hover-animationer använder vi klassen hover: med stylingformatet hover:#### (t.ex. hover:bg-customColor1 eller hover:text-red-300).
I exemplet nedan är bakgrunden gjord mörkare när du håller muspekaren över rutan. För att göra detta lägger vi till hover:bg-orange-800, eftersom orange-800 är en mörkare nyans av orange jämfört med orange-600, som vi har som standardbakgrundsfärg.
Spara och publicera
När du har gjort ändringar i plattformsredigeraren ska du alltid komma ihåg att trycka på ”Spara” längst ned till vänster för att spara dina ändringar och få en förhandsgranskning till höger.
Om du är nöjd med dina ändringar trycker du på ”Publicera” för att göra dem tillgängliga på plattformen. Du kan också trycka på ”Släng utkast” för att radera alla dina ändringar efter den senaste publiceringen.
Uppdaterad den: 04/11/2024
Tack så mycket!