Menu

Google désindexe les sites WIX

Les utilisateurs de Wix ont reçu un coup de massue de la part de Google.

Si votre site web ou celui de l’un de vos clients a été construit avec l’outil de création en ligne WIX, vous devez avoir noté une réduction considérable de votre activité et de votre trafic.

Cette baisse importante n’a rien d’anormale, Google a tout simplement décidé de désindexer les sites créés avec WIX.

Google désindexe les sites WIX

L’offre d’appel de Wix réside dans son accessibilité, sa simplicité d’utilisation et surtout sa gratuité.

Facile à utiliser WIX prétend éliminer la nécessité d’embaucher des experts en développement Web, ce qui en fait une option attrayante pour les nouveaux créateurs d’entreprise par exemple, en leur faisant miroiter un gain d’argent.

Malheureusement tous les sites WIX utilisant la même plate-forme principale, un webmaster (novice ou non) voulant s’en servir aura beaucoup moins de flexibilité et de contrôle que s’il travaillait avec une plate-forme personnalisée.

Il n’est donc pas étonnant que quand on commence à avoir des problèmes sur un seul site WIX, tous les autres sites WIX soient aussi susceptibles de souffrir d’un sort semblable.

D’ailleurs, les Forums Google Webmaster Help ont été inondés de discussions au cours des deux dernières semaines sur les sites WIX qui ont disparu de l’index.

Google Webmaster Help a publié des excuses officielles en expliquant qu’ils avaient modifié leur appréciation quant aux sites WIX, expliquait qu’il pourrait y avoir du retard, mais qu’il travaille à résoudre le problème sur tous les sites touchés.

Si vous êtes utilisateur de Wix et ne savez pas si votre site a été affecté, il est le temps de procéder à quelques vérifications.

Le plus simple restera de regarder votre trafic et aussi de procéder aux recherches de mots clés qui vous concernent, et voir si vous êtes toujours ou non indexé.

Ne perdez pas de potentiel économique en passant par WIX.

Si votre site WIX a en effet chuté dans l’index de Google vous allez évidemment perdre tout son potentiel. Pire encore, il n’y a rien à faire qu’à attendre que Google lance la ré-indexation, sans trop savoir le temps que cela prendra.

C’est pourquoi faire construire votre plate-forme grâce à des outils de gestion Web comme WordPress est une excellente alternative à des sites comme WIX  qui entravent l’individualisation et vous donnent un contrôle limité.

Même si vous démarrez votre activité, ce problème démontre l’importance de posséder un site pertinent, personnalisé, et optimisé.

Mouseover effects for DIVI grid blog module

 

Hello folks, here’s a new tutorial, more or less the same than the previous one I’ve done but for blog module, so text appears when mouseover then effect goes on. Today we’ll see how to grey to color, color to grey, with or without scale effect.

 

François P.

Webmaster, WEBULLE

Ok so you’ll see how easy it is because it’s just a matter of settings (and adding the code to epannel of course ;)). Actualy, just create a blog module set like this :

Layout : Grid

Content : Show Content

Show author : No

Show date : No

Show categories : No

Show pagination : No

Mouseover effects for DIVI grid blog module

 

To add code, head to :

Appearance > Editor > Stylesheet

Then copy paste the code

 

 

Here we go, check the different effects bellow and choose those you want to use on your website.

Then copy paste selected code into your CSS panel, and add the class ID to the blog module.

 

 

Fade grey to color effect

Copy the code bellow into your CSS pannel

Then add fadegreytocolor into the blog class ID

 

La techno en question, un regard sur le Google Home et la concurrence

GOOGLE HOME, Amazon Alexa, Apple HomePod. Entre autres “smart speakers” (ou haut-parleurs intelligents). La famille des “choses” intelligentes continue de s’agrandir et ces futures stars du Noël à venir font bien plus que simplement jouer de la musique. Posé sur votre...

Show code

/*—————–Blog Module——————*/
/*————-Fade Grey To Color—————*/
/*—————-[By Webulle]——————*/

