Загрузка...

How to Create WordPress Contact and Gallery Pages Using Elementor?

Creating Contact and Gallery pages using the Elementor WordPress plugin.

Chapters:
0:00 Intro
0:20 Installation of Elementor Plugin
0:34 Creating a Contact Page Using the Elementor Plugin
3:57 Creating a Contact Form in the WP Forms Plugin
5:31 Adding WP Forms Using Elementor Plugin
5:54 Creating a Gallery Page Using the Elementor Plugin
6:26 Overview of the Created Pages from the User's Point of View

Subscribe @WordPressandSEO

Our goal in this video will be to create Gallery and Contact pages using Elementor and WP Forms plug-ins. After the activation is complete, go to the pages section and open the Contact page. We select the edit with elementor option.
By clicking on the plus, you can choose one of the offered page structures. On the left side, we plan to place a contact form, and on the right, some contact information, social icons and a Google map. Another option that exists is add template, and there you can choose one of the templates. In the free version it is hard to find any interesting template, so we will not use that option.

Filling in these fields is done by simply dragging some of the options on the left side to the fields we have defined on the right.
For some advanced functionalities you have to buy the pro version. On our website, we will use the free version of Elementor and some of the many features that are available to us.

We will drag and drop the text editor and Google map into the fields where we plan to place these parts, and we will also add social icons inside the part where the text editor is. The contact form will be added later, after it is created in the WP Forms plugin.

It is important to mention that, in a lot of Elementor features there are 3 tabs for customization: content, style and advance. In the content part, we will define the content of the block. In our example, it will be some basic data that is important for the contact section. In the style tab, we will define alignment, font color and font style. There are a lot of options in the advance tab, and we will only use margin.
Any time you can duplicate the block you created. It can be useful if you want to have consistency when creating a website. Also, when you paste, you can paste just block style. Copying from one page to a completely different one is also possible, for example if you want to copy this block or the style of this block to the Gallery page, you can do that.

You can always see the page in different resolutions.

In social icons you can define social networks and links to them.
When defining the google map, you can enter the exact address or latitude and longitude coordinates. We will set zoom to 11. In the style and advance part, we will leave the default settings.

Now the right part of the page is created and we are going to create the left part.

In the WP Forms plugin, we need to create a contact form.
First, we choose one of over a thousand templates. Simple template will be used, but that will be changed a little. In the name section, we are changing the format to simple. We are adding a new field where it will be possible to enter numbers and there we will require users to enter a phone number. This field will not be required.
The Settings tab is used for other settings. In the general section, there are basic things such as form name, form description et cetera, and we will not change anything here. In spam protection and security there are options to improve form’s security, but we will not change anything there either. The Notifications section allows you to define the email address of the recipient of the message filled by the website visitor, and other details of the email in email notification. In the confirmation tab, you can define the Confirmation message, and we will leave the default text.
By clicking save, the form will be saved. After we have created the form, we are going to our contact page in order to add a contact form that we created.
The contact form has been added, and we will do some small changes in style of this block to make the contact form more attractive.

We have to create a Gallery of images on our gallery page. Although there are a lot of plug-ins for creating galleries, we will use Elementor and the gallery feature within it. We simply drag the image gallery into our page and we can start creating the gallery. We are adding pictures. After we have finished adding it, we need to do the gallery settings in the content, style, and advance tabs.

Now, the Contact and Gallery pages are created and let's see how it looks from the website visitor's point of view.

Видео How to Create WordPress Contact and Gallery Pages Using Elementor? канала WordPress & SEO
Страницу в закладки Мои закладки
Все заметки Новая заметка Страницу в заметки