Hoe Avada Header, Footer en kolomlay-outbuilder te gebruiken

Onze eigen paginabuilder, de Avada Builder, is nu beschikbaar in twee interfaces: Avada Builder, onze back-end wireframe-paginabuilder, en Avada Live, onze front-endbuilder, die pas onlangs werd geïntroduceerd met Avada 6.0. .

Met behulp van ons eenvoudige systeem van containers, kolommen en elementen, kunt u met beide versies van Avada Builder eenvoudig prachtige paginalay-outs voor uw website ontwerpen. Avada Builder is een fantastisch hulpmiddel voor zowel moderne webontwerpers als site-eigenaren, omdat het hen volledige controle geeft over alle aspecten van pagina-inhoud en lay-out. Beide versies van de Avada Builder genereren ook dezelfde code. Ze zijn volledig uitwisselbaar, zodat u het beste van twee werelden kunt hebben met Avada Builder, dat momenteel beschikbaar is.

Op de pagina Layout Builder vindt u al uw lay-outs en eventuele voorwaardelijke lay-outs die u misschien wilt bouwen naast de standaard globale lay-out. Hier bevindt zich ook het gebied waar u lay-outsecties aan uw lay-outs toewijst en voorwaarden specificeert voor het van kracht worden van uw voorwaardelijke lay-outs.

De Layout Builder is toegankelijk vanuit het Avada Dashboard door Layouts > Layout Builder te selecteren in het vervolgkeuzemenu. Een van de meest eenvoudige manieren om lay-outs te beschrijven, is door te zeggen dat het containers zijn die de vier lay-outsecties van een pagina bevatten: de koptekstsectie, de paginatitelbalksectie, de inhoudssectie en de voettekstsectie. U kunt meer leren over de verschillen tussen lay-outsecties en lay-outs door dit document te lezen: Lay-outs en lay-outsecties begrijpen (PDF). Lees verder om meer te weten te komen over de dingen die u op deze pagina kunt doen.

Twee delen bevinden zich helemaal bovenaan de pagina Layout Builder. Een techniek voor het vullen van de Layout Secties in de Global Layout of het genereren van Conditional Layouts wordt beschreven in het eerste gedeelte (hint: u kunt dit sluiten met de X), en aan de rechterkant van het scherm is een gebied van waaruit u kunt direct nieuwe lay-outs maken (zie hieronder). Typ een naam voor uw nieuwe lay-out en klik vervolgens op Nieuwe lay-out maken om het proces te voltooien. Bij gebruik van deze methode wordt een blanco lay-out gemaakt; er zijn geen lay-outsecties of voorwaarden gespecificeerd.

Terwijl u lay-outs maakt, worden ze automatisch geïmporteerd in de pagina Layout Builder. U kunt een lay-out hernoemen door op de knop Naam wijzigen bovenaan de pagina te klikken. U kunt ook op het tandwielpictogram klikken om voorwaarden voor de lay-out vast te stellen, en u kunt een lay-out verwijderen door op het prullenbakpictogram bovenaan de pagina te klikken. U kunt ook criteria zien en toewijzen door op de onderkant van alle lay-outs te klikken, behalve de globale lay-out.

Binnen elke lay-out kunt u de vier lay-outsecties zien die aan een bepaalde lay-out zijn toegewezen, één voor elk van de vier lay-outs. In elke lay-outsectie ziet u een +-pictogram, waarmee u een lay-outsectie aan die sectie van de lay-out kunt toewijzen wanneer u uw muis erover beweegt. U heeft de mogelijkheid om een ​​bestaande lay-outsectie aan deze sectie toe te wijzen of een geheel nieuwe sectie te creëren.

Sectie-indeling gebruiken

Als onderdeel van Avada Layouts kunt u nu volledig aanpasbare voetteksten voor uw website maken, waarbij u gebruik maakt van de volledige creatieve mogelijkheden van Avada Builder om dit te bereiken.

Een voettekstlay-out is een lay-outsectie die aan een lay-out is toegevoegd. Voor ex amp le, een Custom Footer vereist een Footer Layout sectie, die ofwel de Global of aangepaste opmaak kunnen worden toegevoegd. In de volgende sectie zullen we kijken naar het maken van een sectie met aangepaste voettekstlay-outs, maar laten we eerst kijken naar de introductie van Avada-lay-outs.

Selecteer in de WordPress-zijbalk of het Avada-dashboard Avada > Lay-outs. De lay-outs en lay-outsecties van Avada worden hier gemaakt en beheerd. Zoals hieronder wordt weergegeven, is de globale lay-out aanvankelijk leeg, zonder bijbehorende lay-outsecties.

