Guide Creator: Creating and Editing 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.
Screen Shot 2024-10-17 at 11.19.09 AM

In the Guide Covers section, 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.


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

Untitled-Aug-16-2024-08-25-55-0144-PM

Here you can select:

  • Cover Image

  • Logo

  • Logo Position/ Logo Alignment

  • Background Color


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


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

Title


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

Spine


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


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.

Screen Shot 2024-10-17 at 11.22.57 AM

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"]