Sådan føjes et tilpasset afsnit til Hestia

Dette dokument viser de trin, der er nødvendige for at føje et nyt afsnit, tekst, billede, indhold osv. … til hjemmesiden.

Brug af Hestia Pro

Hestia Pro har et stort antal kroge, der let kan bruges til at tilføje nyt indhold på hjemmesiden. Krogene er anført i Udseende> Hestia Pro Hooks. Se nedenfor et eksempel på, hvordan du kan bruge dem til at tilføje et nyt afsnit på startsiden.

Trin 1: Opret sektionen

Det første trin er at oprette det afsnit, du vil tilføje på hjemmesiden. Du kan enten bruge et plugin til dette eller skrive din egen HTML / PHP-kode.

Trin 2: Sæt sektionen fast

Det sidste trin er at faktisk koble det afsnit, du lige har oprettet på Hestia Pro’s hjemmeside. For at gøre det, skal du gå til Udseende> Hestia Pro Hooks, find den krog, du har brug for, tilføj koden til det nye afsnit, og klik på “Gem kroge”.

eksempler

1. Tilføj en Handle efter flere produkter -knappen efter Shop-sektionen.

Den HTML-kode, jeg har brug for, er denne (sørg for at udskifte https: // localhost / shop / med linket til din butikside):

Handle efter flere produkter

Og jeg vil tilføje det i Efter butiksafsætningsbeholder krog. Sørg for også at kontrollere Udfør PHP toggle.

Resultatet ville være sådan:

2. Tilføj en FAQs trekksnit efter Team-sektionen

Ved hjælp af et plugin som Shortcodes Ultimate Plugin kan du oprette et nyt afsnit ved at gå til Kortkoder> Tilgængelige kortkoder. Kopier den ønskede kortkode, og indsæt den i Udseende> Hestia Pro Hooks, i den krog, der bedst passer til dine behov. I dette eksempel har vi brugt Efter holdafdeling krog.

Dette er resultatet:

Her kan du se Hestia PRO’s kroge.

Brug af Hestia

Bemærk: Hestia Lite-guide antager, at du har kendskab til FTP, og hvordan du redigerer dine websteds filer. I guiden vil vi kun tilføje et par typer sektioner ved hjælp af Hestia Hooks og give koden for at få dem centreret. Hvis du prøver at tilføje dine egne kortkoder ved at følge denne vejledning og se, at de ikke er centreret, skal du tilføje din egen CSS / HTML for at løse problemet eller kontakte en freelancer, hvis du har brug for hjælp.

Trin 1.

Installer Shortcodes Ultimate Plugin, dette er det plugin, vi vil bruge i denne vejledning til at oprette sektionerne. Shortcodes Ultimate indeholder en række gode kortkoder, der kan bruges i hele dit tema. I denne tutorial bruger vi Youtube Shortcode og knappen shortcode. Du kan tjekke den ultimative “Eksempler” -menu i Shortcodes for at se de kortkoder, de leverer, som nævnt vil vi kun tilføje to sektionstyper i denne tutorial. Nogle andre kortkoder kræver muligvis forskellige CSS for at få dem centreret og vil kræve, at du får hjælp fra en freelancer.

Trin 2.

Opret et barn-tema til Hestia

Er dit websted allerede i gang? I dette tilfælde vil vi anbefale dig at oprette et webstedsspecifikt plugin, se her: Sådan opretter du et webstedsspecifikt plugin.

Videoen herunder viser også, hvordan man opretter et webstedsspecifikt plugin:

Når du opretter plugin-filen, er den eneste tekst, der virkelig kræves,:

 
 Gem dine ændringer af plugin-filen, og aktiver derefter den. Nu er vi klar til at tilføje nogle brugerdefinerede sektioner.
Trin 3.
 I functions.php fil med dit Hestia Child-tema ELLER i plugin-filen du lige har oprettet til dit webstedsspecifik plugin, du bliver nødt til at oprette en funktion og derefter vedhæfte den funktion til den Hestia-krog, du ønsker at bruge.
 Indsæt følgende kode i filen, vil du bemærke, at den allerede har tilføjet nogle CSS til den for at centrere videoen og formatere teksten, så den passer til temaet:
funktion new_section_1 () {

echo do_shortcode ('
YouTube-video
[su_youtube url = "https://www.youtube.com/watch?v=pYOJNOJfJxU"]
');

}

add_action ('hestia_before_about_section_hook', 'new_section_1');
 Du skulle have noget, der ser sådan ud:
 
 Fra koden ovenfor kan du ændre navnet " new_section_1"til ethvert navn, du kan lide, men sørg for at ændre det begge steder:
 
 Koden ovenfor Tilføjer en YouTube-video inden afsnittet om i Hestia kan du ændre den viste video ved at ændre YouTube-linket i koden. For at ændre placeringen af ​​videoen på forsiden kan du skifte krog.
 Alle tilgængelige kroge kan ses her: Hestia tilgængelige kroge
 Den ovenfor anvendte krog var:
hestia_before_about_section_hook
 Lad os sige, at vi i stedet ville tilføje dette afsnit under funktionsafsnittet, vi ville blot ændre krogen til:
hestia_after_features_section_hook
 Så til sidst ser vores kode sådan ud:
 
 Hvis vi ønskede to forskellige videoer i to forskellige sektioner, kan vi tilføje to lignende blokke med kode ved at ændre krog og funktionsnavn. Nedenfor tilføjer vi forskellige videoer inden afsnittet om og før butiksafsnittet:
 
 Vær opmærksom på de nummererede pile for at identificere de foretagne ændringer. Du kan gentage dette trin for at tilføje så mange videosektioner, du kan lide i forskellige dele af forsiden.
Tilføjelse af knapper
 Nu hvor vi har vist, hvordan man tilføjer en video, tilføjer vi en brugerdefineret knap. Trinnene er de samme som ovenfor, vi skal bare ændre CSS lidt og kortkoden. Shortcodes Ultimate-pluginet tilbyder en masse forskellige knapdesign,
 Hvis du vil tilføje en knap og centrere den, skal du bruge denne kode med din funktion og krog, du vælger:
do_shortcode ('
[su_button radius = "square" url = "http://google.com"] Klik på mig [/ su_button]
');
 Det link, som knappen peger på i dette tilfælde, er google.com, men du kan ændre det til alt, hvad du kan lide.
 Hvis vi ønskede at tilføje en knap under vores video i en af ​​vores brugerdefinerede sektioner, kan vi blot tilføje den nye kodeblokke under den gamle, ville din kode se sådan ud:
 Dit resultat ville være dette:
 Selvfølgelig kan du tilføje forskellige typer knapdesign som understøttet af Shortcodes Ultimate. Gå til for at se de forskellige knapfunktioner WordPress Dashboard-> Shortcodes-> Eksempler.
 Knappen ovenfor blev oprettet med denne kortkode:
[su_button style = "3d" size = "18" baggrund = "# d50000" url = "http://google.com"] Klik på mig [/ su_button]
 Det er alt, hvad der er til det. Du kan teste forskellige kortkoder fra Ultimate Shortcodes for at tilføje dine brugerdefinerede sektioner. Tjek Shortcodes Ultimate's snyderi for at se accepterede knapparametre. Vi anbefaler, at du holder flowet i Materialedesignet, hvis du planlægger at bruge knapper, hvor du kan finde alle materialedesignfarver og deres hex-kode her: https://www.materialpalette.com/farver.
 Bemærk: Denne artikel antager, at du har lidt kendskab til kodning, og hvordan du redigerer dine webstedsfiler. Som nævnt tidligere kan der være behov for at kontakte en freelancer, da vi ikke kan hjælpe i alle anmodninger om tilpasset kodning.
 
 
 Jeffrey Wilson Administrator
 Sorry! The Author has not filled his profile.
 follow me