Een lay-out aanpassen

Deze sectie kan worden toegevoegd aan de algemene lay-out of een voorwaardelijke lay-out, die alleen wordt weergegeven op bepaalde aangepaste berichtsoorten of enkele pagina's. De globale lay-out is al aanwezig, maar we moeten eerst een voorwaardelijke lay-out ontwikkelen.

Voeg op de pagina Lay-outs een naam toe en klik op Nieuwe lay-out maken, zoals hieronder wordt weergegeven.

Maak een voettekstlay-outsectie als u deze aan een bestaande lay-out of de globale lay-out wilt toevoegen.

Op het scherm Layout Section Builder, selecteert u het type lay-out sectie, voert u een naam (in dit ex amp le, Footer, mogelijk Global Footer) en klik op Nieuwe layout Section, zoals hieronder weergegeven.

De volgende afbeelding laat zien hoe u een lay-outsectie rechtstreeks vanuit de lay-out kunt genereren. De lay-outsecties van uw site moeten aan een lay-out worden toegevoegd. In eerste instantie is er gewoon een globale lay-out. Dus om een ​​globale aangepaste voettekst te maken, voegt u deze toe aan deze lay-out. Sectie Aangepaste voettekstlay-out en voeg vervolgens voorwaarden toe aan de sectie Aangepaste voettekstlay-out om de lay-out volgens de criteria te laten verschijnen.

Niets mis mee, maar het is van essentieel belang om de situatie in ogenschouw te nemen. Als de lay-out momenteel actief is (dwz voorwaarden heeft of de globale lay-out is), zullen alle nieuwe lay-outsecties onmiddellijk actief en leeg zijn. Het is logischer om eerst een aangepaste voettekst aan een globale lay-out toe te voegen via de pagina Layout Section Builder en deze vervolgens toe te voegen aan de globale lay-out.

Als alternatief kunnen we een voettekst, koptekst of kolomlay-outsectie toevoegen aan een voorwaardelijke lay-out en deze vervolgens maken. Voorwaarden worden pas gebruikt als er voorwaarden zijn toegevoegd. Zoals hieronder geïllustreerd, kunnen we de sectie Voettekstlay-out wijzigen door er met de muis over te gaan en op het bewerkingspictogram te klikken.

Sectie voettekstlay-out toevoegen aan voorwaardelijke lay-out

Aangepaste lay-out bewerken

De standaard WordPress-editor verschijnt bij het bewerken van een nieuwe lay-outsectie; u kunt vanaf hier Avada Builder of Avada Live gebruiken. Aangepaste lay-outsecties worden hier gemaakt. Voor meer informatie, zie Lay-outsectie-inhoud maken, maar kortom, u kunt hier alles bouwen.

Uw aangepaste voettekst kan alles bevatten wat u in de Avada Builder kunt maken. U kunt talrijke kolommen, foto's, enz. hebben; Dit zorgt voor een enorme flexibiliteit. In het gedeelte Lay-out wordt het voettekstmateriaal weergegeven. Het materiaal komt van de Builder en jouw creativiteit is de enige beperking.

Bekijk hieronder de originele footer die voor de Taxi Demo is gemaakt; Dit is gedaan door de thema-opties en footer-widgets te wijzigen.

Taxi Demo> Basic Footer”src =” https://lh3.googleusercontent.com/_xzRCQdf_jBPoJv6eaW9Wx3rdXORc7Ni1945ud13b9kALKA4WdmZpeSSCTnLx-4hcwPKXGF1dl3E0qragaIr_eJ6AiBxO4AMKlY2tuxFbek-S0Z1PY3oQTE2UmjI4QzZydYbWqscpkwNbIpjTQ=s0 "> Kijk naar de Avada Layouts Custom Global Footer.

De desktopversie van deze aangepaste koptekst wordt hier getoond, maar om de reikwijdte van deze aangepaste koptekst goed te begrijpen, moet u de live site bezoeken, die u hier kunt openen.

Voorwaardelijk lay-outontwerp

Geen voorwaarden in een globale lay-out. Het toevoegen van lay-outsecties zal op elke pagina worden gebruikt omdat het globaal is. Als u alleen een aangepaste voettekst op sommige pagina's van uw site nodig had, zoals afzonderlijke blogartikelen, moet u een voorwaardelijke lay-out gebruiken.

Een voorwaardelijke lay-out kan alleen bestaande lay-outsecties bevatten. Scrol vervolgens onder het tabblad Select Footer van de lay-out naar Bestaand, waar u de sectie Lay-out kunt toevoegen, zoals hieronder te zien is.

