Een plakkerig restaurantmenu ontwerpen met Divi

Rifat T Oct 20, 2021

Voedselmenu's zijn een zeer belangrijk onderdeel van een restaurantwebsite. Omdat het een klant een algemeen idee geeft over de voedselprijzen. Als je nu een creatief restaurantmenu voor je website wilt maken, moet je zeker binnen Divi kijken.

Vandaag zullen we u leiden naar een in het oog springend restaurantmenu-ontwerp dat een plakkerig effect heeft - door Divi's ingebouwde plakkerige optie te gebruiken. Ons ontwerp zal het hele menu scheiden in verschillende categorieën en bezoekers laten zien in welke categorie ze zich bevinden! Dus laten we het doen.

Een glimp van ons definitieve ontwerp

Laten we snel kijken naar het eindresultaat van ons ontwerp van vandaag.

Bureaubladweergave

Mobiele weergave

Elementstructuur maken

Nieuwe sectie toevoegen

Achtergrond kleur

Voeg een nieuwe pagina toe vanuit je dashboard en open deze met Divi builder. Ga met "Van nul opbouwen". Open nu sectie-instellingen en voeg een achtergrondkleur toe.

Maak geweldige websites

Met de beste gratis paginabuilder Elementor

Begin nu
  • Achtergrondkleur: rgba (255,252,244,0.6)

Achtergrond afbeelding

Gebruik nu een patroonafbeelding als achtergrond. Er zijn veel patroonafbeeldingen beschikbaar bij Google, dus kies een van uw keuzes.

  • Grootte achtergrondafbeelding: werkelijke grootte
  • Positie achtergrondafbeelding: midden boven
  • Achtergrondafbeelding herhalen: Herhaal X (horizontaal)

Spatiëring

Wijzig de afstandswaarden.

  • Top vulling: 150px
  • Bodemvulling: 150px

Nieuwe rij toevoegen

Kolomstructuur

Voeg een nieuwe rij toe onder de afbeelding met behulp van de volgende kolomstructuur. Kies "Normaal" op het tabblad "Nieuwe sectie".

Kies nu de volgende kolomstructuur.

Maatvoering

Open nu de rij-instellingen en wijzig de waarden zoals hieronder aangegeven.

  • Aangepaste gootbreedte gebruiken: Ja
  • Gootbreedte: 1
  • Breedte: desktop en tablet: 80%, telefoon: 95%
  • Maximale breedte: 1580px
  • Rij-uitlijning: Midden

Tekstmodule 1 toevoegen aan kolom 1

H3-inhoud toevoegen

Welnu, nu zullen we modules aan onze structuur toevoegen. Laten we beginnen met een tekstmodule in kolom 1. Voeg wat H3-inhoud van uw wens toe.

H3 Tekstinstellingen

Ga naar het ontwerptabblad van de module en wijzig de volgende instellingen.

  • Kop 3 Lettertype: Karla
  • Kop 3 Lettergewicht: Vet
  • Kop 3 Tekstgrootte: Desktop en tablet: 45px, Telefoon: 35px
  • Kop 3 Letterafstand: -2px
  • Kop 3 Regelhoogte: 1.2em

Spatiëring

Laten we wat boven- en ondervulling toevoegen.

  • Top vulling: 25px
  • Bodemvulling: 25px

Tekstmodule 2 toevoegen aan kolom 1

Content toevoegen

Voeg een tekstmodule toe onder de vorige module en voeg enkele woorden naar keuze toe.

Tekstinstelling

Wijzig de module-instellingen.

  • Tekstlettertype: Crimson Pro
  • Tekstkleur: #3a3a3a
  • Tekstgrootte: 32px

Spatiëring

Voltooi de module-instellingen door de afstandswaarden te wijzigen.

  • Bovenmarge: 20px
  • Ondermarge: 50px
  • Linker vulling: 5%
  • Rechter vulling: 5%

Afbeeldingsmodule toevoegen aan kolom 1

Afbeelding uploaden

Het laatste element dat we nodig hebben in kolom 1 is een afbeelding. Voeg een afbeeldingsmodule toe en voeg vervolgens een afbeelding naar keuze toe.

Maatvoering

Voeg een maximale breedte toe uit de formaatinstellingen.

Spatiëring

Voltooi nu de module-instellingen door de volgende wijzigingen in de spatiëring door te voeren.

  • Ondermarge: tablet: 80px, telefoon: 50px
  • Linker vulling: 5%
  • Rechter vulling: 5%

Blurb-module toevoegen aan kolom 2

Inhoud toevoegen

