You can see the slider everywhere on the Internet. They show new products, show exquisite photos, attract shoppers to buy and share updates. But is the slider the best for your website? And how to create a slider for actual work?
The advantages and disadvantages of slider
Before adding a slider to the Woocommerce store, it is important to take a step back to understand the advantages and disadvantages. After all, slider is not suitable for every website and every situation. But there are also many positive aspects:
- They have super visual and attractive attention. In many cases, sliders are the first to see when people visit your website. Highlight your products, location or teams by eye -catching and attractive images, and they are an opportunity to express a statement immediately.
- They can save space on your website. You can add multiple contents to the same location on the page to save valuable website space.
- They are very suitable for product visits. Show a variety of new products or your best -selling products in one place.
- They can highlight new information and update . Add slides with the latest blog articles, sales and store news.
- They can present investment portfolio images in an easy way to understand. If you are a photographer, graphic designer or artist, the slider is very suitable for showing your latest work without a large gallery.
当然，也有一些缺点：
- [123 ] They can slow down your website. sliders with huge image files that are not optimized for speed may cause loading time lag.
- They may be confusing. The slider usually displays multiple discounts at a time, not all discounts are suitable for website visitors. Providing someone with too many options may not be as effective as providing only one static quotation.
- They are not always suitable for mobile devices. The slider you choose needs to respond quickly, and it looks great on desktop, tablet and mobile phones. Otherwise, it may cause an invalid user experience.
- They are not necessarily the best way to drive clicks [1twenty three]. In fact, few website visitors usually click on the slider, and almost all clicks occur on the first slide.
In short, do not use slider just to have a slider. Make sure it has a specific purpose and is willing to change it based on your analysis. And consider which layout and format are most suitable for your specific audience and content.
How to use woocommerce to create a slider
To create a slider, it is best The plug -in starts. WordPress and Woocommerce both have a variety of options (free and paid), so please take time to understand every option you are considering. Here are a few questions to ask yourself:
Does it have the function you need?
- Make sure it can display the content you want -products, blog articles, images, videos, etc. Consider whether to add any animation, buttons, texts or other functions to the slider.
- What is the cost?
- How easy is it to use?
- Is it suitable for equipment of various sizes?
- Does it optimize the speed?
- Does it have praise?
- Do you get good support?
- For more details, please read the guide to select the best WordPress plug -in provided by Jetpack.
Is the plug -in free or paid? Is there an additional template cost? Is it updated once a year or a one -time investment?
Some slider plugins have a lot of flowers, but the learning curves are steep or need to develop knowledge.
Of course, you hope that your slider is great for all visitors, whether they use desktop, tablet or mobile phone. Make sure the plug -in you choose automatically adjusts the size of the mobile device without complex CSS.
Does the plug -in developer consider too much speed? Is the slider demonstration and example loading fast? Reading comments and function lists are a good way to find the answer.
Check the plug -in rating. Do people like it? What are their most common complaints?
Is there a support forum or ticket system? If you choose advanced options, how long do you have support? Does it regularly update to use the latest version of WordPress?
For oneSimple and effective slide, We Recommend wooslider extensions. It was developed by WooCommerce for online stores and received unparalleled support from our happy engineers.
To use wooslider to expand to create sliders:
Buy the expansion program, and then install and activate it in your store. Navigation to
Slide → Set
- and select the option of the slider. There are several categories:
- Control settings: See how websites can control your slider. Add play/pause buttons, keyboard navigation, last/next arrow.
- button settings: customize the text of each slider button.
Select the slide type and select your settings. There are several options:
Additional images: Display images that are attached to a specific page or post you want to add to the slider.
-
- Slide: Display custom slides with images you created.
Product: Load the recent, characteristic or inventory products. Please note that you also need the Woocommerce product slide expansion to enable this option.
Add the slider to your website. You can modify it with simple code, small components or template files to do this.
For more details, including information about creating slides, please read our documents.
Conventional settings: Select the default animation, slide direction, slideshow screening speed and animation speed. Make sure that your slider transitions is slow enough so that websites can absorb your content.
Post: Show the latest blog post on your website.
The ability of you want to better control the slider, and add a custom button and text, You may need to try image and video slide expansion. It is still easy to set up, but adds possible additional functions according to your needs. How to create attractive slider images To design slides, you may need to use photo editing tools such as Photoshop or Canva. Alternatively, you can build slides directly in the plug -in you are using. The following is some of the best practices of the design with attractive slides:
Starting from high -quality images
The bottom of the slide should be high -quality images. Ensure shootingThe object of the camera is clearly focused and there is no blur. If your slider is fully wide, make sure your image is large enough to fill the space, even on the large screen.
Don’t worry -you don’t have to hire professionals to get outstanding images. The following is how to take the outstanding product photos by yourself.
Powerful in content placement If you add text and text and text and text to the slider For the button, please consider the typical central alignment method. Although this is the right choice in some cases, put your content on the left half or right part of the image (or the third part!) It can make the important part of the picture highlight.
https://mystore.msi.com/
每张幻灯片上的文字位置不同
[123 ] Try to use noodles as much as possibleWhen selecting the correct font and color
When selecting fonts and colors for slider, first make sure they are suitable for your brand and the design of the entire website.
Then make sure they are easy to read. Choose enough and thick fonts. But also consider how they work on your picture. There are several ways to make the font stand out from the background image:
Dark or brighten the image. If the theme of the image itself is not very important (maybe it is texture or pattern), then this may be a good choice. Add a dark stacked layer to the picture, and then use white text on the top. Alternatively, use a white overlapping layer with dark text.
Use blank.
When things are chaotic, everything is difficult to stand out. By making texts the only show in the town, it will get more attention. Blank is a tidy area in the image, and there is nothing important. By adding texts in this area, you can provide your due attention to images and text.
- Add color behind the text. The color background behind the text -think about the black or navy blue behind the white text, or the light gray or pink behind the black text -it can also play a role.
- Select the color font color. According to the image, the bright text color may be enough to let people read your text easily.
- Use projection. A small shadow can make the font pop up from the image background.
- This one from
- slide at the top of the blank area of \u200b\u200bthe building block There are text.
https://yourbenefitStore.com/
The most important thing is that there is sufficient color contrast between your text and the rest of the slide. This improves everyone’s visual experience, including people with color blindness or vision disorders. Webaim’s contrast checker is a good way to evaluate slides.Tips using slider to convert
The goal of the slider’s slider is not always the same Sales. For example, it may be to let the website visitors understand the situation or show your work. However, if you really want to change, remember the following points:
Select a good appeal term Unless you remind them of doing this, people will not take action. Therefore, make sure you add a button or other visible links to the slide, and use clear and active text to tell the website visitors what you want them to do. There are some examples here: Buy our annual sale
Get free coffee guide
Add our email list to obtain exclusive discounts
[123 ] Learn more about our process
Your CTA should also stand out from the other parts of the slide with bright colors, different fonts or bodies.
- Use clear navigation
Website visitors should be able to easily move from one slide to another slide and stop the slide so that they can view or read more content. This means that you should not just set the slider to automatic transition!
In contrast, using visible arrows, numbers or navigation items and include a pause buttons.
Don’t be too restoringMiscellaneous
Playing unique animations, bright colors and simple visual effects will definitely be very interesting. But in almost all cases, the simpler the better. Your slider can still be very interesting, but you have to lower the tone so that the information you want to convey really shines.
Remember accessability Everyone can easily use accessible sliders, including people with physical or mental disability. A good start is to ensure that you have appropriate color contrast, we have discussed before. But you also need to ensure that you add alternative text to each image, ensure that the slider runs well on the mobile device and open the keyboard navigation. Understand more information about e -commerce accessability.
Select a simple message
You don’t want to add text paragraphs to the slide -no one will stop to read everything! Instead, express your point of view clearly and simply as possible.
Joe Coffee
Use a few words in a few sentences Then publicize their free reward applications
How to optimize the speed of slider As we mentioned earlier, sliders may be heavy and reduce your website speed. Therefore, it is important to reduce this as much as possible. In addition to selecting the slider plugin that gives priority to speed, you can also take the following steps:
Use the minimum size image required.
A large number of animations, gorgeous transitions, and other additional content will not only disperse attention, but also slow down. Remember: Simple is usually the best.
Host your video in a different place.
If your slider supports it, embeds any videos you want to use from YouTube or Vimeo instead of stored them on your website. The video is very heavy and may greatly reduce your website speed.
- Open the specific speed settings of the plugin . Many slider plug -in providing the speed optimization function you only need to enable. Find things such as delay loading, cache, and narrowing.
- Use the image CDN. The image CDN stores and delivered your image from the ultra -high -speed server.Jetpack has a free WordPress CDN, which can also adjust the size of the image for mobile devices to allow them to be like lightning on mobile phone and panel computers.
- Think and intention
- Is there any effective slide on your website?Share in the comments!
When adding sliders to your Woocommerce store, please take the time to truly correct.Think about what you want to show, who do you want to contact, and how to optimize your slider specifically for these people.
