Menu

How to create a mosaic effect on your website!

Hello everyone!

In this tutorial, I will show you how to create a mosaic effect on your website like I did on the top of this page.
It’s very simple and provides many possibilities!

There is two ways to make this possible… Using background images in empty sections (which won’t be displayed on tablet and mobiles) or using images module.

For this tutorial, I will choose the second way!

First thing you have to do is checking that all the images you want to use have the same width & height (because if you don’t, those rows won’t have the same height).

Then, you’re ready to begin…
(This tutorial will teach you how to create two rows with three 1/3 modules each but the way to make it work is the same if you want two 1/2 or four 1/4 modules)

STEP ONE: CREATE YOUR SECTION

Click on « Standard Section » and choose the column structure you want
(Like I said, in this tutorial, it will be the three 1/3 modules)

How to create a mosaic effect on your website!

STEP TWO: FIRST SETTINGS

Now that your row is created, you have to make sure you will have the perfect mosaic effect on your website.
Click on the « Row Module Settings » button and set those settings.
« Make this row fullwidth » and « use custom gutter width » (set on « 1 ») is very important, this will create a large row and delete space between columns.

How to create a mosaic effect on your website!

« Custom padding » (set on « 0 » for both) is here to make sure there will be no space on top and bottom of this row (in case you want to create multiple mosaic rows).
Click on « Advanced Design settings to find « Equalize column heights », which will set every module you choose (image, text, video, …) at the same height!

How to create a mosaic effect on your website!

STEP THREE: COLUMN CUSTOMIZATION

Here is the customization part!
This example is a two mosaic rows section but you can do a 1, 2, 3, 4, 5, 10, 100 or a full mosaic website if you want.
First, I will create an « image-text-image » row and then, I will create a « text-image-text » row.
Click on « Insert Module(s) » and choose which one you want to add!

How to create a mosaic effect on your website!

My first column is an image!
Upload your image and set those settings!
Choose « No animation » to make sure your image is fixed.
« Remove space below » to delete space under your image and choose « center » for a better effect.

How to create a mosaic effect on your website!

My second column is a text!
Set those settings to create a cool effect!
Write your text, chose his color, size and orientation, then go to the « Advanced design settings » and enter the padding you want regarding to the size of your image and where you want your text to be. For this tutorial I have chosen a 60px  padding-top (adding « px » is not necessary for the padding settings)
Then, go to the « Row Module Settings » and set the settings you want!
I want a background image for my text module so it’s here than I have to upload it.

How to create a mosaic effect on your website!
How to create a mosaic effect on your website!

Repeat the first operation to add an other image for the third module.
That’s it, you have your first mosaic row!

How to create a mosaic effect on your website!

WEBULLE

How to create a mosaic effect on your website!

You can know duplicate it and change the position of the text and the images (pay attention to the column settings) to create you’re second row or you can follow the tutorial again and begin step three by adding a text module instead of the image module.!

How to create a mosaic effect on your website!

WEBULLE

How to create a mosaic effect on your website!

WEBULLE

How to create a mosaic effect on your website!

WEBULLE

Change those images and modify your text to have a beautiful mosaic like the top one!
Don’t forget that there are many creation possibilities.

How to create a mosaic effect on your website!

1/3  –  1/3  –  1/3

How to create a mosaic effect on your website!
How to create a mosaic effect on your website!

1/4  –  1/4

How to create a mosaic effect on your website!

1/4  –  1/4

How to create a mosaic effect on your website!

1/2  –  1/2

2/3  –  1/3

How to create a mosaic effect on your website!

I hope you liked this tutorial, thanks for reading it and enjoy trying it !

Back to homepage and visit blog for more tutorials

Tricks to get on to Google’s first page

Introduction – My tricks to get on to Google’s first page

Created in March 2015, www.webulle.com (which is also www.bordeaux-creation-site-web.fr) has become one of the top visited web creation pages in the Bordeaux area, and is ranked first on Alexa (I will talk about Alexa in this article, as I know that the thought of it might offend some of you).

I believe that my experience as a community manager (for www.pokerstrategy.com, in Gibraltar) and as a blogger enabled me to make a difference and to achieve this result.

The battle to get on to Google’s first page is fought against specialised agencies, which in theory should be proficient in indexing and communication.

The point of this article is above all sharing… And that is precisely how I generated traffic on my website. Rather than thinking that “my ideas are precious, I must keep them to myself”, I believe that “I should share my ideas, and the better they are, the more traffic they will generate”.

