Posted on

How to Easily Add Box Shadow in WordPress (4 Ways)

Recently one of our readers asked if there is an easy way to add box shadows in WordPress?

Shadows can make your most important content stand out and grab your visitors’ attention. They can also help flat website designs appear more engaging and interesting.

In this article, we will show you how to easily add box shadows in WordPress, step by step.

How to easily add box shadow in WordPress

Why Add Box Shadows in WordPress?

A box shadow, sometimes also known as a drop shadow, is a visual effect that makes it look like an onscreen object is casting a shadow.

We tend to pay more attention to objects that appear closer to us. That’s why many website owners add box shadows to their most important content to make it look like it’s hovering above the page.

For example, if you add a big shadow to a call to action button, then it will look physically closer to the visitor. This will draw the person’s attention toward this important button.

With that said, let’s see how you can add box shadows to your WordPress blog or website. Simply use the quick links below to jump straight to the method you want to use.

When adding box shadow, the best practice is to only add it on your most important website elements. If you add a unique shadow effect to each WordPress block, then it can make your site look messy and confusing.

It’s also important that you keep your box shadows consistent across the site. The best way to do this is by defining the style in CSS using WPCode.

WPCode is the best code snippets plugin used by over 1 million WordPress websites. It makes it easy to add custom code in WordPress without having to edit the functions.php file.

With WPCode, even beginners can edit their website’s code without risking mistakes and typos that can cause many common WordPress errors.

The first thing you need to do is install and activate the free WPCode plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, head over to Code Snippets » Add Snippet.

How to add box shadows using WPCode

Here, simply hover your mouse over ‘Add Your Custom Code.’

When it appears, click on ‘Use snippet.’

Adding drop shadows to WordPress using WPCode

To start, type in a title for the custom code snippet. This can be anything that helps you identify the snippet in the WordPress dashboard.

After that, open the ‘Code Type’ dropdown and select ‘CSS Snippet.’

Adding a CSS snippet to WordPress

In the code editor, add the following code snippet:

.shadow-effect {
box-shadow: 5px 5px 0px 2px #a9a1a1;
}

In the above snippet, you may need to replace the px values depending on the kind of shadow you want to create.

To help you out, here’s what the different px values mean, going from left-to-right:

  • Horizontal offset. When you set a positive value, the shadow gets pushed to the left. If you type in a negative value like -5px, then the shadow will be pushed to the right. If you don’t want to add a horizontal offset, then you can use 0px instead.
  • Vertical offset. If you use a positive value, then the shadow will be pushed downwards. If you type in a negative value then the shadow will be pushed upwards. If you don’t want to offset the shadow vertically, then just type in 0px.
  • Blur radius. This blurs the shadow so that it doesn’t have any harsh edges. The higher the value, the greater the blur effect. If you prefer to use sharp edges, then type in 0px.
  • Spread radius. The higher the value, the greater the shadow’s spread. This value is optional, so skip this one if you don’t want to show a spread.
  • Color. Although grey is the most common color for shadows, you can use any color you want by typing in a hex code. If you’re not sure what code to use, then you can explore different colors using a resource like HTML Color Codes.
Adding shadows to WordPress using custom CSS

When you’re happy with the snippet, scroll to the ‘Insertion’ section. WPCode can add your code to different locations, such as after every post, frontend only, or admin only.

We want to use the custom CSS code across our entire WordPress website, so click on ‘Auto Insert’ if it isn’t already selected. Then, open the ‘Location’ dropdown menu and choose ‘Site Wide Header.’

How to auto-insert custom code using WPCode

After that, you’re ready to scroll to the top of the screen and click on the ‘Inactive’ toggle, so it changes to ‘Active.’

Finally, click on ‘Save Snippet’ to make the CSS snippet live.

Publishing a custom CSS code snipppet

Now, you can add the custom CSS class to any block.

In the WordPress content editor, simply select the block where you want to add a box shadow. Then, in the right-hand menu click to expand the ‘Advanced’ section.

Adding a drop shadow to WordPress using a CSS snippet

Here, you’ll see fields where you can add different classes.

In ‘Additional CSS Class(es),’ type in shadow-effect.

WordPress' advanced code settings

When you’re ready to publish the box shadow, just click on the ‘Publish’ or ‘Update’ button.

Now if you visit your website, you’ll see the box shadow live.

Method 2. Add a Box Shadow Using a Free Plugin (Quick and Easy)

If you’re not comfortable writing code, then you might prefer to create shadows using Drop Shadow Box. This free plugin allows you to add box shadows to any block using the built-in WordPress page and post editor.

A box shadow, created using the Drop Shadow WordPress plugin

First, you’ll need to install and activate the plugin. If you need help, then please see our guide on how to install a WordPress plugin.

There are no settings to configure, so you can start using this plugin straight away.

