Premier site réaliser avec Zwii

ericemer · 22 mai 2019

Bonjour,

voici un premier site réalisé avec zwii. Avec un faux contenu et faux nom.

Sans toucher au "Core" du système.

Ou plutôt si :

en réactivant la fonction "include" que @Fred a préféré enlever pour le moment.
en modifiant le gabarit de page pour ajouter un template 2 colonnes égales.

Ce qui signifie que l'on peut profiter des mise à jour ... Top.

Je voulais juste présenté les possibilités avec les fonctionnalités natives de Zwii.

Le diaporama est realiser avec zwipper. le reste c'est un peu de jquery et de css.

http://zwii.com-en-pack.com/menuisier/

dji · 22 mai 2019

Salut !

Très beau site, je pense m'en inspirer très fortement pour une commande d'une amie !

Comment as-tu réalisé le dégradé d'image en fond ?

A bientôt

ericemer · 22 mai 2019

salut @dji

le dégradé est réaliser en utilisant la pseudo class "::after"

pour expliquer simplement (enfin j'espère) : ::after permet d'ajouter du contenu dans la balise concernée.

ainsi dans mon cas, ça donne :

header::after {
    content: ""; // idiot mais obligatoire : en fait j'ajoute rien
    display: block; // comportement block (comme une div)
    position: absolute; //positionnement absolu sous reserve que header soit en positionnement relatif ou absolu
    bottom: 0; // je positionne en pied de block
    z-index: 1; // je le positionne devant dans mon cas (empilage des calques)
    background-image: linear-gradient(to top, rgb(40, 40, 40) 0%, rgba(40,40,40,0) 100%); // un dégradé du bas vers le haut de ma couleur du plein vers le transparent
    height: 250px; // la hauteur de mon dégradé
    width: 100%; // la largeur doit être précisée avec un positionnement absolu ... encore un truc idiot
}

dji · 22 mai 2019

Merci beaucoup pour l'astuce, je vais tacher de mettre ca en place!

Thispy · 22 mai 2019

Magnifique comme site...

Félicitation !

Je ne suis pas sur de pouvoir le faire

ericemer · 22 mai 2019

@Thispy

j'ai résolu le problème du menu "profesionnels" (celui que tu rencontre sur ron site) avec le petit bout de css que je t'ai donné tout à l'heure.

**augras** · 22 mai 2019

Très beau site effectivement. Plein d'humour !

Fred · 22 mai 2019

Très professionnel ! J'adore !

Gilux · 28 mai 2019

J'aime bien la Menuiserie Roger !

C'est vraiment chiadé, et ça fait un peu mentir le slogan de Zwiicms :

"Un CMS pour créer et gérer facilement son site web sans aucune connaissance en programmation."

Car on voit bien qu'il y a du boulot pro en design !

ericemer · 29 mai 2019

@Gilux

Merci

schoune · 30 mai 2019

Il est superbe…. mais comment as-tu fais pour avoir le menu en haut du site??? J'ai beau essayer je n'y arrive pas!!

ericemer · 3 juin 2019

@schoune

bonjour et merci.

dans les fonctions de personnalisation de thème :

pour la bannière, position au dessus du site.
pour le menu, position avant la bannière.

Ensuite, dans mon cas, j'ai ajouté (avec jquery) une boite "#spaceur" avant #site pour générer un espace minimun car j'ai positionné le header en "position: absolute".

la dimension verticale (height) de aside#spaceur est calculée avec des unité vh (viewport height) et une dimension minimale est renseignée (min-height: 100px;)

schoune · 3 juin 2019

Salut @ericemer,

Tu n'as pas utiliser le zwiiper pour faire le défilement des images sur ton site????

ericemer · 5 juin 2019

@schoune

Si.

Je l'intègre dans ma page comme tout a chacun. Puis, je le déplace dans le header avec du jquery.

$( "#swiper" ).prependTo("header" ).parent().addClass("diapos");

et dans mon cas, j'ajoute la class "diapos" au header

vinzze · 10 août 2019

Le 03/06/2019 à 09:03, ericemer a dit :

@schoune

bonjour et merci.

dans les fonctions de personnalisation de thème :

pour la bannière, position au dessus du site.

pour le menu, position avant la bannière.

Ensuite, dans mon cas, j'ai ajouté (avec jquery) une boite "#spaceur" avant #site pour générer un espace minimun car j'ai positionné le header en "position: absolute".

la dimension verticale (height) de aside#spaceur est calculée avec des unité vh (viewport height) et une dimension minimale est renseignée (min-height: 100px;)

Bonjour @ericemer,

c'est possible d'avoir le détail des manipulations, codes, afin de créer la boîte spaceur ajoutée avec du jquey.
J'y connais rien en jquery

D'avance merci pour ton aide

vinzze · 16 avril 2020

Bonjour @ericemer,

Je reviens avec une demande. Pour l'essentiel, j'ai réussi à me débrouiller.

Je trouve le fader pour la transition des images vraiment toP !

Difficile à réaliser, possible d'avoir un bref explicatif ?

D'avance merci pour le retour et belle journée

ericemer · 22 décembre 2020

@vinzze
je découvre ta demande (ça fait un moment que je ne suis pas venu sur le forum).
Est-elle toujours d'actualité ? si oui, je vais me replonger dans ce que j'avais fait à l'époque et te fournir les infos.

vinzze · 23 décembre 2020

Il y a 23 heures, ericemer a dit :

@vinzze
je découvre ta demande (ça fait un moment que je ne suis pas venu sur le forum).
Est-elle toujours d'actualité ? si oui, je vais me replonger dans ce que j'avais fait à l'époque et te fournir les infos.

Je te remercie pour l'intérêt porté à ma demande. Au final j'ai trouvé la solution à force de creuser...

**augras** · 23 décembre 2020

Bonjour à tous les deux,

du coup la solution pourrait intéresser d'autres membres je pense : un des deux peut indiquer comment faire ?

Merci,

Philippe

mickaelgutt · 23 décembre 2020

Il y a 1 heure, augras a dit :

Bonjour à tous les deux,

du coup la solution pourrait intéresser d'autres membres je pense : un des deux peut indiquer comment faire ?

Bonjour @augras,

je crois que j'ai trouvé le sujet qui correspond au code :

je pense que c'est ce code mais à voir si c'est encore compatible avec la V10.3.12

Cordialement

Mickael

**augras** · 23 décembre 2020

Merci @mickaelgutt,

en effet c'est bien possible que ça corresponde : @vinzze va nous dire.

Je suis encore en version 3.10 et je peux dire que l'effet fade fonctionne bien dans cette version de zwii et la dernière version de swiper.

mickaelgutt · 23 décembre 2020

Re, @augras,

il y a 2 minutes, augras a dit :

je peux dire que l'effet fade fonctionne bien dans cette version de zwii

cool il faut que je teste ça !!.

Bonne journée

Cordialement

Mickael

ericemer · 23 décembre 2020

Bonjour,

voici le jquery que j'utilise sur ce site pour ajuster les différents éléments selon les besoins du moment.
Aujourd'hui, je pense que je ferais différement avec du css (display: grid et grid-template-areas).

$( document ).ready(function() {
	$('#barUpdate).remove(); 
// pour éviter des mises à jour qui mettraient le bazar.
	
	$('<div id="logo"><a href="/"><span>Menuiserie Mequin</span></a></div>').prependTo("nav" ) 
// je déplace mon logo avant mon menu. Le logo est géré en css. Le "span" généré est masqué avec du css (mais lisible par Google)
	
	$( "#swiper" ).prependTo("header" ).parent().addClass("diapos"); 
// je déplace le swipper dans le header et ajoute une class diapo au header... je ne sais plus pourquoi la class.

	$(".container").remove();
// je supprime du dom un bloc qui me sert pas.

	$('#footerDisplayCopyright').html('<a href="/mentions-legales">Mentions légales</a>'); 
// j'ajoute un lien... inutile aujourd'hui.

	$('#footerDisplayCopyright').append('<br /><a href="https://www.emery-com.com" target="_blank">Emery Communication</a>');
// J'ajoute ma signature.
	
	$('#site').before('<aside id="spaceur"class="container"> </aside>'); 
//J'ajoute un bloc 'espaceur' on peut faire autrement évidement

	$('#footersite > div').removeClass(); 
// supression des class ... je ne sais plus lesquelles
  
	$('section > p:first-child').remove(); 
  // je supprime le paragraphe premier enfant de section
	
  //initialize swiper when document ready, déjà commenter plus haut
	var mySwiper = new Swiper ('#swiper', {
	 // Optional parameters
	 // direction: 'vertical',
	  loop: true,
	  autoplay: 4000,
	  speed: 1500,
	  spaceBetween: 10,
	  prevButton: '.swiper-button-prev',
	  nextButton: '.swiper-button-next',
	  keyboardControl: true,
	  mousewheelControl: true,
	  roundLengths: true,
	  effect: 'fade',
	});
});

Modifié 23 décembre 2020 par ericemer
encore des fautes d'orthographe

ericemer · 23 décembre 2020

Et pour ceux que cela interresse,
le css, sans 2 ou 3 choses comme la gestion des icones avec une fonte (pour ceux que ca interresse, aller voir le site fontastic.me) et quelques class perso pour la mise en forme des contenus.

Je ne commente pas ...

@charset "UTF-8";
span.ico-telephone {
  min-width: 10em;
}

section {
  counter-reset: conter;
}
section a.imgallerie, section a.galleryGalleryPicture {
  position: relative;
}
section a.imgallerie::after, section a.galleryGalleryPicture::after {
  counter-increment: conter;
  /* On incrémente le compteur section */
  content: counter(conter) " / ";
  position: absolute;
  color: white;
  background-color: #282828;
  padding: 0.5em;
  top: 0;
  left: 0;
  font-size: 0.8em;
}

.imgallerie {
  display: block;
  border: 1px solid #DDD;
  height: 150px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  transition: opacity 0.3s ease-out;
}
.imgallerie:hover {
  opacity: 0.7;
}

aside.gallerie {
  clear: both;
  padding-top: 1em;
}
aside.gallerie > div {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(5, 1fr);
}

.col6 aside.gallerie > div {
  grid-template-columns: repeat(2, 1fr);
}

body {
  margin: 0;
}
body header {
  margin: 0;
}

header {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEUlEQVQImWNgYGD4z4AE/gMADwMB/414xEUAAAAASUVORK5CYII=) repeat, url("../site/file/source/slider/bandeau-generique.jpg") center center/cover no-repeat;
}
h2 {
  color: #e36c0e;
}

a.ico-telephone {
  text-decoration: none;
}

body nav {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: end;
}
body nav #menu {
  justify-self: end;
  margin-right: 0;
  margin-bottom: 1em;
}
body nav #menu li:last-child a {
  background-color: #e36c0e;
  transition: all 0.3s;
}
body nav #menu li:last-child a:hover {
  color: #282828;
}
body nav li ul {
  padding-left: 0;
  width: 220px;
  right: 0;
}

