Category Archives: elegantthemes

How and When to Use the H1 Tag on Your WordPress Website

If you’ve ever done any research on search engine optimization, you’ve probably come across mentions of the H1 tag. But what is the H1 tag, where does it show up, and how should you actually use it to make your site better?

In this post, I’ll get into some best practices for using your H1 tags to improve your site’s search engine optimization and user experience.

What Is the H1 Tag And Where Does It Show Up on WordPress?

I won’t belabor this point because I’m guessing most of our readers are already at least a little bit familiar with H1 tags. But just in case you’re not, here’s a speed refresher:

read more

How to Style Divi’s Post Slider Module like Facebook Newsroom’s Post Slider

Post sliders are an elegant solution for presenting a variety of content to your readers. The posts that are highlighted can be organized in a number of ways from categories to date. In today’s project we’re looking at an example from the Facebook Newsroom blog page which presents a category of posts called “Top Stories”. It’s a very attractive slider that emphasizes the post title and the featured image. We’ll recreate the look of this slider using Divi’s Post Slider module.

Before & After: The Divi Post Slider Module

The first image below shows the divi post slider module with it’s default settings, while the second is a modification created with just a few tweaks in settings and some custom CSS.

Before

post slider

After

post slider

The Concept & Inspiration

post slider

As mentioned, the model for today’s post slider style comes from Facebook Newsroom. This is a news blog dedicated to, as you may have guessed, all things Facebook. While most of us know facebook as the social media giant, a quick look through this blog will broaden your perspective. With $8.8 billion in revenue last quarter and 1.23 billion active users per day, the blog post slider on the Facebook Newsroom page provides a worthy model for today’s project.

Preparing the Design Elements

In preparation for this design, you’ll need a few blog posts with featured images. If you aren’t familiar with setting featured images for your posts, you’ll find the setting on the edit post page at the lower right side of the page.
post slider

This slider design will work best if each of the featured images is 600px x 400px, but the exact size isn’t critical.

You may also want to add some excerpt text for each of your posts in the “Excerpt” input box found toward the bottom of the post editor page. The post will display your post excerpt if you have one, but will use a portion of your actual content if you don’t.

post slider

Implementing the Design with Divi

If you’re following along and don’t already have a page setup to display your post slider, simply create a new page and click on “Use Visual Builder” to start making the needed modifications.

We begin by adding a Regular Section with a 1 Column structure row.

post slider

Then add the Post Slider Module to the row.

post slider

Our modifications begin with “Content” settings, which is where you are by default after adding any new module in the Visual Builder.

Make the following changes to the default Content settings:

Set “Post Number” to however many posts you want. For this example, I’m using 3.

Then set “Use Post Excerpt if Defined” to yes, and set “Automatic Excerpt Length” to 180.

post slider

Now we are ready to move to the design settings by clicking the tab at the top of the module settings modal.

Make the following changes to the design settings:

Change the “Background Overlay Color” to white (#ffffff).

post slider

Change “Dot Nav Custom Color” to #576d90.

post slider

Change the “text Color” to Dark.

post slider

Now make the “Header Font” bold, set the “Header Font Size” to 34px, set “Header text Color” to #3b5998, and “Header Line Height” to 42px.

post slider

Now set the “Body Text Color” to #141924, and the “Body Line Height” to 24px.

post slider

Now click on “Use Custom Styles for Button” to change it to yes. Change the “Button Text Size” to 16px, “Button Border width” to 0px, the “Button Hover Text Color” to #666666, and the “Button Hover Background Color” to rgba(0,0,0,0).

post slider

Now click the “Advanced” tab at the top of the module settings modal. In the text input under CSS ID, add “fb-post-slider”. This allows us to add styles to this specific module without having any effect on other post modules that may be displayed on the page.

post slider

Now add CSS code to the various elements as follows:

Before

position:absolute;
top:57px;
right:-6px;
content:"";
border:4px solid transparent;
border-top-color:#2C477F;
border-left-color:#2C477F;

Main Element

border-radius: 3px;
border:1px solid #dedede; 

After

position:absolute;
top:25px;
right:-7px;
display:block;
content:"Top Stories";
color:#F9F4F7;
background-color:#4573CC;
padding:4px 15px;
border-radius:2px;
z-index:2!important;

Slide Description

min-height:460px;
width: 35%;
min-width: 300px;
float:left;
padding: 57px 45px 50px 35px!important;
font-family: 'Alegreya Sans', sans-serif;
text-align:left

read more

Learn JavaScript Basics with These 12 Free Resources

If you are looking to learn JavaScript, or just want to brush up on the JavaScript basics, then you are in luck. There are currently some amazing resources available online to help you understand and get to grips with JavaScript. And even better, most of the are free.

In this article, I have put together a variety of free resources (in no particular order) that you can easily access to help you learn the JavaScript basics. From courses and videos, to written guides and blogs, there is something here for everyone. Enjoy…

read more

How to Make Your Divi Footer Sticky

In this tutorial, we’ll show you exactly how to make the footer on your Divi website sticky. Using a sticky footer may be one of the requests you get when you’re designing a website for a client or a need you have when you’re creating a website of your own. We’ll show you two possibilities that will make your footer sticky. The first way is through CSS code and the second one through jQuery code. Both ways work but it all depends on which one you prefer using to create that sticky effect for your website.

Adding a sticky footer to your website is currently not something you can automatically do within the Divi builder. That’s why we’re going to show you how to reach the exact result you want without having to put in a lot of effort. The only thing you have to do is follow this post step by step, copy and paste some lines of code and put them in the right place.

Why Use a Sticky Footer?

A sticky footer is usually used for one main reason; if you have one page or multiple pages on your website that don’t have enough content available to fill a whole screen. You could, of course, make sure you have enough content on a page but if it doesn’t bring added value to the page; there’s no need to do it.

Now, in case there’s not enough content to fill the whole screen, the page will have a floating footer right after the content ends. That usually doesn’t look good and it’s not the result you want the get. Luckily, you can make use of a sticky footer to get rid of the floating footer. The sticky footer makes sure the footer stays on the bottom of the page without creating unnecessary space. The length of the page will thus remain the same and everytime you adjust the size of your window, the footer will modify itself to the screen.

Here you have an image of a short page that doesn’t have a sticky footer:

And here’s the same image of that page after a sticky footer has been added:

Difference Between Sticky And Fixed Footer

Not everyone decides to use a footer on their website but when they do; there are plenty of ways to style it. It all depends on how the structure of your website is and if you want to include a ‘manual’  and differently styled footer that’s made with the Divi builder instead.

But if you are using a standard footer, you can choose how you like to style it and how you want it to be positioned on your website. The three main positions a footer can have on a website are the floating, fixed and sticky.

When comparing the sticky and the fixed footer to one another; they might look the same at first sight but they aren’t. The fixed footer is always visible when scrolling through a page on your website whereas the sticky footer specifically handles pages where the content is not long enough to reach the bottom of the screen. In that specific case where the content isn’t long enough; it’ll behave like a fixed footer and stay stuck to the bottom of your page; creating that ‘fixed footer effect’.

However, if the content is long enough, the sticky footer will behave as usual and the page will push the footer down to the bottom of the page to make sure it doesn’t continuously appear on the screen. In most cases, this method is rather preferred than having a fixed footer throughout the whole website because it gives more room on the window for the content to appear.

Create a Sticky Footer on Your Divi Website Through CSS

Without any further due, let’s start creating a sticky footer for your website. The code we’ll be using is really simple but gets the job done. You’ll quickly move on from a floating footer on your page to a page where the footer gets pushed down below if the content is not long enough.

Add CSS Code Through Page Settings (For One Page in Particular)

In certain cases, you want to make the footer sticky on one particular page only. In this part of the post, we’re going to show you how to do that exactly by adding the CSS code to the Custom CSS field of one page. By doing that, you make sure that the CSS code only applies to that one page on your website. Which also means that the CSS code will only be loaded when someone opens that particular page. This method usually is used in cases where there are only a few shorter pages on the website that you want to give the sticky footer to.

Start by opening the page you want the sticky footer to be active or by creating a new page where you want it to apply. Next, open the page settings by clicking on the following icon in your Divi builder:

Moving on, add the following code to the Custom CSS field in the window that you just opened:

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

From the moment you preview your page, the CSS code should apply and make the footer sticky.

Add CSS Code Through Theme Customizer (Real-Time View)

Another way of adding the code is through the Theme Customizer. If you’re adding the CSS code through this way, it’ll automatically apply to the whole website. Every page will have this CSS code applied to it. By adding the code through the Theme Customizer, you can also directly see the changes happen to your website.

To add the CSS code to the Theme Customizer, click on the ‘Theme Customizer’ in the back end of your WordPress website. Next, scroll down the page and open the Additional CSS option. You’ll see all the custom CSS code you’ve used so far appear. Go ahead and add the following code to it:

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Add CSS Code Through Divi Theme Options

Last but not least, you can also add the code through the Divi Theme Options. This is the most frequently used way of adding code to a website where you want the whole website to benefit from the code.

Go to Divi > Theme Options > Scroll down the page > Add the following CSS code to the Custom CSS box:

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Create a Sticky Footer on Your Divi Website Through JQuery

Add jQuery Code Through Code Module (For One Page in Particular)

You can add the jQuery code by using the Code Module within the Divi builder. This, again, is mostly used when there are not a lot of pages with short content and if you don’t want to load the jQuery code for the whole website.

Add a section with a fullwidth row to the page you’re working on.

Continue by adding a code module to that fullwidth row and paste the following code into it:

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

read more

3 Different Ways to Automatically Show Today’s Date in WordPress

Ever wished you could display today’s date on your WordPress site? Displaying the current date helps readers know that you’re still alive and kicking. And if your readers are forgetful like I am, it might even help them remember an impending due date!

While a few WordPress themes do include a built-in option to display today’s date on your site, most themes don’t. So if you want to display the current date somewhere on your WordPress site, you’ll need to handle things yourself.

read more