To add a drop shadow, simply click on the ‘+’ icon and start typing in ‘Drop Shadow Box.’ When the right block appears, give it a click to add it to the page or post.

Adding a Drop Shadow Block in the WordPress page or post editor

This adds the drop shadow as an empty box, so the next step is adding some content.

To do this, go ahead and click on the ‘+’ inside the Drop Shadow Box block.

Adding a shadow block in the WordPress page and post editor

Then, simply add the block you want to use and configure it as normal.

For example, in the following image we’ve added an Image block and selected a picture from the WordPress media library.

An image, with a block shadow

With that done, click to select the Drop Shadow Box block. In the right-hand menu, you’ll see all the settings you can use to style this block.

WordPress sets the shadow’s width automatically but you can change this by opening the ‘Width’ dropdown and then choosing either ‘Pixels’ or ‘%.’

You can then resize it using the settings that appear.

Changing the width of a drop shadow using a free WordPress plugin

The Drop Box Shadow plugin comes with a few different effects such as curved edges and an eye-catching ‘Perspective’ effect.

To preview the different effects, simply open the ‘Effect’ dropdown and choose from the list. The preview will update automatically so you can try different styles to see what you prefer.

Adding different box shadow effects to WordPress

You can also change whether the plugin shows the shadow inside the box, outside the box, or both using the ‘Inside Shadow’ and ‘Outside Shadow’ toggles.

After that, you can change the color of the box and border using the settings under the ‘Colors’ header.

Just be aware that ‘Background’ refers to the inside of the Drop Shadow Box, while ‘Border’ appears outside of the block.

How to add a colored shadow effect to WordPress

If you want to create a softer, curved shadow box then you can enable the ‘Rounded corners’ toggle. Finally, you can change the alignment and padding, similar to how you customize other blocks in WordPress.

To create more box shadows, just follow the same process described above.

When you’re happy with how the page looks, simply click on ‘Update’ or ‘Publish’ to make all your new box shadows live.

Method 3. Add a Box Shadow Using a Page Builder (Advanced)

If you want to add box shadows to landing pages, custom homepages, or any part of your WordPress theme, then we recommend using a page builder plugin.

SeedProd is the best drag and drop WordPress page builder. It allows you to design custom landing pages and even create a custom WordPress theme without having to write a single line of code.

It also lets you add box shadows to any block using its advanced drag-and-drop editor.

First, you need to install and activate the SeedProd plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Note: There’s also a premium version of SeedProd that comes with more professionally-designed templates, advanced features, and WooCommerce integration. However, we’ll be using the free version as it has everything you need to add box shadows in WordPress.

After activating the plugin, SeedProd will ask for your license key.

Adding the SeedProd license key to WordPress

You can find this license key under your account on the SeedProd website. After entering the information, click on the ‘Verify Key’ button.

After entering your key, go to SeedProd » Landing Pages in your WordPress dashboard.

SeedProd's professionally-designed templates

SeedProd comes with 150 professionally designed templates that are grouped into categories. Along the top you’ll see categories that let you create beautiful coming soon pages, activate maintenance mode, create a custom login page for WordPress, and more.

All of SeedProd’s templates are easy to customize, so you can use any design you want.

When you find a template that you like, simply hover your mouse over it and click on the checkmark icon.

Selecting a professionally-designed SeedProd page layout

You can now type in a name for your landing page into the ‘Page Name’ field. SeedProd will automatically create a ‘Page URL’ using the page name.

It’s smart to include relevant keywords in your URL wherever possible, as this can help search engines understand what the page is about. This will often improve your WordPress SEO.

To change the page’s automatically-generated URL, simply type into the ‘Page URL’ field.

Adding an SEO-friendly page title to a SeedProd design

When you’re happy with the information you’ve typed in, click on ‘Save and Start Editing the Page.’ This will load the SeedProd page builder interface.

This simple drag-and-drop builder shows a live preview of your page design to the right. On the left is a menu showing all the different blocks and sections you can add to the page.

The SeedProd page editor

When you find a block that you want to add, simply drag and drop it onto your template.

To customize a block, go ahead and click to select that block in the SeedProd editor. The left-hand menu will now update to show all the settings you can use to customize the block.

For example, if you click on a Headline block then you can type in your own text, or change the text color and font size.

Customizing a headline block in SeedProd

As you’re building the page, you can move blocks around your layout by dragging and dropping them. For more detailed instructions, please see our guide on how to create a landing page with WordPress.

To create a box shadow, click to select any block in the SeedProd page editor. The settings in the left-hand menu may vary between blocks, but you’ll typically need to click on an ‘Advanced’ tab.

Adding a box shadow in WordPress using SeedProd

Here, look for a ‘Shadow’ dropdown menu under the ‘Styles’ section. Simply open this dropdown and choose a shadow style such as Hairline, Medium, or 2X Large.

The preview will update automatically, so you can try different styles to see what looks the best on your page design.

How to easily add a box shadow in WordPress using a page builder

If you don’t want to use any of the ready-made styles, then click on ‘Custom.’

This adds some new settings where you can change the color, blur, spread, and position of the custom shadow.

Adding drop shadows to WordPress using SeedProd

That done, you can continue working on the page by adding more blocks and box shadows.

When you’re happy with how the page looks, click the ‘Save’ button and then choose ‘Publish’ to make it live.

Publishing a page with block shadows using SeedProd

Method 4. How to Add a Box Shadow Using CSS Hero (Premium Plugin)

If you’re not comfortable working with code but still want to create advanced box shadows, then you can try CSS Hero. This premium plugin allows you to fine-tune every part of your WordPress theme without having to write a single line of code.

CSS Hero allows you to create a unique shadow for each block, so it’s also a great choice if you want to create lots of different shadow effects.

First, you need to install and activate the CSS Hero plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you’ll see a ‘Proceed to Product Activation’ button at the top of the screen. Go ahead and click on this button.

Activating the CSS Hero WordPress plugin

This will take you to the CSS Hero website where you can log into your account and get a license key. Simply follow the onscreen instructions, and you’ll be redirected back to your site in a few clicks.

Next, click the ‘Customize with CSS Hero’ text in the WordPress admin toolbar.

Customizing a WordPress theme using CSS Hero

This will open the CSS Hero editor.

By default, clicking on any piece of content will open a panel with all the settings you can use to customize that content.

The CSS Hero user-friendly page editor

This is great if you want to add a box shadow to your website’s homepage. However, if you want to customize any other page then you’ll need to switch from ‘Select’ mode to ‘Navigate’ mode, as this allows you to interact with menus, links, and other content as normal.

To do this, click on the ‘Select / Navigate’ toggle in the toolbar so that it shows ‘Navigate.’

The CSS Hero WordPress plugin

You can now navigate to the page or post where you want to add the shadow.

As soon as you reach that page, go ahead and click on the ‘Select / Navigate’ toggle again so that it shows ‘Select.’

Switching between Select and Navigation mode using CSS Hero

With that done, click on the paragraph, image, button, or any other content where you want to add a box shadow.

In the left-hand panel, click on ‘Extra.’

Creating a drop shadow using CSS Hero

You can now go ahead and click on ‘Make Shadow,’ which shows all the settings you can use to create a box shadow.

To start, you can change whether the shadow appears inside or outside the block using the ‘Shadow Position’ settings.

Changing the position of a shadow box using CSS Hero

After making this decision, you can fine-tune the shadow’s orientation using the small dot in the ‘Orientation’ box.

Simply drag and drop the dot into a new position to see it move in the live preview.

Customizing a drop shadow in WordPress

When you’re happy with the shadow’s position, you can change its color, blur, and spread.

CSS Hero will show these changes immediately, so you can try different settings to see what looks the best.

Creating a custom box shadow using a drag and drop editor

To add a box shadow to other blocks, just follow the same process described above.

When you’re happy with how the page looks, click on ‘Save & Publish’ to make it live.

How to publish a CSS shadow to WordPress

We hope this tutorial helped you learn how to add a box shadow in WordPress. You may also want to learn how to create a table of content in WordPress, or check out our list of the best WordPress popup plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Easily Add Box Shadow in WordPress (4 Ways) first appeared on WPBeginner.

Posted on

How to Add or Remove Blank Space Between WordPress Blocks (4 Ways)

Do you want to add or remove blank space between WordPress blocks?

Adding or removing blank space between your WordPress blocks gives you more control over the design of your WordPress site.

In this article, we’ll show you how to add or remove blank space between WordPress blocks, step by step.

How to add or remove blank space between WordPress blocks (4 ways)

Why Add or Remove Blank Space Between WordPress Blocks?

WordPress makes creating custom pages and posts easy with the built-in WordPress block editor.

However, you may notice that when you add certain blocks, there’s too much or too little spacing. By adding or removing blank space between your WordPress blocks, you can create custom page layouts exactly as you’d like.

With more control over your final WordPress website design, you can offer your visitors a better user experience.

That being said, let’s take a look at how to add or remove blank space between WordPress blocks on your website. Simply use the quick links below to jump straight to the method you want to use.

Method 1. Adding Blank Space Between WordPress Blocks with Block Editor

The easiest way to add blank space between your blocks is using the WordPress block editor. There’s a built-in spacing block that lets you add blank space with a couple of clicks.

To use this, open up the post or page you want to edit and click the ‘Plus’ add block button.

Then, search for ‘Spacer’ and select the block.

Add spacer block to page

This will automatically insert a spacer into the page. 

You can make it bigger or smaller by dragging the block up or down.

Resize spacer block

Once you’re finished, click the ‘Update’ button to save your changes.

Keep in mind, this method only allows you to add space between blocks. To remove space, you will need to use one of the other methods below.

Method 2. Adding or Removing Blank Space Between WordPress Blocks by Adding Custom CSS

Another way to both add and remove blank space between your blocks is by adding custom CSS code to your theme.

If you haven’t done this before, then we recommend you take a look at our guide on how to easily add custom CSS to your WordPress site before you begin.

Next, open up the page or post you want to edit and then click on the block where you want to add or remove the blank space.

Then, click the ‘Block’ menu item in the right hand options panel.

Click block menu option

After that, scroll down to the ‘Advanced’ drop down and click it. This brings up a set of additional options for that block.

Then, in the ‘Additional CSS classes’ box add the following code:

.add-remove-bottom-space

This snippet creates a new CSS class specifically for that block. 

Add new CSS class

After that, click the ‘Update’ button to save your changes.

Next, navigate to Appearance » Customize to bring up the WordPress theme customizer.

Go to WordPress theme customizer

Then, scroll down and click the ‘Additional CSS’ menu option.

This brings up a field where you can add CSS code.

Click additional CSS

Next, paste the following code snippet into the box.

.add-remove-bottom-space {

 margin-bottom: 0;

}

This code snippet sets the bottom margin to zero and will remove the blank space from the block. If you want to add space to the bottom, then simply change the ‘0’ to something like ’20px’.

Add CSS code

Once you’ve made your changes, make sure to click the ‘Publish’ button to make your changes live. 

Saving Custom CSS Code Using a Plugin

By adding custom CSS to the WordPress theme customizer, it will only save for the theme you’re currently using. If you change the WordPress theme, then you’ll need to copy over the CSS code to your new theme.

If you want your custom CSS to apply no matter what theme you’re using, then you’ll need to use the Simple Custom CSS plugin. 

First thing you need to do is install and activate the plugin. For more details, see our guide on how to install a WordPress plugin.

Upon activation, simply go to Appearance » Custom CSS and add your custom CSS code.

Add code with Simple Custom CSS plugin

When you’re finished, click the ‘Update Custom CSS’ button to save your changes.

Method 3. Adding or Removing Blank Space Between WordPress Blocks with CSS Hero

Another beginner friendly way to add or remove blank space between WordPress blocks is by using a WordPress custom CSS plugin. This lets you make visual changes to your WordPress blog without editing any CSS code.

We recommend using the CSS Hero plugin. It lets you edit almost every CSS style on your WordPress site without writing a single line of code. 

Deal: WPBeginner reader’s can get a 34% discount by using our CSS Hero coupon code.

First thing you need to do is install and activate the plugin. For more details, see our beginner’s guide on how to install a WordPress plugin.

Activate CSS Hero plugin

Upon activation, you need to click the ‘Proceed to Product Activation’ button to activate the plugin. You’ll find the button directly above your list of installed plugins.

This brings you to a screen where you need to enter your username and password. Then, follow the on-screen instructions, and you’ll be redirected back to your dashboard once your account is verified.

Next, you need to open up the page or post you want to edit, then click the ‘CSS Hero’ button at the top of your WordPress admin toolbar.

Click CSS Hero

This will open up the same page with CSS Hero running on top of it. The plugin uses a visual editor, so you’ll be able to make your changes in real-time.

When you click on any element on your page, it will bring up a toolbar on the left side of the page for you to make customizations.

CSS Hero page customizer

To remove or add blank space between your blocks, simply click the ‘Spacings’ option and then scroll down to the ‘Margin-Bottom’ section.

Here you can move the slider up or down to add or remove blank space.

CSS Hero change bottom margin

Any changes you make will automatically show up on your page.

Once you’re done making changes, you need to click the ‘Save’ button to make your changes live. 

Method 4. Adding or Removing Blank Space Between WordPress Blocks with SeedProd

SeedProd is the best drag and drop page builder used by over 1 million websites.

SeedProd

You can use the library of 150+ templates to create custom 404 pages, sales pages, landing pages, and much more. SeedProd can even be used to create a custom WordPress theme without writing any code.

With the drag and drop builder, you have full control over the design of your site, and you can easily remove or add spacing to any website element.

To learn more, see our guide on how to create a custom page in WordPress.

As you’re customizing your page, you can add space anywhere by using the Spacer block.

SeedProd spacer block

Simply drag and drop it anywhere on the page where you want to add more space between blocks.

Then you can use the slider to adjust its height.

Use the slider to adjust the height of the SeedProd Spacer block

You can also control the spacing between any block. To do that, simply click on any block that you want to add or remove space from.

This brings up the options panel on the left. Then, click on the ‘Advanced’ tab.

Click advanced tab in SeedProd builder

Next, scroll down to the ‘Spacing’ drop down and click it.

This brings up a menu where you can control the ‘Margin’. Simply enter a number into the bottom margin box to add space, or delete the number to remove any existing blank space.

