Monday, January 18, 2021

January 18, 2021

Avada theme container background image overlay settings and column opacity with esports demo.

 


WordPress Avada theme is a very popular premium theme for its design flexibility. You can customize any design with its modern fusion page builder.

Currently, I am working with a section that has a background image with a black overlay and a title on the section. Bellow the title there is a 5 image with hover effect.

I was facing some problems with the image overlay option of the container. Have a look at the image bellow-


For the background image overlay, you have to select the background blend mode option to overlay then set a background color with lower opacity and it will create the nice background image with overlay effect. See the options screenshot bellow-

1. go to container backgrund options

2. scroll down to background blend mode options & select overlay

3. then go to background color option & set lower opacity. see the image bellow.


i set background color with 40% opacity.


if you want video tutorial about this topics then watch the video bellow




0
at No comments:
Labels: , , , ,

Sunday, January 3, 2021

January 03, 2021

Wordpress Avada Theme blog post section design tips with eSports demo.

Currently, I am working on a website that is built with WordPress Avada Theme. I want to design the blog post section as news on the homepage and I like the Avada theme eSports demo blog post design section on the home page. See the image bellow-


Each one is a blog section with a single post from a specific category with a post title, publish date & post category. The top 2 blog sections are displaying posts with featured images & the rest of the blog sections are displaying posts without featured images. In this section, there are a total of 6 posts are displaying from different categories. 

Now the topic is how to do this? It seems like a normal blog section with 6 posts but actually, each post is a blog section that displaying only one specific post of a category in ascending order so the very first one of that category is display all time.

See the image below I open it with Avada theme page builder and each section displaying the blog option when I bring the mouse on them. That means each one is an individual blog section.


First, you have to take a nested column in the fusion page builder. See the image bellow-



1. You have to add 2 columns in the nested column
 


2. After adding 2 columns you have to add a blog element of fusion builder like the image bellow-


3. Then you will get some options to display your blog post see the image bellow-



Here you will get the following options to customize your blog section.

Blog layout- I choose a grid layout

Number of Columns- means how many columns you need to display your post. In my case, I need to display one post in one column that's why I select one column.

Posts Per Page- how many posts you want to display from your blog posts. I need to display one post from a specific category.

Categories- Which category post you want to display.

Order By- Date

Order- Ascending(to display the very first post of category) or Descending(to display the latest post of a category) 

Show Thumbnail- display the featured image of the post, I set the first two blog options to "Yes" and for the rest of the post "No".
Pagination Type- I set no pagination.
and many more settings to customize your blog posts display.

After that, I got the final design where you will found a border around each blog post, which is basically a border around the column with padding of 5px. 
You will get these options. See the image below.


Scroll down to get more options.

You can checkout the video on youtube for a better understanding.





I hope, this will help you guys too.😀😀😀😀😀😀

0
at No comments:
Labels: , , , , ,

Thursday, April 30, 2020

April 30, 2020

How to stop displaying featured image of a specific post in Avada theme blog section? | Esports demo

Wordpress Avada theme's blog post section has some nice feature to control displaying the featured image with blog post. I am working with Avada theme Esports demo. See the image bellow-
Wordpress Avada theme featured image display

In this image we can see that the top 2 blog posts are displaying the featured image but the other posts are not displaying the featured image in the blog section. But if you go to the single post page you will see the post is displaying the featured image. See the image bellow-

featured image display in single post page

The main fact is in avada theme you will find 5 featured image options in a post, if you want to create image slider for a specific post. see the image bellow-

avada theme featured image section

How to use this featured image section-

If you want to display the specific post's featured image in the blog section(see the first image) use the 1st featured image option only.

If you want to display the featured image only on the single post page then remove the 1st featured image & use the 2nd featured image.

If you want to make a slider for a specific post use all the featured image options you will get a slider on the post.
Check out the video for more details-

Hope this will help you......😀😀😀😀😀
0
at No comments:
Labels: , , , , , ,

Friday, April 24, 2020

April 24, 2020

How to get full size image on Wordpress Avada Theme | Esprorts demo?

Wordpress Avada theme is the most used premium theme ever. Its fusion page builder is very user friendly & any design you can create with it very easily.

You can use the Fusion page builder instate of WordPress default editor as well as front end page builder by the Fusion builder live option. Which will bring in the front end of your webpage & you can add/edit section/elements live.