.blogfadegreytocolor img {
opacity: 1;
-webkit-animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
-moz-animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
-o-animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
-webkit-filter: grayscale(85%) opacity(0.8);
filter: grayscale(85%) opacity(0.8);
transition: 1.5s;
-moz-transition: 1.5s;
-webkit-transition: 1.5s;
}

.blogfadegreytocolor img:hover {
opacity: 1;
-webkit-animation: fadeTop 1s 1 cubic-bezier(0,0,0);
-moz-animation: fadeTop 1s 1 cubic-bezier(0,0,0);
-o-animation: fadeTop 1s 1 cubic-bezier(0,0,0);
animation: fadeTop 1s 1 cubic-bezier(0,0,0);
-webkit-filter: grayscale(0%) opacity(1);
filter: grayscale(0%) opacity(1);
transition: 0.7s;
-moz-transition: 0.7s;
-webkit-transition: 0.7s;
}

.blogfadegreytocolor article h2,h3,h4 {
display:block;
position: absolute;
top: 52%;
transform: translateY(-51%);
-ms-transform: translateY(-51%);
-webkit-transform: translateY(-51%);
-webkit-filter: blur(0);
left: 10%;
font-size:26px!important;
color:#fff;
margin:0 auto;
width:80%;
text-align:center;
opacity:0;
text-shadow:0 0 8px #000;
font-size:30px!important;
line-height:1;
-webkit-transition:all .5s ease .2s;
-moz-transition:all .5s ease .2s;
-o-transition:all .5s ease .2s;
-ms-transition:all .5s ease .2s;
transition: all .5s ease .2s;
}

.blogfadegreytocolor article:hover h2 {
opacity:1;
pointer-events:none;
}
.blogfadegreytocolor article p {
display:none;
}

.blogfadegreytocolor .et_pb_image_container {
margin:-20px;
}

.blogfadegreytocolor article {
position:relative;
}

.blogfadegreytocolor article a {
width:100%;
height:100%;
top:0;
left:0;
}

.blogfadegreytocolor article .et_pb_section {
display: none; /* Hides all content for thumbnail view */
}

 

Fade grey to color and scale effect

Copy the code bellow into your CSS pannel

Then add fadegreytocolorscale into the blog  class ID

 

La techno en question, un regard sur le Google Home et la concurrence

GOOGLE HOME, Amazon Alexa, Apple HomePod. Entre autres “smart speakers” (ou haut-parleurs intelligents). La famille des “choses” intelligentes continue de s’agrandir et ces futures stars du Noël à venir font bien plus que simplement jouer de la musique. Posé sur votre...

Show code

/*—————–Blog Module——————*/
/*———–Fade Grey To Color Scale———–*/
/*—————-[By Webulle]——————*/

.blogfadegreytocolorscale img {
opacity: 1;
-webkit-animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
-moz-animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
-o-animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
-webkit-filter: grayscale(85%) opacity(0.8);
filter: grayscale(85%) opacity(0.8);
transition: 1.5s;
-moz-transition: 1.5s;
-webkit-transition: 1.5s;

}

.blogfadegreytocolorscale img:hover {
opacity: 1;
-webkit-animation: fadeTop 1s 1 cubic-bezier(0,0,0);
-moz-animation: fadeTop 1s 1 cubic-bezier(0,0,0);
-o-animation: fadeTop 1s 1 cubic-bezier(0,0,0);
animation: fadeTop 1s 1 cubic-bezier(0,0,0);
-webkit-filter: grayscale(0%) opacity(1);
filter: grayscale(0%) opacity(1);
-webkit-transform: scale(1.03);
-moz-transform: scale(1.03);
-o-transform: scale(1.03);
transition: 0.7s;
-moz-transition: 0.7s;
-webkit-transition: 0.7s;
}

