Delphine Theme Documentation

Introduction

Thank you for purchasing the Delphine theme! Please note that this documentation covers all the main settings for the theme, but it does not cover instructions about working with WordPress, as this is a very extensive topic. If you are new to WordPress, it is best to first get familiar with the WordPress system, so you can have at least basic knowledge about how it works and then proceed with installing the theme.

Still Have Questions? Contact me at [email protected]. I will do my very best to reply as promptly as possible.

Installation

Your purchase includes the open_to_begin_delphine zip file, which contains all of the files that come with your purchase. Please open this zip file to move forward with setting up your website. The zip file package contains the following folders:

1. Theme Tutorial - Visit the /theme-tutorial folder, and click on the theme-tutorial.html file to view the theme tutorial in your web browser.

2. Delphine Theme - The /delphine-theme folder includes the zip file for the WordPress theme (delphine.zip) When you are installing the theme in WordPress, make sure you use the delphine.zip file.
3. Theme Demo Files - The /demo-files folder includes all of the theme XML and JSON files. If you are required to manually import the demo files, all of the theme files can be accessed here. Refer to the Demo Import section below for additional assistance with manually importing files.

In the WordPress Dashboard, navigate to the Appearance > Themes page. Select Add New at the top of the page. Select Upload Theme at the top of the page. Press the Choose File button and browse to select the delphine.zip file. Press the Install Now button to upload and install the theme.

After uploading the theme, you must activate it. Navigate to the Appearance > Themes page to activate the theme.

Theme Plugins

As described in detail below, there are six recommended plugins for use with the theme. It is recommended that you install and activate all plugins to use the full functionality of the theme.

To install the plugins, click Begin installing plugins -- Install and activate all plugins before continuing. Alternatively, go to Appearance > Install Plugins to install and activate all of the recommended/required plugins for the theme.

• Elementor Page Builder - This plugin is required to create the Elementor landing pages and templates included with the Delphine theme. Visit the Setting Up Elementor section below to learn more about getting started with the plugin.
• Elementor Pro - A subscription to Elementor Pro is required to use the Delphine theme. Purchase your subscription directly from Elementor. After your purchase, make sure you upload and activate the Elementor Pro plugin on your website.
• Delphine Fonts - This plugin is required to display custom fonts on your website. Go to Appearance > Install plugins to add this plugin to your website. Refer to the Delphine Fonts section below for assistance with uploading font files and customizing the font styles on your site.
• WPZOOM Social Feed Widget - This plugin is required if you want to use Instagram in your Sidebar or Footer. Refer to the Sidebar and Footer sections below for assistance with these items.
• One Click Demo Import - This plugin allows you to easily import all theme demo files with a simple click! Refer to the Demo Import section below for assistance with importing the theme demo content.
• MailChimp For WordPress - The theme includes styling for the MailChimp subscription form featured throughout the theme demo. Refer to the MailChimp section below to configure the subscription form on your site.

Setting Up Elementor

This section will show you how to configure the Elementor plugin before importing and eding the demo content. These steps are important to ensuring the theme layouts are properly configured on your website. Please watch the video or follow the steps shown in the screenshots below before moving forward to additional steps.

Before starting, I recommend temporarily deactivating the Page Optimize and Starter Templates plugins. The plugins can conflict with setting up Elementor and importing the theme pages onto your site. You are welcome to re-activate these plugins after you have finished setting up the theme!

If you have these plugins on your site, please go to Plugins > Installed Plugins in the WordPress Dashboard. Find the two plugins and click the Deactivate link for each one.

The Elementor Pro plugin must be purchased directly from the Elementor website. After purchasing a subscription, please download the plugin zip file directly from the Elementor website. Next, install and activate the Elementor Pro plugin on your own website.

Once the Elementor Pro plugin is active, please navigate to Elementor > License to connect your website to your Elementor Pro account. As shown in the screenshot below, click Connect & Activate. Follow the instructions to activate your license.

By default, Elementor adds its own font and color selections, which are different from the custom styles that are packaged with the theme. Therefore, it is best to disable the default Elementor fonts and colors before customizing your website.

Navigate to Elementor > Settings. As shown in the screenshot below, check the box for the following two plugin options:

1. Checking this box will disable Elementor's Default Colors, and make Elementor inherit the colors from your theme.
2. Checking this box will disable Elementor's Default Fonts, and make Elementor inherit the fonts from your theme.

Please go to Elementor > Settings and click on the Features tab. Scroll down to the Stable Features seciton.

As shown in the screenshot below, make sure the Container option is set to green. If the option is not turned on by default, please use the drop-down menu to activate Elementor Containers on your website.

To upload the global Elementor settings for the theme, navigate to Elementor > Tools and click on the Website Templates tab. Under Import website templates, click on the Import button to continue with the import.

