How to set the homepage image and slider of Avada theme: detailed tutorial (03)

In modern website design, images and sliders on the homepage are one of the key elements that catch the visitor's eye. The use of sliders not only enhances the dynamics of your website, but also better showcases the core content and visual information. As a powerful WordPress theme, theAvada The theme comes with an editor and several slider tools, so you do not need to use third-party plug-ins to achieve rich images and slider effects. This issue of the article will tell you how to use the Avada theme to set up the home page images and slider, to help you get started quickly, to create a more attractive website home. This issue we will talk about

The Avada theme comes with its own editor, no need for a third party, on the front end of the site we can see theEdit LiveClick on the red arrows to enter, yellow box is the site's header and footer, if you need to click on the corresponding can also enter the corresponding editing page!

Steps: Front-end of the site → Edit Live

Image[1]-How to set the homepage image and slider of Avada theme: detailed tutorial (03) - Photon Flux | Professional WordPress repair service, worldwide, fast response!
Image[2]-How to set Avada theme homepage image and slider: detailed tutorial (03) - Photon Flux | Professional WordPress repair service, worldwide, fast response!

As shown below, this is the home page of the site, please note that it is not edited on both sides, the sides are set up for containers and columns

Image[3]-How to set Avada theme homepage image and slider: detailed tutorial (03) - Photon Flux | Professional WordPress repair service, worldwide, fast response!

As shown below, click

Image[4]-How to set the homepage image and slider of Avada theme: detailed tutorial (03) - Photon Flux | Professional WordPress repair service, worldwide, fast response!

If your template import is just the home page of the image, or you only need a single image to achieve your effect, then you click the pen symbol in the middle of the home page image to edit, you can get the following screen

Image[5]-How to set the homepage image and slider of Avada theme: detailed tutorial (03) - Photon Flux | Professional WordPress repair service, worldwide, fast response!

You just need to replace it or remove (Remove), Edit, and it will go to the media library or local files, adjusted as you see fit.

Of course, if the effect of the picture can not satisfy you, then we can choose to add their own slider (Sliders). Or choose to have a slider template, of course, or to add their own more convenient, the template in the view is not the same can be found!

Let's talk about adding sliders.

Image[6]-How to set the homepage image and slider of Avada theme: detailed tutorial (03) - Photon Flux | Professional WordPress repair service, worldwide, fast response!

There are many types of Sliders found here in the add-on module, so how do we go about choosing them, and what are the recommendations?

1. Avada Slider

Avada's own slider, designed for Avada themes, is highly integrated.

The different devices match well and basically meet your requirements, the basic text, images, buttons, links, and animation effects of the slider are all available

So how do you go about setting this up, as shown below, find Sliders in Avada at the back end of the site

Steps: Website Backend → Avada → Sliders

Image [7]-How to set the homepage image and slider of Avada theme: detailed tutorial (03) - Photon Flux | Professional WordPress repair service, worldwide, fast response!

Then it will go to the following picture, set the name of Sliders, and some other settings, there are explanations in the bottom of the options, you follow the explanation and the actual needs of the settings

We create Sliders and then add multiple Slides to the Slider.As shown below, we will first create Sliders.

Image[8]-How to set the homepage image and slider of Avada theme: detailed tutorial (03) - Photon Flux | Professional WordPress repair service, worldwide, fast response!

Then just keep it (Add Slider)

Image[9]-How to set the homepage image and slider of Avada theme: detailed tutorial (03) - Photon Flux | Professional WordPress repair service, worldwide, fast response!

Then in the Slider's list, we can see that the name is set to 1 here, as follows

Image[10]-How to set the homepage image and slider of Avada theme: detailed tutorial (03) - Photon Flux | Professional WordPress repair service, worldwide, fast response!

Then we go to set up the slides.

Image [11]-How to set the homepage image and slider of Avada theme: detailed tutorial (03) - Photon Flux | Professional WordPress repair service, worldwide, fast response!

Then add the slide as follows

Image[12]-How to set the homepage image and slider of Avada theme: detailed tutorial (03) - Photon Flux | Professional WordPress repair service, worldwide, fast response!

Then go to the edit page of the slideshow, we need to set whether the slideshow source is IMAGE, or VIDEO, Youtube or Vimeo video platform, and then the name of the slideshow

Image [13]-How to set the homepage image and slider of Avada theme: detailed tutorial (03) - Photon Flux | Professional WordPress repair service, worldwide, fast response!

