In this article, you will see what you can do in WordPress using Elementor Pro and the Ocean WP theme. The following is a brief overview of what you will read in the text.
We'll create a header using Elementor Pro, adjust it and you'll see how sticky it can be, we'll do the same with the footer.
You'll see how to work with display conditions, they help you display your header, footer, and other templates on specific sections of your site based on the conditions you set in the template.
It will talk about dynamic content and how to create a template with it that will display the blog title, date, author or something else.
We will also create and customize a blog post template as well as a blog page template so that your entire site is built using Elementor Pro version.
Elementor Pro
Earlier, Elementor was only a page builder, and now it is both a page builder and a theme builder, you can replace almost all the elements of the theme you are using with the help of Elementor. We go to the control panel of our site and under the option Templates you have saved templates, pages, sections and global plugins, as you can see in the image below. Here you can use already created templates, create a new one or import an already created one.
You choose to create a new template and there you have several options, to start we will choose to create a header. A library of different header templates will appear and when you see one you like, you select it and click a button Insert and after that you can adapt it to your needs.
As for template changes, you can change the color of the icons, the color of the background, information about the phone number, email, working hours. Then you can change the icons of social networks, make spaces between them, spaces between the top and the bottom of the section, change the color of the icons or text when you move the mouse over it, add animations when the site loads and so on. There are many options, you just need to play and choose what you want and what is visually more beautiful to you. You make all these changes by clicking on a specific section and under options Style and Advanced there are possibilities to change all the things mentioned above.
Above is an example of how the logo was changed, to have a different background, you can also change the menu to be horizontal, vertical or drop down, it can have a pointer under each menu item, it can change color when the mouse is hovered over it. When you have set up your template, click on Publish and then the display conditions that need to be set appear. Where do you want the header to be displayed, on the entire site, on specific pages or e.g. If you want it to be displayed on the entire site and not just on certain pages, then set 2 conditions. You save the conditions and the template is placed on the site.
In order for your header to be sticky, i.e. not to move when you scroll the page, select the section, select the option Motion Effects and at the field Sticky set where you want the header to be. In order for the menu in the header to look nice even when you scroll the page, you need to in the option Custom CSS add one line of code selector{background: #fff}. You can choose whatever color you want for the background, here only an example of white color is given.
The footer of the page is made in a similar way, as well as creating a template by selecting it on the control panel. You choose the one you like from the library, adjust it to your needs, just as you did when creating a header and set the display conditions and publish it on the site.
After we have created the header and footer, the next item in line is the blog page. We create it by selecting a new template and selecting it as a template type Archive and let's call it Blogpage or whatever you want. From the offered designs from the library, we choose the one that suits us, then adjust it the way we want it to look, set the number of articles in one row, the number of columns, the size of the image of the article, where it will stand above or below the short test, and the like.
After that, we set the display conditions and the blog page template is ready, all that's left is to publish it.
The template is finished and now we can add dynamic content. The title can be added to the blog page, then the description of the page, the author of the text can be added, all above the articles on the blog page to make the page look better. Adjust the spacing and margins between dynamic content and articles so that everything looks good visually, so that something doesn't run away and look weird.
The next template we're going to create is an article template, by going to the dashboard again in templates and choosing to create new and choosing Single Post and let's call it Blog.
We choose the article template we want from the library and then adapt it to our needs.
Pictured above is the basic article template we chose to style further. One can style the text, alignments, headings, font color and size, then whether to display meta data such as author, date and time, comments and how they will look, e.g. with or without icons and the like. Within the blog article itself, we can customize Post Excerpt - which represents the abbreviated text that will appear on the blog page with a separate image, then Featured Image - how the selected image will look on the blog page and in the article itself, then Post Content - content of the article and changing the color and size of the font, then Author Box - information about the author, whether there will be name and surname, picture, biography, links to other texts, etc., you can style all that when you click on that section. There are more sections Post Navigation - within it, we adjust how the links for the previous and next article, as well as the section, will look Post Comments - comments on the article, we set how far they will be separated from the article, the background and the like. After all this, it is necessary to set the display conditions and publish the blog template to the button Publish.
Source: youtube
