Back to contents

JetEngine. Options Page overview

This tutorial provides a detailed description of creating and customizing the Options pages with JetEngine plugin.

With JetEngine plugin you can build custom Options pages with meta fields and display the data from them on the pages with dynamic content. Create varied Options pages with different meta fields and use their values on the different pages and sections of the website globally.

Options Page overview

1 Step — Creating an Options page

To create an Options page, go to the JetEngine > Options Pages section in the WP Dashboard, where you can see the list with options pages. Click the Add New button.

options-pages-add-new

2 Step — General Settings tab overview

The settings window will appear right here. First of all, fill in the fields in the General Settings tab. Here you need to define the title of the options page, the page slug, the menu name. Moreover, it is available to select the parent page for a current page. Also, you can choose an appropriate icon, which will be visible in the admin panel. The Access capability option allows restricting access to the page. In the Menu position field, you can select the menu item, after which the options page will be disposed.

options-page-general-settings

3 Step — Fields tab overview

Scroll down and proceed to add custom meta fields in the Fields tab. Click the New Field button and set a new meta field. Determine the label and the name/ ID of the custom meta field. Then, select a certain object type (Field, Tab, Accordion, Endpoint).

options-page-fields

If you choose the Field object type, you can define the field type and adjust certain settings below.

In case you select the Tab object type, you can select a tab layout (horizontal/ vertical).

Customize the Options page

When the options page is set, click the Update Page button and go to enrich the meta fields of the created options page with the corresponding content via the WP Dashboard.

In our case, we click the Options item in the panel and here there is the company address meta field, where we paste a certain address. After that, click the Save button.

filling-the-custom-fields-of-the-options-page

Displaying the meta field values

1 Step — Editing the page in Elementor

Start with editing the certain page, the footer or the header, where you want to add information from the custom fields of the Options page, in Elementor.

We are going to enrich the footer with the company address. Hence, we go to the Crocoblock > My Library block in the WP Dashboard and click the Edit with Elementor option under the footer template.

editing-the-footer

2 Step — Setting the widget

You can use one of the JetEngine widgets or any widget, which supports dynamic content.
We use the Dynamic Field widget of JetEngine plugin. In the Content tab, we specify the Source: Options and the Option: company address.

dynamic-field-edit

1 Step — Viewing at the frontend

Now let’s view how it looks at the frontend.

footer-at-the-frontend

Great! Now you know how to use JetEngine Options pages function.