OceanWP Simple

[femke98]

Een klant van mij wil een website zoals OceanWP simple.
https://simple.oceanwp.org/

Het thema kan niet worden geïmporteerd, zie deze pagina als je op de link linksonder klikt: https://oceanwp.org/extension/ocean...utm_medium=floating_bar&utm_source=free_demos

Nu werkt OceanWP met plug-ins die je moet gebruiken wil je een demo kunnen importeren, Helaas is een van die plug-ins niet getest met de huidige versie van WP. Slordig maar je merkt het wel.
Ik kon namelijk echt heel moeilijk andere demo's importeren, of ze werkte niet goed.

Ik vraag mij af of iemand hier weet wat ik het beste kan doen. Weet iemand bijv. een theme die lijkt op die van Simple?
Desnoods zonder de kern van OceanWP.
De klant heeft niet echt door hoe het werkt en daarom is het zo moeilijk om uit te leggen hoe en wat. We wonen ook te ver van elkaar af om bij elkaar te komen, alles moet via e-mail.

Ik had al eerder een website voor hem gemaakt met het theme ColibriWP. Maar die vind hij nu niet meer oké (te kinderachtig, hij wil nu echt zakelijk), maar met ColibriWP kan ik natuurlijk ook wel zoiets bereiken als OceanWP Simple lijkt me.
Ik heb hem nu via e-mail uitgelegd hoe en wat, maar nogmaals de vraag: weet iemand een theme (liefst gratis natuurlijk) wat op Simple lijkt?

Ik hoor het graag of andere opties, ik sta overal open voor, mijn klant hopelijk ook.

 

[bron]

Alleen dit blog artikel bij DreamHost kan ik vinden.

 

[femke98]

Thanx.
Ik ben er al uit. En het is aardig gelukt. Nu alleen de foto's nog veranderen van de webshop en het is zoals de klant het wil.
Het theme Simple van OceanWP dus, maar ik hoop maar dat hij tevreden is.

 

[femke98]

Toch nog een vraagje:
ik heb het toch voor elkaar gekregen, maar op een mobiel is het niet mooi en op mijn eigen laptop ook niet. Terwijl het toch responsive is.
Wie wil even kijken op zijn mobiel en mij aangegeven wat ik er aan kan doen?

In WP kan je overschakelen naar de mobiele en tablet versie, dat moet ik nog doen trouwens. Maar wil graag even feedback.
De voorpagina en het menu daaronder, daar staat gewoon veel te veel wit tussen.
Ook op mijn laptop, zie screenshot. Je ziet dat ik mijn bladwijzers aan de linkerkant aan heb staan, dat heb ik altijd.
Doe ik dat niet, is het witte gedeelte kleiner.

Er komt ook nog een andere logo, dus kijk even niet verder naar dat allemaal.
De link is https://sinterklaaskrullen.nl

 

[bron]

In Inspector zie ik dat 2 elementen een background-position: 0px -405px hebben. Probeer dit eens te veranderen in 0px 0px. Je weet hoe je het daarna responsive kan testen (heb ik niet gedaan). Ik denk wel dat de foto er anders uit gaat zien omdat deze background-size: cover heeft.

.elementor-1850 .elementor-element.elementor-element-cj26yrf:not(.elementor-motion-effects-element-type-background),
.elementor-1850 .elementor-element.elementor-element-cj26yrf > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-position: 0px 0px;
}

De foto heeft nu

 

[femke98]

Klopt, de foto moest ik wel van hoogte veranderen (de -405px) want anders zat de Webshop in een gedeelte dat niet mooi eruit zag.
Ik zal er eens naar kijken.
is dit je bevinding op je mobiel of desktop?

 

[bron]

is dit je bevinding op je mobiel of desktop?

Op desktop maar met een smalle browser view, breedte 320-800 px.

