Creating Custom Guide Covers

Create and customize your guide covers inside the AF Editor.

Now you can create and customize your Buyer/Seller guide covers within the AF Editor. Without further due, let's get into the instructions!

First, in your admin dashboard on the left side of your screen, navigate to Site Tools > Guide Creator > select Guide Covers.
1-Nov-30-2023-04-47-08-6243-PM

Selecting Manage Covers will lead you to a page called Cover Manager, where you will be able to see all the existing book covers, and as well duplicate, add new, edit, or delete.

NOTE: You can only DELETE newly added covers. Default Buyer/Seller covers cannot be deleted.

2-Nov-30-2023-04-47-23-6345-PM

Editing the Guide Covers

As you press the edit button, you will enter the AF Editor, where you will have all the tabs related to customizing the book cover on your left, and as well a live preview of the 3D model on the right side.

3-Nov-30-2023-04-47-49-0533-PM

The customization options are split into Design, and Settings - with each have their own respective labels.

4 (1)

Design

Cover

5 (1)

Here you can select:

  • Cover Image

  • Logo

  • Logo Position/ Logo Alignment

  • Background Color

6-4

For Logo Position, if you select the option White - The logo will be positioned inside the Cover Image. This is strictly recommended if you are using white logos.

7-3

Description

8-3

Adjust the text, color, size and position of the description for the cover.

Title

9-3

In these sections you can adjust the title in 2 parts (left and right side) - Text, Font Style, Color, and Size for each.

Spine

10-3

Customize the spine of the book in this section. You can adjust the top/bottom text, set the color/background color, and adjust the font size.

Ribbon

11-3

You can enable a small ribbon to be displayed on the top left corner, which will have it's on customization options, once enabled. You can reposition the ribbon to any other corner you would like to have it.

12-1

Additionally, you can edit the text/text size/text color, and the background color of the ribbon. (Recommended: 8-10 characters)

Settings

 

13-2

In the Settings tab, you will have options to control the size of the whole 3D Cover, and as well adjust the default, and hover angles.

14-2
  • Default Angle (deg) - The default rotation angle for the cover. (default is 15)

  • Hover Angle (deg) - Rotation angle when the mouse is hovered over the cover (default is 30)

Placing the covers on a page via shortcode

Every cover will have it's unique shortcode, which you can copy and place them on any page.

15-2

Shortcode example:
[3d_guide_cover id="xxxx"]

*Replace the xxxx with the 4 digit id number *

You can override the cover size by adding size=small/medium/large in the shortcode

[3d_guide_cover id="xxx" size="small"]
[3d_guide_cover id="xxx" size="medium"]
[3d_guide_cover id="xxx" size="large"]

Did this answer your question?😞😐😃