As shown in the screenshot below, the Elementor kit zip file is included with the theme purchase. Please navigate to the /demo-files folder and then the /elementor-templates folder.

On the Import a Template Kit screen, select the delphine-elementor-kit.zip file from the theme purchase file downloaded to your computer.

On the next screen, it will confirm that you already have the Elementor plugin and the Elementor Pro plugin installed on your website. Before moving forward, please make sure you have all of the plugins (listed in the Plugin section of the theme tutorial) activated on your website.

When you have all of the necessary plugins activated on your site, click the Next button to move forward.

On the next screen, it will show you that you are uploading a kit of global Elementor settings to your website. Click the Import button to finalize the import of these global settings.

On the final screen, you will see a success message that the Elementor kit has been successfully added to your site. You can click Got it to exit out of the Import Kit screen.

After configuring the Elementor plugin, navigate to Appearance > Import Demo Data to import the basic templates on your site.

As shown in the screenshow below, hover over the first thumbnail image and click the blue Import Demo button. This thumbnail image will add the following theme templates to your site: Header, Footer, Archive, 404, and Coming Soon. Once the import is completed, you will see a white screen with a green checkmark that says Import Complete.

To finalize the import of the templates, navigate to Templates > Theme Builder. Locate the Delphine Header Template. Click on the Edit Conditions link.

Confirm that the Header Template is set to display on the Entire Site. Finally, click the purple Save and Close button to finalize the import of the initial Elementor templates.

Delphine Fonts

There are two custom fonts shown in the theme demo, the Idealist font for the serif headings and the Modernline font for the script text. While the fonts are shown in the theme demo, they must be purchased separately. Due to copyright license, premium fonts cannot be redistributed with any WordPress theme.

When using the Delphine theme, you can use the custom fonts shown in the theme demo or upload your own brand fonts instead.

Custom fonts are displayed with the Delphine Fonts plugin. Before moving forward, please ensure this plugin is activated on your site. If you have not added it yet, go to Appearance > Install Plugins to download the Delphine Fonts plugin.

To begin, navigate to Appearance > Customize and click on the Delphine Fonts section. To upload your font files, click on the Upload Font Files (Start Here) section.

Using the Customizer options, click the "Select File" button to select a font file from your Media Library. Next, use the "Select File Type" dropdown menu to select the type of your font file.

The theme is compatible with all four types of font files: WOFF, WOFF2, TTF, and OTF. If your custom font provides multiple file types, I recommend using the WOFF or WOFF2 file.

Finally, use the "Add Font Name" textbox to give your font a unique name.

To integerate the custom theme font on your website, please make sure you call them Idealist and Modernline in the "Add Font Name" textboxes. The images below show the exact settings used in the theme demo.

After you are finished making any changes in the WordPress Customizer, please click the blue "Publish" button to save all changes. After the font settings are published, please refresh the page as well.

To customize the font styles, access the "edit with Elementor" screen for any Elementor page or template. Click on the hamburger icon in the top, left of the screen. Click on Site Settings to access the global Elementor settings.

All of the custom fonts uploaded to the WordPress Customizer will be available automatically for use in Elementor. The fonts are added at the very bottom of the "Family" dropdown menu under the subtitle Delphine Custom Fonts.

Customize General Website Fonts

If you click on the Typography tab you can make changes to the global text color and typography settings for all paragraph text and headings on the website. As shown in the screenshot below, you can use the Typography options to update items such as the Font Family, Font size, etc.

Customize Delphine Theme Fonts

To customize the font styles of text elements that are specific to the Delphine theme, navigate back in the Site Settings menu and click on the Global Fonts tab. Each item in the list corresponds to text within the Delphine theme pages. Changes made within this settings menu will be applied throughout all pages and templates of the Delphine theme.

For example, as shown in the screenshot below, if you update the font family of the Standard Section Title, it will update the style of the section headings across all theme pages and templates.

Customize Individual Elements

All text widgets and headings within Elementor have a Style tab that allows you to make individual changes to each element. When editing in the normal "edit with Elementor" screen, select any text or heading within the Navigator. Click on the Style tab.

For example, as shown in the screenshot below, I have selected an individual text editor within the Navigator. I have updated the font weight to 700 to create bold text. Using the individual Style settings will add the unique style to this paragraph, only.

There are some areas of the website that are created outside Elementor, including the Single Post, Sidebar, and Subscription Forms. To make changes to the font styles of these non-Elementor areas, go to Appearance > Customize > Delphine Fonts.

For each font option, there are 6 customization options, including the following items:

1. Font Size: The desktop font size is the size of the text for screen sizes of 1051px and greater.
2. Font Size (Tablet): The tablet font size is the size of the text for screen sizes bewteen 768px and 1050px.
3. Font Size (Mobile): The mobile font size is the size of the text for screen sizes 767px and below.
4. Letter Spacing: The letter spacing property increases or decreases the space between the characters in the text.
5. Line Height: The line height property specifices the height of a line of text.
6. Text Transform: The text transform property determines the capitalization of the text. The available options are none, uppercase, lowercase, and capitalize (transforms the first letter of every word to uppercase).

Global Colors

The video below provides an overview of Elementor Global Colors, and how you can use them to easily change the default colors. If you are planning to change the theme colors, please spend a few minutes watching this video. There's a good chance it will save you a lot of time!

Elementor Header Template

The theme comes with one header template built with the Elementor Pro plugin. Refer to the Setting Up Elementor section above for detailed guidance on how to import the header template onto your website. The video below shows you how to customize the header template with your own content and style.

Before finalizing your logo, here are a few key recommendations for the best results. You should use Photoshop or similar photo-editing software to crop and size your logo to prepare it for your website.

• The image file should be twice the size of your preferred logo width. For example, if you would like a logo that is 315px wide, your image file should be at least 630px wide.
• Using photo-editing software, remove all extra white space from the image file. Refer to screenshots below.

If you use an image file like the example below, it will make your actual image appear much smaller with so much white space surrounding it.

In contrast to the image above, the extra white space has been removed around the logo. The image file now contains just the logo itself, and the logo displays as it's actual size.

To create or edit a WordPress menu, navigate to Appearance > Menus. If this is a new website, you can create a new menu by clicking the create a new menu link shown in the screenshot below.

On the next screen, use the Menu Name textbox to give your new menu a unique name. Click the blue Create Menu button to create a new menu on your site.

After the menu has been created, use the Add menu items section on the left of the screen to add links to your navigation menu. The "Add menu items" section lists all existing posts and pages on your webiste.

To add a link to the navigation menu, check the box next to the page name and click the Add to Menu button.

As shown in the screenshot below, you can create dropdown menus by indenting links within the Menu structure. Whenever you are finished making changes to your navigation menu, click the blue Save Menu button to save your changes.

Instagram

Packaged with the theme, the WPZOOM Social Feed Widget plugin can be used in the Sidebar and the Footer. Upon theme installation, please ensure you install and activate the WPZOOM Social Feed Widget plugin.

Plugin Reference Page: WPZOOM Social Feed Widget

To configure the plugin, from the WordPress Dashboard, click on the Instagram Widget tab. As shown in the image below, click on the Connect with Instagram button to connect your Instagram account to your WordPress website.

You will be redirected to the Instagram website. If you are not already logged in, enter your username and password to login to the Instagram website.

After logging into Instagram, you will be will be prompted to allow the plugin permission to access your Instagram feed. As shown in the screenshot below, click the blue "Allow" button.

Once you have given the necessary permission, the plugin will display a success message that your Instagram account is now connected to WordPress. An example of the success message is shown below.

After connecting to your Instagram account, you will be redirected to the Feeds page. As shown in the screenshot below, on the left of the screen, click on the Select an Account button to continue forward.

On the next screen, click on the Instagram account you wish to use on your website.

To create an Instagram feed, click on the Design tab. Use the settings menu on the left of the screen to design a feed for your own website. The screenshot below shows the settings used in the Footer of the theme demo.

Click the Save button when you are finished making your selections.

For the final step in setting up Instagram on your website, navigate to Instagram Widget > Settings. Check the box for Load CSS and JS on all pages. Click on the blue Save Changes button to complete the setup of the Instagram plugin.

After configuring the WPZOOM Social Feed Widget plugin, refer to the Sidebar and Footer sections of the tutorial to use the plugin in each section of your website.

Elementor Footer Template

The theme comes with one footer template built with the Elementor Pro plugin. Refer to the Setting Up Elementor section above for detailed guidance on how to import the footer template onto your website. The video below shows you how to customize the footer template with your own content and style.

Follow the steps in the Instagram section above to connect your Instagram account and design an Instagram feed for the Footer.

Each Instagram feed will be assigned a unique WordPress shortcode. To get the shortcode for your site, go to Instagram Widget > Feeds. As shown in the screenshot below, click on the ellipses, and select Copy shortcode from the dropdown menu.

You will receive a success message that the shortcode was successfully copied.

To add the Instagram Feed to the Footer, navigate to Templates > Theme Builder, and edit the Footer Template.

Using the Elementor Navigator, select the Shortcode widget. As shown in the screenshot below, paste the Instagram feed shortcode into the Enter your shortcode box. After adding your unique shortcode, the Instagram feed will display on your website.

Click the Update button at the bottom of the screen to save the changes to the Footer Template.

Coming Soon