Je kan de Trial & Error methode toepassen, ofwel veel proberen tot je een acceptabel resultaat hebt. Het duurt wel wat langer. De bedoeling is dat je begint met een klein scherm met een waarde 0px 0px. Daarna zet je de browser iets breder en probeer je de juiste css background-position te vinden. En zo verder door telkens de browser wat breder te maken. Vanaf (min-width: 1730px) is de foto die je nu hebt in orde.

Dit zou een voorbeeld kunnen zijn die je zelf kan aanpassen. Begin bij een smalle browser en dan telkens breder zetten.

/* begin met 0px 0px voor kleine browser view (smartphone) */
.elementor-1850 .elementor-element.elementor-element-cj26yrf:not(.elementor-motion-effects-element-type-background),
.elementor-1850 .elementor-element.elementor-element-cj26yrf > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-position: 0px 0px;
}
/* en hieronder hetzelfde maar dan telkens voor grotere browser view */
@media (min-width: 480px) {
  .elementor-1850 .elementor-element.elementor-element-cj26yrf:not(.elementor-motion-effects-element-type-background),
  .elementor-1850 .elementor-element.elementor-element-cj26yrf > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-position: 0px -50px;
  }
}
@media (min-width: 750px) {
    /* hetzelfde als min-width: 480px maar dan bijvoorbeeld */
    background-position: 0px -120px;
}
@media (min-width: 950px) {
    /* hetzelfde als min-width: 480px maar dan bijvoorbeeld */
    background-position: 0px -190px;
}
@media (min-width: 1200px) {
    /* hetzelfde als min-width: 480px maar dan ... */
    background-position: 0px -250px;
}
@media (min-width: 1450px) {
     /* hetzelfde als min-width: 480px maar dan ... */
   background-position: 0px -320px;
}
@media (min-width: 1730px) {
    /* hetzelfde als min-width: 480px maar dan bijvoorbeeld */
    background-position: 0px -405px;
}

Aanvulling. Het lijkt erop dat je "IN WINKELMAND" moet inkorten tot "In mandje" ofzo (tekst korter).

 

[femke98]

Kijk, op de desktop is het mooi.
Maar dan op een tablet en mobiel..........niet om aan te gluren.

Als ik de maten verander in -125 dan is het al wel wat beter.

Zie screenshots met desktop, niet meer aan doen.
Tablet met en zonder de -125
Mobiel met en zonder -125.

Of te wel, de witte lege velden worden minder, maar ga ik het helemaal op 0 zetten, dan ziet de desktop er niet uit, want dan klopt de afbeelding niet.
Wacht, ik maak daar nog een screenshot van.
Dus moet ik zorgen dat de afbeelding anders wordt.

Ik zit te denken............welke afmeting en hoe dan? In de vorm van hoe de schaar, waar de schaar.

 

[bron]

Als ik de maten verander in -125 dan is het al wel wat beter.

Zie screenshots met desktop, niet meer aan doen.
Tablet met en zonder de -125
Mobiel met en zonder -125.

En met de @media code van #7 ?? Dan heb je bij elke breedte een ideale foto.
Ik heb maar een paar waardes ingevuld, die zal je zelf bij elke breedte moeten bepalen natuurlijk

Aanvulling: de background-size staat nu op cover.
Kijk even op deze site wat de verschillen zijn met contain met no-repeat
Je kan dit laatste ook gebruiken als je foto minimaal 1750px breed is.

Aanvulling 2: de foto wordt horizontaal gecentreerd op kleinere schermen (view < 1730px) bij gebruik van background-position: 50% -...px;

 

[femke98]

en zo?
Ik krijg hem opeens niet meer helemaal over de breedte.

https://www.sinterklaaskrullen.nl/

Ha, toch wel. Ik heb hem, heb het op vast en geen herhaling gezet en positie onder midden.

Klopt, de afbeelding wordt in tablet en mobiel in de hoogte verkleind.

 

[femke98]