.blogfadegreytocolorscale article h2,h3,h4 {
display:block;
position: absolute;
top: 52%;
transform: translateY(-51%);
-ms-transform: translateY(-51%);
-webkit-transform: translateY(-51%);
-webkit-filter: blur(0);
left: 10%;
font-size:26px!important;
color:#fff;
margin:0 auto;
width:80%;
text-align:center;
opacity:0;
text-shadow:0 0 8px #000;
font-size:30px!important;
line-height:1;
-webkit-transition:all .5s ease .2s;
-moz-transition:all .5s ease .2s;
-o-transition:all .5s ease .2s;
-ms-transition:all .5s ease .2s;
transition: all .5s ease .2s;
}

.blogfadegreytocolorscale article:hover h2 {
opacity:1;
pointer-events:none;
}
.blogfadegreytocolorscale article p {
display:none;
}

.blogfadegreytocolorscale .et_pb_image_container {
margin:-20px;
}

.blogfadegreytocolorscale article {
position:relative;
}

.blogfadegreytocolorscale article a {
width:100%;
height:100%;
top:0;
left:0;
}

.blogfadegreytocolorscale article .et_pb_section {
display: none; /* Hides all content for thumbnail view */
}

 

Fade color to grey

Copy the code bellow into your CSS pannel

Then add fadegreytocolorscale into the blog class ID

 

La techno en question, un regard sur le Google Home et la concurrence

GOOGLE HOME, Amazon Alexa, Apple HomePod. Entre autres “smart speakers” (ou haut-parleurs intelligents). La famille des “choses” intelligentes continue de s’agrandir et ces futures stars du Noël à venir font bien plus que simplement jouer de la musique. Posé sur votre...

Show code

/*—————–Blog Module——————*/
/*————–Fade Color To Grey————–*/
/*—————-[By Webulle]——————*/

.blogfadecolortogrey img {
opacity: 1;
-webkit-animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
-moz-animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
-o-animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
-webkit-filter: grayscale(0%) opacity(1);
-moz-filter: grayscale(0%) opacity(1)
filter: grayscale(0%) opacity(1);
transition: 0.7s;
-moz-transition: 0.7s;
-webkit-transition: 0.7s;

}

.blogfadecolortogrey img:hover {
opacity: 1;
-webkit-animation: fadeTop 1s 1 cubic-bezier(0,0,0);
-moz-animation: fadeTop 1s 1 cubic-bezier(0,0,0);
-o-animation: fadeTop 1s 1 cubic-bezier(0,0,0);
animation: fadeTop 1s 1 cubic-bezier(0,0,0);
-webkit-filter: grayscale(85%) opacity(0.8);
filter: grayscale(85%) opacity(0.8);
transition: 1.5s;
-moz-transition: 1.5s;
-webkit-transition: 1.5s;
}

.blogfadecolortogrey article h2,h3,h4 {
display:block;
position: absolute;
top: 52%;
transform: translateY(-51%);
-ms-transform: translateY(-51%);
-webkit-transform: translateY(-51%);
-webkit-filter: blur(0);
left: 10%;
font-size:26px!important;
color:#fff;
margin:0 auto;
width:80%;
text-align:center;
opacity:0;
text-shadow:0 0 8px #000;
font-size:30px!important;
line-height:1;
-webkit-transition:all .5s ease .2s;
-moz-transition:all .5s ease .2s;
-o-transition:all .5s ease .2s;
-ms-transition:all .5s ease .2s;
transition: all .5s ease .2s;
}

.blogfadecolortogrey article:hover h2 {
opacity:1;
pointer-events:none;
}
.blogfadecolortogrey article p {
display:none;
}

.blogfadecolortogrey .et_pb_image_container {
margin:-20px;
}

.blogfadecolortogrey article {
position:relative;
}

.blogfadecolortogrey article a {
width:100%;
height:100%;
top:0;
left:0;
}

.blogfadecolortogrey article .et_pb_section {
display: none; /* Hides all content for thumbnail view */
}

 

Fade color to grey and scale effect

Copy the code bellow into your CSS pannel

Then add fadegreytocolorscale into the blog class ID

 

La techno en question, un regard sur le Google Home et la concurrence

GOOGLE HOME, Amazon Alexa, Apple HomePod. Entre autres “smart speakers” (ou haut-parleurs intelligents). La famille des “choses” intelligentes continue de s’agrandir et ces futures stars du Noël à venir font bien plus que simplement jouer de la musique. Posé sur votre...