The theme comes with one Coming Soon template built with the Elementor plugin. Refer to the Setting Up Elementor section above for detailed guidance on how to import the Coming Soon template onto your website. The video below shows you how to customize the template with your own content and style.

After creating your desired Coming Soon template, navigate to Elementor > Tools and click on the Maintenance Mode tab.

Use the Choose Template dropdown to select your preferred template. Next, use the Choose Mode dropdown menu to activate the Coming Soon status on your website. If you are rebuilding your site with the Delphine theme, set it as Coming Soon. Click the blue Save Changes button to save your updated maintenance mode selections.

Demo Import

The theme uses the One Click Demo Import plugin as the default method to import all demo content onto your website. Before moving forward, please ensure you have installed and activated the plugin.

Important Note: The One Click Demo Import plugin will work with most websites and hosting services, but not all. If you run into any difficulties with the plugin, please skip to import Option #2 to manually upload the demo files instead.

To import the demo content onto your site, navigate to Appearance > Import Demo Data. Hover over a thumbnail icon, and click the blue "Import Demo" button.

You can ignore the prompt to download more plugins onto your website. Simply click the blue Continue & Import to add the demo content to your site.

After the import is successful, you will see a white screen that says Import Complete with a checkmark. Repeat these steps for as many theme pages and templates as you would like to add to your site.

After the demo pages are imported onto your website, they will have a default Page Title (i.e. "Delphine Blog") and the default Page Slug (i.e. /delphine-blog).

You should update the default Page Title and Page URL for each page, for example changing it from "Delphine Blog" to just "Blog."

To easily edit the Page Title and Page Slug, I recommend using the Quick Edit link. As shown in the screenshot below, visit the Pages section of the Dashboard. There is a Quick Edit link below each page. After you have made any changes in the Quick Edit options, click the blue Update button to save the changes.

Navigate to the main purchase file (open_to_begin_delphine) that came with your purchase. Under the /demo-files folder, you will find the XML and JSON files that can be used to manually import Elementor pages and templates onto your site.

To manually import the demo files, the recommended plugin is the WordPress Importer plugin. From the WordPress Dashboard, navigate to Tools > Import.

As shown in the screenshot below, if this your first time using the WordPress Importer plugin, click the Install Now link listed under WordPress in the listed tools.

After the plugin has finished installing, click the Run Importer link to begin importing the theme demo content.

On the next screen, click the Browse button to select the preferred demo XML file from your local computer. All of the theme demo XML files are included in the main zip file, within the /demo-files folder.

After selecting the file, click the blue Upload file and import button.

On the next screen, you can choose to assign the imported demo content to an existing user on your website.

As shown in the screenshot below, please check the box next to Download and import file attachments. After you are finished with your file sections, click the Submit button to import the content onto your site.

After the file has finished importing, you will see a message from the plugin that says "All Done. Have Fun!"

You may also see notifications like the screenshot below that certain items already exist on your site. WordPress will only import the same asset (such as image file) one time. It will not import duplicates of the same item. If you have already imported other demo files, you may see this notification. You can ignore these messages, your file was sucessfully imported.

Depending on your website configuration or hosting service, your website may not allow the demo images to be imported. If so, you will see the nofications as shown in the screenshot below - failed to import media.

In this case, everything about the import process worked -- you just did not get a copy of the demo image files in your Media Library. All of the Elementor pages and demo content can still be used in exactly the same way. The demo images are meant as placeholders, and are supposed to be replaced with your actual content.

If you want to use any of the demo images on your website, please reach out to customer support. I am happy to provide any desired image files to you!

Home Page

By default, the home page of your website will display the latest posts. You can customize the home page of your website by setting it to a static page. To change the home page of your website, follow the steps below:

• From the WordPress Dashboard, go to Settings > Reading.
• For the option “Your homepage displays,” select “A static page.”
• Select your preferred in the “Homepage” dropdown.
• Click “Save Changes” at the bottom of the page.

Elementor | General Edits

The Delphine Theme includes several pages and templates to build with the Elementor Plugin. For detailed instructions on using the drag and drop page builder, refer to the plugin home page here. The video tutorials below will show you to edit the content and styles of the pre-designed theme Elementor pages.

As you are editing, you may realize that you want to go back in time and undo recent changes made in the Elementor editor screen. I wanted to share a helpful tip - Elementor keeps a history of each page, making it easier to go back to earlier versions of each page.

To access the History settings, click on the Elementor icon in the top, left of the screen. In the drop-down menu, click on History.

There are two options to choose from - Actions and Revisions.

Actions are edits that you have made in the current editing session. If you click on any of the Actions in the list, the page will go back in time to when you took that action.

Revisions are every version of the page that you have previously Published. So as you are editing, each time you click Publish, it saves that version of the page to the Revisions tab. Therefore, it's great to regularly click "Publish" as you are editing. If you click on any of the Revisions, Elementor will go back in time to that version of the published page.

Scroll down to watch videos from the following theme pages:

• Overview of editing Delphine theme pages in Elemenetor (Part One + Part Two)
• Elementor Experience Page
• Elementor Investment Page
• Elementor Links Page
• Elementor Sales Page

Before watching the videos, refer to the Demo Import section above to add the custom pages to your site.

Elementor | Opt In

The Delphine theme includes two types of lead capture pages, which both feature a subscription form to help grow your following.

By default, the website header and footer are hidden from the Elementor Opt-In pages using the Elementor Canvas template. If you you want to display the header and footer on these pages, you can update the Page Layout.

As shown in the screenshot below, click on the gear icon in the bottom, left of the screen. Using the Page Layout dropdown, update the template from Elementor Canvas to Elementor Full Width. Click the Update button to save your template selection.

By default, a MailChimp subscription form is included in the Elementor Opt-In pages via the Elementor shortcode widget. To make changes to the form itself and the related settings, navigate to MC4WP > Form in the WordPress Dashboard.

The theme also supports Convertkit, MailerLite, and Flodesk. Refer to the relevant sections of the theme tutorial for assistance with changing from MailChimp to another provider. When editing any of the Elementor pages, you can replace the MailChimp shortcode with another shortcode to display a form from any other provider.

Elementor | Blog Page

The Elementor blog page that comes with the theme displays your blog posts with the Elementor Loop Grid.

When the Blog Page is first imported, the blog posts section will appear blank until making a quick update to the settings.

Please make sure the Loop Grid is selected within the Elementor Navigator. On the left of the screen, under the Choose a template option, start typing the phrase Delphine Blog Grid Template.

Once the Delphine Blog Grid (Template) appears as an option, please select the theme template. After the template is selected, if you have published blog posts on your site, they should appear on the screen.

Elementor | Category Page

WordPress automatically generates an archive page for every blog category, such as this Couples category page from the demo.

There is one Elementor Archive template that is included with the Delphine theme. Refer to the Setting Up Elementor section above for detailed guidance on how to import the Archive template onto your website.

The Elementor Archive Template sets the layout for all WordPress archive pages including: Category, Tag, Author, Archives, and Search Results.

To edit the Archive template, go to Templates > Theme Builder and click on the Archive tab. For the listed Delphine Archive Template, click Edit.

Archive blog posts are displayed with the Elementor Pro Loop Grid. To learn more about customizing the blog post colors and layout in Elementor Pro, refer to the video tutorial in the Blog Layouts section above.

Similar to the Blog page, when the Archive Template is first imported, the blog posts section will appear blank until making a quick update to the settings.

Please make sure the Loop Grid is selected within the Elementor Navigator. On the left of the screen, under the Choose a template option, start typing the phrase Delphine Blog Grid Template.

Once the Delphine Blog Grid (Template) appears as an option, please select the theme template. After the template is selected, if you have published blog posts on your site, they should appear on the screen.

Whenever you are finished making changes to the Archive Template, click the small triangle icon next to the Update button. Click on Display Conditions. On the pop-up screen that appears, please sure the template is set to display on All Archives. Click the Save & Close to save all changes for the Archive template.

Elementor | Contact

The Elementor Contact page includes a contact form built with the Elementor Pro Form Widget.

The imported contact form includes a placeholder email address. You must update the form settings with your own email address. This ensures you recieve an email notification when someone fills out your contact form.

When editing the Contact page in Elementor, select the Contact Form in the Elementor Navigator. Expand the Email tab to update the form settings. As shown in the screenshot below, update you email address in two places.

If you visit the Style tab of the Contact Form settings, you can customize the style of the form including the form fields, submit button, and after-submit messages displayed to the user.

The Elementor Pro Form Widget is a powerful widget with many options. If you are interested in further customizing the contact form, please refer to the video below from the Elementor docs.

Elementor | Portfolio

The theme provides a single project page and a portfolio page built with the Elementor Pro Portfolio widget.

Plese note: The Portfolio Widget creates a gallery of images that link to another post or page on your website. If you want to build a gallery of images that showcases images only, please refer to the Galleries section below.

Elementor | Galleries

The galleries shown on the theme galleries page are built with the Elementor Pro Gallery Widget.

The three galleries shown on the demo page are provided as template files with your purchase. If you refer to the main purchase file, refer to the /json-files folder inside the /demo-files folder. Next, open up the /galleries folder to find the three template files.

Please note, as shown later in this section - you can also drag and drop a new instance of the Pro Gallery widget onto any Elementor page. You are welcome to start with the theme template files, but it's not required.

To add the theme gallery templates to your website, go to Templates > Saved Templates. Click the Import Templates button at the top of the screen. On the next screen, browse to select one of the gallery json files from your local computer. Click Import Now to add the gallery template.

After the template has been imported onto your site, you can insert the theme template into any Elementor page. When you are editing an Elementor page, click on the folder "Add Template" icon at the very bottom of the screen.

In the pop-up screen, click on My Templates to view all templates you have saved to your website. Click the Insert button to add the template to your page.

After clicking the Insert button, you will see the Apply the settings of this Section too? pop-up screen as shown in the screenshot below. Make sure you click "Don't apply" when inserting new templates into your page.

Please click the Update button to save the latest changes to the page.

If you accidentally select "Apply" for "Apply the settings of this Section too?" in the screen above, Elementor will reset the page template - i.e. you will note your content suddenly shifts and/or you can see a sidebar on your screen.

You can quickly reset the page template in the Elementor page settings. Click on the gear icon at the bottom, left of the screen. For the Page Layout dropdown, make sure it is set to Elementor Full Width or Elementor Canvas to reset the width of the content. Click the Update button to save all changes.

Instead of importing the theme gallery templates, you can also drag and drop the Elementor Pro gallery widget into any Elementor post or page.

Use the + icon at the bottom of the page to add a new section to your page. Locate the Gallery widget in the list of Elements. Note, you can use the search funtion to quickly locate the Gallery widget in the full list of Elements.

As shown in the screenshot below, drag and drop the Gallery widget into the new section.

Refer to the video from the Elementor docs below. It provides advanced guidance on creating galleries with the Gallery Pro Widget.

Theme Colors

Change theme colors by visiting the Appearance > Customize page. After selecting new colors for your website, make sure you press the Save & Publish button at the top of the menu to save all changes.

Please note the WordPress Customizer should be used for color changes that are outside of the Elementor Editor screen. Follow the video tutorials for assistance with editing colors directly in Elementor pages and templates.

To customize the colors in the theme, click on the "Delphine Colors" section. You can change theme colors for the following sections:

• General Site Colors
• Elementor Colors
• Subscrption Form Colors
• Blog Layout Colors
• Single Post Colors
• Sidebar Colors
• Footer Colors
• Shop Colors

MailChimp

The default email marketing form included in the theme demo is a MailChimp form. As seen in the demo, the stylized MailChimp subscription form can be displayed within any Elementor Page. To create the stylized MailChimp subscribe form, follow the steps below:

Install and activate the MailChimp for WordPress plugin. Within the General Settings of the plugin, connect your MailChimp account to the plugin, using your MailChimp API Key.

Plugin Reference Page: MailChimp for WordPress

If you still need the form code, copy the code below and paste it into "Form code" box to replace the default plugin code. Click Save Changes to update your subscribe form.

After finalizing the subscription form, use the "Settings" and "Messages" tabs to configure the MailChimp plugin to your preferences.

copy the code
<p>
	<input type="text" name="NAME" placeholder="first name" required />
</p>
<p>
	<input type="email" name="EMAIL" placeholder="email address" required />
</p>
<p>
	<input type="submit" value="subscribe" />
</p>
code copied!

After creating a form, add the subscription form to any Elementor page or template using the Elementor shortcode widget. Ensure that the shortcode from the MailChimp for WordPress plugin is entered into the Elementor widget settings. As shown in the settings below, the form has an ID of 4608, and the shortcode has been copied into the Elementor settings.

To change the colors of the MailChimp subscription form, go to Appearance > Customizer and click on "Delphine Colors." Use the Subscription Form Colors section to change the border color and button colors in the forms.

ConvertKit

Although the default email marketing form included with the theme is a MailChimp form, you can easily switch to ConvertKit. Following the steps below, use the Elementor shortocde widget to insert a Convertkit form into any Elementor page or template.

ConvertKit maintains an official WordPress plugin, called ConvertKit. Plugin Reference Page: ConvertKit Plugin.

Please download and activate the official plugin. Go to Settings > ConvertKit to connect the plugin to your ConvertKit account. For more instructionds on setting up the plugin, please refer to the Add Your API Key section of this ConvertKit help article.

Within the "Landing Pages & Forms" section of your ConvertKit account, click the "Create New" button and then the "Form" button to create a new subscription form. When prompted to choose the display format, select "Inline" as shown in the screenshot below.

On the next screen, select Clare as the form template.

On the next screen, use the ConvertKit form builder to customize the Clare template to your preferences. First, you can select the "+" icon to add a name field to the form.

If you like, you can also use the form builder to change the order of fields (first name then email address).

The screenshots below show the recommended style settings for your Convertkit form. These are the styles that will best match with the rest of the Delphine theme. Feel free to update the colors to match your own personal brand.

The first screenshot shows the style used for the input fields (first name and email address). The second screenshot shows the style used for the subscribe button.

After building your form, click on the Embed tab. A dialog box will appear on your screen. As shown in the screenshot below, click on "WordPress" to get the shortcode for your form.

When you are editing an Elementor page, enter the ConverKit shortcode into the Elementor shortcode widget settings. An example is shown in the screenshot below.

If you previously installed the ConvertKit plugin and just created a new form, you may need to refresh the plugin settings to ensure it has access to your newest form. This happens when you enter the ConvertKit shortcode in the Elementor shortcode widget / Delphine Page Settings, and the form does not appear right away.

Go to Settings > Convertkit and click the Refresh forms button. Click Save Changes to ensure the plugin has access to all ConvertKit forms.

MailerLite

Although the default email marketing form included with the theme is a MailChimp form, you can easily switch to MailerLite. Following the steps below, use the Elementor shortocde widget to insert a MailerLite form into any Elementor page or template.

MailerLite maintains an official WordPress plugin, called Official MailerLite Sign Up Forms. Plugin Reference Page: MailerLite Plugin.

Please download and activate the official plugin. Click on MailerLite > Settings to connect the plugin to your MailerLite account. For more details on how to add your API key to the plugin settings, please refer to the video in this MailerLite help article.

Within your MailerLite account, click on "Forms" at the top of the account screen. Next, click on the Create embedded form button to create a new subscription form. Follow the screen instructions to give your form a unique name and select a subscriber group.

Use the MailerLite form builder to add fields and customize the text of your subscription form. First, you can click on the pencil icon to add a "Name" field to your form.

Using the settings menu on the right of the screen, click the Add field button to add a Name field to the form.

If you like, the MailerLite form builder to change the order of the form fields (First Name and then Email Address).

Additionally, all text (above the subscription form) is added to the page via Elementor. You do not need to use the MailerLite form builder to add text with the form. If you hover over the form text, you can click on the trash icon to remove the text.

The screenshots below show the recommended style settings for your Convertkit form. These are the styles that will best match with the rest of the Delphine theme. Feel free to update the colors and fonts to match your own personal brand.

The first screenshot shows the style used for the input fields (first name and email address). The second screenshot shows the style used for the subscribe button.

After creating the subscription form in your MailerLite account, navigate back to the WordPress Dashboard and go to MailerLite > Signup forms. Click the "Add New" button at the top of the screen. As shown in the screenshot below, select "Forms created in MailerLite" and then click the Create form button.

On the next screen, select your subscription form from the dropdown menu titled "Webform." After selecting your form, click the blue Save form button at the bottom of the screen. Please take note of the MailerLite shortcode. This is how the form will be added to your Elementor pages.

When you are editing an Elementor page, enter the MailerLite shortcode into the Elementor shortcode widget settings. An example is shown in the screenshot below.

Flodesk

Although the default email marketing form included with the theme is a MailChimp form, you can easily switch to Flodesk using the the steps below.

After you create a Flodesk form, you will be provided with code to add the form to your WordPress site. An example is shown in the screenshot below.

You can use a plugin to add the Flodesk Header code to your WordPress site. Please refer to this Flodesk help article and scroll to the "Adding the header code with a plugin" section.

Flodesk provides inline HTML code for each form. It is best to convert the HTML code into a WordPress shortcode, which will make it easier to add the form within the existing theme pages.

To convert the HTML code into a WordPress shortcode, you can use the Shortcoder plugin. Download and activate the plugin onto your site.

After activating the plugin, go to Shortcoder > Create shortcode. As shown in the screenshot below, make sure you are using the Code editor. Paste the Flodesk inline HTML code into the Code editor. Add a custom name and shortcode within the shortcode settings. Please take note of the Flodesk shortocde. This is how the form will be added to your Elementor pages.

When you are editing an Elementor page or template, enter the Flodesk shortcode into the Elementor shortcode widget settings. An example is shown in the screenshot below.

Single Posts

The Delphine theme has three single post layout options:

1. Post With Sidebar
2. Full-Width Post: Content is the full width of the theme, and there will be no sidebar display.
3. Full-Width Narrow Post: Content is a fixed, limited width and there will be no sidebar display. This post type allows you to implement the alignwide and alignfull options for Gutenberg blocks.

To customize the layout and display options for Single Posts, navigate to Appearance > Customize and click on Delphine Theme Options. On the next screen, click on Single Post Options.

As shown in the screenshot below, you can use the first dropdown menu to select any of the 3 theme layouts for your single posts.

Additionally you can choose to show or hide the following elements on your posts - featured image, post date, post category, tags, and related posts ("You May Also Like").

The Delphine Theme uses the WordPress Featured Image function. When adding a featured image to a single post, you should use images with at least 1200px width to accommodate the full width of the theme.

Author Information

To populate the author box that appears on individual posts, navigate to Users > All Users. Select Edit for the desired user.

Under the About Yourself section, fill in the Biographical Info text box to provide a description of the author. To upload an author image from your Media Library, you must use a plugin like One User Avatar. Otherwise, the image will default to the profile picture of your WordPress account.

Sidebar

From the WordPress Dashboard, navigate to Appearance > Widgets to add widgets to the WordPress sidebar. As shown in the screenshot below, click on the + icon to add new widgets. Enter in "Delphine" to the search bar to find the theme widgets.

The Delphine Theme includes 4 custom widgets and custom styling for the WPZOOM Social Feed Widget:

1. About Me

   Displays an "About Me" widget. You can add a title, image, and custom paragraph text. The image below shows the settings used in the theme demo. To get the Image URL of your preferred About Me image, go to Media > Library. Click on the image, and click the "Copy URL to clipboard" button from the image details on the right of the screen.

   

2. Recent Posts

   Displays the image, title, and date of recent posts published to your website. You can select to include all categories or a specific category. You can choose the number of posts to display within the widget. The image below shows the settings used in the theme demo.

   

3. Custom Image List

   Displays a custom image list of up to 5 items, including a custom background image, title, and link. The image below shows the settings used in the theme demo. To get the Image URL for each list tem, go to Media > Library. Click on the image, and click the "Copy URL to clipboard" button from the image details on the right of the screen.

   

4. Current Location

   Displays a widget title and a map of the world with a specific city listed. Add a current location and attach a custom web address to your current location. The image below shows the settings used in the theme demo.

   

5. WPZOOM Social Feed Widget

   Packaged with the theme, the WPZOOM Social Feed Widget plugin can be used to display your Instagram feed in the Sidebar and the Footer. Refer to the Instagram section above to connect your Instagram account to your WordPress website.

   To create a new feed for the Sidebar, navigate to Instagram Widget > Feeds in the WordPress Dashboard, click the blue Add New Feed at the top of the page. As shown in the screenshot below, on the left of the screen, click on the Select an Account button to continue forward.

   

   On the next screen, click on the Instagram account you wish to use on your website.

   

   To create an Instagram feed, click on the Design tab. Use the settings menu on the left of the screen to design a feed for your own website. The screenshot below shows the settings used in the Sidebar of the theme demo.

   

   Next, navigate to the Embed tab. As shown in the screenshot below, click the Copy button to copy the WordPress shortcode for this Instagram feed.

   

   Finally, use the WordPress shortcode block to add the Instagram feed to your sidebar.

   

6. Search Widget

   The screenshot below shows the settings used for the WordPress Search widget in the demo sidebar. The icons for "Toggle search label" and "Use button with icon" have been turned on. Additionally, the word "Search" was added in the "Optional Placeholder" textbox.

   

WooCommerce

The Delphine theme supports the eCommerce plugin WooCommerce, which allows you to add a functional shop to your website. The theme adds custom stylings so your shop will share a cohesive design with the rest of your site. All of the e-commerce functionality comes directly from the WooCommerce plugin.

Plugin Reference Page: WooCommerce Plugin

The video provides assistance with the basic setup of the WooCommerce plugin with the Delphine theme. Before adding / editing your shop content, I recommend watching this video.

1. Elementor Pro Cart Widget
2. Elementor Pro Checkout Widget
3. Elementor Pro My Account Widget
4. Elementor Pro Purchase Summary Widget

The video below shows you how to edit the Elementor Shop template and the Elementor Single Product template.

The WooCommerce plugin includes some default settings that should be updated to better match with the theme styles. Navigate to Appearance > Customize and click on WooCommerce..

Under the Product Images tab, the Main image width and Thumbnail width should both be updated to 900. This ensures the image sizes are large enough to fit with the theme design.

You can also use the Thumbnail cropping option to update the aspect ratio of your product images. By default, WooCommerce crops all product images to a 1:1 square. However, you can use this setting to update the aspect ratio to better fit your products.

Sources & Credits

• Unsplash
• Pexels

Change Log

The Change Log details the changes made to each updated version of the theme.

Updated April 16, 2025

• Updated the theme to support the Elementor Optimized Markup and WordPress 6.8+
• Minor Bug Fixes

Updated April 17, 2024

• Updated the theme for minor bug fixes and WordPress 6.5+

Updated August 23, 2023

• Updated the theme for minor bug fixes and WordPress 6.3+

Updated June 29, 2023

• Updated the theme to support the Elementor Flexbox Container and WordPress 6.2+

Updated January 18, 2023

• Updated the theme to support the WPZoom Instagram Feed (block with shortcode).

Updated March 25, 2022

• Minor bug fixes for Elementor 3.6+