Update: desktop prima zo.
Mobiel ook, maar tablet niet. Ggrrrr.

Krijg bij de mobiel en tablet de kleur niet anders, als ik dat doe wordt automatisch de kleur van de desktop ook ligt en dat wil ik niet.
En verder is het tussen tablet en mobiel in (als je de browser kleiner maakt) een stuk witruimte.

En met de @media code van #7 ?? Dan heb je bij elke breedte een ideale foto.

Waar zit dat precies? Dat heb ik nog niet ontdekt.

Update 2: ik zeg niets meer aan doen. Vind het mooi zo. Of je wilt nog antwoord geven op mijn bovenstaande vraag, of je wilt zelf nog even kijken naar alle formaten.
Heel graag zelfs!

 

[bron]

En met de @media code van #7 ?? Dan heb je bij elke breedte een ideale foto.

-- Waar zit dat precies? Dat heb ik nog niet ontdekt.

Dit zit nog nergens. De css van #7 kan je aan het eind van de laatste stylesheet toevoegen (in een child theme?).
Als het niet werkt dan kan je eventueel !important gebruiken: background-position: .... .... !important;

 

[femke98]

Ah, sorry. Heb je mijn 2de update nog gelezen?

 

[bron]

Volgende probleem. Vanaf 1750px verdwijnt het menu.
Omdat Full HD schermen 1920px zijn is er een behoorlijke kans dat de bezoeker geen menu ziet.



Update. Het menu is er ook niet als iemand de browser view kleiner dan 1180px heeft staan.

Update 2. Ik zie dit staan, misschien kan je de waarde verlagen.

.elementor-1850 .elementor-element.elementor-element-cj26yrf > .elementor-container {
  min-height: 595px;
}

 

[femke98]

Het menu staat achter het roze gedeelte, dus die zien ze wel. Die balk is uitgezet.

screenshots zijn van mijn aptop, tablet (denk ik, heb de browser verkleind) en smartphone.
Social media rechtsboven is uitgezet op de smartphone

Aanvulling. Het lijkt erop dat je "IN WINKELMAND" moet inkorten tot "In mandje" ofzo (tekst korter).

Klopt, dat zag ik ook. Ik moet even kijken waar die instelling zit.

 

[bron]

Het menu staat achter het roze gedeelte, dus die zien ze wel. Die balk is uitgezet.

Oeps, ik las niet.... balk weg geklikt en het menu is er gewoon.

Je gebruikt FF op Linux dacht ik. Je zou Edge (Dev versie voor Linux) kunnen proberen als 2e browser. Met Edge kan je behoorlijk goed testen hoe de website het doet op Chrome, Safari, iOS (iPhone/iPad) en de nieuwe Opera browsers. Dit omdat al deze browsers de open source chromium engine gebruiken. Of gewoon Chrome als 2e browser.

 

[femke98]

Nog een vraagje:
waar is het dat je het knopje van de aantallen kan vergroten?
zie screenshot.

Je ziet amper hoeveel je er wilt bestellen. Ik zal de css in moeten duiken van Woocommerce neem ik aan?

Je gebruikt FF op Linux dacht ik. Je zou Edge (Dev versie voor Linux) kunnen proberen als 2e browser.

geïnstalleerd, maar ik weet nog niet of ik er blij mee ben hahahaha

 

[bron]

Ik denk dat je de knop tekst "WINKELMAND" moet inkorten, dan wordt het "aantal" vakje vanzelf groter.

Update. Dit werkt gedeeltelijk. Voor het aantal veld zie ik dit

.woocommerce .quantity .qty {
    width: 3.631em;   /* verander dit in [B]min-width[/B]: 5em; */
    text-align: center;
}

 

[femke98]

Ik zat te kijken, ik kan zou dat met loco translate moet kunnen doen, maar zeker weten doe ik dat niet.
Ik ga er even induiken.
Thanx voor je hulp!

 

[bron]

In #18 een update.