Show code

/*—————–Blog Module——————*/
/*———–Fade Color To Grey Scale———–*/
/*—————-[By Webulle]——————*/

.blogfadecolortogreyscale img {
opacity: 1;
-webkit-animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
-moz-animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
-o-animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
-webkit-filter: grayscale(0%) opacity(1);
-moz-filter: grayscale(0%) opacity(1)
filter: grayscale(0%) opacity(1);
transition: 0.7s;
-moz-transition: 0.7s;
-webkit-transition: 0.7s;

}

.blogfadecolortogreyscale img:hover {
opacity: 1;
-webkit-animation: fadeTop 1s 1 cubic-bezier(0,0,0);
-moz-animation: fadeTop 1s 1 cubic-bezier(0,0,0);
-o-animation: fadeTop 1s 1 cubic-bezier(0,0,0);
animation: fadeTop 1s 1 cubic-bezier(0,0,0);
-webkit-filter: grayscale(85%) opacity(0.8);
filter: grayscale(85%) opacity(0.8);
-webkit-transform: scale(1.03);
-moz-transform: scale(1.03);
-o-transform: scale(1.03);
transition: 1.5s;
-moz-transition: 1.5s;
-webkit-transition: 1.5s;
}

.blogfadecolortogreyscale article h2,h3,h4 {
display:block;
position: absolute;
top: 52%;
transform: translateY(-51%);
-ms-transform: translateY(-51%);
-webkit-transform: translateY(-51%);
-webkit-filter: blur(0);
left: 10%;
font-size:26px!important;
color:#fff;
margin:0 auto;
width:80%;
text-align:center;
opacity:0;
text-shadow:0 0 8px #000;
font-size:30px!important;
line-height:1;
-webkit-transition:all .5s ease .2s;
-moz-transition:all .5s ease .2s;
-o-transition:all .5s ease .2s;
-ms-transition:all .5s ease .2s;
transition: all .5s ease .2s;
}

.blogfadecolortogreyscale article:hover h2 {
opacity:1;
pointer-events:none;
}
.blogfadecolortogreyscale article p {
display:none;
}

.blogfadecolortogreyscale .et_pb_image_container {
margin:-20px
}

.blogfadecolortogreyscale article {
position:relative;
}

.blogfadecolortogreyscale article a {
width:100%;
height:100%;
top:0;
left:0;
}

.blogfadecolortogreyscale article .et_pb_section {
display: none; /* Hides all content for thumbnail view */
}

Hope you liked this quick one tutorial

Feel free to check my blog on Webulle’s homepage for more easy tuts.

Also, feel free to comment. 🙂

How to verticaly center a text module with DIVI

Hello Divi users!

Today I will show you how to be sure that your text module will be perfectly verticaly centered.
It’s a quick tutorial very simple and usefull

François PINTURAULT

Fondateur, WEBULLE

STEP ONE: CREATE YOUR ROW MODULE

A) Create a standard section and choose to add two 1/2 modules!

How to verticaly center a text module with DIVI

B) Then, select which module you want
(for this tutorial, i’m using a text module for the first one and a image module for the second one)

How to verticaly center a text module with DIVI

c) Click on the row module settings

How to verticaly center a text module with DIVI

d) Go to the advanced design settings and select « Equalize Column heights »

How to verticaly center a text module with DIVI

e) Click on the text module settings button

How to verticaly center a text module with DIVI

f) Select « Center » in the text orientation area

How to verticaly center a text module with DIVI

STEP TWO: CSS & CLASS

a) Click on Appearance button, then click on Editor

How to verticaly center a text module with DIVI

b) Copy this code and paste it in your stylesheet

.et_pb_column {
position: relative;
}

.et_pb_column .centertext.et_pb_text {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

How to verticaly center a text module with DIVI

c) Click on the text module settings button

How to verticaly center a text module with DIVI

d) Give your module text the class you chose (here, it’s « centertext »)

How to verticaly center a text module with DIVI

