- By Beheerder
- informatie
- Hits: 772
beheer handleiding website Societas Hebraica
Inleiding
De Societas Hebraica website is gebouwd in het webbeheerprogramma Joomla op basis van een template en is bedoeld om de boekuitgaven van de Societas Hebraica te tonen en tegen betaling ter beschikking te stellen. De inhoud bestaat uit meerdere pagina-layouts, menus, berichten/articles, pagina's, een webshop met artikelen en een nieuwsbriefgedeelte. De paginalayouts zijn gebaseerd op een template. De menu's en berichten zijn een standaardvoorziening in Joomla. De Paginas/Pages zijn samengesteld met een Joomla-toevoeging, namelijk SP Pagebuilder, onderdeel van het template.
Het hoofdmenu maakt de pagina's en de onderdelen toegankelijk voor bezoekers. Er is bij de bouw gebruik gemaakt van een bij JoomShaper aangekocht Template: Shaper_hope. De boeken zijn ingevoerd als items. Hiervoor is de Joomla component K2 gebruikt. De winkel is gemaakt met de component Hika shop (gratis versie), daar is een betaalmodule aan toegevoegd om de betalingen via Mollie mogelijk te maken.
Na het inloggen als beheerder is het beheermenu van Joomla te zien aan de bovenzijde. In deze handleiding beschrijf ik de belangrijkste opties die nodig zijn om de inhoud (berichten, pagina en nieuwsbrieven) van de Societas Hebraica website aan te passen.
Dit is onder te verdelen in
- Template instellingen
- Pagina's beheren en aanpassen, met bespreking van de afzonderlijke pagina's
- Werken met Articles,
- Nieuwsberichten (melden nieuwe publicatie)
- Werken met de items van de publicatielijsten
- invoeren van nieuwe producten in de Winkeli (Hikashop)
- Beheer van de andere onderdelen van de Winkel/Hikashop
- Nieuwsbrieven/berichten maken met de Nieuwsbriefmodule Acymailing
- Updates, backups en onderhoud Wordpress en hosting
1. De template instellingen
Het template bevat de instellingen en de achterliggende layout van de webpagina's. Dit is te vinden onder Extensions>Templates>Styles. Op deze plek zijn de globale instellingen gemaakt en de aanpassingen ingevoerd. Het gaat hiet te ver om alle onderdelen te beschrijven, zie hiervoor eventueel de Helix3 handleiding op het web. De meeste aanpassing op het gebied van fonts en positionering heb ik gemaakt in het tablad [Custom Code]. De situatie van 3 october 2020 (oplevering) heb ik als bijlage opgenomen. In het tabblad [Layout] is te zien uit welke onderdelen de webpagina is opgebouwd: Header (logo en menu), Page Title, Main Body (met drie kolommen left, Component, right), een Bottom (met 5 kolommen) en een Footer. Deze onderdelen en de subonderdelen zijn te beschouwen als ' ankers' waaraan inhoud van de webpagina (in de vorm van modules) zijn gekoppeld.
Onder Extensions>Modules (Site) is te zien welke module aan welk 'anker' is gekoppeld
2. Pagina/Page beheren
Pagina's zijn in de website een combinatie van inhoud (tekst, plaatjes, formulieren en grafische elementen) die in een opmaak zijn geplaatst. Zo bestaat de pagina 'cahiers' uit een opmaak met een vak waarin de cahier-items worden opgroepen in een layout van steeds drie items per regel.
Pagina's zijn gemaakt en kunnen worden aangepast met de SP Pagebuilder. Het overzicht van de pagina is hierboven te zien als een apart menu rechtsboven met als naam[SP Page builder]. Dit levert het volgende scherm op:
Hieronder beschrijf ik per pagina hoe deze door een beheerder aangepast kan worden. Maar eerst even wat algemene info: Een pagina bestaat uit verschillende eenvoudige elementen zoals Row of Textblock maar ook uit speciale elementen zoals Person of Client:
Row: Layout-element ter breedte van het scherm. Deze kan weer andere elementen bevatten
Textblock: een element dat een doorlopende tekst kan bevatten met alinea's en plaatjes. In een Textblock (en in de andere elementen met tekst en de Articles kan met de Joomla Editor tekst worden ingevoerd . Hierbij gebruik je een knoppenbalk, zie hieronder.
Hiermee kan tekst in vet en cursief en andere opmaak worden gezet en er kunnen links en kopjes worden toegevoegd met Formats>Headers en plaatjes worden toegevoegd (zie hieronder)
FeatureBox: smaller tekstvak met meer moegelijkeheden. voor koppen en achtergrond
Person: element met grote pasfoto en tekst
Client: Foto of Logo met link
Alle elementen kunnen worden aangepast, toegevoegd en ook verwijderd. En verplaatst. Pas dus op wat je doet...
de menuknopjes van een element [Edit] [Maak kopie][Zet uit][Verwijder]
In de text kan een plaatje wordten gezet, maar die moet eerst toegevoegd worden.
Uploaden van plaatjes, foto's, video's en pdfs
Toevoegen van media voor de pagina's gaat met {Hoofdmenu} Content>Media Plaats de media in een een herkenbare map. Daarom is er een map 'pdf' en een map 'images'. Hieronder laat ik in een filmpje zien hoe dit werkt.
Hieronder beschrijf ik de afzonderlijke pagina's
Home(pagina)
Deze pagina bestaat uit
- een Header met een Slideshow bestaande uit twee diaslides (Amsterdamse cahiers en Supplement Series) met op iedere slide een achtergrondsfoto en twee buttons. Daaronder volgt
- een Nieuws(Row) met een Articles element dat alle Joomla Articles laat zien die als Category 'Nieuws' hebben en gepubliceerd zijn
- Een Row met een Featurebox 'Wat is deze Societas' met een knop [Meer informatie] en een Featurebox 'Wat doet de Societas'
Cahiers en Supplement Series (pagina met catalogus)
Deze twee pagina's bestaan uit een onderdeel dat uit de tabel met de publicaties de Cahiers en resp. de Supplement Series laat zien in een overzicht met drie items per rij. De overzichten zijn gesorteeerd op publicatiedatum van nieuw naar uit. Omdat de items bij het bouwen van de website tegelijk zijn zijn ingevoerd heb ik de publicatiedatum aangepast, voor het gemak en de overzichtelijkheid heb ik het publicatiejaar laten oplopen.
Webadressen (Pagina)
De pagina bevat een enkele Row met daarin een Textblock. In het textblock staan de links.
Abonnee worden (Pagina)
Deze pagina bevat een formulier dat gemaakt is met de Formbuilder, één van de tools van het template. Deze pagina wordt opgeroepen vanuit Abonnee worden (Article) via de menu optie Contact > Nieuwe uitgaven ontvangen of de link 'Abonnee worden' in de footer. Na het invulllen wordt een email verstuurd naar This email address is being protected from spambots. You need JavaScript enabled to view it. ter verdere afhandeling.
ANBI gegevens (niet in gebruik)
Bevat een Row met één Textblock. Het Textblock bevat tekst met links naar pdf's zoals jaarverslagen, winst en verlies rekeningen per jaar, en een balans per jaar. De links zijn gemaakt met insert>Link en pdfs zijn (eerder) geüploaded met de hoofdmenu-optie Content>media zie hieronder
Over CEBT (niet in gebruik)
plaatje gevolgd door een Row met een Texblock
Agenda/nieuwsbrief
Wordt nu niet gebruikt, opzetje voor Agenda en opgave voor een Nieuwsbrief
Contact
Een Row met een Textblock met de Contactinfo en vier Featureboxen voor de onderdelen e-mail, Adres, Bank en Bestuur
Een contactformulier met beveiliging
Aanpassen Pagina
- Ga naar het paginaoverzicht SP Pagebuilder > Pages
- Klik op de titel van de pagiina die je wilrt aanpassen bijvoorbeeld 'Home'
- Zoek de Row op die je wilt veranderen en daarbinnen het element (Slideshow, TextBlock, Featurebox etc)
- klik op het potlootje rechts 'Edit Action'
- Afhankelijk van det type zie je bovenaan tabbladen [Genral][Style] en [Advanced]. Het aanpassen van de inhoud staan op het standaard tabblad [General] Bovenaan staan eerst allerlei instellingen die temaken hebben met het lettertype, de onderlinge afstand, eventuele achtergrond plaatjes.Die zullen in het algemeen nkiet aangepast hoeven worden. Onder het kopje CONTENT OPTIONS kun je in het vakje Content de tekst aanpassen.
- Vergeet niet om helemaal onderaan op de groene knop [ [v] Apply] om het element op te slaan na veraandering
- Klik daarna op [Save] helemaal bovenaan om de pagina op te slaan
- en klik op [Close] om terug te gaan naar het overzicht
Hiermee zijn we aan het eonde van de beschrijving van de pagina's. We gaan verder met het beschrijven van het gebruik van het standaardonderdeel Articles.
3. Berichten (Articles)
Berichten kunnen na inloggen worden aangemaakt via het hoofdmenu Content>Article. Na het aanmaken dient het bericht te worden gepubliceerd met de knop [Publish] Daarna verschijnt het bericht op de voorpagina tenminste als het de Category 'Nieuws' heeft. Tip: Bij een bericht kan tijdens het aanmaken al worden aangegeven wanneer het weer van de voorpagina moet verdwijnen, door een datum van 'terugtrekken' in te voeren. Een bericht archiveren heeft geen gevolgen voor het tonen op de hoofdpagina.
Verwijderen van de hoofdpagina kan dus door:
- automatisch terugtrekken met een einddatum
- depubliceren met het knopje (zie hierboven)
- verwijderen van categorie : nieuws
Voor de Activiteiten (footer) wordt ook een Article gebruikt, maar dan met de category 'Activiteiten': Medewerking aan vertaalprojecten
Ook worden Articles gebruikt om teksten en tekstelementen voor de links en menu's te maken: deze handleiding is een Article net zoals de Disclamer, wat wil/doet/is de SHA, de registers, Vertaalprojecten, en Abonnee worden.
Aanpassen Article
- Ga naar het Content > Articles
- klik op de titel van het artikel dat je wilt aanpassen
- Gebruik het (standaard al geselecteeerderde) tabblad Content om tekst, links en plaatjes aan te passen.
- Gebruik hiervoor zonodig de knoppenbalk
- Voor specieke informatie over alle mogelijkheden zie de documentatie
- Tip Je kunt tekst overnemen uit Word of uit een mail, maar dan neem je ook de lettertypoe en lettergrootte mee. Dat is te verwijderen door de ingeplakte tekst te selecteren met de muis of cursor en dan de opdracht Format> Clear Formatting te geven
- Toevoegen van plaatjes gaat met de knop 'Image', plaatjes moeten eerst opgehaald worden vanaf je computer of vanaf een webadres. Plaats ze in een geschikte map. Zie ook het filmpje hieronder. Pas zonodig de grootte aan.
4. Invoeren en aanpassen Nieuwsbericht (Article)
Zoals hierboven vermeld staat is een nieuwsbericht een gepubliceerd Article met extra trefwoord 'Nieuws'. Daarnaast heeft een nieuwsbericht, omdat het bijna altijd over een nieuwe publicatie zal gaan, een plaatje. Het plaatje voer je in met het tabblad [Images en files] Zie het voorbeeld
Klik daarvoor op select en haal een geschikt plaatje op. Zonodig kun je de grootte aanpassen met het knopje Resize & Rotate (rechtsboven in de schermweergave hieronder) Hiermee voorkom je dat de pagina onnodig traag wordt door een veel te groot bestand.
Zet het plaatje in de map 'covers'. Die kun je ook hergebruiken als je de publicatie toevoegt aan de ACERT of de Supplement lijst én het artikel in de Hikashop
Plaats in de tekst alvast een link naar het winkelartikel, dat ziet er als volgt uit:
vermeld op de plaats van 'xx' wordt het id in de winkel
5. Invoeren publicatie in de beide publicatielijsten
De publicaties van de beide lijsten (ACEBT en SuplSeries) zijn te vinden via Components > K2 > Items
- Met de knop [(+) new] voer je een nieuwe publicatie in
- K2 items hebben drie hoofdgroepen van gegevens (Basic, Publishing&metadata en Display Settings. Voor ons gebruik is alleen Basic van belang. Vul eerst de standaardvelden in: ten eerste 'Title' voor de titel.
- Het onderscheid tussen de beide groepen van publicaties (Cahiers , SuplSeries) wordt gemaakt met het veld Category.
- Om getoond te worden moet Published op [yes] staan
- Basic is weer onderverdeeld in o.a. [Content] [Image] [Extra fields] deze zijn als tabbladen zichtbaar, iets verder omlaag. Bij Content kunnen we - net zoals bij de articles - de tekst invoeren. Bij image (Zie hieronder) kunnen we een plaatje ophalen door te klikken op de knop [Bestand kiezen]
Naast het tabblad Image is het tabblad [Extra fields] van belang. Hier worden de andere gegevens van de publicatie ingevoerd
bij bestelurl staat meestal de text 'in winkel' en bij URL de link naar het item in de winkel, eventueel later in te voeren zodra het item ook daar is ingevoerd.
6. De webwinkel
Aan de website is de component Hikashop toegevoegd, de publicaties zijn hierin ingelezen en voorzien van extra informatie. De instellingen en de artikelen zijn te vinden Component > HikaShop
Onder Producs zijn de verkoopartikelen te vinden. Ze worden hier Products genoemd. Als voorbeeld gebruik ik weer dezelfde publicatie:
We zien hier deels dezelfde velden die we eerder hebben gezien bij de publicaties. Ook hier wordt het veld category gebruikt om het onderscheid te maken tussen de beide reeksen. Maar er zijn ook velden die specifiek zijn voor de webshop: Bij 'Quantity' wordt de voorraad bijgehouden en onder 'Price' dient bij ieder product een prijs te worden toegevoegd. Bij images wordt (opnieuw) een scan van de boekomslag geüploadet. Het veld 'Description' gebruiken we niet. Let op: onder [RESTRICTONS AND DIMENSION] moet altijd een gewicht wiorden opgegeven. Dat hoeft niet het juiste gewicht te zijn (is alleen van belang als we de verzendkosten hierop willen baseren, maar dat doen we niet) maar ook bij PDF's moeten we een fake gewicht opvoeren omdat het product anders niet in de lijst verschijnt.
Na het opslaan van een nieuw product met de knop [Save] kunnen we door de muis over de titel te bewegen zien wat de cid van het nieuwe product is. Dit hebben we nodig om bij de publicatie naar het product te verwijzen zie aldaar, vul in de zoekcode het gevonden nummer (in dit geval 48) in op de plek van 'xx':
De shipping costs zijn zo ingesteld dat ze afhankelijk zijn van het aantal boeken. Dit wordt tijdens het bestelen automatisch bepaald, zie https://www.hikashop.com/support/documentation/337-shipping-manual-price.html voor de details.
7. Beheer van de andere onderdelen van de Winkel/Hikashop
Aan de Hikashop is een (betaalde) module toegevoegd om de betalingen via de Mollie interface naar iDeal te laten verlopen in die modules is de Mollie API code ingevuld om deze koppeling te maken.
live_Hs3aJBeNPp9jUFyr6dpnWCrDg6eDUq
Verdere informatie over de Molle interface en de financiële afhandeling zijn te vinden via de Molllie website. De penningmeester heeft daar een inlognaam en wachtwoord voor. De betalingen zijn bijvoorbeeld te vinden op de locatie https://www.mollie.com/dashboard/org_7891651/payments en na aftrek van de kosten worden de ontvangsten automatisch met een in te stellen frequentie op de bankrekening van SHA gestort.
8. Nieuwbrieven/berichten maken met de Nieuwbriefmodule Acymailing
Iedereen die een bestelling doet krijgt automatisch een inlognaam en wachtwoord en ze worden toegvoegd aan de mailinglijst. Daarnaast kunnen mensen zich opgeven voor deze nieuwsbrief. Deze nieuwsbrief is een een eenvoudige mail die meld dat er een nieuwe uitganve is zoadat men via de site een bestelling kan doen.
De mailinglijst en de andere onderdelen zijn te vinden onder het menu Components > AcyMailing te vinden.
Onder Users zijn de degenen te vinden zich hebben opgegeven en onder Lists de (enige) lijst, namelijk Nieuwsbrief. Via deze menu's kunnen aanpassingen worden gemaakt.
Onder Nieuwsletter is nu één nieuwsbrief als voorbeeld te vinden 'nieuwe uitgave'
Op deze pagina kan de tekst van het nieuwsbriefbericht worden aangemaakt, behalve een tekst zoals 'Op ... is verschenen ..' kunnen ook links links naar het nieuwe catalogus-item en/of naar de webwinkel worden opgenomen. Of ook een plaatje van de voorzijde.
Hoe dan ook, als het bericht compleet is kan deze worden bewaard met [Save] en worden verstuurd naar alle leden van de lijst met de kmnop [Preview / Send]
9. Updates, backups en onderhoud Joomla en hosting
Het onderliggende CMS-systeem en de gebruikte plugins die actief gebruikt worden dienen actueel gehouden te worden uit veiligheidsoverwegingen. Dit moet op een veilige manier gebeuren zodat de site blijft werken of hersteld kan worden als er iets misgaat bij het updaten. Tijden de bouw is dit door Pictures of Facts gebeurd, waarbij voor iedere update steeds een extra locale backup is gemaakt met de plugin Akeeba Backup van de Joomlabestanden, de instellingen en de database. Daarnaast is er een backupoptie van de complete configuratiue via de hostingprovider met geautomatiseerde backups die beheerd moet worden. In de offerte zijn twee opties opgenomen om deze taken bij Pictures of Facts onder te brengen in een onderhoudscontract
Bijlage custom code
.sp-megamenu-parent >li >a{
font-size:16px;}
dl.article-info{
display:None !important}
.sppb-slide-item-bg.sppb-slideshow-fullwidth-item-bg .sppb-slideshow-fullwidth-item-text h1{
padding-top: 90px;
}
.sppb-slide-item-bg.sppb-slideshow-fullwidth-item-bg .sppb-slideshow-fullwidth-item-text h1 span{
font-size: 18px;
}
.sppb-addon-article h3 a{ color: black; font-size: 0.5em;}
.imgspace img{ margin: 0 0 20px 0;}
.menu-fixed .logo img{ margin-top: 0px;}
.menu-fixed-out .logo img{ margin-top: -50px;}
#sp-main-body,
.view-article #spcomponent,
.view-article #sp-main-body {background:#9ea1a5;}
#sp-component{background:#ffffff;}
#k2Container {
padding: 0 20px 24px 20px;}
.view-article .entry-header .helix-social-share-wrap{
display: none;
}
#k2Container > div.itemBody > div.itemFullText > h1{ font-size: 30px; !important}
#k2Container > div.itemBody > div.itemFullText > h2{ font-size: 24px;font-weight:300 !important}
#k2Container > div.itemBody > div.itemExtraFields > h3{font-size: 18px;}
#k2Container > div.itemBody > div.itemFullText > p {margin:0}
#itemListSecondary > div > div > div.catItemBody > div.catItemIntroText > p
{margin:0}
#itemListPrimary > div > div > div.catItemBody > div.catItemIntroText > h1 > em
{font-size: 24px;}
#itemListSecondary > div > div > div.catItemBody > div.catItemIntroText > h1
{font-size: 24px;}
#itemListLinks > div > div > div.catItemBody > div.catItemIntroText > p
{margin: 0}
#itemListLinks > div > div > div.catItemBody > div.catItemIntroText > h1 > em
{font-size: 24px;}
#data\[register\]\[privacy\]0-lbl,
#data\[register\]\[privacy\]1-lbl{margin-left:20px;display:block !important}
input[id^=hikashop_checkout_quantity]{
padding: 1px 9px;}
#hikashop_checkout_login_1_0 > h1{
font-size: 40px;
}
#hikashop_checkout_registration > h2,
#hikashop_checkout_login_form > h2{
font-size: 28px;
}
@media (min-width: 768px)
.hk_form-horizontal .hkc-sm-4 {
width: 35%;
}
/* change contact form order - otherwise captcha comes before custom fields... */
#contact-form {
display: flex;
flex-direction: column;
}
fieldset:nth-child(1) {
order: 1;
}
fieldset:nth-child(2) {
order: 3;
}
fieldset:nth-child(3) {
order: 2;
}
#contact-form .control-group {
order: 4;
}
