{"id":96,"date":"2025-03-17T12:52:52","date_gmt":"2025-03-17T12:52:52","guid":{"rendered":"https:\/\/designmall.wpenginepowered.com\/?page_id=96"},"modified":"2025-11-18T07:44:41","modified_gmt":"2025-11-18T07:44:41","slug":"dokumentation-designmall","status":"publish","type":"page","link":"https:\/\/pronovaab.se\/en\/dokumentation-designmall\/","title":{"rendered":"Dokumentation designmall"},"content":{"rendered":"

Moln1 2025<\/span><\/p>\n

Dokumentation av designmall<\/h1>\n<\/div><\/div>

H\u00e4r hittar vi dokumentation och beskrivningar av funktioner\/design\/css som finns i v\u00e5r designmall.<\/p>\n

N\u00e4r en ny kund vill ha en hemsida \u00e4r tanken att vi ska kunna utg\u00e5 fr\u00e5n denna mall d\u00e4r all design, alla till\u00e4gg och \u00f6vriga hj\u00e4lpmeddel redan \u00e4r f\u00f6rberedda pch installerade. N\u00e4r designen \u00e4r klar\/ska lanseras \u00e4r det viktigt att man tar bort den CSS som man inte inte anv\u00e4nder f\u00f6r att den inte ska dra ner laddningstiden p\u00e5 hemsidan.<\/p>\n<\/div><\/div><\/div><\/div><\/div>

CSS\/HTML crashcourse<\/h2>\n

Alla hemsidor \u00e4r, i grunden, uppbyggda i HTML (HyperText Markup Language)<\/strong>. Det \u00e4r HTML:en som bildar strukturen\/skelettet av en hemsida. Detta skelett f\u00e5r sen sin design med hj\u00e4lp av CSS (Cascading Style Sheets)<\/strong>.<\/p>\n

Element i HTML \u00e4r uppbyggda av \"taggar\". Det finns oftast en starttagg och en sluttagg:<\/strong><\/p>\n<\/div><\/div>

Rubrik
<h2>Välkommen till oss<\/h2><\/strong><\/span><\/p>\n

Br\u00f6dtext
<p>Här har vi en paragraf som innehåller lite text<\/p><\/strong><\/span><\/p>\n<\/div><\/div>

\"L\u00e5dor\" som byger upp sklettet om omringar olika element
<div><\/strong><\/span>
<p>Paragraf som ligger i en div<\/p><\/span><\/strong>
<\/div><\/strong><\/span><\/p>\n<\/div><\/div>

I CSS kan man skapa klasser med olika stilar som man sen kan applicera p\u00e5 html-element f\u00f6r att det elementet ska f\u00e5 stilen fr\u00e5n klassen.\u00a0 Till exempel:<\/p>\n<\/div><\/div>

Nedan kan vi se en p-tagg (br\u00f6dtext) som har klassen .text<\/strong><\/p>\n<\/div><\/div>

<p class="text">Detta är en viktig text!<\/p><\/strong><\/span><\/p>\n<\/div><\/div>

CSS:<\/strong><\/p>\n<\/div><\/div>

.text {
color: red;
font-size: 17px;
}<\/strong><\/span><\/p>\n<\/div><\/div>

I klassen .text<\/strong> skapar vi design som appliceras p\u00e5 alla de element som har klassen .text<\/strong>. I detta fall kommer texten bli r\u00f6d (color: red;)<\/strong> och vara 17px (font-size: 17px;)<\/strong> stor.<\/p>\n<\/div><\/div>

Ett HTML-element kan ha hur m\u00e5nga klasser som helst.
Div-elementet nedan har klassen .cards-wrapper, .w-50 & .card-1.<\/strong><\/p>\n<\/div><\/div>

<div class="cards-wrapper w-50 card-1">
<\/strong><\/span><p class="text">Detta är en viktig text!<\/p>
<\/div><\/strong><\/span><\/p>\n<\/div><\/div>

CSS:<\/strong><\/p>\n<\/div><\/div>

display: flex; aktiverar Flexbox<\/strong> som g\u00f6r det enkelt att justera och placera element i en kontainer\/div.
flex-wrap: wrap;<\/strong> g\u00f6r s\u00e5 att alla element alltid har samma h\u00f6jd.
.cards-wrapper{
display: flex;
<\/strong><\/span>flex-wrap: wrap;
}<\/strong><\/span><\/p>\n

.w-50, st\u00e5r i sin korthet f\u00f6r \"width 50%\"<\/strong> vilket inneb\u00e4r att alla kolumner\/kort som ligger innan f\u00f6r denna klassen blir 50%. Senare kan vi \u00e4ven se .w-33, w.25<\/strong> osv. som representerar andra bredder.
.w50 {
width: calc((100% \/ 2) - 20px);<\/span>
}<\/strong><\/span><\/p>\n

.card-1 \u00e4r en klass som representerar en individuell design.<\/strong> I koden nedan ger vi en h3:a textstorleken 21px. Alla h3:ord som ligger innanf\u00f6r en div med denna klass kommer f\u00e5 samma textstorlek.
.card-1 h3 {
font-size: 21px;<\/span>
}<\/strong><\/span><\/p>\n<\/div><\/div>

N\u00e4r man namnger en klass \u00e4r det bra att t\u00e4nka p\u00e5 att de ska kunna \u00e5teranv\u00e4ndas<\/strong> s\u00e5 mycket s\u00e5 m\u00f6jligt. I exemplet ovan kan vi se att namnen ofta beskriver vad dom g\u00f6r och att de inte \u00e4r bundna till ett visst inneh\u00e5ll som tj\u00e4nster\/medarbetare\/kontakt osv.\u00a0<\/p>\n

Det \u00e4r f\u00f6r att jag inte ska d\u00f6pa en klass till .cards-services<\/strong> som sen \u00e4ven anv\u00e4nds under kontakt.<\/p>\n<\/div><\/div>

<div class="cards-wrapper w-50 card-1">
<\/strong><\/span><p class="text">Detta är en viktig text!<\/p>
<\/div><\/strong><\/span><\/p>\n<\/div><\/div>

N\u00e4r ett element har flera klasser kan man ocks\u00e5 \"para ihop\" klasserna i css:en likt nedan:<\/p>\n<\/div><\/div>

.cards-wrapper.w-50 .et_pb_column{
\n width: calc((100% \/ 2) - 20px);
\n margin: 10px;
\n}<\/strong><\/span><\/p>\n<\/div><\/div>

Som vi kan se st\u00e5r det .cards-wrapper.w-50<\/strong> vilket i princip inneb\u00e4r att w.50 inte dungerar utan .cards-wrapper. Cards-wrapper g\u00f6r det m\u00f6jligt att positionera elementen<\/strong> och .w-50 ber\u00e4ttar hur dom ska vara positionernade<\/strong><\/p>\n

F\u00f6r elementet .et_pb_column<\/strong> som har ett mellanrum efter .w-50 s\u00e5 inneb\u00e4r det att detta element ligger innanf\u00f6r<\/strong> elementet med klassen .w-50. Det beh\u00f6ver inte ligga som n\u00e4sta direkta element men det ligger fortfarande innanf\u00f6r.<\/p>\n

Nedan kan vi se hur det ser ut i Divi:<\/p>\n<\/div><\/div>

<div class=\"et_pb_row et_pb_row_20 cards-wrapper w-50<\/strong><\/span> et_pb_equal_columns\"><\/p>\n

Kolumn 1<\/strong>
<div class=\"et_pb_column_1_2 et_pb_column<\/strong><\/span> et_pb_column_39 et_pb_css_mix_blend_mode_passthrough\"><\/p>\n

Textmodul<\/strong>
<div class="et_pb_module et_pb_text et_pb_text_49 et_pb_text_align_left et_pb_bg_layout_light">
<div class="et_pb_text_inner"><\/p>\n

Text = paragraf tagg<\/strong>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.<\/p>
<\/div>
<\/div><\/p>\n

<div class="et_pb_module et_pb_text et_pb_text_50 et_pb_text_align_left et_pb_bg_layout_light">
<\/div>
<\/div><\/p>\n

Kolumn 2<\/strong>
<div class=\"et_pb_column_1_2 et_pb_column<\/strong><\/span> et_pb_column_39 et_pb_css_mix_blend_mode_passthrough\"><\/p>\n

Textmodul<\/strong>
<div class="et_pb_module et_pb_text et_pb_text_51 et_pb_text_align_left et_pb_bg_layout_light">
<div class="et_pb_text_inner"><\/p>\n

Text = paragraf tagg<\/strong>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.<\/p>
<\/div>
<\/div><\/p>\n

<div class="et_pb_module et_pb_text et_pb_text_52 et_pb_text_align_left et_pb_bg_layout_light">
<\/div>
<\/div>
<\/div><\/p>\n<\/div><\/div><\/div><\/div>

CSS + Divi = <\/i><\/h2>\n

Alla klasser som p\u00e5verkar layout ska l\u00e4ggas i den gr\u00f6na sektionen.<\/strong> L\u00e4ggs den p\u00e5 den bl\u00e5a sektionen kommer den p\u00e5verka positionen p\u00e5 alla element som ligger inannf\u00f6r den. S\u00e5 till exempel cards-wrapper w-50 som g\u00f6r s\u00e5 att kolumner blir 50% ska ligga p\u00e5 en gr\u00f6n sektion med tv\u00e5 kolumner innanf\u00f6r sig. Det inneb\u00e4r att vi dessutom bara beh\u00f6ver l\u00e4gga in klassen p\u00e5 ett st\u00e4lle och inte p\u00e5 varje individuell kolumn<\/p>\n

D\u00e4remot kan klasser som endast p\u00e5verkar designen p\u00e5 ett enda element l\u00e4ggas p\u00e5 den svarta sektionen<\/strong>. Detta inkluderar till exempel designen p\u00e5 knappar.<\/p>\n

M\u00e5let \u00e4r hela tiden att inte beh\u00f6va l\u00e4gga in klassen p\u00e5 on\u00f6digt m\u00e5nga st\u00e4llen<\/strong>. Om du har tre kolumner med en knapp-design kan man t\u00e4nka att det \u00e4r mer v\u00e4rt att l\u00e4gga in klassen en g\u00e5ng p\u00e5 den gr\u00f6na sektionen ist\u00e4llet f\u00f6r att l\u00e4gga in den individuellt p\u00e5 alla kolumner.<\/p>\n

I CSS har klasser en . framf\u00f6r sig men n\u00e4r du l\u00e4gger in en klass i Divi l\u00e4gger du in den utan punkt.<\/strong><\/p>\n

S\u00e5h\u00e4r l\u00e4gger du till en klass i Divi.
G\u00e5 till Inst\u00e4llningar > Avancerat. Klassen l\u00e4gger du p\u00e5 \"CSS Class\"<\/strong><\/p>\n<\/div><\/div>

<\/span><\/div>

Ovanf\u00f6r kan man se att det finns ett f\u00e4lt f\u00f6r CSS Class och ett f\u00f6r CSS ID.
Skillnaden mellan dessa \u00e4r att att ett ID kan du bara ha p\u00e5 ett element medan en klass kan du ha p\u00e5 hur m\u00e5nga element som helst. Eftersom vi f\u00f6rs\u00f6ker \u00e5teranv\u00e4nda s\u00e5 mycket kod s\u00e5 m\u00f6jligt \u00e4r det alltid klasser vi jobbar med.
ID:t kan dock anv\u00e4ndas n\u00e4r man ska l\u00e4nka till en specifik sektion. D\u00e5 ger man sektionen ett unikt ID, till exempel \"services\" och l\u00e4nkar sen till #services<\/p>\n<\/div><\/div><\/div><\/div><\/div>

Starta fr\u00e5n designmallen<\/h2>\n

N\u00e4r man skapat en kopia av designmallen f\u00f6r att starta en ny hemsidan finns det vissa saker som \u00e4r bra att starta med. Typsnitt, f\u00e4rg och form.<\/p>\n<\/div><\/div><\/div><\/div>

\u00c4ndra f\u00e4rg och form till ny kund<\/h3>\n

1.<\/strong> Typsnitt \u00e4ndrar du direkt i Divi, precis som vanligt.
Appearance > Customize > General settings > Typography
<\/strong>
2.<\/strong> F\u00e4rgen \u00e4ndrar du p\u00e5 tv\u00e5 st\u00e4llen. I Divi \u00e4ndrar du den globala f\u00e4rgen som redan ligger.
Bl\u00e5 = prim\u00e4r
<\/span><\/strong>Gr\u00f6n = sekund\u00e4r<\/span><\/strong>.
Du beh\u00f6ver \u00e4ven \u00e4ndra h\u00f6gst upp i CSS filen. Koden som nu ser nedan \u00e4r av olika variabler. Man kan s\u00e4ga att, precis som i Divi, g\u00f6r detta att f\u00e4rgerna blir globala<\/strong>. F\u00e4rgerna kommer alltid h\u00e4mtas h\u00e4rifr\u00e5n. Ist\u00e4llet f\u00f6r att skriva rgb (color: rgb(255 153 0);)<\/strong> eller HEX (color: #ff9900;)<\/strong> vilket g\u00f6r att man m\u00e5ste skriva in f\u00e4rgerna individuellt och ristera att f\u00e4rgerna inte blir konsekventa skriver man ist\u00e4llet in variabeln color: rgb(var(--primary-color));<\/strong>. D\u00e5 h\u00e4mtas f\u00e4rgen fr\u00e5n --primary-color: 0, 138, 207; ist\u00e4llet.<\/p>\n

Variablernas f\u00e4rger \u00e4r skrivna i rgb s\u00e5 du \u00e4ndrar bara f\u00e4rgen till den du vill ha bland siffrorna.
<\/strong>Se nedan:<\/p>\n<\/div><\/div>

:root {<\/strong>
\n\/* Colors *\/
\n--primary-color: 0, 138, 207;<\/strong><\/span>
\n--secondary-color: 186, 211, 108;<\/strong><\/span><\/p>\n

--gray-light-color: 245, 245, 245;
\n--black-color: 0, 0, 0;
\n--white-color: 255, 255, 255;<\/p>\n

\/* Typography *\/
\n--base-size: 16px;
\n}<\/strong><\/p>\n<\/div><\/div>

3.<\/strong> Form. N\u00e4r det kommer till formen syftar jag fr\u00e4mst p\u00e5 formen p\u00e5 knapparna. Ska de vara rundade eller kantiga? V\u00e4lj det som passar f\u00f6retagets grafiska profil b\u00e4st. Detta \u00e4ndrar du i CSS filen p\u00e5 det som heter \"border-radius<\/strong>\". H\u00e4r skriver du hur m\u00e5nga px du vill att kanten ska vara rundad.<\/p>\n<\/div><\/div>

\/* Knappar, design *\/
.et_pb_contact_submit,<\/strong>
.btn a,<\/strong>
.btn .et_pb_text_inner a {<\/strong>
min-width: 140px;
padding: 13px 30px !important;
font-weight: 600;
text-align: center;
text-decoration: none;
transition: all .4s ease;
display: inline-block;
text-decoration: none;
letter-spacing: 1px;
font-size: 15px !important;
border-radius: 40px;<\/strong><\/span>
}<\/strong><\/p>\n<\/div><\/div><\/div><\/div>

Vanliga klasser<\/h2>\n

N\u00e5gra av dom vanligaste klasserna vi anv\u00e4nder \u00e4r design p\u00e5 knappar, bild + text och sektion med 2-4 kort.<\/p>\n<\/div><\/div>

Knappar<\/h3>\n

N\u00e4r man ska l\u00e4gga in design p\u00e5 en knapp anv\u00e4nder man i grunden tv\u00e5 klasser:<\/p>\n

.btn<\/strong> - Grunddesign och struktur som g\u00e4ller alla knappar
<\/strong>.btn-primary-filled<\/strong> - Individuell f\u00e4rg f\u00f6r knappen<\/p>\n

Klassen .btn<\/strong> representerar strukturen & grunddesignen av sj\u00e4lva knappen. Typsnitt, textstorlek, marginaler osv. Allt f\u00f6rutom f\u00e4rgen kan man s\u00e4ga.
N\u00e4sta klass l\u00e4gger p\u00e5 resterande design, f\u00e4rgen. F\u00e4rgen h\u00e4mtas fr\u00e5n den globala f\u00e4rgen i variablerna som vi pratat om tidigare.<\/p>\n

Klasserna l\u00e4ggs p\u00e5 ett textblock som har en l\u00e4nk i sig.<\/strong><\/p>\n

.btn-primary-filled<\/strong><\/span>
Ifylld knapp med primary-color f\u00e4rgen<\/p>\n<\/div><\/div>

<\/span><\/div>

.btn-primary-border<\/strong><\/span>
Transparent bakgrund med text och border i primary-color f\u00e4rgen<\/p>\n<\/div><\/div>

<\/span><\/div>

Samma design finns f\u00f6r:
.btn-secondary-filled<\/strong>
.btn-secondary-border,<\/strong>
.btn-white-filled,<\/strong>
.btn-white-border<\/strong><\/span><\/p>\n

Namnen ovan talar f\u00f6r sig sj\u00e4lv.<\/p>\n

.btn-wrapper<\/strong><\/span>
L\u00e4gger till marginal ovanf\u00f6r knappen om den ligger f\u00f6r tight inp\u00e5 texten ovanf\u00f6r.<\/p>\n<\/div><\/div>

Byta text-f\u00e4rg i knapp<\/h3>\n

Om du vill \u00e4ndra text-f\u00e4rgen p\u00e5 en knapp g\u00f6r du det vid koden nedan.
\nDet g\u00e5r bra att anv\u00e4nda n\u00e5gon av tidigare variabler eller en helt separat f\u00e4rg.<\/p>\n<\/div><\/div>

\/* btn-primary-filled *\/
.btn-primary-filled .et_pb_text_inner a,
.btn-primary-border .et_pb_text_inner a:hover {<\/strong>
background-color: rgb(var(--primary-color));
border: 2px solid rgb(var(--primary-color));
color: rgb(var(--white-color));<\/strong><\/span>
}<\/strong><\/p>\n

\/* btn-primary-border *\/
.btn-primary-border .et_pb_text_inner a,
.btn-primary-filled .et_pb_text_inner a:hover {<\/strong>
background-color: transparent;
border: 2px solid rgb(var(--primary-color)) !important;
color: rgb(var(--primary-color));<\/strong><\/span>
}<\/strong><\/p>\n

\/* btn-secondary-filled *\/
.btn-secondary-filled .et_pb_text_inner a,
.btn-secondary-border .et_pb_text_inner a:hover {<\/strong>
background-color: rgb(var(--secondary-color));
border: 2px solid rgb(var(--secondary-color));
color: rgb(var(--white-color));<\/strong><\/span>
}<\/strong><\/p>\n

\/* btn-secondary-border *\/
.btn-secondary-border .et_pb_text_inner a,
.btn-secondary-filled .et_pb_text_inner a:hover {<\/strong>
background-color: transparent;
border: 2px solid rgb(var(--secondary-color));
color: rgb(var(--secondary-color));<\/strong><\/span>
}<\/strong><\/p>\n<\/div><\/div>

Overlay<\/h3>\n

Vill man ha en m\u00f6rk overlay finns det tv\u00e5 klasser man kan anv\u00e4nda:<\/p>\n

.overlay-dark<\/strong>
.overlay-light<\/strong><\/p>\n

Dessa kan ligga p\u00e5 alla element<\/p>\n<\/div><\/div>

Columner med olika breddar<\/h3>\n

N\u00e4r man ska skapa en sektion med flera kolumner \u00e4r det bra att alltid ha som vana att l\u00e4gga p\u00e5 klasserna som anpassar bredden och marginalerna. Detta g\u00f6r att alla sektioner med kolumner har samma marginaler och responsivitet.<\/p>\n

.cards-wrapper<\/strong> - Grundkod f\u00f6r att kunna l\u00e4gga p\u00e5 bredd
.w-50<\/strong> - S\u00e4tter bredden, i detta fall att kolumnerna blir 50%<\/p>\n

.cards-wrapper anv\u00e4nds alltid medan .w-50 bytas ut mot den bredd du vill ha. TIll exempel:<\/p>\n

.w-30<\/strong> - 3 kolumner 33% bredd
.w-25<\/strong> - 4 kolumner 25% breda<\/p>\n

S\u00e5 om man vill ha en sektion med 3 kolumner l\u00e4gger man d\u00e5 p\u00e5 plassen cards-wrapper w-33<\/strong> p\u00e5 den gr\u00f6na sektionen.<\/p>\n<\/div><\/div>

Kolumner som kort<\/h3>\n

H\u00f6jd + f\u00e4rg p\u00e5 kolumnerna<\/h4>\n

Om man ska \u00e4ndra bakgrundsf\u00e4rgerna p\u00e5 kolumnerna \u00e4r det alltid bra att s\u00e4tta samma h\u00f6jd p\u00e5 alla kolumner:<\/p>\n<\/div><\/div>

<\/span><\/div>

N\u00e4r man \u00e4ndrar bakgrundsf\u00e4rgen g\u00f6rs det via den gr\u00f6na sektionen.<\/p>\n<\/div><\/div>

<\/span><\/div><\/div><\/div><\/div>

Top-section<\/h2>\n

P\u00e5 alla top-section sektioner kan man enkelt st\u00e4lla h\u00f6jd och bakgrundsbild\/video sj\u00e4lv.
Det som beh\u00f6vs st\u00e4llas in \u00e4r textstorlek, typsnitt och eventuellt max-bredden p\u00e5 br\u00f6dtexten.<\/p>\n<\/div><\/div><\/div><\/div>

Top-section-1<\/h3>\n<\/div><\/div>
<\/span><\/div>

Inneh\u00e5llet \u00e4r placerat med CSS f\u00f6r att ligga l\u00e4ngst ner till v\u00e4nster.
F\u00f6r att \u00e4ndra storleken p\u00e5 h1:<\/strong><\/p>\n<\/div><\/div>

.top-section-1 h1 {
font-size: 50px !important;<\/strong><\/span>
line-height: 1.1;
font-weight: 700;
}<\/p>\n<\/div><\/div>

F\u00f6r att placera inneh\u00e5llet centrerat till v\u00e4nster:<\/strong><\/p>\n<\/div><\/div>

.top-section-1 {
display: flex;
flex-wrap: wrap;
align-content: flex-end;<\/strong><\/span> byt till align-content: center;<\/strong><\/span>
}<\/p>\n<\/div><\/div>

F\u00f6r att \u00e4ndra max-bredden p\u00e5 br\u00f6dtexten<\/strong><\/p>\n<\/div><\/div>

.top-section-1 p {
max-width: 550px;<\/strong><\/span>
}<\/p>\n<\/div><\/div><\/div><\/div>

Top-section-2<\/h3>\n<\/div><\/div>
<\/span><\/div>

Inneh\u00e5llet \u00e4r placerat med CSS f\u00f6r att ligga centrerat
F\u00f6r att \u00e4ndra storleken p\u00e5 h1:<\/strong><\/p>\n<\/div><\/div>

.top-section-2 h1 {
font-size: 80px !important;<\/strong><\/span>
line-height: 1.1;
font-weight: 700;
}<\/p>\n<\/div><\/div>

F\u00f6r att \u00e4ndra max-bredden p\u00e5 br\u00f6dtexten<\/strong><\/p>\n<\/div><\/div>

.top-section-2 p {
max-width: 800px;<\/strong><\/span>
margin: 0 auto;
}<\/p>\n<\/div><\/div><\/div><\/div>

Split-section<\/h2>\n

Enkel sektion med tv\u00e5 kolumner, bild i ena och text i andra. Bilden agerar som en bakgrundsbild men \u00e4r inlagd som en vanlig bild f\u00f6r att man ska kunna ge en alt-tagg vilket \u00e4r bra n\u00e4r det kommer till SEO. Det enda man beh\u00f6ver korrigera h\u00e4r \u00e4r vissa marginaler och eventuellt en bakgrundsf\u00e4rg.<\/p>\n<\/div><\/div>

<\/span><\/div><\/div><\/div>

Standardklasser f\u00f6r Split-section<\/h3>\n

I grunden anv\u00e4nds 2 klasser p\u00e5 en split-section:<\/p>\n

.split-section<\/strong> - all design f\u00f6r en split-section
.split-content-align-center<\/strong> - g\u00f6r s\u00e5 att texten ligger centrerat till bilden<\/p>\n

Flera klasser som \u00e4r anv\u00e4ndbara och ofta paras med split-section:<\/p>\n

.reverse<\/strong> - om bilden ligger i f\u00f6rsta kolumnen (v\u00e4nster) ska denna klassen alltid finnas med. Den g\u00f6r s\u00e5 att texten alltid hamnar f\u00f6rst n\u00e4r kolumnerna blir 100%.<\/p>\n

Korrgera marginalerna<\/strong> p\u00e5 text-kolumnen (standard \u00e4r padding: 50px)
.pr-0<\/strong> - padidng-right: 0px
.pl-0<\/strong> - padding-left: 0px
.pt-0<\/strong> - padding-top: 0px
.pb-0<\/strong> - padding-bottom: 0px<\/p>\n<\/div><\/div>

<\/span><\/div>

Om texten ligger i h\u00f6ger kolumn b\u00f6r man ha som standard att l\u00e4gga p\u00e5 klassen pr-0<\/strong> som g\u00f6r s\u00e5 att texten str\u00e4cker sig hela v\u00e4gen ut i den gr\u00f6na sektionen. Annars blir det off-set. Detsamma g\u00e4ller n\u00e4r texten ligger till v\u00e4nster, d\u00e5 b\u00f6r man ha pl-0<\/strong><\/p>\n<\/div><\/div>

<\/span><\/div>

pt-0<\/strong> och pb-0<\/strong> kan anv\u00e4ndas n\u00e4r man k\u00e4nner att det \u00e4r v\u00e4ldigt mycket text och man beh\u00f6ver ta bort de undre och \u00f6vre marginalerna f\u00f6r att bilden inte ska bli f\u00f6r h\u00f6g.<\/p>\n

Man kan s\u00e4ga att standardklasser f\u00f6rr en split sektion \u00e4r:
Bild v\u00e4nster:<\/strong><\/span>
split-section split-content-align-center reverse pr-0<\/strong><\/p>\n

Bild h\u00f6ger:<\/strong><\/span>
split-section split-content-align-center pl-0<\/strong><\/p>\n<\/div><\/div>

Split med bakgrundsf\u00e4rg<\/h3>\n<\/div><\/div>
<\/span><\/div>

F\u00f6r en split-setion med bakgrundsf\u00e4rg beh\u00f6ver man bara ge den gr\u00f6na sektionen en bakgrundsf\u00e4rg. Bakgrundsf\u00e4rgen ska endast vara aktiv p\u00e5 desktop s\u00e5 se till att anpassa responsiviteten p\u00e5 den.
Man beh\u00f6ver inte korrigera n\u00e5gra marginaler p\u00e5 en split med bakgrundsf\u00e4rg (pr-0, pl-0<\/strong>)<\/p>\n<\/div><\/div>

<\/span><\/div>

Split-alt<\/h3>\n<\/div><\/div>
<\/span><\/div><\/div><\/div><\/div>

Ta bort on\u00f6dig kod och annat material n\u00e4r hemsidan ska lanseras<\/h2>\n

N\u00e4r man \u00e4r klar med sin design och hemsidan ska lanseras \u00e4r det viktigt att man tar bort alla undersidor som har med designmallen att g\u00f6ra. S\u00e5 designmallens startsida, dokumentationssidan och \u00e4ven koden f\u00f6r menyn som ligger p\u00e5 dokumentations-sidan.<\/p>\n

Denna kod hittar man i Adminpanelen > Custom CSS and JS<\/strong><\/p>\n<\/div><\/div>

<\/span><\/div>

Ta bort alla filer som har med dokumentation-meny att g\u00f6ra.<\/strong><\/p>\n<\/div><\/div>

Bilder<\/h3>\n

Ta \u00e4ven bort on\u00f6diga bilder som endast anv\u00e4nds i designmallen. Logotyper, beskrivande bilder, eventuellt bilder med px p\u00e5 men dessa g\u00e5r bra att ha kvar om man vill anv\u00e4nda dessa l\u00e4ngre fram.<\/p>\n<\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-96","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pronovaab.se\/en\/wp-json\/wp\/v2\/pages\/96","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pronovaab.se\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pronovaab.se\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pronovaab.se\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pronovaab.se\/en\/wp-json\/wp\/v2\/comments?post=96"}],"version-history":[{"count":0,"href":"https:\/\/pronovaab.se\/en\/wp-json\/wp\/v2\/pages\/96\/revisions"}],"wp:attachment":[{"href":"https:\/\/pronovaab.se\/en\/wp-json\/wp\/v2\/media?parent=96"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}