WHAT’S THE DIFFERENCE ?

Example with our code:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sodales finibus dui sed lobortis.

How to verticaly center a text module with DIVI

Example without our code:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sodales finibus dui sed lobortis.

How to verticaly center a text module with DIVI

Your text is now totally centered!

Thanks for reading this, I hope that you enjoyed it & that it will help some of you!

Nice mouseover effects for pictures with DIVI

Hello folks, in this new tutorial I’m gonna show you how to give a picture some nice mouseover effects, fading from grey to color, color to grey, with or without scale effect.

François P.

Webmaster, WEBULLE

First of all, create a random section,

Then create an image module in it.

Here’s where you will have to add the Class ID to make it work

To add code, head to :

Appearance > Editor > Stylesheet

Then copy paste the code

Warning : Add a space as shown on the picture (if not that just wont work)

Here we go, check the different effects bellow and choose those you want to use on your website.

Now just copy paste selected code into your CSS panel, and add the class ID to the picture module.

Depending on what you’re looking for, feel free to use basic divi options like adding an image animation, open in light box option, or add an external link.

Fade grey to color effect

Copy the code bellow into your CSS pannel

Then add fadegreytocolor into the image class ID

Show code

/*———————————————-*/
/*————-Fade Grey To Color—————*/
/*—————-[By Webulle]——————*/

.fadegreytocolor img {
opacity: 1;
-webkit-animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
-moz-animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
-o-animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
border: 5px solid #fff;
-webkit-filter: grayscale(85%) opacity(0.8);
filter: grayscale(85%) opacity(0.8);
transition: 1.5s;
-moz-transition: 1.5s;
-webkit-transition: 1.5s;
}

.fadegreytocolor img:hover {
opacity: 1;
-webkit-animation: fadeTop 1s 1 cubic-bezier(0,0,0);
-moz-animation: fadeTop 1s 1 cubic-bezier(0,0,0);
-o-animation: fadeTop 1s 1 cubic-bezier(0,0,0);
animation: fadeTop 1s 1 cubic-bezier(0,0,0);
border: 5px solid #fff;
-webkit-filter: grayscale(0%) opacity(1);
filter: grayscale(0%) opacity(1);
transition: 0.7s;
-moz-transition: 0.7s;
-webkit-transition: 0.7s;
}

Fade grey to color and scale effect

Copy the code bellow into your CSS pannel

Then add fadegreytocolorscale into the image class ID

Show code

/*———————————————-*/
/*———–Fade Grey To Color Scale———–*/
/*—————-[By Webulle]——————*/

.fadegreytocolorscale img {
opacity: 1;
-webkit-animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
-moz-animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
-o-animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
border: 5px solid #fff;
-webkit-filter: grayscale(85%) opacity(0.8);
filter: grayscale(85%) opacity(0.8);
transition: 1.5s;
-moz-transition: 1.5s;
-webkit-transition: 1.5s;

}

.fadegreytocolorscale img:hover {
opacity: 1;
-webkit-animation: fadeTop 1s 1 cubic-bezier(0,0,0);
-moz-animation: fadeTop 1s 1 cubic-bezier(0,0,0);
-o-animation: fadeTop 1s 1 cubic-bezier(0,0,0);
animation: fadeTop 1s 1 cubic-bezier(0,0,0);
border: 5px solid #fff;
-webkit-filter: grayscale(0%) opacity(1);
filter: grayscale(0%) opacity(1);
-webkit-transform: scale(1.03);
-moz-transform: scale(1.03);
-o-transform: scale(1.03);
transition: 0.7s;
-moz-transition: 0.7s;
-webkit-transition: 0.7s;
}

Fade color to grey

Copy the code bellow into your CSS pannel

Then add fadegreytocolorscale into the image class ID

Show code

/*———————————————-*/
/*————-Fade Color To Grey—————*/
/*—————-[By Webulle]——————*/

