4. OpenGraphiq Items

SECTION 01OpenGraphiq Image Editor

Drag and drop editor which offers you impressive flexibility in terms of layout creation

You will be working with OpenGraphiq image editor every time you create a new or modify existing OpenGraphiq template.

https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/09/4.1.png

One thing to note is that the dimensions of the OpenGraphiq templates are 1200 x 630 px which is a recommended resolution both for OG and Twitter Card images.

Above the canvas, you can find the buttons which allow you to place the new elements onto the canvas.

https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/09/4.2.png

On the right side of canvas, there is a Layers box which displays all the existing Layers and their properties.

https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/09/4.3.png

You can:

  1. select the elements on the canvas either by clicking on them or by clicking on its respective layer in the Layers box
  2. drag and drop the layers in the Layers box to change their stacking order
  3. use cursor arrows in addition to your mouse to finetune the placements of the elements on canvas
  4. elements will automatically snap to other elements on the canvas to help you with positioning
  5. in addition to using your mouse, you can resize, rotate and position elements by setting respective values in on the Position tab in Layers box

Testing the OpenGraphiq template

Below the canvas, you can define the post id, so you can test the template with the actual post data. 

Once you enter the post id in the field, click test the template to preview the OG image based on the specific post data.

https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/09/4.4.png

SECTION 02Text Element

It allows you to use static text on your templates.

Things that you can define for the Text element are:

Data Tab

  1. Caption
  2. Font (family, size, line height, weight, transform and style)
  3. Decoration (underline and line-through)
  4. Alignment (horizontal and vertical)
https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/09/4.5.png

Design Tab

  1. Color, Opacity, Background Color, Background Opacity
  2. Border width, style, color and radius
  3. Shadow
  4. Padding
https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/09/4.6.png

Position Tab

  1. Width and height
  2. Position
  3. Rotation
https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/09/4.7.png

SECTION 03Dynamic Text Element

It allows you to use dynamic text on your templates. It will be replaced with the data from your specific post once the image is generated.

It supports the following post properties:

  1. Post title
  2. Post excerpt
  3. Post author display name
  4. Post date
  5. Custom / Meta field value (once you choose this option additional field will become available where you can define the desired field name / key)
  6. Product description
  7. Product regular price
  8. Product display price (if the product price is reduced – the product is on sale)

Things that you can define for the Dynamic Text element are:

Data Tab

  1. Post field (post property you wish to display)
  2. Sample text (the text which will be displayed as the placeholder in the OpenGraphiq Template Editor)
  3. Font (family, size, line height, weight, transform and style)
  4. Decoration (underline and line-through)
  5. Alignment (horizontal and vertical)
https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/09/4.8.png

Design Tab

  1. Color, Opacity, Background Color, Background Opacity
  2. Border width, style, color and radius
  3. Shadow
  4. Padding
https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/09/4.9.png

Position Tab

  1. Width and height
  2. Position
  3. Rotation
https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/09/5.0.png

SECTION 04Taxonomy Element

It allows you to display taxonomies of the specific post once the image is generated

It supports the following post taxonomies:

  1. Categories
  2. Tags
  3. Product categories
  4. Product tags

Things that you can define for the Taxonomy element are:

Data Tab

  1. Taxonomy (post taxonomy you wish to display)
  2. Font (family, size, line height, weight, transform and style)
  3. Decoration (underline and line-through)
  4. Alignment (horizontal and vertical)
https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/09/5.1.png

Design Tab

  1. Color, Opacity, Background Color, Background Opacity
  2. Border width, style, color and radius
  3. Shadow
  4. Padding
  5. Single taxonomy item background color, background opacity, padding and background radius
https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/09/5.2.png

Position Tab

  1. Width and height
  2. Position
  3. Rotation
https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/09/5.3.png

SECTION 05Image Element

It allows you to use static images on your templates

Things that you can define for the Image element are:

Data Tab

  1. Image from the Media Library
  2. Border width, style, color and radius
https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/09/5.4.png

Position Tab

  1. Width and height
  2. Position
  3. Rotation
https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/09/5.5.png

SECTION 06Dynamic Image Element

It allows you to use dynamic images on your templates. It will be replaced with the bitmap from your specific post once the image is generated

It supports the following post properties:

  1. Featured Image
  2. Author Avatar

Things that you can define for the Dynamic Image Element are:

Data Tab

  1. Post field (post property you wish to display)
  2. Default background image (the image which will be displayed as the placeholder in the OpenGraphiq Template Editor)
  3. Border width, style, color and radius
https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/09/5.6.png

Position Tab

  1. Width and height
  2. Position
  3. Rotation
https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/09/5.7.png

SECTION 07Rectangle Element

It allows you to use rectangular shapes on your templates

Things that you can define for the Rectangle element are:

Design Tab

  1. Color, Opacity
  2. Border width, style, color and radius
https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/09/5.8.png

Position Tab

  1. Width and height
  2. Position
  3. Rotation
https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/09/5.9.png

SECTION 08Testing the template

You can easily test your template against the desired post

While you are working on the template you can test it against the desired post.

The first step is to define the id of the post you want to use for testing purposes. Enter your post id into the “Enter post id and test the template” field

https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/11/test_id.jpg

Once the id is defined, you can always preview your template in action by clicking “Test the template” button. The generated image will reflect the attributes of the provided post applied to the currently opened template.

https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/11/test_final.jpg