Then you need to check the slide show to the slider, here the name of the slider and slide are 1, as a demonstration, we need to modify the later, and then set the Featured image (featured image), if you choose the picture as the background, the following chart

Image [14]-How to set the homepage image and slider of Avada theme: detailed tutorial (03) - Photon Flux | Professional WordPress repair service, worldwide, fast response!

Then we go to the front end of the site is the edit page to add the Avada Slider

Image[15]-How to set the homepage image and slider of Avada theme: detailed tutorial (03) - Photon Flux | Professional WordPress repair service, worldwide, fast response!

Then choose the name of the slide you have set up, and set the slide's Full Height, and whether the Element Visibility is for three devices or a single device, etc.

Image[16]-How to set the homepage image and slider of Avada theme: detailed tutorial (03) - Photon Flux | Professional WordPress repair service, worldwide, fast response!

Then you get an initial slide content, here can only show, as follows

Image [17]-How to set the homepage image and slider of Avada theme: detailed tutorial (03) - Photon Flux | Professional WordPress repair service, worldwide, fast response!

Steps: Website Backend → Avada → Sliders → Slides

Text as well as buttons or links need to be set to the slide, as follows

Image [18]-How to set the homepage image and slider of Avada theme: detailed tutorial (03) - Photon Flux | Professional WordPress repair service, worldwide, fast response!

That'sAvadathematicAvada SliderThe setup is up, so what's the difference between the other kinds of

Image [19]-How to set the homepage image and slider of Avada theme: detailed tutorial (03) - Photon Flux | Professional WordPress repair service, worldwide, fast response!

2, Layer Slider

Layer Slider is a very powerful slider plugin that supports complex animation effects, you can add different animations for each layer (Layer), such as images, text, buttons, etc., suitable for creating more complex display effects. Animation effects are also richer, if you need more advanced slider effects, such as content with multi-layer animation, this plugin is ideal, the plugin provides a large number of preset templates, you can quickly create sliders and personalize them.But you need to install the plugin

Image[20]-How to set the homepage image and slider of Avada theme: detailed tutorial (03) - Photon Flux | Professional WordPress repair service, worldwide, fast response!

3, Media Slider

Media Slider is designed for displaying multimedia content such as photo galleries, videos, etc. You can set the layout and arrangement of each media file within the slider to ensure a good display on different devices. You can quickly create a rotating display of media content without complex settings, if you want to display video, audio or other media files through the slider, this slider will be very suitable!

4, Post Slider

Post Slider is used to display sliders for WordPress posts, suitable for displaying blog posts or custom post types. It will automatically generate sliders based on your content, a great tool for displaying articles, products or projects, with automatic updates, as soon as your post is updated, it will be synchronized as well!

5, Slider Revolution

Slider Revolution is premium slider plugin that allows you to customize almost any sliding effect. You can use it to create complex animations, transition effects, and even create entire page layouts. If you need the most powerful slider functionality and an extremely high level of customization, Slider Revolution is the best choice, offering a large number of preset slider templates that can be directly imported and modified as needed. Basically, it integrates all the features

Opinion:

Avada Slider: Simple and lightweight, suitable for quickly creating basic slide effects.

Layer Slider: Supports multi-layer animation, suitable for scenarios that require complex animation and multi-layer presentation.

Media Slider: Designed for displaying multimedia content such as pictures and videos.

Post Slider: Automatically display article or product content, suitable for blogs or dynamic content display.

Slider Revolution: The most powerful, suitable for highly customizable and complex slider effects.

summarize

But my advice would be to just useAvada SliderBecause the most compatibleAvadaTheme, the basic functionality is achieved, and with this article, you've learned how to set up a homepage image with a slider in Avada Theme. Whether you use the basicAvada SliderOr do you prefer the more complexLayer Slider maybe Slider RevolutionYou can apply it flexibly to optimize the presentation of your website according to your specific needs. Next issue we will continue to explore more features of Avada theme, bring more practical tips and tutorials to help you create a more professional WordPress website. Stay tuned!


Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!
Customer Service
Customer Service
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) E-mail: info@361sale.com
Working hours: Monday to Friday, 9:30-18:30, holidays off
© Reprint statement
This article was written by Harry
THE END
If you like it, support it.
kudos0 share (joys, benefits, privileges etc) with others
commentaries sofa-buying

Please log in to post a comment

    No comments