Een sectie met aangepaste lay-out toewijzen

U moet de voorwaarden voor elke voorwaardelijke lay-out instellen. De Lay-out is actief zodra de voorwaarden zijn opgegeven; daarom, als u dit doet voordat u de lay-outsectie instelt, zijn de pagina's die aan de voorwaarden voldoen leeg.

Om een ​​voorwaarde toe te voegen, selecteert u Een voorwaarde toevoegen in het onderste menu van de lay-out. Er verschijnt een dialoogvenster, zoals hieronder weergegeven. Voor meer informatie over voorwaardelijke layouts, zie Understanding Voorwaardelijke outs, maar voor deze ex amp le, zouden we de berichten in het tabblad 'Berichten' voorwaarden te selecteren, zoals hieronder te zien.

Kolommen toevoegen vanuit Avada Layout builder

Het kolomelement is, net als het containerelement, een essentieel structureel onderdeel bij het ontwerpen van een Avada-site.

Het toevoegen van kolommen is relatief eenvoudig met Avada Layout builder.

  • Klik op de knop ' + Container ' om een ​​container aan de pagina toe te voegen. Wanneer u een container invoegt, wordt u gevraagd een kolom- of kolomlay-out te selecteren. U kunt een lege container maken, maar normaal gesproken voegt u bij deze stap kolommen toe.
  • Om nieuwe kolommen aan een bestaande container toe te voegen, plaatst u de muisaanwijzer op de container en klikt u op de knop ' + Kolom '. Klik hier om een ​​nieuwe kolom toe te voegen.
  • Klik in de linkerbovenhoek van een kolom op het pictogram 'Kolomgrootte wijzigen'. Het zal nu dezelfde grootte hebben als uw kolom. Bijvoorbeeld , een 1/4 kolom zal verschijnen als '1/4 amp Column optie.
  • Versleep kolommen om ze opnieuw te rangschikken. U kunt kolommen ook slepen en neerzetten in containers.

Een kolom kan alleen in een containerelement met dezelfde breedte worden geplaatst; Dit is meestal de sitebreedte die u voor de site instelt. Dus als u de sitebreedte instelt op 1200px, zal een 1/2 kolom 600px breed zijn. Vooraf ingestelde kolomformaten worden hieronder weergegeven wanneer ze aan een pagina worden toegevoegd.

In Avada kunt u kolombreedten (en meer) afzonderlijk instellen voor grote, middelgrote en kleine lay-outs. Hoe u de weergavevolgorde en -grootte van kolommen in responsieve lay-outs instelt, legt uit hoe u deze uitstekende nieuwe functie met kolommen kunt gebruiken.

Aangepaste breedten staan ​​onder Kolommen > Ontwerp > Breedte . Zoals hieronder wordt weergegeven, kunt u met behulp van een percentage een aangepaste breedte opgeven. Positionering is dus onbeperkt

Auto is een nieuwe breedte-optie. In plaats van een vaste breedte, neemt de kolom de ruimte in van het belangrijkste element erin. Het werkt dus maar in sommige gevallen. U kunt de bovenliggende kolom wijzigen in Auto, en de kolom zal zich aanpassen aan de breedte van het element.

Avada voegt ook responsieve optiesets toe voor containers en kolommen. In de back-end van de Builder ziet u de responsieve pictogrammen op alle kolommen, zoals te zien is in de onderstaande afbeelding. De Front-End Builder toont de Responsive Icons op de opties.

Alleen de nieuwe Flex Containers tonen Responsive Option Sets. Kolommen in verouderde containers zijn niet beschikbaar.

Conclusie

Dankzij Avada Layouts is de mogelijkheid om een ​​aangepaste voettekst en koptekst te maken en kolommen toe te voegen nu een realiteit en een bijna onbeperkte optie. U kunt niet alleen de kracht van Avada Builder gebruiken om praktisch elke voettekst of koptekst te maken die u maar kunt bedenken, maar u kunt ook gebruikmaken van de kracht van voorwaardelijke lay-outs om ze te tonen of te verbergen op elke pagina, categorie, aangepast berichttype of elke combinatie van criteria die u kunt bedenken bij het gebruik van de Avada Builder.

Als het gaat om WordPress-lay-outs, is Avada-lay-outs in de meest letterlijke zin een game-changer. Het feit dat het een dergelijke ontwerpvrijheid en implementatieflexibiliteit mogelijk maakt, betekent dat het proces van het maken van voetteksten nooit hetzelfde zal zijn.

Laat een reactie achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *