Log In
Watch Demo

Tag: elementor tutorial

  • How To Make Creative Button Hover Animation In Elementor? (2 Ways)

    How To Make Creative Button Hover Animation In Elementor? (2 Ways)

    Hey everyone, and welcome back to another WordPress tutorial. Today we’re going to learn how to create creative buttons with cool hover animation effects and a modern look. 

    For this hovering animation tutorial, we’ll use the Hello Elementor theme with the free version of Elementor. You’ll notice I have two paid plugins installed. Don’t worry, I’ll explain where and why we use them later on. Let’s get started!

    Method 1: Create Elementor Button Hover Animation with CSS

    • First, create a new page and name it Creative Buttons. 
    • Then, go to Page Settings, hide the title, and change the page layout to Elementor Canvas. This gives us a clean slate with no header or footer, but if you want to keep those, that’s totally fine too.
    • Now, let’s start designing. Add a container to the page and set the minimum height to 50vh. Center the content by setting both Justify Content and Align Items to Center. 
    • Next, drag in a button widget. You can change the button text and color later. 
    • Go to Advanced Settings and add a CSS class named BWDBTN. 
    • Now click Publish and hit Preview to see it in action.
    • Next, click Customize, then go to Additional CSS. Here, we’ll paste in the CSS code, which you can find below. 
    • Once added, you’ll see we now have a nice, shiny button with smooth hover effects and animated text transitions. 
    • But it’s not perfect yet. Notice there’s too much padding and spacing. Let’s fine-tune that.
    • First, publish the changes, then go back to the Elementor page builder and reload the page. Now select the button, click Edit, and head over to the Style Settings. 
    • Make the background color transparent. Change the typography to Poppins, set the font weight to 400, normal, and keep the transform to default. If the text looks too small inside the button or leaves gaps, try changing it. 
    • For example, if you type Book a Meeting, the spacing will improve. However, if you add too much text, it might overflow or break into two lines. Let’s test it. 
    • Click Publish, then Preview again. As you can see, when we hover, the text wraps into two lines, not ideal.
    • To fix this, go back to Customize, Additional CSS. Look for the left and right padding, currently set to 6.5, and adjust it according to your text size. 
    • After tweaking, the button now fits the text perfectly. Click Publish, and we’re done with the manual part.

    Method 2: Hover Animations Behind a Button Using Plugin

    Now earlier, I mentioned the BWD Elementor Add-ons and BWD Elementor Add-in Pro. Why do we need them for hovering animation? Well, while custom CSS gives us full control, it can be time-consuming and requires tweaking. 

    But with these plugins, you can easily create and customize classy button hover animations. No CSS required. Let me show you how.

    First, go to bestwpdeveloper.com and download the BWD Elementor Add-ons. They offer both free and pro versions. Since I’ve already installed it, I’ll just search for the widget named Creative Buttons and drag it into a new container. 

    As you can see, there are 100 plus pre-designed button styles ready to go. Simply select your favorite style, and with one click, your button design changes instantly. You can also customize colors, icons, hover animation effects, and more, right from the Elementor panel. 

    If you’re just getting started, try the free version first. And if you like it, upgrade to the Pro to unlock all the styles.

    And that’s it for today’s tutorial. You now know how to make creative hover animation buttons manually with CSS, and quickly with the BWD plugin. Thanks for reading, and I’ll see you in the next tutorial. You can also check our previous tutorial.

    Download the code here.

    [lead-magnet id=”3″]

  • How To Make Meet The Team Section In WordPress?

    How To Make Meet The Team Section In WordPress?

    Hello everyone, and welcome to another WordPress tutorial. Today we’re going to learn how to create a meet the team member page, just like this. It’s a simple and beautiful meet the team design ideas layout that you can use for multiple team members.

    Method 1: Elementor Meet the Team Page Design with CSS

    To build this meet the team design, we’ll use the free theme Hello Elementor and the free version of Elementor Pro. Alright, let’s get started.

    • First, create a new page. From the page settings, hide the page title and change the page layout to Elementor Canvas. This way, the header and footer will be hidden. 
    image 68
    • Now we’ll add a container. Set the minimum height to 70VH. Change the direction to horizontal and set align items and justify content to center.
    image 69
    image 70
    • Next, we’ll add another container inside this one. This will act as our inner column. Now, duplicate this container until you have four columns. Let’s select one of these to start designing.
    image 71
    image 72
    • First, go to advanced settings and set the padding: Top: 30; Bottom: 40; Left and Right: 0
    image 73
    image 74
    • Then, head over to style settings and apply a background color. The color codes, along with all CSS used in this tutorial, are available in the description box.
    image 75
    image 76
    • Now, let’s set the border radius to 5 pixels on all sides.
    image 77
    • Inside this column, add another container. Set align items to center. Then, under advanced settings, set the padding to: Right: 25; Left: 25; Top and Bottom: 0.
    image 78
    image 79
    image 80
    • Next, add another container inside for the image. Set the padding to zero. Now, drag in an image widget. Set the image resolution to medium large for faster loading. Upload your team member’s photo, ideally 300 by 300 pixels.
    image 81
    image 82
    image 83
    image 84
    image 85
    • Now, let’s add a CSS class to this image. Name it Sager Profile Image. Then, select the container holding the image and add another CSS class, Sager Profile Background. Now, select the main inner container and add one more CSS class, Sager Profile Main.
    image 86
    • Great. Now let’s add the text. Drag a heading widget below the image container. Move the image container above if needed. For the team member name, type something like John Doe. 
    image 87
    image 88
    • Then, set the typography to Poppins size, 24 pixels, weight 600, semi-bold, and uppercase. 
    image 89
    • Change the text color to black. Duplicate this heading to add the designation, for example, web developer. Here, change the font size to 16 pixels, weight to 400, normal, and set the transform to default.
    image 90
    image 91
    image 92
    • Now, let’s create a section for social media icons. Add another container below the designation. Set a background color for this container and add a CSS class, Sager Profile Icon.
    image 93
    image 94
    image 95
    • Align items to center and add the social icons widget inside. Change the shape to square. In style settings, set the color to custom and make the primary color fully transparent.
    image 96
    image 97
    image 98
    image 99
    • Adjust the icon size to 20 pixels. Now, under icon hover settings, change the primary color to match your background color and set a secondary color if needed. 
    • Also, adjust the icon spacing to 10 pixels and set all padding of the container to zero.
    image 100
    • Alright, click publish and let’s preview the page. Now, let’s move on to some custom CSS. Go to customize, then additional CSS and paste the CSS code you’ll find in the description box. 
    image 101
    • As you can see, the page looks even better now with some smooth effects, but we still need to adjust a few things. Click publish, then reload the page.
    • Now, to make the profile picture circular, select the image container and set the border radius to 50%. Set the overflow to hidden under advanced settings. Next, we’ll work with the Sager Profile Pattern class. 
    image 102
    image 103
    image 104
    • Add a spacer widget outside the inner container and give it the CSS class, Sager Profile Pattern. Now, when you hover over a profile, you’ll see a cool pattern effect appear. Almost done. 
    image 105
    • Now, duplicate the finished. Pattern effect appear. Almost done. Now, duplicate the finished column to create three more team member profiles. Remove any old empty columns if needed. 
    • Click publish and preview again. And there you go, your beautiful, mobile responsive team member page is ready. You can easily change the photos, names, and designations as needed.

    Quick tip: if you don’t have the time to build everything from scratch or want even more designs, you can use a plugin. Visit https://bwdelementoraddons.com/ where you’ll find addons like “Meet The Team”. 

    Method 2: How to Create a Meet the Team Page in WordPress Using Plugin?

    This plugin offers two free team member designs, and I’ve already installed it to show you. After installing, simply search for “Meet the Team” in the Elementor widgets, drag it onto your page, and your team section is instantly created. 

    image 106

    You can easily customize it and you can also choose from over 30 plus different team styles. Just a single click and your entire design changes. It’s a huge time saver if you want more styling options without starting from zero.

    That’s it for today’s tutorial. Thanks for watching and I’ll see you in the next video.

    Installation Process of “BWD Meet The Team Elementor Addon”

    • Install Meet The Team Elementor Addon using WordPress plugin installer or by uploading its files into the WordPress plugins directory.
    • Activate the Meet The Team Elementor Addon through WordPress Plugins menu.
    • Click the Plugins => Add New
    • Click Upload Plugin and then Choose the meet-the-team.zip from your computer then click on the Install Now button.
    • After activating, it doesn’t work without Elementor Page Builder plugin. Firstly, you should activate Elementor Page Builder.
    • To activate newly installed plugin navigate the Plugins => Installed Plugins.
    • Find the Meet The Team Elementor plugin from the list and press/click Activate.
    • Congratulations! plugin has been installed and activated on your website.

    Check different styles of Meet The Team and choose the style you want. Simple!

    You can also check our BWD Elementor Addons Bundle from CodeCanyon. Buy the plugin now!

    Download The CSS Code Here!

Loading...