Change bottom margin

Once you’re finished making changes, click the ‘Save’ button and select the ‘Publish’ drop down to make your changes live.

Save and publish SeedProd page

We hope this article helped you learn how to add or remove blank space between WordPress blocks. You may also want to see our guide on how to start your own podcast and our expert picks of the best free website hosting compared. 

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add or Remove Blank Space Between WordPress Blocks (4 Ways) first appeared on WPBeginner.

Posted on

How to Change the Link Color in WordPress (Beginner’s Guide)

Do you want to learn how to change the link color in WordPress?

Changing your link color gives you more control over the design of your website and can make it easier for your visitors to navigate.

In this article, we’ll show you how to change the link color in WordPress, step by step.

How to change the link color in WordPress (beginner's guide)

Why Change the Link Color in WordPress?

When you add a link in WordPress, your theme will automatically determine the color of the link.

Sometimes your WordPress theme’s default color options will be exactly what you want, but other times you’ll want more control over how the links look.

For example, you might want to change the color of your links to match your business’s brand or logo. Or, you may want to boost the color contrast to improve web accessibility for readers with limited vision.

Some themes allow you to change the link color directly from your theme options panel or the WordPress theme customizer, so make sure to check your theme documentation before changing the link color with CSS.

That being said, let’s take a look at a few ways you can change the link color on your WordPress website.

Method 1. Change Link Color in WordPress by Editing CSS

One way to change the link color in WordPress is by adding custom CSS code.

First thing you need to do is navigate to your WordPress admin dashboard and go to Appearance » Customize and then click the ‘Additional CSS’ menu option.

WordPress customizer to additional CSS

This will bring you to a screen where you can add your custom CSS code on the left side of the page.

You’ll be adding the CSS code snippets from the examples below to this section of your editor.

Add additional CSS code screen

First, we’re going to customize the overall link color. This is the color that your visitors will see if they’ve never clicked the link before.

You can use the CSS code below as an example.

a {
     color: #FFA500;
}

This will change the default link color to orange. Make sure you change the #FFA500 color to the color you want to use.

Change the Link Hover Color in WordPress

The next thing we’re going to change is the link hover color. That way, when a user hovers their cursor over a link, it will change color to get their attention.

You can use the CSS code below as an example.

a:hover {
     color: #FF0000;
     text-decoration: underline;
}

The code above will change the link color to red and underline the text when visitors hover over it. Make sure to change the #FF0000 color to the one you prefer.

We use the link underline hover effect here at WPBeginner on our links.

Change the Link Color After Visit in WordPress

Another thing you may want to change is the link color after a user clicks a link. This can help visitors easily navigate your WordPress blog and see which links they’ve already clicked on.

You can use the CSS code below to change the visited link color.

a:visited {
     color: #0000FF;
}

Make sure that you change the blue #0000FF color to the color of your choosing.

Here is how all of the CSS code above will look inside the WordPress customizer.

WordPress customizer code

Once you’ve made your changes, click the ‘Publish’ button to make your changes live.

The CSS code above will change the color of all the links on your site.

If you want to only customize the links that are in your posts and pages, then you can use the code sample below.

.entry-content a {
     color: #FFA500;
}

.entry-content a:hover {
     color: #FF0000;
     text-decoration: underline;
}

.entry-content a:visited {
     color: #0000FF;
}

This code does the same thing as the code samples above, but .entry-content only targets links within your content.

Change the Color of Your Navigation Links in WordPress

One final link style you can also customize is your navigation menu links.

Customize navigation menu links

For more details, see our guide on how to style WordPress navigation menus.

If you don’t want to add code directly to your WordPress theme, then you can use a CSS plugin to add code to your website.

That way, your CSS changes will be applied even if you decide to change your WordPress theme.

First thing you need to do is install and activate the Simple Custom CSS and JS plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, simply go to Custom CSS & JS » Add Custom CSS in your WordPress admin panel.

Here you can add the same CSS code as above.

Add custom CSS code with plugin

Once you’re done adding the code, make sure to click the ‘Publish’ or ‘Update’ button.

Method 2. Change the Link Color Without Editing CSS

If you aren’t comfortable editing CSS files, then this method is for you.

Instead of adding CSS code directly to your website, you can use a CSS styling plugin to visually edit your site without writing any code.

We recommend using the CSS Hero plugin. It’s very beginner friendly and lets you visually customize your website similar to a drag and drop page builder.

Once the plugin is installed, you need to click the ‘Proceed to Product Activation’ button above the list of plugins to activate it and connect your account.

Activate CSS Hero

This will take you to a screen where you can enter your username and password.

All you have to do is follow the on-screen instructions, and you’ll be taken back to your website after your account is verified.

Next, click the ‘Customize with CSS Hero’ button at the top of your WordPress admin toolbar.

Customize with CSS Hero

This will open up your website with CSS Hero running on top of it. CSS Hero uses what’s called a What You See is What You Get (WYSIWYG) editor.

Simply click on any element of the page, and it will bring up a toolbar that lets you make customizations.

Then, click on one of the links on your website. We’ll start with one of the blog post links.

Click on website link

After that, select the ‘Typography’ menu item and you can choose a new color for your link.

You can choose a new color from the list or add your own color code.

Select typography option

Change the Color of Your WordPress Navigation Menu

Next, you can change the color of your WordPress navigation menu links.

Simply hover over your navigation menu and click one of the menu items.

Click on navigation menu link

Then, select the ‘Typography’ option and you can customize the color directly below.

You’ll notice when you change the menu link color, the changes show up immediately in the preview.

Customize menu color CSS Hero

Once you’re done changing the link colors, you need to click the ‘Save and Publish’ button to make your changes live.

We hope this article helped you learn how to change the link color in WordPress. You may also want to see our guide on how to choose the best web design software, or our list of must-have WordPress plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Change the Link Color in WordPress (Beginner’s Guide) appeared first on WPBeginner.

Posted on

How to Change Your WordPress Logo Size (Works with Any Theme)

Recently one of our readers asked if it was possible to change your logo size in WordPress?

Your website logo is an important part of your brand. Depending on the WordPress theme you use, sometimes it’s not clear on how to change your logo size to make it bigger or smaller.

In this article, we’ll show you how to easily change the WordPress logo size , step by step.

How to change your WordPress logo size (works with any theme)

Why Change the Size of the Logo in WordPress?

When you upload your logo to WordPress, it might not always be the right size.

A logo that’s too small won’t stand out. While, a logo that’s too big can end up negatively impacting the design of your website.

If you’ve invested in a custom logo design, then you want to make sure your logo appears as the right size in your website header.

For those still in the logo design process, see our picks of the best free logo makers.

That being said, we’ll show you a few different ways that you can use to change the logo size in WordPress.

The method you choose will depend on the WordPress theme you are using, and your comfort level with editing CSS code.

Method 1. Change the WordPress Logo Size with WordPress Customizer

The simplest and easiest way to change the logo size in WordPress is by using the theme customizer. However, this method only works if your WordPress theme supports it.

A lot of popular themes like Divi, Astra, Ultra, and others have a built-in logo size changer tool.

When you upload your logo in WordPress, these themes make it easy to adjust the logo with a simple slider that you can use to adjust the width and height.

Note: your logo size will only be as big as the image you upload, so you want to make sure you upload a larger logo image, if your goal is to make it bigger.

For the sake of the tutorial, we’ll be showing how to change your logo in Divi, Astra, and Ultra theme, but the method is similar for most popular WordPress themes. If your theme doesn’t have this option, then you need to use the method 2 or 3 of this tutorial.

Change the WordPress Logo Size in Divi WordPress Theme

First, navigate to Divi » Theme Customizer and click on the ‘Header & Navigation’ menu option.

Select Divi theme customizer

After that, click the ‘Primary Menu Bar’ drop down option.

Here you can change the size of your logo.

Select Divi primary menu bar

First, you need to adjust the ‘Menu Height’ setting. This controls the height of your entire navigation menu and will define how big you can make your logo.

After that, you can change the ‘Logo Max Height’ setting, which is a percentage of the total menu height.

Adjust logo height

You can adjust the ‘Logo Max Height’ slider up and down until you find the perfect logo size for your WordPress blog.

Make sure to click the ‘Publish’ button to save your changes before exiting the screen.

Change the WordPress Logo Size in Astra WordPress Theme

First thing you need to do is navigate to Appearance » Customize and then click the ‘Header’ menu option.

Astra theme customize

After that, click the ‘Site Identity’ menu option.

Here you can easily adjust the size of your logo.

Click site identity in Astra

All you have to do is move the ‘Logo Width’ slider to the left or right.

You can automatically see your logo size changes in real time, as you move the slider.

Astra logo width slider

Once you’re satisfied with the size of your logo, make sure to click ‘Publish’ before exiting the page.

Change the WordPress Logo Size in Ultra WordPress Theme

To customize the logo size in Ultra theme, navigate to Appearance » Customize, and click the ‘Site Logo & Tagline’ navigation item.

Ultra click site logo and tagline

After that click the ‘Site Logo’ drop down.

Then, select the ‘Logo Image’ radio button that appears.

Ultra click site logo button

Now, you can change the size of the logo by entering new dimensions into the boxes to the right of your logo image. If you want the image to scale based on the original size, then only enter new logo dimensions into one box.

You can change the width with the box on the left, and the height with the box on the right.

Change logo height and width

As you enter new dimensions, you’ll see the size of your logo change in real time.

Once you’re done customizing the size of your logo, make sure to click the ‘Publish’ button.

If your theme isn’t highlighted above, then there’s still a chance that you can customize the size of your logo by using the WordPress customizer.

Simply go to Appearance » Customize on whatever theme you are using and see what customization options are available for your logo or header.

Method 2. Change the WordPress Logo Size by Editing CSS

If your WordPress theme doesn’t support changing the logo size using the WordPress theme customizer, then you can change the size by adding custom CSS.

First thing you need to do is navigate to your website homepage.

Then, right-click anywhere on the page and select the ‘Inspect’ option. This will bring up an Inspect menu that shows all of the code for the page.

Right click inspect

After that, you need to click the ‘Select an element’ icon that looks like a mouse pointer.

This will let you select the logo element of your website and view the code.

Click select an element icon

Next, simply hover over your website logo until the CSS class pops up. It will look similar to the image below.

You’ll use this CSS class to customize the size of your WordPress logo. So, write this down in a text editor like Notepad.

Logo CSS class

Now you can head back to your WordPress admin dashboard and navigate to Appearance » Customize. You need to click the ‘Additional CSS’ menu option.

This will bring up a drop-down where you can add custom CSS code.

Select additional CSS

Simply add the CSS class you found earlier and specify the new image dimensions. You can use the CSS code below as an example.

img.custom-logo {
     max-height: 100px !important;
}

You need to change the img.custom-logo CSS class above to the CSS class your theme uses.

You can also change the max-height to whatever size you want.

Here is how it looks inside the WordPress customizer.

Additional CSS WordPress customizer

Once you’ve made your changes, simply click the ‘Publish’ button to make your changes live.

Method 3. Change the WordPress Logo Size Without Editing CSS

If you aren’t comfortable editing theme files or adding custom CSS, then this method is for you.

By using a WordPress styling plugin, you can make visual changes to your site similar to using a drag and drop page builder.

We recommend using CSS Hero. It’s a styler plugin that lets you edit almost every CSS style on your WordPress site without writing a single line of CSS code.

Deal: WPBeginner reader’s can get a 34% discount through our CSS Hero coupon code.

First thing you need to do is install and activate the plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to click the ‘Proceed to Product Activation’ button to activate the plugin. It’s located right above your list of installed plugins.

Activate CSS Hero plugin

This will bring you to a screen where you can enter your username and password. Simply follow the on-screen instructions, and you will be redirected back to your site once your account is verified.

After that, click the ‘Customize with CSS Hero’ button at the top of your WordPress admin toolbar.

Customize with CSS Hero

This will take you to your website with CSS Hero running on top of it. CSS Hero uses a WYSIWYG (What You See Is What You Get) editor.

When you click on any element of your page, it will bring up a toolbar on the left to make customizations.

CSS Hero preview

Next, click on your WordPress logo at the top of the page.

After that, click the ‘Show Advanced Props’ link.

Click show advanced props

This gives you even more CSS customization options.

Then, locate the ‘Measures’ box. Here you’ll find options called ‘Max Width’ and ‘Max Height’.

You want to change these to the image size you prefer. If you want the image to keep the same dimensions, then only change the height or the width.

Define logo width and height

The changes you make will show up automatically on your page.

Once you’re done changing the size of your logo, you need to click ‘Save and Publish’ to make your changes live.

We hope this article helped you change your WordPress logo size. You may also want to see our expert picks for the best live chat software for small businesses, and our list of the must have WordPress plugins for business websites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Change Your WordPress Logo Size (Works with Any Theme) appeared first on WPBeginner.

Posted on

How to Add Image Hover Effects in WordPress (Step by Step)

Want to learn how to add image hover effects in WordPress?

Image hover effects can make your site more interactive and engaging. This creates a better first impression and improves the time spent on your site.

In this article, we’ll show you how to add image hover effects in WordPress, step by step.

How to add image hover effects in WordPress

What Are Image Hover Effects?

Image hover effects allow you to add interactive elements to your static images such as animations, zoom effect, popup, and more.

For example, you could have images that flip to reveal your pricing or links to your portfolio.

Image hovers also give you a creative way to display your photos, galleries, and thumbnails.

Interactive images and hover elements can help your site out in a lot of ways:

  • Improve the time your visitors spend on your site
  • Give you creative ways to present content to your visitors
  • Let your users know a site element is clickable

How to Create Image Hover Effects in WordPress

The best way to add image hover effects to your WordPress website is by using a WordPress plugin.

With a plugin, you don’t have to spend time editing, formatting, and adding CSS to create image effects. It just works.

There are all kinds of plugins you can use to create unique image hover effects and animations.

In this tutorial, we’ll show you the four different ways to add the hover effects you need.

1. Adding Image Hover Flipbox Effects in WordPress

A flip box is a box that flips over when your mouse hovers over it.

You can add this animation to your images to reveal text or even change the image on hover.

Image hover flipbox

You can control how the image flips, along with the design of the image on both sides.

If you’re a photographer, you can use this to showcase your work and separate your portfolios.

The easiest way to add image flipbox effects is with a WordPress plugin. A plugin lets you create and customize these effects quickly.

We recommend using the Flipbox – Awesomes Flip Boxes Image Overlay plugin. It’s the best flipbox and image hover plugin for WordPress.

This plugin lets you simply add custom flipbox effects to your WordPress images.

Image hover flipbox plugin settings

It comes with dozens of different animation effects and pre-built templates. You can even control the colors and add your own custom CSS.

For more details, see our guide on how to create flipbox overlays and hovers in WordPress.

2. Adding Image Zoom and Magnify Effects in WordPress

Image zoom effects let your users see details they wouldn’t be able to see in a normal sized image.

This is a great effect for product tutorials and images with high levels of detail.

You can also use it on your online store to add zoom effect like Amazon.

Image zoom magnify

The easiest way to add image zoom and magnify effects to your images is by using a WordPress plugin.

We recommend using the WP Image Zoom plugin. This plugin lets you simply add zoom and magnify effects to your images.

WP Image Zoom plugin settings

It’s also equipped with features that let you choose the shape of the zoom lens, the level of zoom, and much more.

For more details, see our guide on how to add magnifying zoom for images in WordPress.

3. Adding Image Animation Effects in WordPress

There are all kinds of additional hover effects you can add to WordPress.

For example, you have animated image galleries, lightbox images, comparison images, text overlays, and more.

Image animation effect hover

To add hover effects like these we recommend using the Image Hover Effects Ultimate plugin.

This plugin is very lightweight, so it won’t impact with your website performance and loading speeds. It’s also very easy to use. You can add unique image effects with a couple of clicks.

First thing you need to do is install and activate the Image Hover Effects Ultimate plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Once you’ve installed and activated the plugin, you need to click on ‘Image Hover’ in your WordPress admin. This will bring up eight different image hover effects you can choose from.

Choose image hover effect

For this tutorial, we’ll use the ‘Caption Effects’ effect. This adds animated text over your image on a mouse hover.

First, click on the ‘Caption Effects’ box. This brings up a menu of different animation options to choose between.

Image hover animation create style

Once you’ve found the image effect you like, click ‘Create Style’.

In the popup box, name your hover effect and choose the layout. The layout number you select matches the ordered sequence of images.

Remember to click ‘Save’.

Name new image hover

On the next screen, you’ll have a variety of options to customize your hover effect.

However, we’ll leave the default animation options.

Hover animation settings

If you make changes, you’ll see them appear in the ‘Preview’ box.

To change the default image, hover over the image and click the ‘Edit’ option.

Edit hover animation

In this popup you can change your title and description that’ll appear on hover.

To upload your image, click the box beneath the ‘Image’ title and upload or select an image from your media library.

Change image hover image

You can also add a link and button text if you want your image to take users to another page on your website.

Once you’re finished, click ‘Submit’.

Image hover shortcode

To add the image to your website, copy the shortcode in the ‘Shortcode’ box.

Then, open any page, post, or widget where you want your image to appear and paste the shortcode.

Paste hover animation shortcode

Make sure you click ‘Publish’ or ‘Update’ to save your changes and make your image hover effect live.

4. Adding Image Hover Popup Effects in WordPress

The plugins above will help you add features like flip boxes, hover effects, animations, and more.

What if you want to add a different image hover effect not covered by the plugins above?

The best way to do this is with a WordPress custom CSS plugin. This lets you make visual changes to your images without having to edit any code.

You can edit your CSS files manually or add CSS via the WordPress customizer, however, using a plugin is the easiest option.

We recommend using the CSS Hero plugin. This plugin lets you edit almost every single CSS style on your WordPress site without writing a line of code.

CSS hover effects

There are all kinds of built-in CSS effects specifically for images.

For more details on installing a plugin, see our guide on how to install a WordPress plugin.

Once the plugin is installed you’ll need to click the ‘Proceed to Product Activation’ button.

Activate CSS Hero

This will guide you through plugin activation process.

After the plugin is activated you can start customizing your images.

Open up a page or post that has the image or images you want to animate and click ‘CSS Hero’ at the top of the page.

This will open up the editor menu where you can add all kinds of different CSS effects.

We’re going to add an image popup on hover effect. First, you’ll need to click on the image you want to edit, then click ‘Snippets’.

After that, click ‘Hover Effects’.

CSS Hero hover effects

This will bring up a menu of different CSS effects. Next, select the ‘.hvr-pop’ effect and click ‘Apply’.

Click ‘Save & Publish’ and the CSS effect will automatically apply to your images.

Save image hover changes

We hope this article helped you learn how to add image hover effects in WordPress. You may also want to see our guide on how to optimize images for the web and our beginner’s guide to image SEO.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Image Hover Effects in WordPress (Step by Step) appeared first on WPBeginner.