Many web sites use a big, eye-catching picture on the prime of their homepage, often called a hero picture. And WordPress, a well-liked web site builder, lets you add this characteristic to your web site.
That being stated, many customers need assistance determining tips on how to precisely do it. We’ve obtained tons of questions on WordPress hero picture dimension and the place to correctly arrange a hero picture within the WordPress Customizer or Full Web site Editor.
To be frank, after years of constructing web sites, we’ve found higher strategies for including a hero picture than utilizing WordPress’ built-in options.
This information will present you tips on how to add a hero picture in WordPress in a number of methods, and you may decide the tactic that works finest on your wants.
First Issues First: Put together Your WordPress Hero Picture
Earlier than you add a hero picture to your WordPress web site, you could create one that may seize your guests’ consideration. An ideal hero part begins with a surprising picture that exhibits what your web site is all about.
Canva is a well-liked software for designing web site graphics. It’s straightforward to make use of and comes with tons of templates to create your hero picture. If you happen to’re not a fan of Canva, now we have a listing of Canva options you possibly can take a look at to seek out one which works for you.
When making your hero picture, you’ll want to maintain a number of issues in thoughts.
First, take into consideration the dimensions. Hero photographs are often not too tall and infrequently cowl the complete width of your entrance web page.
A standard WordPress hero picture dimension is about 1920 pixels vast by 400-600 pixels tall (or typically extra). However this could change relying in your WordPress theme.
Subsequent, take into consideration what message you wish to ship. Your hero picture ought to shortly present what your web site is about. It may very well be a product hero picture, {a photograph} that represents your model, and even a formidable full-screen video background.
For instance, we determined to characteristic our founder Syed Balkhi in our homepage’s hero picture. It exhibits that there’s an actual individual behind our model who’s devoted to serving to WordPress customers succeed, which is what WPBeginner is all about.
Additionally, go away some area for textual content. Many hero sections have a headline or a button. Be sure that there’s room for these and that they’re straightforward to learn.
It’s a good suggestion to have a look at different web sites in your area for hero part examples. This can provide you concepts on your personal design. A number of the entries in our WordPress web site examples can function nice inspiration.
With that out of the best way, let’s take a look at tips on how to really add the hero picture. WordPress allows you to do that in a number of alternative ways, however which one you must use is dependent upon what characteristic or plugin you employ to design your web site.
You should use the short hyperlinks under to skip to your most popular technique:
Professional Tip: Want an attractive web site with out all of the onerous work? Our design consultants at WPBeginner Professional Companies can create a high-converting enterprise web site, on-line retailer, weblog, and extra in nearly no time!
Technique 1: Utilizing Theme Customizer (Basic Themes Solely)
When researching for this tutorial, we shortly realized that including a hero picture to traditional WordPress themes isn’t at all times easy. The method can range extensively relying in your theme, as some have built-in hero sections whereas others don’t.
Take the Sydney theme, for instance. It comes with a hero part able to go, making issues a lot simpler.
If you happen to’re attempting so as to add a hero to your present web site, however your theme doesn’t have a built-in characteristic for it, then this may be irritating.
For many who are simply beginning out and don’t thoughts selecting a brand new theme, then we advocate switching to at least one with a built-in hero part, because it may prevent time in the long term.
If you happen to’re in search of theme suggestions, then you possibly can take a look at our professional picks of the finest and hottest WordPress themes available on the market. Higher but, you would use a web page builder with a theme that has a hero part, which we’ll present you the way in technique 3.
Earlier than making any massive adjustments, we at all times recommend utilizing a staging web site to check new themes completely. This manner, you will be certain you’re making the proper selection on your web site.
If you happen to’re undecided how to do that, take a look at our information on tips on how to correctly change a WordPress theme.
Pleased along with your present traditional theme? No downside. Skip forward to technique 4, the place we’ll present you tips on how to add a hero part utilizing a plugin. This method works with any theme, so you possibly can create a surprising hero picture with out overhauling your complete web site design.
If you happen to’re utilizing Sydney or an identical theme, you possibly can customise your hero picture by means of the Theme Customizer. Simply head to Look » Customise in your WordPress dashboard to get began.
Word: If the Theme Customizer is lacking in your dashboard, you then’re in all probability utilizing a block theme and you must skip forward to technique 2.
The sidebar ought to have a number of choices to customise your traditional theme.
In Sydney, the setting to customise your hero part is named ‘Hero Space,’ however this particular menu will range by the theme. Go forward and click on on it.
The Sydney theme has 3 menus to create your hero part: Hero Kind, Hero Slider, and Hero Media.
We’ll solely use the primary two as a result of they’re sufficient so as to add a hero part for our goal.
First, choose ‘Hero Kind.’
In Hero Kind, you may be requested to decide on what kind of media you’re going so as to add to your hero part.
You may select between a full-screen slider, a video, a picture, or no header.
We’ll choose a full-screen slider for the hero part on our entrance web page and our complete web site. The reason being that it permits us to create a slider with a number of photographs for the hero, and add textual content and a button on prime of the pictures.
Now, return to the Hero Space menu and choose ‘Hero Slider.’
Right here, open the ‘First Slide’ tab and click on on the ‘Choose picture’ button.
This may open your WordPress media library, the place you possibly can add a brand new picture or choose an present one on your hero part.
After getting uploaded a picture, you possibly can scroll down and substitute the textual content within the title and subtitle fields.
You must see the adjustments you make mechanically mirrored on the web page preview.
If you wish to add a couple of picture to the hero part, you possibly can repeat the identical steps with the remainder of the slides.
In any other case, you possibly can scroll all the way down to the ‘Slider button’ menu.
Right here, you possibly can change the URL and textual content for the call-to-action button.
After that, scroll down once more to the ‘Slider settings’ tab.
That is the place you possibly can regulate the slider’s velocity, select to show the identical textual content throughout all slides, and make the slider’s habits responsive.
If you wish to change the button’s coloration, then return to the Theme Customizer’s primary menu.
Subsequent, click on ‘Normal.’
You must now see a number of menus to customise your theme’s normal settings.
Right here, simply click on ‘Buttons.’
Now, you possibly can scroll all the way down to the ‘Default State’ and ‘Hover State’ sections, the place you possibly can change the button’s coloration relying on its state.
To switch the colour, simply click on on the colour picker software and select a brand new coloration.
Most WordPress themes additionally mean you can customise the colours and typography of your design. Nevertheless, the adjustments you make will often apply to your complete web site, not simply your hero part, so simply maintain that in thoughts.
In any case, right here’s what our hero picture appears to be like like, made with the Sydney theme:
Technique 2: Utilizing Full Web site Editor (Block Themes Solely)
If you happen to use a block theme, then you would use the Full Web site Editor’s Cowl block to simply create a hero picture in WordPress. No plugin is required.
Step 1: Open the Full Web site Editor
First, go to Look » Editor in your WordPress admin.
Now, you will note the editor’s primary menus.
Let’s say you wish to add your hero picture to your homepage solely.
In that case, simply click on on the theme preview on the proper aspect of the web page.
If you wish to add the hero picture to a different web page, a {custom} web page template, or a block sample, then you possibly can learn our information on WordPress Full Web site Enhancing for extra data.
Step 2: Add the Cowl Block to Your Web page/Template
For the reason that hero part is often positioned above the fold (the highest a part of your web page that seems as guests land on the location), then you could ensure you’re in the proper location. The hero part is often proper under the header.
When you do this, you could both delete the prevailing blocks in that location or add a brand new Group block proper above these present blocks.
In our case, we are going to merely take away the blocks that have been already on our homepage. If you wish to do the identical, you would click on on the ‘Listing View’ button on the left aspect of the web page.
Then, discover the block(s) that you could delete to make room on your hero part. After finding it, simply click on on the three-dot button, and choose ‘Delete.’
Now, choose the block that was proper under the block(s) you simply deleted.
Then, click on on the three-dot button and select ‘Add earlier than.’ This may add a block proper above that block and under the header part.
At this stage, you possibly can click on on the ‘+’ button that seems within the supposed hero part.
You might want to add a Group block right here, as this may mean you can handle the hero picture, textual content, button, and different components as a single block when wanted.
Now you can choose a container so as to add your blocks to.
For demonstration, we’ve chosen the fundamental Group container.
Subsequent, simply click on on the ‘+’ button contained in the Group block.
Right here, go forward and choose the ‘Cowl’ block.
After that, you will note 3 choices so as to add your hero background picture: importing it out of your laptop, including it out of your media library, or utilizing your featured picture.
In our instance, we are going to click on on ‘Media Library’ and choose an present picture.
If the picture add is profitable, then you will note your hero picture instantly. Nevertheless, there are some changes you could make.
Step 3: Configure the Picture on Your Cowl Block
First, choose the ‘Cowl’ block itself in order that its toolbar seems on prime of it.
Then, click on on the ‘Align’ button and select ‘Full Width.’
Subsequent, you possibly can click on on the duotone icon to vary the duotone filter that’s utilized to your picture.
If you happen to’re not a fan of it, you possibly can disable it later, which we’ll present you tips on how to do.
After that, you possibly can click on on the content material place icon to vary the place your textual content and button will seem on the picture.
We’ve determined to go along with the center-left aspect, as the point of interest of the picture is on the proper.
Now, click on on the ‘Settings’ icon and change to the ‘Block’ tab.
Right here, scroll all the way down to the Settings. That is the place you possibly can optionally add a parallax impact to your picture (‘Mounted background’) or use a repeated background.
It’s also possible to scroll again up and change to the kinds icon.
That is the place you possibly can set the overlay opacity to 0 in order that your picture doesn’t use any filter.
If you wish to change the peak of the picture, then you possibly can insert a quantity in pixels within the ‘Minimal Peak of Cowl’ area.
We’ve determined to set our picture to 400 pixels.
Be happy to customise different settings like border and shadow, block spacing, padding and margin, typography, and so forth.
Step 4: Add Blocks to Your Cowl Block
We’re now prepared so as to add extra components to your hero picture.
You have to be conscious by now that there’s a ‘Write title’ textual content on prime of the picture. Be sure that to click on on ‘+’ button subsequent to it and choose ‘Group.’
You wish to use this block to group collectively all the components you’ll add afterward the Cowl block. This manner, they are often personalized as a single block when wanted.
Then, select your required container like within the earlier step.
When you do this, you possibly can click on the ‘+’ button once more so as to add a Heading block.
Now, you possibly can insert your web page’s headline.
Be happy to change the textual content coloration, dimension, and dimensions within the block settings sidebar if most popular.
After you’ve achieved that, you possibly can hit the ‘Enter’ key.
At this stage, be happy so as to add a subheadline proper under the heading.
Lastly, you possibly can add a call-to-action button to your hero picture.
To do that, simply hit the ‘Enter’ key once more, click on on ‘+’ button, and choose the ‘Buttons’ block.
Subsequent, simply insert the button copy.
And so as to add a hyperlink to the button, merely click on on the hyperlink icon on the toolbar and insert your URL within the acceptable area.
Then, click on on the arrow button.
If you happen to want ideas and tips to create high-converting buttons, you possibly can take a look at our information on call-to-action finest practices.
And that’s just about it. You may add extra components to your hero picture or customise it to your preferences.
When you’re proud of how the hero part appears to be like, simply click on ‘Save.’
Right here’s what our Cowl block appears to be like like:
Technique 3: Utilizing a Web page Builder (Customized Touchdown Pages/Themes)
Let’s say you’re simply to start with levels of organising your web site. Or, you’re trying to create a {custom} touchdown web page with out being confined by your theme’s limitations. In that case, we advocate utilizing a web page builder that comes with templates with hero sections, like SeedProd.
SeedProd is a drag-and-drop web page builder that we’ve typically used to create {custom} pages for WPBeginner and our different model websites, together with Duplicator and OptinMonster.
Whereas straightforward to make use of, it additionally gives a whole lot of built-in WordPress enhancing options that the Theme Customizer, Full Web site Editor, and Gutenberg don’t have by default.
Due to that, we’ve been capable of save money and time on putting in third-party plugins simply so as to add particular options to our themes or touchdown pages.
SeedProd is available in a free and paid model. You may undoubtedly use the free model to create a {custom} touchdown web page, however the template and block choices are fairly restricted. For that motive, we advocate upgrading to a paid plan for extra options, together with the AI content material generator.
For extra data, take a look at our SeedProd assessment and our comparability between Elementor vs. Divi vs. SeedProd, that are all standard web page builders.
Step 1: Set Up SeedProd
To make use of SeedProd, you could set up the WordPress plugin supplied in your SeedProd account in your admin space. As soon as the plugin is energetic, you’ll be requested to enter your license key, which you may get out of your SeedProd account web page.
After you’ve entered it, simply click on on the ‘Confirm key’ button.
With SeedProd, you have got 2 choices: you possibly can add a hero part to a touchdown web page or sure pages inside a {custom} theme.
To arrange your touchdown web page or theme, you possibly can learn these guides:
Create a Customized WordPress Theme With out Code
Create a Touchdown Web page in WordPress
Create a Squeeze Web page in WordPress That Converts
Create Lovely Coming Quickly Pages in WordPress
For the remainder of the tutorial, we are going to use the Menu Gross sales template.
Step 2: Customise Your Hero Part
After getting chosen a template on your theme or touchdown web page, you’ll land within the SeedProd editor.
The SeedProd enhancing interface consists of a web page preview on the proper aspect and a left sidebar the place you possibly can add extra blocks, customise a block/part, undo/redo adjustments, view your web page’s layers, and preview your web site on cellular or pill gadgets.
For the reason that SeedProd theme already features a hero part, our job is already midway achieved. What we have to do is simply substitute the picture, customise it, and add extra blocks to the hero part if wanted.
Alternatively, you would discover extra hero part designs by switching from the Blocks sidebar to the Sections sidebar on the left aspect. Then, navigate to ‘Hero’ and click on on the ‘+’ button on the hero part template that you just wish to add to your web page.
SeedProd will then insert it into your web page.
Let’s change the hero picture first.
To do that, click on on the topmost part that features the hero picture. You’ll know you’ve chosen the proper factor when a purple ‘Enhancing: Part’ field seems within the left sidebar.
Now, hover over the background picture within the sidebar.
Then, click on on the ‘Media Icon.’ After that, you possibly can add your hero picture out of your laptop or the media library.
Subsequent, you could select the background place that works finest on your picture.
We discover that the ‘Customized Place’ choice offers us the very best management over positioning the focal factors, so we’ll select that choice.
The Customized Place choice offers you many methods to configure the background.
For the X and Y positions, you possibly can change how the picture is positioned vertically and horizontally.
The Attachment setting has 2 choices: Scroll (non-parallax) and Mounted (parallax).
In case your picture is smaller than the hero part however you need your entire part to be crammed with the picture, then you possibly can repeat the picture all through that part. In any other case, simply decide ‘No-repeat.’
As for the WordPress hero picture dimension, you possibly can select the ‘Auto’ choice if you would like the picture to mechanically regulate to the hero part.
Be happy to mess around with these settings to see what works finest on your picture.
One other factor you are able to do is dim the background picture in order that your textual content stands out higher.
To do that, you possibly can drag the ‘Dim Background’ slider to your required degree of opacity.
If you wish to change the overlaying background coloration, simply click on on the ‘Overlay Shade’ coloration picker button.
Then, merely choose your most popular coloration.
Let’s now scroll again up and change to the ‘Superior’ settings. That is the place you possibly can add all kinds of cool results to your hero part.
For instance, you possibly can open the ‘Particle Background’ tab and add an animated particle background to your picture. This will make your hero part much more spectacular and distinctive.
Subsequent, you possibly can add a {custom} form divider on the prime and/or backside aspect of your hero part by going to the ‘Form Divider’ menu.
Doing this could add extra visible curiosity to your hero part. Plus, for those who add a enjoyable form divider on the backside, you possibly can encourage customers to scroll down your touchdown web page and study extra about your provide.
Step 3: Add and Customise Extra Blocks to Your Hero Part
Along with your hero picture prepared, let’s add extra blocks to the hero part.
Since ours already has a headline block, we’ll click on on it and customise it. When chosen, you must see that the left sidebar now has an orange banner that claims ‘Enhancing: Headline.’
The cool factor about SeedProd is it has a built-in AI content material generator.
So, for those who’re undecided what headline to make use of, you would click on the ‘Edit with AI’ button to provide you with some concepts.
You must now see a popup window the place you possibly can write your content material with AI.
We wish to generate a very new headline, so we’ll click on on the ‘New Immediate’ button to do this.
Subsequent, simply inform the AI what sort of content material it needs to do.
Then, click on on the ‘Generate Textual content’ button.
The AI will then generate the content material for you.
However you possibly can nonetheless change it by altering the tone, simplifying the language, making the textual content longer or shorter, and even translating it into over 50 languages.
When you’re proud of how the headline appears to be like, simply click on ‘Insert.’
Now, you possibly can scroll down the left sidebar.
That is the place you possibly can change the alignment of the textual content, the font dimension, and the heading tag to fit your preferences.
In order for you the textual content to face out much more, then you possibly can scroll again up and change to the ‘Superior’ tab.
Within the Kinds menu, click on ‘Edit’ on the Typography settings. Right here, you possibly can be happy to vary the font household, the road top, the letter spacing, and the letter case of the textual content.
It’s also possible to transfer a bit additional down and add a textual content shadow to the headline.
Right here, we’ve determined to create a custom-colored shadow to make the textual content stand out much more.
So as to add a subheadline under the headline, then you possibly can simply click on on the ‘Blocks’ button on the left sidebar.
This may convey you to the library of blocks.
Now, simply drag and drop the ‘Textual content’ block proper under the headline.
The settings for the Textual content block are fairly just like the Headine block, so you possibly can repeat the identical steps as earlier than the create the subheadline.
So as to add a call-to-action button, you could drag and drop the ‘Button’ block to the web page.
It’s often positioned proper under the subheadline.
With that achieved, go forward and enter your button copy within the acceptable area.
It’s also possible to add a subtext proper under the primary button copy for extra context.
Then, scroll down and add a hyperlink to your button.
Be happy to vary the button’s alignment and dimension as effectively.
Now, transfer again up on the sidebar and change to the ‘Templates’ tab.
That is the place you possibly can change your button type in order that it matches higher along with your web site design.
If you happen to don’t just like the default template designs, then change to the ‘Superior’ tab.
Right here, you possibly can change the button’s typography, type, coloration, padding, shadow impact, and so forth.
Be happy to proceed customizing your template till it appears to be like good.
If you’re happy, simply click on on the ‘Save’ button on the prime and choose ‘Publish’ to make the web page stay.
And that’s all for including a hero picture with a web page builder.
Right here’s what the hero part appears to be like like on our demo web site:
Technique 4: Utilizing Hero Banner Plugin + Shortcode (All Themes)
This last technique technically works with all themes, however we advocate it most to individuals utilizing a traditional theme with out a built-in hero part.
To observe this technique, you have to to put in the Hero Banner Final plugin. For step-by-step directions, you possibly can take a look at our information on tips on how to set up a WordPress plugin for novices.
Step 1: Set Up the Hero Banner Plugin
As soon as the plugin is energetic, go to Hero Banner » Add Hero Banner.
After that, give your hero banner a title. This may act as your headline.
As soon as achieved, insert some textual content within the visible traditional editor that may operate as your subheadline. Be happy to vary the formatting and coloration right here.
Now, scroll all the way down to the ‘Hero Banner – Settings’ part.
Right here, you possibly can select a banner structure. Sadly, you can’t preview the structure in actual time, however you possibly can at all times change it later. We’ll select Structure 1 for our tutorial.
As for the Banner Kind, you possibly can choose ‘Background Picture’ for a hero picture, however it’s also possible to select ‘Background Video’ when you have a full-width video to make use of as a hero.
Subsequent, don’t neglect to click on ‘Add Picture’ so as to add your picture from the pc or the media library.
At this stage, you possibly can set the background picture dimension to ‘Cowl’ in order that the picture is full-width.
Additionally, you will wish to select ‘Scroll’ for the background picture attachment to disable any parallax impact.
Go down till you attain the Banner Shade Setting.
That is the place you possibly can change the colour of the headline (Title Shade) and the subheadline (Content material Shade). Merely click on on the colour picker software to take action.
Moreover, you might wish to add an overlay coloration on prime of the picture, which will be useful to regulate the readability of the textual content in opposition to the picture.
We’ve determined to go along with the colour black, with an opacity of 0.5.
Let’s configure the call-to-action settings.
Right here, you possibly can insert the copy and hyperlink on your button. It’s also possible to change the colour in ‘Button – 1 Class.’
All you could do subsequent is scroll again up.
After that, click on ‘Publish.’
Let’s now go to Hero Banner » Hero Banner. You must now see that your hero picture has been created and the plugin has generated a shortcode so that you can show it.
Pay attention to this shortcode, as we are going to want it later.
Step 2: Discover the CSS Selector of Your Theme’s Header Part
To show the hero picture, we have to know the proper CSS selector on your header part. This may mean you can add the picture proper under the header.
To do that, go to your web site on the entrance finish. Then, right-click in your header part and choose ‘Examine.’
On the proper aspect, you could discover what CSS selector the header part is utilizing. You may hover your cursor over all these code snippets till you see that the header part is highlighted on the entrance finish.
Right here’s an instance:
If your entire header part is highlighted as you hover over the code, you’re heading in the right direction.
Now, right-click on that code snippet, and choose Copy » Copy selector.
After you do this, you possibly can both paste the selector someplace protected, like a textual content editor, or simply maintain this tab open.
Step 3: Add Your Shortcode to WPCode
The following step is to put in WPCode, which is a code snippet plugin.
Technically, you don’t want to make use of a plugin to insert {custom} code snippets into your theme information. However we wished to do that to maintain issues protected, as pasting code right into a theme file can current some surprising errors.
We’ve discovered WPCode to be tremendous useful for managing {custom} code snippets with out breaking your web site.
Word: There may be additionally a free model of WPCode you should utilize to get began, however you have to the premium WPCode plugin to insert code snippets after HTML components on this tutorial.
First, set up the WordPress plugin in your admin space. As soon as the plugin is energetic, navigate to Code Snippets » + Add Snippet, choose ‘Add Your Customized Code (New Snippet),’ and click on on the ‘+ Add Customized Snippet’ button.
Now, let’s give your new code snippet a reputation. It may be one thing easy, like ‘Hero Banner Shortcode.’
After that, change the Code Kind to ‘PHP Snippet.’
Within the Code Preview field, paste the next snippet:
Be sure that to vary the [hbupro_banner id=”XXX”] with your personal Hero Banner shortcode that you just noticed earlier.
Subsequent, scroll all the way down to the ‘Insertion’ part.
Right here, the Insert Technique must be ‘Auto Insert,’ and the Location must be ‘After HTML Component.’
Then, paste the selector you copied earlier within the ‘CSS Selector’ area. In our case, it was #masthead, however this may range by the theme.
With that achieved, you possibly can toggle the ‘Inactive’ button in order that it turns ‘Energetic’ and click on on the ‘Save Snippet’ button.
And that’s it!
If you happen to view your web site, you must now see the Hero Banner picture proper under your header:
We hope this text has helped you learn to add a hero picture in WordPress. You might also wish to take a look at our information on tips on how to add a preloader animation to WordPress and our professional picks of the finest instruments for creating and promoting digital merchandise.
If you happen to preferred this text, then please subscribe to our YouTube Channel for WordPress video tutorials. It’s also possible to discover us on Twitter and Fb.
The submit Add a Hero Picture in WordPress (4 Straightforward Methods) first appeared on WPBeginner.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!