.fadecolortogrey img {
opacity: 1;
-webkit-animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
-moz-animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
-o-animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
border: 5px solid #fff;
-webkit-filter: grayscale(0%) opacity(1);
-moz-filter: grayscale(0%) opacity(1);
filter: grayscale(0%) opacity(1);
transition: 0.7s;
-moz-transition: 0.7s;
-webkit-transition: 0.7s;

}

.fadecolortogrey img:hover {
opacity: 1;
-webkit-animation: fadeTop 1s 1 cubic-bezier(0,0,0);
-moz-animation: fadeTop 1s 1 cubic-bezier(0,0,0);
-o-animation: fadeTop 1s 1 cubic-bezier(0,0,0);
animation: fadeTop 1s 1 cubic-bezier(0,0,0);
border: 5px solid #fff;
-webkit-filter: grayscale(85%) opacity(0.8);
filter: grayscale(85%) opacity(0.8);
transition: 1.5s;
-moz-transition: 1.5s;
-webkit-transition: 1.5s;
}

Fade color to grey and scale effect

Copy the code bellow into your CSS pannel

Then add fadegreytocolorscale into the image class ID

Show code

/*———————————————-*/
/*———–Fade Color To Grey Scale———–*/
/*—————-[By Webulle]——————*/

.fadecolortogreyscale img {
opacity: 1;
-webkit-animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
-moz-animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
-o-animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
animation: fadeTop 1s 1 cubic-bezier(0.77,0,.175,1);
border: 5px solid #fff;
-webkit-filter: grayscale(0%) opacity(1);
-moz-filter: grayscale(0%) opacity(1);
filter: grayscale(0%) opacity(1);
transition: 0.7s;
-moz-transition: 0.7s;
-webkit-transition: 0.7s;

}

.fadecolortogreyscale img:hover {
opacity: 1;
-webkit-animation: fadeTop 1s 1 cubic-bezier(0,0,0);
-moz-animation: fadeTop 1s 1 cubic-bezier(0,0,0);
-o-animation: fadeTop 1s 1 cubic-bezier(0,0,0);
animation: fadeTop 1s 1 cubic-bezier(0,0,0);
border: 5px solid #fff;
-webkit-filter: grayscale(85%) opacity(0.8);
filter: grayscale(85%) opacity(0.8);
-webkit-transform: scale(1.03);
-moz-transform: scale(1.03);
-o-transform: scale(1.03);
transition: 1.5s;
-moz-transition: 1.5s;
-webkit-transition: 1.5s;
}

Hope you liked this quick one tutorial

Feel free to check my blog on Webulle’s homepage for more easy tuts.

Also, feel free to comment. 🙂

How to make this amazing effect for a blog module with DIVI 2.5

Hi folks. First of all I would like to point that I found this effect from an amazing divi child theme called flourish that you can buy on Elegant market place : https://elegantmarketplace.com/product/flourish/

So I have no merit here, but as I solved how to make this effect, I wanted to share it with the community.

Hope you’ll like this tutorial.

For some reasons, the effect isnt working fine on a post. So if you want see it working fine, please visit my homepage’s blog where you will also find more DIVI tutorials : http://bordeaux-creation-site-web.fr/webulle-web-design-agency/

The effect is the same than the one on picture bellow :

Ok so you’ll see how easy it is because it’s just a matter of settings (and adding the code to epannel of course ;)). Actualy, just create a random blog module set like this :

Layout : Grid

Content : Show Content

Show author : No

Show date : No

Show categories : No

Show pagination : No

 

How to make this amazing effect for a blog module with DIVI 2.5

Set the CSS ID of your blog module to : blog

 

How to make this amazing effect for a blog module with DIVI 2.5

Now head to apparence, editor, stylesheet.

And copy paste the code bellow.

How to make this amazing effect for a blog module with DIVI 2.5
Show code

/*————————————————*/

/*———–[Blog Module by Webulle]————-*/

/*————————————————*/

#blog article .et_pb_section {

display: none; /* Hides all content for thumbnail view */

}

#blog.et_pb_section {

border-top:30px solid #fff;

border-bottom:30px solid #fff

}

#blog .et_pb_column_4_4 .et_pb_blog_grid .column.size-1of3 .et_pb_post,#blog .et_pb_column_4_4 .et_pb_module {

