Recently we talked about creating a smashingly looking website from the start with Mobirise Free Website Creator and about adding some cool effects to the navigation and text but what about the imagery functionality? In this article I’m going to walk you through the awesome image tools you get on your side building your webpage with Mobirise. I’ll also try giving you some directions using them in your design order to get best appearance and results.
These are the first things your visitors will see on your site. Their general purpose is to speak out loud and clear the mission of the site, make a great impression and draw the visitor scrolling down further. An inappropriate or images might bore the visitor or even push him away, so chose them wisely.
Related Topics
- Website creator free software: how to set the contact forms e-mail?
- Shop block setting in totally free website creator
- Free html website creator: multilingual sites issue
- Not all easy free website creator menu item appear
- Publishing a website free creator project
It’s most probable you’re not a professional photographer do not possess a professional shooting equipment and are not quite happy with the quality of the pictures you have taken. This shouldn’t bother you at all – nowadays there are plenty of free web based photo enhancing services you can lean on, like Fotor and Enhance.Pho.to - http://enhance.pho.to/.
In order to achieve best appearance you should consider your images proportions. For best appearance aim including images with dimension ratio width/height around 1,5/1 – this way they will fit best in Mobirise Free Website Creator’s predefined blocks and also be nicely presented in any screen width. So if you have some really cool portrait oriented images and want to include them in the website you’re creating, it’s not a problem at all – you just have to crop them a bit in order to fit the “good proportions” . The same applies if you need just a part of the image of course. Don’t worry if you do not possess a professional image processing software – there are plenty of cool freeware image viewers offering the cropping functionality along with some photo enhancements – like FastStone (http://www.faststone.org/) or XnView (http://www.xnview.com/en/) - as Mobirise Free Website Creator they are great free tools to ease your life.
And last but not least – consider the overall appearance of your images – are they rather dark, light or have both light and dark patterns. This consideration will actually help you a lot later on when you get to writing some content over the images in your header section. In order to grant legibility you should aim achieving contrast between the text color and the background – for example if the image you’re placing is a bright blue sky with some clouds the good choice for text color would be dark and on the contrary – a white or very light color shade would be a good choice for writing over starry night sky.
This way stated it’s quite simple, but what if you need placing an image with both bright and dark areas and in addition need some text over both? In this cases you need to use a little trick to separate your text from the background – a shadow or a glow, which is actually also a shadow, but a very blurred one. It’s actually very easy – it’s achievable by a simple line of CSS in the custom CSS area of the header section. But first, let’s style our shadow – that’s very easy too with the help of an online CSS text shadow generator.
Style the appropriate appearance of the shadow and copy the generated CSS line. Than to apply it universally to all the text in the header area, just paste it in the custom CSS section. If you need to apply shadow to only a certain part of the text in your header, let’s say the paragraph part you should edit the generated CSS a bit like this:
.p { the generated CSS goes here }
If you need to have shadow or glow behind your header’s caption – replace p with h1. You’re done!
Another cool way showcasing your images is arranging them in a collage - this way you can set the focus on a particular image or even tell a whole story on screen. To achieve you can use one of the plenty free online solutions like for example Picmonkey (https://www.picmonkey.com/collage)
Think big. If you just need creating a great looking website for yourself or your business the mentioned online solutions will provide you the aid you need in setting up your images. But if as I know from personal experience you somehow get addicted to creating stuff with Mobirise Creator maybe you should also consider taking some time playing around with a more powerful image processing application. If so, my advice is to start your image editing quest with GIMP – it’s freeware, got tons of features and documentation.
Now with all of this being said it’s time to take a look at the functionality Mobirise offers. You get to choose between a full width single image and a slider with as many slides you need (keep it simple though – it’s proven, that the slider doesn’t keep the viewer’s attention for more than 3 or 4 slides). In addition of the images you get to place captions and call to action buttons – select their best alignment from the block options responsive menu. All the content you place is fully responsive. In addition you get the option of added parallax effect by default to meet the latest trends in web design – note that when you scroll your page the captions and buttons scroll with different speed than the image you’ve just inserted – this is the so called parallax scrolling effect – it gives the sense of depth to your designs.
Another interesting option is the Overlay – it gives you the ability to add a semitransparent layer with color of your choice over the image you’ve placed. This additional expression tool lets you either dim the image or enhance it adding particular color. By default this option is turned off. Turning it on shows two additional controls in the block parameters panel – Color and Opacity. As color is much of a self-explanatory, the opacity slider is used to set the amount of the overlaying color you want to add to the image – higher value makes the overlay color layer more “solid”, value of 1 practically replaces the image with the selected color.
Few tips: To dim the image use lighter colors and higher opacity, to make the colors pop and add make them a bit more expressive use darker overlay color and low opacity values. The overlay color can also aid you in cases of images with areas of different brightness making the text stand up.
The content align option lets you decide to place your Title, Text and Buttons either to the Right, in the Center or to the Left inside the image. Note that nevertheless this option is called Alignment the right side placed elements are still aligned left. It’s more legible this way and actually looks better to me, but if you need the text right aligned, go to the Code Editor panel, unlock the HTML Editor, find the h1 and p tags and edit them adding align="right" before the class=”.. for example like this:
<h1 class="mbr... becomes <h1 align="right" class="mbr…
One last thing – the Show Arrow option – it lets you decide to either have or not this little jumping arrow in the middle at the bottom of your image. Its function is to automatically scroll the site to the first area with actual content. For example if you have an image with this arrow, a slider and same kind of article, clicking on the arrow will scroll the page to the beginning of the article.
Now let’s take a closer look at the bootstrap slider block. Most of the controls in the lower part of the Block Parameters panel are much the same as the ones from the Single Image Block. What is different – the Auto play option lets you decide the slideshow to run upon initial load of the page or not. If not the user gets to list the images with the left and right arrow controls of the slider. The Full screen option lets you decide either to run the slider full screen or in a nice boxed layout with a “frame” of the selected Background color, which is the next option. Handling the slides is pretty easy – just drag them around to reorder, click on the image to replace and use the big red Remove button to the bottom of the panel to remove slide. Adding a slide could at first be a bit misleading – you add a slide clicking on the plus sign after the last slide in the ordering section and at a first glance nothing happens. Actually the active slide is being duplicated – all you need now is to change the image and style it accordingly. In order set the Header, Text and Alignment options first select the slide you would like to edit from the arrangement area. You can also go through the slides using the slider arrows like you would in the actual page – Mobirise truly is a What You See is What you Get Editor.
For showcasing your content to the world with Mobirise Free Website Creator you’ve got some powerful predefined blocks at your side. We’ll take a look at them one by one.
Image fortifying a short statement and a call to action. Since an image is worth a thousand words to get the most of this block’s appearance avoid placing long articles here – just a short powerful paragraph to draw your reader’s attention.
Since it’s the pictures we’re talking about in this article, let’s take a look at some ways making the image in this block more expressive. To do this we’ll utilize the mbr-figure class and add come custom CSS code to it in the Code Editor panel.
To generate the code we’ll use ready online generators and then just copy/paste the code like this:
.mbr-figure{
the generated codes go here. It’s OK to paste multiple generated custom CSS consequently
}
To get the code rounding the corners of your image use this online code generator.
To set shadowing options for your image use this one
Now let’s be bold and step out of the borders with the next custom CSS code generator. With its help you can freely transform the angle, proportions, scale and placement of the image.
We’ll use it to achieve cool overlapping effect over the next section in your site. To do this change the translate X and Y values in order to “push” the image outside the frame.
Copy/Paste the generated code, check the result and do any additional corrections if needed. The following screenshot displays an image with all three effects applied:
The same cool styling effects can be applied to the Single Image Block you get to use in Mobirise Free Website Creator. There is only one small difference – in order to make the effects to work you need to unlock the HTML editor, so prior doing that make sure you’ve done all the adjustments you need through the Block Options Panel. Then style the image as you wish. In order to set which content should be under the image and which – over it, add this line to the generated custom CSS:
z-index:-1!important;
where the bolded value of -1 sets the “elevation” of the image. Play with it until satisfied with the results. In order to “squeeze” the sections before and after the image, use the
margin-top:-200px!important;
margin-bottom:-200px!important;
changing the bolded values to get the desired results. This is kind of iteration process so you might need changing the z-index again too.
Now let’s take a look at the bootstrap image gallery block. Its purpose is much self-explanatory and the block options interface is much the same like the one with the slider. In order to edit particular placeholder’s image, just click on it and the Block Options dialog will open already focused on it allowing you easily to make the corrections. You should also set the color of the background that will show underneath if the count of the images is not sufficient filling an entire row.
To style the appearance of your content even more with Mobirise Creator you also got a predefined block allowing you to place an image or a video as a background for your article’s content. The behavior and controls of the Block Options Panel are similar to those of the Header Image panel, but there is something significant you should consider. Since the block is made to supply an image background to the entire article content in order to achieve that the software scales the image to fit the required height in cases of longer articles. As you might figure this might lead to some appearance issued with the over scaled images. To avoid this it’s a good idea uploading an image with dimensions/proportions corresponding with the amount of content taking place in the block.
If it better suits your vision you get the option to use predefined blocks for single image, slider and gallery blocks in boxed layout with nice solid background around it. If you need to change its color, just add a simple line in the Custom CSS field of the block:
background-color:#333;
and replace the bolded value with color of your choice. To aid yourself in finding the correct value for the desired color use this online tool.
The images possess greater power over viewer’s feelings and attention. A single image can tell an exciting ten paragraph story in just a sec. But behind this kind of appearances lay hours of thinking, picking up, crafting, trial and error until the desired results emerge. Sometimes you just get stuck in your Pictures folder just scrolling and scrolling around. It’s time to seek inspiration. A good place to start is the Mobirise Customers Websites Gallery – you can always take a look how the others utilized the great tools Mobirise Free Website Creator has to offer. But don’t limit yourself to that – later on when finished your site do share it with the community to give inspiration to others. This is the community spirit. You can find the galleries here:
http://www.stcdesigns.com/mobirise/mobirise.html
You’ve got all the power and means you need creating a smashing imagery content for your mobile friendly website – just take your time finessing the overall vision and the single images one by one.
Mobirise Free Website Creator gives you all the power you need putting great arranged appealing pictures to impress the viewers of your site and make them come back again. The only thing you need is a strong concept and a pinch of inspiration, which in case you get stuck you can always find with the community. Be bold, experiment with different approaches and always try amazing the viewer with something unexpected. And don’t forget sharing the great results you have achieved with the rest Mobirise Users.
Happy designing!
Mobirise is free for both personal and commercial use. You can download and use Mobirise for your own or client's websites without restrictions.