Voeg wat inhoud naar keuze toe aan een nieuwe blurb-module in kolom 2. Deze module is een op tekst gebaseerde module die meer informatie geeft over een individueel onderwerp.

Achtergrond kleur

Voeg een witte achtergrondkleur toe vanaf het tabblad inhoud.

  • Achtergrondkleur: #ffffff

Titel Tekst Instellingen

Ga nu naar het ontwerpgedeelte en wijzig de volgende waarden.

  • Titel Lettertype: Karla
  • Titel Lettergewicht: Vet
  • Titel tekstkleur: #3a3a3a
  • Titel Tekstgrootte: Desktop: 40px, Tablet: 35px en Telefoon: 30px
  • Titel Letterafstand: -2px
  • Titelregel Hoogte: 1.2em

Instellingen voor hoofdtekst

Bewerk de instellingen voor de hoofdtekst zoals hieronder vermeld.

  • Titel Lettertype: Karla
  • Titel tekstkleur: #3a3a3a
  • Titel Tekstgrootte: Desktop: 18px, Tablet: 25px en Telefoon: 20px
  • Titel Letterafstand: -0.5px
  • Hoogte titelregel: 2em

Maatvoering

Pas nu de maat aan.

  • Inhoud Breedte: 100%

Spatiëring

Ga naar de afstandsinstellingen en wijzig de waarden dienovereenkomstig.

  • Ondermarge: 30px
  • Top vulling: 40px
  • Bodemvulling: 40px
  • Linker vulling: 8%
  • Rechter vulling: Desktop: 25%, Tablet en telefoon: 8%

Grens

Het is tijd om grensinstellingen toe te passen.

  • Breedte linkerrand: 3px
  • Kleur linkerrand: #000000

Doos Schaduw

We gebruiken ook een doosschaduw.

  • Doos Schaduwvervaging Sterkte: 20px
  • Schaduwkleur: rgba(0,0,0,0.05)

Blurb Titel CSS

Om de module-instellingen te voltooien, moeten we de volgende regel CSS-code toevoegen aan het CSS-vak voor de blurb-titel op het tabblad Geavanceerd.

margin-bottom: 20px;

Blurb-module klonen

Nu kan uw restaurant een verscheidenheid aan producten voor het ontbijt hebben. U hoeft niet elke sectie helemaal opnieuw te maken, omdat u met Divi uw module zo vaak kunt kopiëren als u wilt. Kloon dus de blurb-module volgens uw item.

En verander vervolgens de inhoud in de items.

Plakeffecten toepassen

Tekstmodule 1 in kolom 1

Omdat we alle elementen gestructureerd hebben, zullen we ons concentreren op het toevoegen van plakkerige effecten. Open daarvoor de eerste tekstmodule in kolom 1.

Module plakkerig maken

Schakel over naar het tabblad Geavanceerd en maak de volgende plakkerige instellingen:

  • Kleverige positie: blijf bij boven
  • Onderste plaklimiet: rij
  • Offset omringende kleverige elementen: Ja
  • Overgang Standaard en Sticky Stijlen: Ja

Kleverige stijl voor module

Achtergrond kleur

Omdat we nu een plakkerige module hebben, kunnen we er plakkerige stijlen op toepassen. Selecteer eerst zwart als plakkerige achtergrondkleur.

  • Kleverige achtergrondkleur: #000000

Tekst kleur

Wijzig vervolgens de plakkerige H3-tekstkleur in wit.

  • Sticky Heading 3 Tekstkleur: #ffffff

Spatiëring

En sluit de plakkerige stijlen af door de volgende responsieve plakkerige opvulwaarden toe te voegen:

  • Kleverige linkervulling: 5%
  • Kleverige rechter vulling: 5%

Kloon de hele rij voor hergebruik

Nadat u klaar bent met de plakkerige effecten van het ontbijtgedeelte, wilt u misschien het lunch- en dinergedeelte toevoegen. Dus dupliceer de hele rij voor hergebruik.

Wijzig alle inhoud voor de tweede rij

Zorg ervoor dat u de inhoud voor de tweede rij hebt gewijzigd.

Eindresultaat

Ons uiteindelijke ontwerp ziet er dus zo uit.

Bureaubladweergave

Mobiele weergave

Conclusie

Vandaag hebben we in dit bericht geprobeerd je te laten zien hoe creatief je je volgende websitemenu kunt aanpassen met Divi's plakkerige optie . Dit is een geweldige interactieve manier om voedsel aan klanten te tonen. Als je suggesties of zelfstudieverzoeken hebt, deel je mening dan in het opmerkingenveld. Als je dit artikel nuttig vond, zal een aandeel leuk zijn.

Divi WordPress Theme