margin-bottom:0;

}

#blog .et_pb_column_4_4 .et_pb_blog_grid .column.size-1of3 {

width:32%;

margin-right:2%

}

.single-post .subscribe-optin h2 {

margin-top: 0;

}

.column.size-1of3 article:nth-child(2), .column.size-1of3 article:nth-child(3) {

margin-top: 25px;

}

@media only screen and (min-width: 980px) {

#blog article p {

display:none

}

#blog .et_pb_image_container {

margin:-20px

}

#blog article {position:relative

}

#blog article a {

width:100%;

height:100%;

top:0;

left:0

}

#blog article h2 {

display:block;

position: absolute;

top: 52%;

transform: translateY(-51%);

-ms-transform: translateY(-51%);

-webkit-transform: translateY(-51%);

-webkit-filter: blur(0);

left: 10%;

font-size:26px!important;

color:#fff;

margin:0 auto;

width:80%;

text-align:center;

opacity:0;

text-shadow:0 0 8px #000;

font-size:30px!important;

line-height:1;

-webkit-transition:all .5s ease .2s;

-moz-transition:all .5s ease .2s;

-o-transition:all .5s ease .2s;

-ms-transition:all .5s ease .2s;

transition: all .5s ease .2s;

}

#blog article:hover h2 {

opacity:1;

pointer-events:none

}

#blog article .et_pb_image_container {

-webkit-transition:all 1s ease .5s;

-moz-transition:all 1s ease .5s;

-o-transition:all 1s ease .5s;

-ms-transition:all 1s ease .5s;

transition:all 1s ease .5s;

filter:grayscale(0%);

-webkit-filter: grayscale(0%);

filter: url(« data:image/svg+xml;utf8,<svg xmlns=’http://www.w3.org/2000/svg’><filter id=’grayscale’><feColorMatrix type=’matrix’ values=’1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0’/></filter></svg>#grayscale »);

}

#blog article .et_pb_image_container:hover {

filter: grayscale(100%);

-webkit-filter: grayscale(100%); /* For Webkit browsers */

filter: gray; /* For IE 6 – 9 */

-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */

filter: url(« data:image/svg+xml;utf8,<svg xmlns=’http://www.w3.org/2000/svg’><filter id=’grayscale’><feColorMatrix type=’matrix’ values=’0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0’/></filter></svg>#grayscale »); /* Firefox 10+, Firefox on Android */

}

#blog article a:hover {

opacity:1

}

#blog article a:after,#blog article a:before {

border:1px solid rgba(255,255,255,0.7);

bottom:1em;

content: »;

left:1em;

opacity:0;

position:absolute;

right:1em;

top:1em;

-webkit-transform:scale(1.5);

-ms-transform:scale(1.5);

transform:scale(1.5);

-webkit-transition:.6s .2s;

transition:.6s .2s

}

#blog article a:before {

border-bottom:none;

border-top:none;

left:2em;

right:2em

}

#blog article a:after {

border-left:none;

border-right:none;

bottom:2em;

top:2em

}

#blog article a:hover:after,#blog article a:hover:before {

-webkit-transform:scale(1);

-ms-transform:scale(1);

transform:scale(1);

opacity:1

}

}

@media only screen and (max-width: 980px) {

#blog article p {

display:inherit;

}

#blog .et_pb_column .et_pb_blog_grid .column.size-1of2 {

width:100%;

margin-bottom:0!important

}

#blog .et_pb_column .et_pb_blog_grid .column.size-1of2 {

width: 100%!important;

margin: 0!important;

}

#blog .et_pb_column .et_pb_blog_grid .column.size-1of2 .et_pb_post {

margin-bottom:25px;

}

#blog .et_pb_blog_grid .column:nth-child(2) .et_pb_post {

margin-bottom:0!important;

}

}

« Et voila! »

I hope you enjoyed this tutorial, feel free to comment. If you’re looking for more tutorial, just visit my homepage’s blog. 😉

More tutorials?

Appeler
Y aller