Guidance Needed for Creating Author and Subcategory Pages with Enfold Theme

Hey bdfuel,

Thank you for the inquiry.

You can manually add the html using a Text or Code block element. Example:

<div class="avia-author-book-container avia-column-gap-no">
<div class="avia-column avia-col-50 avia-top-column avia-element avia-element-1fbc302" data-id="1fbc302" data-element_type="column">
<div class="avia-widget-wrap avia-element-populated">
<div class="avia-element avia-element-41719f0 avia-widget__width-initial avia-widget avia-widget-jet-listing-dynamic-image" data-id="41719f0" data-element_type="widget" data-widget_type="jet-listing-dynamic-image.default">
<div class="avia-widget-container">
<div class="jet-listing jet-listing-dynamic-image">
                        <a href="https://demo.crocoblock.com/v2/only-books/book-authors/adiva-geffen/" class="jet-listing-dynamic-image__link">
                            <img width="100" height="100" src="https://demo.crocoblock.com/v2/only-books/wp-content/uploads/2022/04/Adiva_geffen-100x100.jpg" class="jet-listing-dynamic-image__img attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt="Adiva_geffen" decoding="async" srcset="https://demo.crocoblock.com/v2/only-books/wp-content/uploads/2022/04/Adiva_geffen-100x100.jpg 100w, https://demo.crocoblock.com/v2/only-books/wp-content/uploads/2022/04/Adiva_geffen-150x150.jpg 150w, https://demo.crocoblock.com/v2/only-books/wp-content/uploads/2022/04/Adiva_geffen-230x230.jpg 230w" sizes="(max-width: 100px) 100vw, 100px" loading="eager">
                        </a></div>
</div>
</div>
</div>
</div>
<div class="avia-column avia-col-50 avia-top-column avia-element avia-element-09dc9ac" data-id="09dc9ac" data-element_type="column">
<div class="avia-widget-wrap avia-element-populated">
<div class="avia-element avia-element-049d92b avia-widget avia-widget-jet-listing-dynamic-link" data-id="049d92b" data-element_type="widget" data-widget_type="jet-listing-dynamic-link.default">
<div class="avia-widget-container">
<h4 class="jet-listing jet-listing-dynamic-link">
                        <a href="https://demo.crocoblock.com/v2/only-books/book-authors/adiva-geffen/" class="jet-listing-dynamic-link__link">
                            <span class="jet-listing-dynamic-link__label">Adiva Geffen</span>
                        </a></h4>
</div>
</div>
<div class="avia-element avia-element-5b03505 avia-widget avia-widget-heading" data-id="5b03505" data-element_type="widget" data-widget_type="heading.default">
<div class="avia-widget-container">
                    <span class="avia-heading-title avia-size-default">1 books</span></div>
</div>
</div>
</div>
</div>

Then add this css code:

.avia-author-book-container {
    display: flex;
    flex-wrap: wrap;
}

.avia-column.av-ia-col-50 {
    width: 50%;
    padding: 10px; /* Adjust the padding as needed */
}

.avia-widget-wrap {
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .avia-column.av-ia-col-50 {
        width: 100%; /* Stack columns on smaller screens */
    }
}

You can use the 1/4 Column element for each author.

Best regards,
Ismael

Hi,

Thank you for the inquiry.

We tried logging in but the password for the username is incorrect:

ERROR:The password you entered for username XXXXX is incorrect. Lost Your Password?

Please check the info carefully or provide another admin account.

Best regards,
Ismael

Hi,

Thank you for the update.

We created a test page with the custom HTML and we also added the styles in the Quick CSS field. (see private field)

Best regards,
Ismael

Hi,

Thank you for the update.

Yes, you should update the links and the image URL in every Code Block element with your own URL and author images. Unfortunately, there is no option for this by default, so you will have to edit the html manually.

Best regards,
Ismael

Hi,
Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike