Versions Compared

Version Old Version 6 New Version 7
Changes made by

Oleksandr Samarin

Kostiantyn Borysenko

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents
minLevel1
maxLevel2
outlinefalse
styledefault
typelist
printabletrue

WordPress

1. Access Your WordPress Admin Dashboard

Log in to your WordPress site by visiting yourwebsite.com/wp-admin. Enter your username and password to access the admin dashboard.

2. Choose Where to Embed the HTML

You can embed HTML in various sections of your WordPress site, including:

...

3. Embed HTML in a Post or Page

Create or Modify a Post/Page:

  1. In the dashboard, navigate to either Posts or Pages.

  2. Click Add New or select an existing post/page to edit.

    image-20250116-132843.png

    image-20250116-132903.png

...

  1. Once you're in the editor, locate the preview field and switch to Text Mode (or Code Editor in some versions of WordPress).

    image-20250116-132944.png

  2. This will display the raw HTML code for the page.

Embed the Widget:

  1. Decide where the widget should be placed on the page. For example, below the header element.

  2. In the code, find the closing tag for the header element (</header>).

  3. Paste the widget's HTML code below the closing header tag.

...

  1. Click the Preview Changes button in the top-right corner to see how the widget will appear.

    Animation.gif

  2. If you're satisfied, click the Update button to save your changes.

    image-20250116-134629.png

Review the Embedded Widget:

  1. After saving, the page will reload.

  2. Use the permalink to view the updated page with the embedded widget.

Revert Changes if Needed:
If you want to remove or adjust the widget:

  1. Return to the Edit page.

  2. Delete or modify the widget's code in Text Mode.

  3. Click Update to apply the changes.

...

  1. From the dashboard, navigate to Appearance > Widgets.

    image-20250116-134734.png

  2. Click the + (Plus) button in the top-right corner.

    image-20250116-134812.png

Add a Custom HTML Block:

  1. In the search bar, type Custom HTML and select it.

  2. A new block labeled "Custom HTML" will appear.

Position the Widget:

  1. To adjust the position, click the Drag button and move the widget to the desired location.

    Animation3.gif

Insert Your HTML Code:

  1. Paste the widget's HTML code into the Write HTML… field.

  2. Click the Preview button to see how the widget will appear.

Apply Changes:

  1. Once satisfied with the preview, click the Update button to save the changes.

  2. A "Widget saved" notification will appear in the bottom-left corner of the page.

    Animation1.gif

View the Embedded Widget:
Use the page link to review the embedded widget in action.

Shopify

Embed the Widget in the Website's HTML Code

...