Het is vrij normaal dat een website op alle pagina’s hetzelfde element / dezelfde elementen heeft. Het kan behoorlijk vermoeiend zijn voor de ontwikkelaar om een specifiek element toe te voegen en “opnieuw” te stylen als de binnenpagina’s van de website dat element keer op keer zullen gebruiken.
Ik zou graag een “banner” willen gebruiken voor deze tutorial, dit zal het element zijn dat zal worden gebruikt op verschillende pagina’s van de website.
Ga nu naar uw werkruimte zodat we verder kunnen gaan met onze tutorial!
Stap 1: Laten we eerst een “Heading” -widget toevoegen. Ga naar het widget-tabblad, selecteer het binnenste gedeelte en sleep het helemaal naar je werkruimte. Het zal dienen als de titel / kop van die pagina. .
Stap 2: Laten we eerst enkele stijlen toevoegen aan de kop die we zojuist hebben toegevoegd.
Stap 3: We kunnen nu de achtergrondafbeelding toevoegen die we voor deze tutorial gaan gebruiken. Ik heb een afbeelding van “hoge kwaliteit” gevonden die helemaal gratis is op pexels.com. Dus ga je gang en kies een afbeelding naar keuze! Bewerk de buitenste container van de koptekstwidget (sectie), ga naar het widgetvenster en klik op het tabblad “Stijl”. Zoek het “Achtergrondtype” en klik op “Klassiek”. U kunt doorgaan met het kopiëren van de stijlen die ik kies voor onze achtergrondafbeelding .
Stap 4: U kunt een overlay aan de achtergrondafbeelding toevoegen als u de kop van de banner wilt benadrukken .
Stap 5: Laten we wat opvulling toevoegen aan de boven- en onderkant van de sectie zodat het er echt uitziet als een banner .
Stap 6: We zijn bijna klaar! We kunnen dit element nu opslaan zodat we dit op verschillende pagina’s van de website kunnen gebruiken. Om dat te doen, opnieuw, rechts klikken op de “Sectie Edit” van de verpakking de kop en klik op “Opslaan als sjabloon”.
Stap 7: Daarna kunnen we een naam geven aan de sjablonen die we willen opslaan en deze opnieuw gebruiken voor de andere pagina’s van de website. Nadat je er een naam op hebt gegeven, ga je gang en klik je op Opslaan! In dit paneel ziet u de elementen die u opslaat als sjablonen die u opnieuw kunt gebruiken zonder een ruw element toe te voegen en er weer stijlen aan toe te voegen!
Nu kunt u naar de pagina’s gaan waarop u de banner wilt toepassen die we eerder hebben gemaakt. Om dat element toe te voegen, klikt u op het pictogram “Sjabloon toevoegen” en zoekt u de sjabloon die u wilt toevoegen en klikt u op “Invoegen”:
En we zijn klaar !!! Ook al hebt u het als sjabloon opgeslagen, betekent dit niet dat u ze kunt bewerken. Ga je gang en vervang de kop, achtergrond enz.
Bedankt dat je zo ver bent gekomen! 🙂
0 Comments