Happy reading!

François Pinturault

Webdesigner and founder, WEBULLE

Content is king

I won’t go into detail about this, but it is clear that Google has been focusing on content quality.

This is a fact, but it must be interpreted cautiously as many websites which do not present the supposedly necessary qualities still manage to rank in the top search results, as a result of high traffic which is fuelled by a significant communication budget.

This is something that I always try to get my clients to understand; they need a communication budget which is relative to the potential popularity of their product or activity.

Obviously, it is also important to have a good understanding of SEO. This is a topic that I will address in a future article, but do not hesitate to get in touch with me if you have any questions.

Thoughts on using social media management to increase traffic for irrelevant content

As a web designer, I started promoting my work on Facebook by aiming at small to medium local businesses, thanks to ad targeting. Though it is the most obvious approach, it turns out not to be the most effective one, as I am going to show you.

To give you an example of the quality of my campaigns, here are the results of the advertisements for my client Odyssey Kitefishing. This website is meant for fishermen, and there is a very strong interest from that community. Bellow are the results of using 10€ to put forward each publication, yielding excellent statistics.

Tricks to get on to Google’s first page

When trying to generate traffic for a product which doesn’t appeal to everyone, as for instance my webdesign agency (apart from future clients, most people won’t care about it), it is essential to broaden your scope.

In this context, I asked myself: “What services do I provide?”

  1. Web design & SEO
  2. Online communication
  3. Professional network creation

This article falls into the second category.

The third category consists in getting people in touch in order to make their professional projects evolve into community projects. I thus create professional networks (see the dedicated section on the home page).

In this regard, I turned to the huge community of job hunters. By contacting companies, they seek to start their own professional network. This may sound far-fetched, but it actually works.

Created less than a month ago, this Facebook group has already accumulated 1350 members, without requiring any investment: Facebook Offres d’emploi Bordeaux 33

The twitter account also gained 1500 followers in a month and a half: Twitter Webulle Bordeaux

Approaching social network management in this way helps broaden horizons, and can enable the creation of a community where it seemed hard to do so at first.

Managing the Webulle Blog: the importance of sharing

I initially wanted to promote my work directly, but once again this was a bad way to go about it. Webulle’s activity doesn’t necessarily interest many people and that’s absolutely fine: I am a web designer, only future clients might be interested. The community is weak.

However, I have skills in webdesign and communication that I can put forward and which may interest many more people as long as I accept to share my experience in articles and tutorials.

We are often scared of sharing our knowledge – will others make the most of it and become as good as we are thanks to this goldmine of information? The reality is completely different: if you don’t share it, someone eventually will.

In this frame of mind, I created a part of my blog for webdesigners, in which I share CSS tricks. Ever since I have started this section, competitors do not seem to have better developed thanks to me. However, I have generated much more traffic and quickly got to Google’s first page. Below is shown the traffic information for July. The peaks occurred when the tutorials for webdesigners were shared.

Tricks to get on to Google’s first page

Alexa

I will talk briefly about Alexa, which is a platform that provides rankings of world-wide and national websites. Not that long ago, someone teased me (nicely, I must say) by telling me that it was not relevant, but nevertheless tried to sell me a website because it was very well ranked in searches for “indexing Talence”. Unless you are from Bordeaux, there are very little chances that you would have heard of this town… I didn’t get into a debate about it with him; we didn’t speak the same language, and my goal is to rank well for specific keywords such as “Bordeaux website creation”, because no-one ever searches for “indexing Talence”.

Alexa thus isn’t to be used to assess a website’s indexing on Google, but it is important to know than many professionals use it to check how popular a website is.

In this regard, I believe it is important to consider these statistics seriously, as Alexa also takes into account many variables such as the evolution of traffic, the bouncing rate, external links… It is a relevant element.

Most importantly, you can use all these statistics to prove to your clients and future clients how pertinent your work is.

Believe me, when you meet a client and show him that you are ranked 4500 in France, while your competitors are 200.000, usually, it’s pretty effective.

Tricks to get on to Google’s first page

Cross-linking

The number of sites linking to yours is an essential parameter of your indexing on Google, for two reasons:

  1. Google typically likes when a site points to yours. Beware, the “Black Hat” SEO days are over. Do not desperately try getting links from second class directories, as Google tracks this kind of behaviour. It is bad enough to have a warning on your website, but if a warning appears on a client’s website… Your career is at stake. I feel like it is important to point this out, because many so-called SEO “experts” still advise people to enrol for directory websites, which I will not state here.
  2. It is thus important to be referenced on relevant websites, which will furthermore generate more traffic.