#logo {
  width: 200px;
  height: 100px;
  max-height: 100%;
  background: url(../site/file/source/logo.png) left center/contain no-repeat;
  transition: scale 1s ease-in-out 0s;
}
#logo:hover {
  -webkit-animation-name: pulse;
          animation-name: pulse;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
#logo a {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0) !important;
}
#logo span {
  visibility: hidden;
  width: 100%;
  height: 100%;
}

#site {
  position: relative;
  z-index: 1;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQImWNgYGBg+P///38IwcDAAABHygf5wwFByQAAAABJRU5ErkJggg==) repeat, linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, white 250px) repeat;
}

section {
  min-height: 250px;
}
section > *:first-child {
  margin-top: 0;
}

footer p, footer h4, footer h3, footer h2 {
  margin: 0 0 0.5em;
}
footer h2 {
  color: #e36c0e;
  font-size: 1.4em;
}

#footersite {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

/*#region*/
body:not(#tinymce) #swiper::after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEUlEQVQImWNgYGD4z4AE/gMADwMB/414xEUAAAAASUVORK5CYII=) repeat;
}

.swipper-slide {
  height: 100%;
}

.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
  color: white;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
  left: 10px;
  right: auto;
}

/*#endregion*/
.vignette {
  position: relative;
  cursor: pointer;
}
.vignette:hover:after {
  content: "";
  width: 150px;
  height: 120px;
  background-image: var(--background);
  background-size: contain;
  position: absolute;
  top: -120px;
  left: 0;
}
@media (min-width: 960px) {
  header {
    margin: 0;
    position: absolute;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    height: 60vh;
  }
  header::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    z-index: 1;
    background-image: linear-gradient(to top, #282828 0%, rgba(40, 40, 40, 0) 100%);
    height: 250px;
    width: 100%;
  }

  #spaceur {
    height: calc(60vh - 250px);
    background-color: rgba(236, 236, 236, 0.31);
    min-height: 100px;
  }
  #swiper {
    width: 100%;
    height: 60vh;
  }
}


