Et nettsteds topp- og bunntekst er viktige elementer. I de fleste tilfeller gir toppteksten navigasjonslenker som forenkler navigering til forskjellige deler av et nettsted. På den annen side inneholder bunnteksten viktig informasjon som besøkende på nettstedet kan kreve, for eksempel en bedriftsadresse eller kontaktinformasjon, for å nevne noen få amp .
Topptekster og bunntekster leveres av brukerens gjeldende tema på WordPress. Disse er vanligvis godt designet og tilstrekkelig for de fleste bruksområdene. Men hvis du ønsker å tilpasse temaene dine, må du endre koden; Dette er når Page Builder- plugin -ene kommer til nytte. Du kan bruke dem til å opprette og endre nettsidekomponenter uten å vite noen kode.
Denne opplæringen vil lære oss hvordan du lager topp- og bunntekst på et nettsted. Elementor Pro vil bli brukt (siden grunnversjonen av Elementor ikke inkluderer funksjonene som er viktigst for å lage disse komponentene). Så last ned Elementor Pro og sørg for at den er slått på.
- Hvorfor bør du velge Elementor som sidebygger?
- Elementor lar deg velge hovedoppsettet for din egendefinerte topp- og bunntekst.
- Hva er en header og hva gjør den?
- Hva er en bunntekst, nøyaktig?
- Hvordan lage en header
- Utvikle en topptekstmal
- Gjør endringer i overskriftsmenyen
- Overskriftspublikasjon
- Hvordan lage en bunntekst
- Utvikle en bunntekstmal
- Bunntekstendringer
- Ferdig produkt
- Undersøk topptekst- og bunntekstdelene for respons.
- Å bringe ting til en slutt
Hvorfor bør du velge Elementor som sidebygger?
Elementor er den mest avanserte sidebyggeren, som lar brukere bruke premium-elementer for å lage nydelige design og layouter. Det er veldig gunstig for nybegynnere som ikke har noen forkunnskaper om koding. Dra 'n' slipp-editoren i Elementor lar brukere flytte widgets og elementer rundt.
Elementor er en visuell sidebygger som lar brukere se hvordan sidene deres ser ut uten å bytte modus.
Et annet overbevisende argument for å bruke Elementor er at det meste av arbeid kan fullføres uten kostnad. Deres gratisutgave er mer enn i stand til å gi tilstrekkelige nettstedsredigeringsmuligheter. Vi vil imidlertid gå gjennom både gratis- og betalte versjoner, slik at du kan velge den som passer best for dine behov.
Følgende er noen av de viktige aspektene ved Elementor som gjør det verdt:
- Dra og slipp-funksjonalitet støttes.
- Den har et stort antall maler.
- Det er over 90 widgets i alt.
- Ingen koding er nødvendig for responsiv støtte.
- Gjenta og angre alternativer er tilgjengelige.
- Autolagring er tilgjengelig.
Elementor lar deg velge hovedoppsettet for din egendefinerte topp- og bunntekst.
Det ville hjelpe hvis du bestemte deg for det generelle arrangementet av ønsket topp- og bunntekstseksjoner før du utvikler en unik topptekst. Å se på det forhåndslagde oppsettet for topptekstdelen kan gi deg mange valg.
Du kan velge mellom ulike overskriftsseksjoner; den vanligste og mest moderne headeren har en nettstedslogo i hjørnet lengst til venstre, en navigasjonslinje i midten og en søkefeltseksjon til høyre.
Det er uendelige muligheter, og du kan konstruere hvilken som helst layout du vil.
Jeg valgte nr. 7 pre-made header mal; Dette er den vanligste og enkleste tilnærmingen til å bruke en header på et WordPress-nettsted. Kopier og lim inn overskriftsmalnavnet i Maler > Topptekst > søkemal > lim inn det kopierte overskriftsnavnet .
Når du har funnet overskriftsmalen du ønsker, velg "Rediger med Elementor", og du vil bli ført til Elementor Pro-overskriftsbygger-delen.
La oss sette i gang denne festen.
Hva er en header og hva gjør den?
Den øverste delen av nettsiden din kalles en "nettsideoverskrift". Overskriften er vanligvis den samme på hele nettstedet ditt. Noen nettsteder bruker imidlertid forskjellige overskrifter for forskjellige deler av nettstedet.
Overskriftsdesignet ditt vil gi brukerne deres førsteinntrykk av nettstedet ditt, enten de har kommet til hjemmesiden din, om-siden eller annet individuelt innhold. Og hvis den er godt utformet, vil den fange brukerens oppmerksomhet og lokke dem til å fortsette å rulle og lese.
Overskriften kan også hjelpe til med å fremme bedriftens merkeidentitet.
Jeg bruker funksjoner som selskapets logo, font, farger og det generelle merkespråket.
Nettstednavigering, nettstedsøk, en handlekurv (for salgsnettsteder), handlingsfremmende knapper (CTA) og andre funksjoner som forbedrer brukeropplevelsen og øker konverteringsfrekvensen, finnes alle i overskrifter.
Hva er en bunntekst, nøyaktig?
En bunntekst er en del av en nettside som vises nederst på siden. De vises vanligvis konstant på hele nettstedet, på alle sider og innlegg, på samme måte som overskrifter.
Bunntekster blir ofte oversett, noe som er bortkastet potensial, gitt at de vises på hver side av nettstedet. De er like avgjørende for headerne.
Bunntekstdesignet ditt kan vise nyttig og viktig informasjon som registrering av nyhetsbrev, informasjon om opphavsrett, bruksvilkår og personvern, et nettstedskart, kontaktinformasjon, kart, nettsidenavigasjon og mye mer, avhengig av innstillingene du velger.
Hvordan lage en header
Vi skal lage en tilpasset overskrift i denne delen. Ikke bekymre deg hvis det virker skremmende; vi starter ikke fra scratch. I stedet bruker vi Elementór Pros maler, designet av Elementors designteam.
Utvikle en topptekstmal
På WordPress-administrasjonspanelet holder du musepekeren over maler og klikker på Legg til ny for å lage toppteksten vår.
Et modalt vindu vil dukke opp når du har blitt rutet. Velg Overskrift fra rullegardinmenyen, navngi overskriften og klikk på " Opprett mal ":
Dette vil starte Elementor-editoren. Etter det vil du bli presentert med en liste over maler du kan velge mellom. Så velg en som appellerer til deg:
Den skal vises på toppen av Elementor-redigeringsdelen når du har valgt en mal:
Lage en logo: Det første trinnet er å lage en logo. Angi logoen i nettstedets Live Editor for å plassere den i toppteksten. Velg en logo ved å klikke på Site Identity.
Når du har bestemt deg for en logo, klikker du på Publiser .
Sidens logo skal nå være i overskriften hvis du oppdaterer Elementor-grensesnittet:
Etter det kan du gjøre hvilke endringer du ønsker.
Gjør endringer i overskriftsmenyen
Det neste vi bør gjøre er å endre menyen. Hvis du har generert en meny, vil malen automatisk inkludere den:
Her er menystrukturen vår, som du kan se reflektert i overskriftsmalen:
Hvis du har mer enn én meny, kan du oppdatere innholdet om nødvendig.
Du kan redigere egenskapene på samme måte som enhver annen widget.
Hvis vi trenger å legge til flere elementer, kan vi legge til flere seksjoner i overskriften vår:
La oss starte med å legge til en overskrift og noen sosiale medier-ikoner:
Etter det kan du gjøre endringer du vil. Slik ble redigeringen vår:
Overskriftspublikasjon
Du kan nå publisere overskriften når du er ferdig med å endre den. Vi bruker overskriften på hele nettstedet vårt i eksempelet amp , så vi velger det valget etter å ha valgt Legg til betingelse:
Og her er et amp på en side fra live-siden vår:
Hvordan lage en bunntekst
Utvikle en bunntekstmal
Prosessen med å lage en bunntekst er ganske lik den med å konstruere en topptekst. For å lage en, lag en ny bunntekstmal slik:
Deretter bestemmer du deg for en mal. Bunntekster kommer i en rekke former og størrelser. Noen inkluderer fast informasjon, mens andre har kontaktskjemaer. Velg en mal som passer dine behov.
Malen vi valgte for nettstedet vårt er som følger:
Bunntekstendringer
Du vil se toppteksten så snart du begynner å redigere (hvis du angir betingelsen om at den skal vises på alle sider).
Endre bunnteksten etter behov; Slik ser revisjonen vår ut:
Publiser bunnteksten etter at den er ferdig:
Ferdig produkt
Slik ser det ferdige resultatet ut. Både toppteksten og bunnteksten brukes nå på nettstedet vårt:
Undersøk topptekst- og bunntekstdelene for respons.
Dette er den viktigste fasen, og du må sørge for at topptekst- og bunntekstdelene er responsive. Fordi en meny i full bredde vanligvis ikke passer til mobilvisningen, må du vite hvordan designet ditt vil se ut på mobilskjermen. De responsive bryterne nederst i Elementor-sidefeltseksjonen kan endre mobil- og faneversjonene.
Du kan teste responsen til topptekst og bunntekst på forskjellige måter. For amp kan du bruke verktøy som Browserstack, CrossBrowser Testing og Google Resizer for å sikre at nettsidene dine er så responsive som mulig. Du kan også gjøre det manuelt ved å eksperimentere med forskjellige enheter.
Å bringe ting til en slutt
Jeg håper denne veiledningen hjalp deg med å raskt utvikle dine unike topptekst- og bunntekstseksjoner ved hjelp av Elementor Pro. WordPress har mange funksjoner, men det tillater bare noen få modifikasjoner i topp- og bunntekstdelene, endelig fikset med Elementor Pro-sidebyggeren. Med langt bedre kontroll over elementene på nettstedet ditt, kan du nå bedre demonstrere nettstedets visjon. Dessuten har Elementors funksjonalitet blitt forbedret ved å bruke gratis tillegg, slik at brukerne kan tilpasse nettsidene sine med mer avanserte funksjoner.