For instance, as a webdesigner I suggest to my clients that they keep my link in their page footer (for example, “Copyright © 2015 Webulle | Developed by Webulle“). As of now, 17 websites point to mine.

It is all the more relevant as I am much more motivated to support them with their communication and social networking because they represent a significant part of my traffic. In this context, if the projects interest me, I keep following up with my clients, even if I am not under contract anymore. In that way, I build up my reputation, image and traffic.

How to add images between sections with divi 2.4

First of all, you have to check if the image you want to add is a PNG.
Then you should know that Divi 2.4 allows you to do almost all the CSS you need without using any external plugin.

Everything is about position, z-index and margin

1- First step
Create a Standard Section between the 2 sections where you want to add your image.
Select the first layout (full width) and click on Insert Module, then select Image

How to add images between sections with divi 2.4

2- Once you have chosen to insert an image, upload it !
(Check again the extension, if it’s not a PNG image with transparent font, the result won’t be great)

How to add images between sections with divi 2.4

3- Now comes the CSS Customization part.
Click on the Custom CSS tab in the Image Module Settings and add those attributes in the Main Element section!

How to add images between sections with divi 2.4

4- Now, if you check your website, you will see that it’s not completely over.
You now have to click on the Module Section Settings button (for the entire section where your image is) and use the same background color as the section below.

How to add images between sections with divi 2.4

5- To finish, you can add more CSS attributes.
For example, I want my image to be placed a little right and higher. And most of all, I want this image to be smaller.
You certainly know all the others CSS attributes but let me show you what I have chosen in this tutorial.

How to add images between sections with divi 2.4

« Et voilà » 🙂

How to add images between sections with divi 2.4

Create a rounded image with rotation on mouse hover

1 – STEP ONE: Add your image

First of all, you have to create a standard section and choose to add an image.
For a better result, choose a small square one !

Create a rounded image with rotation on mouse hover
Create a rounded image with rotation on mouse hover

2 – STEP TWO: CSS part 1

Now go to your css editor and add this code!
You can change values regarding to the effect you are looking for.
Then, don’t forget to add the name of the class you created on the css editor for your image.

.image-rounded {
border: none !important;
}

.image-rounded img {
width: 600px !important;
text-align: center !important;
border: 10px solid #4b5966 !important;
border-radius: 100% !important;
}

Create a rounded image with rotation on mouse hover

3 – STEP THREE: CSS part 2

Actually, you have a rounded image with the border of your choice (#4b5966 for a nice dark grey here), but you want it to rotate when mouse is hover.

Go back to your css editor and add this code!
You can also change values if you want the rotation to take more/less time (transition) or if you want the rotation to turn more/less (transform).

.image-rounded {
border: none !important;
-webkit-transition:all 0.6s ease-out;
-moz-transition:all 0.6s ease-out;
-ms-transition:all 0.6s ease-out;
-o-transition:all 0.6s ease-out;
transition:all 0.6s ease-out;
}

.image-rounded:hover
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}

Now you’ve got a rounded image which rotate when your mouse is hover!

Don’t hesitate to change values regarding to the effect you are looking for.

I hope you liked this tutorial, feel free to comment. 😉

Active comments on pages with DIVI (+rating widget)

Hello folks, here’s a quick tutorial that I decided to write when I realised it wasnt possible to active comments on pages with DIVI

That was a very important point to me for a website of mine I’m working on for personals trainners in my region, like Greg on Bordeaux.

1- First step
You have to head into your epannel settings : appearance > editor > select theme to edit : DIVI > page template

Active comments on pages with DIVI (+rating widget)

2- Once on the page template if nothing has been modified yet, you will find this code lign :

if ( ! $is_page_builder_used && comments_open() && ‘on’ === et_get_option( ‘divi_show_pagescomments’, ‘false’ ) ) comments_template(  », true );

3 – Now you have to modify carefully the code by this one :

if ( comments_open() && ‘on’ === et_get_option( ‘divi_show_pagescomments’, ‘false’ ) ) comments_template(  », true );

4 – Now you just have to activate (or not) the comments from the option found on every bottom page (if you cant find it, get sure that comments are activated).

Active comments on pages with DIVI 3

Comments are now activated on selected pages.

If you wonder what is the rating little stars plugin, it’s Rating Widget, an easy start rating system that you will setup in 1 minute : http://rating-widget.com/wordpress-plugin/

Appeler
Y aller