@media (max-width: 500px) {
  aside.gallerie > div {
    grid-template-columns: repeat(1, 1fr);
  }
  .col6 aside.gallerie > div {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media (max-width: 575px) {
  #footersite {
    display: block;
  }
  #footersite > * {
    margin-bottom: 1em;
  }
}
@media (max-width: 700px) {
  aside.gallerie > div {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  #logo {
    height: 100px;
  }
}
@media (max-width: 900px) {
  aside.gallerie > div {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 959px) {
  body nav {
    padding-left: 20px;
  }
}

Modifié 23 décembre 2020 par ericemer

vinzze · 23 décembre 2020

Bonjour,

Honnêtement j'ai tapé fade effect swiper et j'ai trouvé un lien qui m'a donnée le code a changer. Mais je ne l'ai plus....

Par contre, simplement, il faut remplacer les lignes qui correspondent du fichier swiper.min.css par :
.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}
.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}
.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}
.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}

Mais j'ai pas testé.
Sinon annexé le fichier correspondant.

Belle soirée
Vinzze

swiper.min.css

Premier site réaliser avec Zwii

Messages recommandés

ericemer 41

Partager ce message

Lien à poster

Partager sur d’autres sites

dji 10

Partager ce message

Lien à poster

Partager sur d’autres sites

