Flatsome Theme Tutorial (WordPress) - Session 1: The BasicsAdvanced course now available: to the Flatsome eCommerce WordPress Th. Flatsome has a community forum where many questions has already been answered. Please use the search functionality in this group to try find an answer to your question. Remember this is not a official support group and you can not expect an answer from UX Themes Support Team.
The theme includes a setting for adding a parallax background, which is a simple way to add a visual effect to images without slowing down your site with something clunkier. Quite a few custom Elementor blocks come with the Sydney theme. The theme options maximize your customization opportunities, with color, fonts, and blog layout settings. Flatsome is the perfect theme for your shop or company website, or for all your client websites if you are an agency or freelancer. It got all the tools needs to create super fast responsive websites with amazing user experience. Showing all 4 results.
Awesome image zoom for images in posts/pages and for WooCommerce products
WP Image Zoom is a robust, modern and very configurable image zoom plugin. It allows you to easily create a magnifying glass on your images, all from a very intuitive WP admin interface.
Your visitors will be able to see the beautiful details of your images. This will improve your users’ experience and hopefully also your revenue.
- 4 Zooming Types – Inner zoom, Round lens, Square lens and outer zoom (with Zoom Window).
- Animation Easing Effect – the zooming lense will follow the mouse over the image with a sleak delay. This will add a touch of elegance to the zooming experience.
- Fade Effect – the zoomed part will gracefully fade in or fade out.
- Extremely configurable – control zooming lens size, border color, border size, shadow, rounded corner, and others …
- Works with WooCommerce – easily enable the zoom on all your products’ images. Only a checkbox away.
- Works in Pages and Posts – within the post’s/page’s editor you’ll find a button for applying the zooming effect on any image.
Using the plugin with a page bulider
For applying the zoom on an image on a page/post from within a page builder, you need to add the “zoooom” CSS class to the image. Here are screenshots on how to do this with the most popular page builders:
* Gutenberg – screenshot
* WPBakery – depending on the page builder’s version: 1) screenshot with the “large” or “full” for the Image Size setting. Or 2) screenshot.
* Page Builder by SiteOrigin – screenshot
* Elementor Page Builder – screenshot. It works with all the Image Size options, except Custom.
* Beaver Builder – screenshot
* Divi Builder – screenshot (used by the Divi theme)
* Avia Layout Builder – screenshot (used by the Enfold theme)
* Fusion Page Builder – screenshot
* Brizy Page Builder – screenshot
* Tatsu Page Builder – screencast
The zoom works alright only with Image elements. Unfortunately, trying to apply the zoom on an image gallery will make the zoom work only on the first image of the gallery. With the WP Image Zoom Pro the zoom can also be applied on image galleries.
Why should you upgrade to WP Image Zoom Pro?
- Responsive (the zoom window will fit to the browser width)
- Mousewheel Zoom
- Works with WooCommerce variations
- Works with Portfolio images
- Works with Easy Digital Downloads featured images
- Works with MarketPress – WordPress eCommerce
- Zoom within Lightboxes and Carousels
- You can choose the zoom window position (left or right from the image)
- You can use on more than one image on the same page
- Custom theme support
Flatsome Theme Tutorial
- This plugin is provided “as-is”; within the scope of WordPress. We will update this plugin to remain secure, and to follow WP coding standards.
- If you prefer more dedicated support, with more advanced and powerful plugin features, please consider upgrading to WP Image Zoom Pro.
- From the WP admin panel, click “Plugins” -> “Add new”.
- In the browser input box, type “WP Image Zoom”.
- Select the “WP Image Zoom” plugin and click “Install”.
- Activate the plugin.
- Download the plugin from this page.
- Save the .zip file to a location on your computer.
- Open the WP admin panel, and click “Plugins” -> “Add new”.
- Click “upload”. then browse to the .zip file downloaded from this page.
- Click “Install”. and then “Activate plugin”.
- Download the plugin from this page.
- Extract the .zip file to a location on your computer.
- Use either FTP or your hosts cPanel to gain access to your website file directories.
- Browse to the
- Upload the extracted
wp-image-zoooomfolder to this directory location.
- Open the WP admin panel. click the “Plugins” page. and click “Activate” under the newly added “WP Image Zoom” plugin.
Flatsome Theme Price
Does it work with caching plugins ?
The zoom will show up only on the first image on my WooCommerce gallery
The zoom should work fine with all the images on the default WooCommerce gallery, but some themes replace entirely the gallery with a Owl Carousel or a another gallery/carousel/slider. Note that this plugin doesn’t change the gallery, it only tries to add a zoom to the present gallery and we cannot guarantee compatibility with each gallery/carousel/slider implementation out there.
It displays the zoom lens, but the picture is not enlarged
In order for the zoom to work you have to upload a bigger picture than the one presented on the website. For more control over the zoom level you can try upgrading to the PRO version. There you can set the zoom level to 2x or 3x the size of the presented picture.
In case you did upload a bigger picture and the zoom still isn’t working, you might try to deactivate the Jetpack Photon module. The module resizes the image and interferes with the zoom.
The zoom window is about 1cm lower than the zoomed image
This is an effect caused by the WordPres Admin Bar. Try logging out and check the zoom again.
Another cause could be the sticky header. When the page is loaded, the zoom window is built and set in the right position (next to the zoomed image). When you scroll down, the sticky header changes its height but the zoom window keeps staying in the same position. In order to solve this you can choose between removing the header’s sticky effect or upgrading to the WP Image Zoom PRO, as there the zoom window is totally differently built and the sticky header doesn’t affect the zoom position.
Another cause could be the “CSS Animation” settings within WPBakery. If you want to keep the animation effect and still have the zoom, I recommend you upgrade to the WP Image Zoom PRO.
How to zoom an image without the button in the editor?
When you add a CSS class called ‘zoooom’ to any image, the zoom will be applied on that particular image. Remember that the zooming works only when the displayed image is smaller than the loaded image (i.e. the image is shrinked with “width” and “height” attributes).
If I want to use a “lazy load” plugin will it work?
We can ensure compatibility with Unveil Lazy Load, WP images lazy loading and Lazy Load plugins.
My image is within a tab
The zoom lens is built on page load relative to the image and it will be shown in mouse hover no matter if the image is hidden in another tab. We cannot do anything about this, the zoom is not built to work with images within tabs.
Alternatively you can upgrade to the Pro version, as there the zoom lens is built on mouse hover and not on page load, which means that the zoom will work also with images within tabs.
When both the Black Studio TinyMCE Widget and the “Site Builder by SiteOrigin” plugins are installed on the website, then the WP Image Zoom button doesn’t show up in the Edit Post and Edit Page editor. But you can still apply the zoom if you manage to add the “zoooom” CSS class to the image.
The zoom doesn’t work well with Image Carousel on Avada theme. You cannot use the zoom and the carousel on the same page.
The zoom doesn’t work at all with the WooCommerce Dynamic Gallery plugin.
The zoom will not work with the WooCommerce gallery on the Avada theme. The Avada theme changes entirely the default WooCommerce gallery with the Flexslider gallery and the zoom plugin does not support the Flexslider gallery. Please check the PRO version of the plugin for compatibility with the Flexslider gallery.
- Demo photo from https://pixabay.com/en/camera-retro-ricoh-old-camera-813814/ under CC0 Public Domain license
Introducing the most powerful and flexible WordPress theme created by Themify, making it easy to create any site quickly and beautifully (and responsive, of course). Take full control of your theme design from header to footer. Ultra is a 'must-have' theme for designers and developers.
DEAL: You can join Master Club $89 to get Ultra plus all 42 themes, 11 plugins, 25 Builder addons, and 5 PTB addons.
Ultra now comes with design skins and pre-made demo sites! The skin not only transforms the site's design appearance, but can also help you to setup a real sample site within minutes. With just a single click, you can import the demo setup that includes the theme settings, content, menus, widgets, etc., exactly like our theme demos. This is a time saver for creating client sites.
- Wedding 2
- Agency 3
- Agency 2
- More coming..
Get the exact same layouts as our pre-made sites with 12 free Builder addons. Valued at $100, purchasing the Ultra theme will give you access to all these bonus addons for free.
- Progress Bar
- Image Pro
- Maps Pro
- Pricing Table
- Slider Pro
Create unlimited layouts using drag & drop Builder, responsive layouts, slider backgrounds, video backgrounds, parallax scrolling, custom styling, animations, and more. See our demo.
To save your time, we've packed over 60+ professional layouts in the theme. Simply import the layout, edit the content, and you're done!
Ultra gives you full control from header to footer, either site-wide or per individual page. This means that you can make your entire site share the same look and feel or create a unique look for every page.
17 Header/Page Styles
Select a header/page design from 17 styles (the no header option is perfect for making landing pages where you don't want to have header navigation). And yes, there is a sticky header option and this design list is growing!
- *New* Header Top Widget
- *New* Header Classic
- Header Magazine
- Header Block
- Header Horizontal
- Header Boxed Content
- Header Boxed Layout
- Header Left Pane
- Header Slide Out
- Header Min Bar
- Header Top Bar
- Header Boxed Compact
- Header Overlay
- Header Right Pane
- Split Menu
- Header Stripe
- No Header
- More to come..
5 Single Post Layouts
In term of single post layout, there is a default layout plus four unique layouts.
- Split Layout
- Fullwidth Layout
- Slider Layout
- Gallery Layout
6 Header Background Options
Header background allows you to: upload a background image, pick a solid color, insert a slider, upload a video, set animating colors, or have it transparent if you want.
Ultra theme comes with beautiful typography baked into it, out of the box. It comes with a few pre-sets you can choose between like sans-serif, serif, and slab fonts. However, if none of the presets are your cup of tea, there are over 600+ Google Fonts that you can also select.
No matter what color you like, we have you covered. Zen meditation. The Ultra theme comes with 15 pre-set colors or you can pick the color of your choice.
Show/hide any element in the header and footer, such as the logo, menu, social links, search form, etc.
Inspired by our Fullpane theme, full section scrolling feature allows viewers to scroll through your page design one row at a time like a presentation slideshow.
- Section Scrolling
- Horizontal Section Scrolling (New)