Vill du add to custom shape dividers till din WordPress website?
Shape Dividers kan organisera ditt content på ett engagerande och iögonfallande sätt. De kan också lyfta fram det viktigaste innehållet på din site så att besökare och customers inte missar viktig information.
I den här artikeln visar vi hur du skapar en customize formdelare i WordPress.
Varför skapa avdelare med customize-form i WordPress?
En shape divider är en typ av section divider som du addar till mellan block av content.
Dessa avdelare kan vara enkla, till exempel en horisontell linje som skapats med built-in WordPress block.
Du kan använda dessa grundläggande avdelare för att organisera och separera content, vilket är viss nytta på pages som täcker många olika ämnen.
Du kan också skapa mer avancerade formdelare med hjälp av page builders tillägg och annan programvara för webbdesign. Dessa kan lyfta fram det viktigaste innehållet på din site så att det sticker ut för besökare och customers.
Att introducera formdelare som ser professionella ut kan också göra dina pages mer intressanta och engagerande.
You kan till exempel använda dem för att skapa en unik bakgrund för your email newsletter signup form.
Med det sagt, låt oss se hur du kan skapa en customize formdelare i WordPress. Använd bara snabblänkarna under för att hoppa direkt till den metod du vill använda:
Metod 1: Skapa en enkel formdelare i Block Editor (inget plugin obligatoriskt)
Det enklaste sättet att skapa en customize-formad avdelare till WordPress är att använda det built-in Separator block.
Denna metod allow you to add a horizontal line separator in between any WordPress blocks and then customize the line’s color and style.
Den här metoden låter dig inte add to olika former till WordPress och har begränsade customize settings. Du behöver dock inte installera ett extra plugin för WordPress, så det här är det enklaste sättet att add to en enkel formdelare till din website.
För att komma igång öppnar du helt enkelt den post eller page där du vill add to en horisontell avdelare i Gutenberg content editor. Sedan klickar du på knappen ”+” där du vill placera avdelaren.
I popupen skriver du in ”Separator”.
När rätt block visas klickar du på det för att add to sidan eller posten.
För att customize standard Separator block, ge det ett click och använd sedan inställningarna i den högra menyn.
Du kan växla mellan standard, bred linje och prickar med hjälp av knapparna i ”Styles” section.
You can also change the line’s color so that it matches the rest of your theme or branding.
För att göra detta klickar du på ”Background” och väljer sedan en färg från popupen som visas.
Dessutom kan du justera separatorns marginal.
Ju större marginal, desto mer utrymme kommer det att finnas mellan de separerade blocken.
När du är nöjd med hur avdelaren ser ut kan du antingen klicka på knappen ”Publicera” eller ”Update” för att göra funktionen för formavdelare live.
Metod 2: Skapa en Custom Shape Divider i WordPress med hjälp av en Page Builder (rekommenderas)
Om du vill använda en annan form och customize varje del av dina avdelare, rekommenderar vi att du använder SeedProd plugin.
SeedProd är det bästa WordPress Page Builder-pluginet på marknaden, och det tillåter dig att lägga till en customze formdelare till alla sektioner, rader eller Column med hjälp av en enkel drag and drop editor.
Det kommer också med över 300 professionellt utformade templates och mer än 90 block som du kan använda för att skapa beautiful custom home pages, landing pages, och mer.
Note: Det finns en gratis version av SeedProd tillgänglig på WordPress.org, men vi kommer att använda Pro-versionen eftersom den levereras med ett brett utbud av formdelare.
Det första du behöver göra är att installera och aktivera pluginet SeedProd. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.
Vid aktivering måste du enter din license key.
You can find this information in your account on the SeedProd website. När du har enter license key klickar du på knappen ”Verify key”.
När det är klart, gå till SeedProd ” Pages och klicka på knappen ’Add New Landing Page’.
Efter det är det dags att välja en page template. SeedProd har massor av professionella templates för webbdesign som du kan finjustera så att de passar perfekt till din WordPress-webbplats.
För att välja en template, hoverar du bara musen över den och klickar sedan på ikonen ”Checkmark”.
Gå sedan vidare och skriv in ett namn för page. SeedProd skapar automatiskt en URL baserat på sidans Rubrik, men du kan ändra URL:en till vad du vill.
När du är nöjd med den information du har enter klickar du på knappen ”Save and Start Editing the Page”.
Därefter kommer du till drag and drop page builder, redo att customize templaten.
SeedProd editor visar en live preview av din design till höger och några block editor inställningar till vänster.
I menyn till vänster finns också block som du kan dra till din layout.
Du kan till exempel dra and drop standardblock som knappar och images eller använda avancerade block som nedräkningstimer, delningsknappar för sociala media med mera.
För att customize ett block klickar du bara för att välja det i din layout.
I menyn till vänster visas sedan alla de Settings som du kan använda för att konfigurera det blocket. You can also change the page’s background colors, add background images, or change the color scheme and fonts to better matcha your brand.
SeedProd kommer också med ”Sections”, som är samlingar av block som ofta används tillsammans. SeedProd har till exempel en header-sektion, hero image, call-to-action, customer testimonials, features, footer sections, och mer.
För att titta igenom de olika sektionerna klickar du bara på tabben ”Sections”.
Du kan flytta runt sektioner och block i din layout med hjälp av drag and drop.
Om du vill ta bort ett block håller du bara hovern över det och klickar sedan på ikonen för papperskorgen när den visas.
Om du väljer att använda en SeedProd Section eller ej, kan du nu skapa en avdelare med customize-form. Simply click to select the section, row, or column where you want to add the divider.
Klicka sedan på tabben ”Advanced” i menyn till vänster.
Klicka nu för att förstora sectionen ”Shape Divider”.
Till att börja med kan du välja var formdelaren ska visas genom att välja antingen knappen ”Högst upp” eller ”Längst ner”.
Du kan nu öppna menyn ”Type” och välja den formdelare som du vill använda.
När du väljer olika former uppdateras live preview automatiskt så att du kan prova olika stilar för att se vad som ser bäst ut.
När du har valt en formdelare kan du utforma den med hjälp av de nya settings.
Till att börja med kan du klicka på ”Color” och sedan välja en new färg i popupen som visas.
När du har gjort det kan du göra avdelaren större eller mindre genom att dra i slidern ”Width” och ”Height”.
Om du redan har en viss storlek i åtanke kan du skriva in dessa siffror i boxarna.
Du kan också försöka flippa delaren genom att clicka för att aktivera eller inaktivera ”Flip”-omkopplaren.
Som standard kommer avdelaren att visas bakom resten av innehållet, så att användarna tydligt kan se text, images eller annat innehåll som överlappar avdelaren.
Men genom att flytta fram formen kan man skapa intressanta effekter. Om du vill se hur det ser ut klickar du bara för att aktivera reglaget ”Bring to Front”.
För att add to fler avdelare följer du samma process som beskrivs ovan.
Du kan även add to en formdelare högst upp och längst ner i en area, vilket ofta ger imponerande och iögonfallande resultat.
Du kan fortsätta att arbeta på sidan genom att lägga till fler block och customize dessa block i menyn till vänster.
När du är nöjd med hur page ser ut klickar du på knappen ”Save”. You can then select ’Publicera’ to make that page live.
Så här addar du Shape Dividers till ett WordPress Theme
SeedProd’s drag and drop editor ger dig friheten att add to en unik formdelare till vilken page som helst. Men ibland kanske du vill använda samma formdelare på flera pages eller till och med på hela din blogg eller website i WordPress.
Detta hjälper dig att skapa en konsekvent design och kan också spara massor av tid. I det här fallet rekommenderar vi att du lägger till en formdelare i ditt theme med hjälp av SeedProd theme builder.
Med SeedProd kan du skapa och customize ett WordPress-tema utan att skriva någon kod. Det skapar alla filer som utgör ditt theme, inklusive sidebar, header, footer, enskilda inlägg och mer.
Du kan sedan customize dessa filer med hjälp av den välbekanta drag and drop-byggaren. Detta inkluderar att lägga till formdelare genom att följa samma process som beskrivs ovan.
När du aktiverar det nya temat med SeedProd kommer det att skriva över ditt befintliga WordPress Theme, så du bör bara använda den här metoden om du vill ersätta ditt befintliga Theme.
För detaljerade Step-by-Step-instruktioner, vänligen se vår guide om hur du enkelt skapar ett customize WordPress theme.
Upptäck fler tips och tricks för WordPress design
Vill du add to fler designfunktioner som imponerar på dina website besökare? Kolla in dessa WordPress designtips och tricks för mer information:
- Så här addar du en Parallax-effekt till ett WordPress Theme
- Så här skapar du en ”sticky” flytande footer i WordPress
- Så här skapar du en mobilanpassad responsiv WordPress-meny
- Hur man addar en Preloader Animation till WordPress (Steg för Steg)
- Så här addar du till insticksprogram i WordPress Posts
- Så här addar du mörkt läge till din website i WordPress (enkelt)
- Så här addar du till en animerad bakgrund i WordPress
Vi hoppas att denna tutorial hjälpte dig att lära dig hur du skapar en customize-formdelare i WordPress. Du kanske också vill lära dig hur du lägger till utvalda boxar med icons i WordPress och våra experttips om hur du skapar en mobilvänlig WordPress website.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Dayo Olobayo
I love how detailed and easy-to-follow the instructions are. Customizing the shape divider is such a great way to add a personal touch to my website. Definitely bookmarking this for future reference.