ericemer 41

Partager ce message

Lien à poster

Partager sur d’autres sites

dji 10

Partager ce message

Lien à poster

Partager sur d’autres sites

Thispy 123

Partager ce message

Lien à poster

Partager sur d’autres sites

ericemer 41

Partager ce message

Lien à poster

Partager sur d’autres sites

augras 290

Partager ce message

Lien à poster

Partager sur d’autres sites

Fred 1 576

Partager ce message

Lien à poster

Partager sur d’autres sites

Gilux 177

Partager ce message

Lien à poster

Partager sur d’autres sites

ericemer 41

Partager ce message

Lien à poster

Partager sur d’autres sites

schoune 55

Partager ce message

Lien à poster

Partager sur d’autres sites

ericemer 41

Partager ce message

Lien à poster

Partager sur d’autres sites

schoune 55

Partager ce message

Lien à poster

Partager sur d’autres sites

ericemer 41

Partager ce message

Lien à poster

Partager sur d’autres sites

vinzze 8

Partager ce message

Lien à poster

Partager sur d’autres sites

vinzze 8

Partager ce message

Lien à poster

Partager sur d’autres sites

ericemer 41

Partager ce message

Lien à poster

Partager sur d’autres sites

vinzze 8

Partager ce message

Lien à poster

Partager sur d’autres sites

augras 290

Partager ce message

Lien à poster

Partager sur d’autres sites

mickaelgutt 35

Partager ce message