Avada theme fusion page builder option

1. This option will load the fusion builder in the backend of your website.
2. This option will take you to the front end of your website and you can edit & see the changes live.

I prefer using the Fusion page builder in the WordPress backend instate of using the Fusion builder live option.

Whatever now come to the main topics, how to get images in full size?

I was working on the Avada theme with esports demo & when I upload an image it was displaying in medium/thumbnail size instate of full size.


Uploaded image size has controlled by this Attachment display settings option in the above picture. With WordPress default editor you will get this option right bottom of the add media option window by scroll down.

 If you are using the fusion builder in the backend you will not get this option. see the image bellow-

add media options by fusion builder

As a result, you will not get your desired size of uploaded images. 

There is a one-stop simple solution for it. 
Go to any post/page with WordPress default editor add an image by add media button and you will get the desired option where you can set the full size of your image. 

wordpress uploaded image size settings

From now your all uploaded images will be displayed in full size whatever the editor you use no matter.😊

If you want to change the size of your image in the Avada theme there is an option to set the size on a specific image. See the image bellow-
avada theme image size option
Another solution is if you are using fusing builder live option then go to the image options and then select the edit option. See the image bellow-

fusion builder live image edit option

After go to the edit option you will get the desired option like the image bellow-


Hope this will help you guys.....😊😊😊😊😊

Watch full process in video


0
at No comments:
Labels: , , ,

Wednesday, February 12, 2020

February 12, 2020

How to add Avada Theme Fusion builder element at any widget area?

Wordpress Avada Theme has some cool builder elements. You can add these elements to the widget. You have to apply some tricks as follows-

Let's see an example first. See the image bellow-


In the above image, all marked areas are widget & these widgets are assigned as a mega menu item.

An interesting fact is that these widget elements are fusion page builder elements like Button elements, counter, image carosoul & all others.

1. First, you have to create a new page.
2. Now you need to add an element by clicking the fusion builder short icon in the editor's toolbox.

By clicking the icon you will get these Avada theme fusion builder elements list or you can find your desired element by searching them on the top right search box. In our case, we select the button element.

3. After selecting the button element you will get a couple of options.

Here you will get many options to design your button in any style in the design tab, you can also add animation to your button.
After applying all things you need to click the insert button & then you will get a code snippet in your text editor.
Now you just need to copy & paste this shortcode to your desired widget area & you have done.
Hope this will help you..........
0
at No comments:
Labels: ,

Tuesday, February 11, 2020

February 11, 2020

How to design mega menu of Wordperss Avada Theme with esports demo?

Wordpress Avada Theme's esports demo has a cool mega menu design. If you want to make this kind of mega menu with any demo or design of the Avada theme then you have to be a little tricky.
Recently I was working on the Avada theme's new esports demo. I need to working on the mega menu manually rather than importing demo data and after doing some study I found some cool tricks to build the mega menu which I am going to share here-

Basically, WordPress Avada theme's mega menu is all about widget settings with specific menu items. Let's have a look at the mega menu design to make it clear.


If you like this design and want to use it with another demo then follow the process.

1. First, open your menu item where you want to set the mega menu. Go to Appearance-> Menus-> Click on the menu item & you will get Avada Menu Options Button. Like the image bellow-

2. In avada menu options you will get a couple of options. Here you need to turn on the fusion mega menu options. See the image bellow-











3. Now you need to create widgets & need to assign to the selected menu item. See the image bellow-
    

4. Then you need to assign this widget area with your desired menu item. See the image bellow-


5. Now you can add any available widgets to the newly created widget area which will display as megamenu item.

0
at No comments:
Labels: ,

Monday, January 13, 2020

January 13, 2020

How to remove revolution slider border top & bottom with Wordpress Avada theme Esports demo?

I am working on the Wordpress Avada theme's latest esports demo. After adding the revolution slider on the homepage I find a top & bottom border on the slider. I want to remove the border but it was a little tricky to find the option. See the image bellow to clear you what I want to do-



1. To remove the border you have to go to the page option.
2. Then go to the slider option.
3. Scroll down and you will get an option to Disable Avada styles for slider revolution. Default it will no. Choose yes to remove the border top-bottom of the slider.
Basically, the border comes from the Avada's own style settings.
save your work and you will find the border has gone away.
hope it will works for you too........... 
0
at No comments:
Labels: , ,