Documentación de Mai Lifestyle Pro

Tabla de contenidos

Introducción al tema de Mai

Mai Theme es un tema diferente al que estás acostumbrado. El poder de Mai Theme radica en su configuración de personalización flexible que incluye área de banner, plantilla única de «Secciones», configuración de contenido y códigos cortos potentes.

Con estas características únicas, Mai Theme simplifica la creación de sitios hermosos rápidamente. La demostración de Mai Lifestyle Theme es solo una de las posibilidades con Mai Theme, pero las posibilidades son infinitas. Tenemos documentos de ayuda que le muestran cómo está configurada cada página, y videos tutoriales para que pueda vernos hacerlo.

Tenemos una gran cantidad de videos en YouTube para mostrarle «cómo» consejos y trucos, «Detrás de escena» de la demostración del tema y cómo configurar rápidamente un sitio totalmente único.

Debido a que Mai Theme es diferente, puede haber algunas cosas que aprender. Esperamos que nuestra documentación proporcione la información que necesita. Si todavía está atascado después de leer la documentación, envíenos una nota y estaremos encantados de ayudarle.

Configuración predeterminada de WordPress

Si no está importando contenido de demostración, asegúrese de tener las páginas de inicio y de blog configuradas correctamente siguiendo estos pasos.

Crea una página llamada «Inicio» o similar si aún no tienes una.
Crea una página llamada «Blog» o similar si aún no tienes una.
Visite Panel de control> Configuración> Lectura y configure la configuración «Su página de inicio muestra» en » Una página estática».
Establezca «Página de inicio» en su nueva página «Inicio».
Establezca «Página de publicaciones» en su nueva página «Blog».
Guardar cambios.
Debería estar configurado de esta manera:

¡Ahora puedes usar nuestra plantilla de Secciones o crear tu propia página de inicio con Gutenberg o lo que quieras!

Instalación

Cómo instalar y activar Mai Theme, incluido Mai Theme Engine

Requisitos

Tenga lo siguiente listo o ya instalado.

Génesis

Una guía completa del marco de Génesis y su uso está disponible aquí https://www.studiopress.com/download/genesis-for-beginners-v2.pdf . La documentación de Mai Theme no cubre la configuración estándar de Genesis Theme a menos que Mai Theme amplíe su uso.

Mai Theme

Inicie sesión en su sitio web de WordPress. Primero deberá instalar Genesis Framework si aún no lo ha instalado, y luego instalar su Mai Theme comprado. Deberá activar Mai Theme cuando termine de instalar.

  1. En el menú de WordPress, haga clic en Apariencia> Temas.
  2. En la parte superior, haga clic en el botón Agregar nuevo.
  3. En la parte superior, haz clic en el botón Cargar tema.
  4. Haga clic en el botón Elegir archivo y busque el archivo para Mai Theme en su computadora; tendrá un final de «.zip».
  5. Haga clic en el botón Instalar ahora.

Finalmente, haga clic en el enlace de texto Activar.

Mai Theme Engine

Mai Theme requiere el complemento Mai Theme Engine para potenciar muchos de sus diseños, características y funcionalidades principales.

El complemento Mai Theme Engine se instalará y activará automáticamente cuando se active cualquier tema Mai.

Importar contenido de demostración

Hay 2 métodos disponibles para importar contenido de demostración de Mai Lifestyle Pro:

  1. Configuración de demostración automática a través de nuestro complemento Mai Demo Importer.
  2. Configuración de demostración manual a través de archivos xml / wie / dat y complementos públicos de importación / exportación.

OPCIÓN 1: plugin Mai Demo Importer

Nota: Mai Demo Importer funciona mejor con una instalación limpia de WordPress . Si ya tiene una configuración de sitio de WordPress y desea eliminar todo su contenido y comenzar de nuevo, puede usar el complemento WP-Reset para volver fácilmente a una instalación limpia.

  1. Si es posible / aplicable, opcionalmente use WP-Reset para comenzar con una instalación limpia de WordPress.
  2. Asegúrese de que su Tema Mai elegido sea el tema actual y activo.
  3. Descargue Mai Demo Importer haciendo clic en el botón de arriba.
  4. Visite su Panel de control> Complementos> Agregar nuevo> Cargar e instalar / activar el complemento.
  5. El importador debe activarse automáticamente. De lo contrario, vaya a Panel> Genesis> Importador de demostración de Mai o haga clic en Iniciar Importador debajo del nombre del complemento en Panel> Lista de complementos.
  6. ¡Sigue las instrucciones del importador y listo!

OPCIÓN 2: Importación manual

Para importar contenido de demostración, siga estos pasos:

  1. Descargue el archivo XML para Mai Lifestyle Pro o Mai Law Pro
  2. Vaya a Herramientas> Importar mientras está conectado a su Panel de administración.
  3. Elija «WordPress» de la lista.
  4. Sube el archivo que descargaste arriba.
  5. Se le pedirá que asigne los autores en el archivo de exportación a los usuarios del blog. Para cada autor, puede elegir asignar a un usuario existente en el blog o crear un nuevo usuario.
  6. Luego tendrá la opción de importar archivos adjuntos, así que haga clic en el cuadro «Descargar e importar archivos adjuntos».
  7. WordPress importará cada una de las publicaciones, comentarios y categorías en su blog.

Tenga en cuenta que el proceso de exportación / importación XML de WordPress (no Genesis) no es muy bueno en su forma actual. Importar solo incluye menús, páginas, publicaciones, categorías, etiquetas, comentarios. Es posible que las imágenes no se importen correctamente, y no incluye la configuración del widget, la asignación del menú o la configuración del tema. Puede importar la configuración del widget y del personalizador siguiendo los pasos a continuación. Esto no es un problema con Genesis o el tema, sino una restricción de WordPress en sí.

Importar configuraciones de personalización de demostración

  1. Visite su Panel de control> Complementos> Agregar nuevo e instale / active https://wordpress.org/plugins/customizer-export-import/
  2. Descargue el archivo de importación del personalizador para Mai Lifestyle Pro o Mai Law Pro
  3. Visite su Panel de control> Apariencia> Personalizar> Panel de exportación / importación e importe el archivo.

Importar widgets de demostración

  1. Visite su Panel de control> Complementos> Agregar nuevo e instale / active https://wordpress.org/plugins/widget-importer-exporter/
  2. Descargue el archivo de importación de widgets para Mai Lifestyle Pro o Mai Law Pro
  3. Visite su Panel de control> Herramientas> Importador y exportador de widgets e importe el archivo.

Importar contenido y configuraciones de la página de inicio

Mai Theme tiene una característica agradable incorporada que le permite importar / configurar fácilmente su página de inicio sin tener que lidiar con otros contenidos, configuraciones, widgets, etc. Estos son los pasos simples para configurar una página como nuestras demostraciones.

  1. Cree una página y configúrela para usar la Plantilla de secciones .
  2. Guarda / Actualiza tu página.
  3. Si usa WordPress 5+, actualice la página para habilitar los campos / configuraciones de Sección.
  4. Desplácese hacia abajo hasta el metabox Importar / Exportar secciones.
  5. Pegue el fragmento de importación que se encuentra en cualquiera de nuestros artículos de configuración de la página de inicio.
  6. Opcionalmente, marque la casilla para importar imágenes, así como contenido / configuración.
  7. Guardar / Actualizar la página.

¡Eso es! Debería ver una página que es casi idéntica a nuestra demostración.

Elija su código de importación a continuación

Mai Lifestyle Pro Theme

Mai Lifestyle – Página de inicio
Mai Lifestyle – Inicio Dos
Mai Lifestyle – Inicio Tres utiliza una página estándar para que pueda copiar y pegar el contenido, sin necesidad de importar secciones.

Mai Law Pro Theme

Mai Law – Página de inicio
Mai Law – Inicio dos
Mai Law – Inicio tres

Colocación de logotipo y menú

NOTA: La carga de la Identidad del sitio / Logotipo requiere Genesis 2.6 y superior. Si está utilizando una versión anterior de Genesis pero no muestra una actualización, vaya a Personalizador> Configuración de tema> Actualizaciones y asegúrese de que la casilla esté marcada como «Buscar actualizaciones». Luego, visite Panel de control> Actualizaciones y haga clic en «Verificar nuevamente» para que se muestre la actualización.

Visite el panel Personalizador> Marca del sitio , cargue su logotipo, recorte o salte el recorte y configure el ancho del logotipo.

Si la imagen de su logotipo ya tiene el tamaño correcto, elija «Saltar recorte».

Establezca el ancho de su logotipo.

Este es un video tutorial sobre cómo cargar su logotipo:

Con Mai Theme puede mostrar fácilmente su logotipo y / o menús en diferentes posiciones. Todo lo que se necesita es crear menús de navegación y establecer las ubicaciones de los menús. Los detalles sobre la configuración de menús se encuentran en nuestro artículo Menús .

Este video le mostrará cómo encontrar todas las ubicaciones de menú en Mai Theme:

Mai Theme admite 5 ubicaciones de menú: principal, encabezado izquierdo, encabezado derecho, pie de página y móvil. Las ubicaciones del menú Encabezado derecho y Encabezado izquierdo influyen en dónde aparece el logotipo. Por ejemplo, usar un menú con el menú Encabezado derecho forzará el registro a alinearse a la izquierda. Así es como usamos la ubicación del menú para influir en la ubicación del logotipo:

Menú derecho del encabezado – logotipo alineado a la izquierda:

Menú de encabezado izquierdo y encabezado derecho – centrado en el logotipo:

Menú de encabezado izquierdo: logotipo alineado a la derecha

Este video te muestra cómo hacerlo:

Consulte nuestra documentación de Menús adicionales para obtener instrucciones sobre cómo agregar íconos y clases de CSS a los elementos del menú.

Mai Lifestyle Theme Demo «Página de inicio»

CONFIGURACIÓN AUTOMÁTICA

Para importar automáticamente el contenido y la configuración de la página de inicio, haga triple clic en el siguiente fragmento y cópielo / péguelo en el metabox Secciones Importar / Exportar y actualice su página. Nota: ¡Esto sobrescribirá cualquier contenido de página existente!

{"home_url":"https:\/\/import.maitheme.com\/lifestyle","layout":"full-width-content","banner_id":false,"hide_banner":"1","hide_breadcrumbs":"0","hide_featured":"1","excerpt":"","images":{"1330":"https:\/\/import.maitheme.com\/lifestyle\/wp-content\/uploads\/sites\/3\/2017\/04\/brooke-lark-182428.jpg","618":"https:\/\/import.maitheme.com\/lifestyle\/wp-content\/uploads\/sites\/3\/2017\/05\/brooke-cagle-199262.jpg","1573":"https:\/\/import.maitheme.com\/lifestyle\/wp-content\/uploads\/sites\/3\/2018\/01\/brooke-cagle-157923.jpg"},"sections":[{"bg":"","image_id":1330,"image":"https:\/\/import.maitheme.com\/lifestyle\/wp-content\/uploads\/sites\/3\/2017\/04\/brooke-lark-182428.jpg","overlay":"","inner":"light","height":"lg","content_width":"md","align_content":"","align":"center","text_size":"lg","id":"","class":"","context":"","title":"","content":"<h1 class=\"banner-title\">Mai Lifestyle Pro<\/h1>\r\nMai Lifestyle Pro is among StudioPress\u2019 top-3 best selling themes for the last five months in a row, Mai Theme is currently powering some of the most high-traffic websites on the Internet."},{"bg":"#f0f0f0","image_id":"","image":false,"overlay":"","inner":"","height":"xs","content_width":"sm","align_content":"","align":"center","text_size":"xl","id":"","class":"","context":"","title":"","content":"<em>\u201cThe Perfect Theme for Wellness, Food\/Recipe, Fitness, Lifestyle, or Small Business Websites and Blogs.\u201d<\/em>"},{"bg":"#ffffff","image_id":"","image":false,"overlay":"","inner":"","height":"lg","content_width":"","align_content":"","align":"center","text_size":"","id":"latest-posts","class":"","context":"","title":"Latest Posts","content":"Read our latest tips, tricks, and musings below.\r\n\r\n[grid content=\"post\" number=\"9\" show=\"image, title, content, more_link\" content_limit=\"30\" slider=\"true\" slidestoscroll=\"3\" dots=\"true\" center_mode=\"true\"]"},{"bg":"#f0f0f0","image_id":"","image":false,"overlay":"","inner":"","height":"auto","content_width":"full","align_content":"","align":"","text_size":"","id":"","class":"","context":"","title":"","content":"[columns align_text=\"center\" gutter=\"0\"]\r\n[col image=\"618\" image_size=\"featured\"]\r\n[\/col]\r\n[col class=\"column\"]\r\n<div style=\"max-width: 300px; margin: auto; text-align: center;\">\r\n<h4>Never miss a post<\/h4>\r\n<em>Sign up to add style to your inbox.<\/em>\r\n[ninja_form id=2]\r\n\r\n<\/div>\r\n[\/col]\r\n[\/columns]"},{"bg":"#ffffff","image_id":"","image":false,"overlay":"","inner":"","height":"lg","content_width":"","align_content":"","align":"center","text_size":"","id":"","class":"","context":"","title":"Recipes","content":"We've been busy in the kitchen cooking up our new favorite recipes.\r\nCheck them out below, in a gorgeous swipeable slider.\r\n\r\n[grid content=\"post\" show=\"image, title, content, more_link\" content_limit=\"14\" taxonomy=\"category\" tax_field=\"slug\" terms=\"recipes\" number=\"9\" align=\"center\" slider=\"true\" slidestoscroll=\"3\" center_mode=\"true\"]"},{"bg":"","image_id":1573,"image":"https:\/\/import.maitheme.com\/lifestyle\/wp-content\/uploads\/sites\/3\/2018\/01\/brooke-cagle-157923.jpg","overlay":"","inner":"light","height":"lg","content_width":"sm","align_content":"","align":"center","text_size":"","id":"","class":"","context":"","title":"Unlock Your True Potential","content":"You are powerful beyond measure, you just need to believe it. Cut out the negative in your life and seek out what inspires you. Don\u2019t make excuses. Learn how to unlock your true potential, download our fake ebook below.\r\n\r\n<a class=\"button\" href=\"#\">Download Now<\/a> <a class=\"button alt\" href=\"#\">Learn More<\/a>"},{"bg":"#ffffff","image_id":"","image":false,"overlay":"","inner":"","height":"lg","content_width":"","align_content":"","align":"center","text_size":"","id":"","class":"","context":"","title":"Recipe Categories","content":"Looking for something to make for dinner? Maybe a healthy late night snack? Find a recipe by category below.\r\n\r\n[grid content=\"category\" parent=\"recipes\" columns=\"3\" show=\"image, title\" image_location=\"bg\" align_text=\"center, middle\"]"},{"height":"auto","content_width":"full","align":"center","class":"full-width-image","content":"<img class=\"alignnone size-banner wp-image-595\" src=\"https:\/\/import.maitheme.com\/lifestyle\/wp-content\/uploads\/sites\/3\/2017\/05\/brooke-cagle-39574-1600x533.jpg\" alt=\"woman in parking garage\" width=\"1600\" height=\"533\" \/>"}]}

CONFIGURACIÓN MANUAL

Explicaremos aquí cómo recrear la página de inicio de demostración de Mai Lifestyle Theme.

Empezando

  1. En su panel de WP, visite Páginas> Agregar nuevo.
  2. En Atributos de página, elija la plantilla Secciones. Consulte el artículo de la Plantilla de secciones para obtener detalles sobre esta plantilla.
  3. Guarde como borrador o publique para ver el metabox Secciones para que pueda comenzar a agregar su contenido.
  4. Asegúrese de que su nueva página esté configurada como Página principal estática en Panel> Apariencia> Personalizar> Configuración de la página principal> Una página estática y página principal.

Establezca la configuración de diseño de su página

Página de inicio Secciones Configuración y contenido

La página de inicio de demostración de Mai Lifestyle Theme consta de 10 secciones, creadas con el editor de secciones, que funciona como el editor clásico de cualquier página. Puede editar el contenido en modo Visual o Texto, y aplicar varias configuraciones a cada sección para configurar el Fondo, Superposición, Estilo interno, Altura, Ancho de contenido y Alineación de contenido. Además, hay configuraciones avanzadas para aplicar.

En su caso, pegue el contenido en la pestaña Texto del editor.

Sección 1

Título

Mai Lifestyle Pro Theme

Contenido

<em>“The Perfect Theme for Wellness, Food/Recipe, Fitness, Lifestyle, or Small Business Websites and Blogs.”</em>

Configuración

Background Color: None
Background Image: Select any image from the Media Library
Overlay Style: None
Inner Style: Light Box
Height: Large
Content Width: Small
Content Alignment: Center
Text Size: Large

Seccion 2

Título

None.

Contenido

<em>“The Perfect Theme for Wellness, Food/Recipe, Fitness, Lifestyle, or Small Business Websites and Blogs.”</em>

Configuración

Background Color: #f0f0f0
Background Image: None
Overlay Style: None
Inner Style: None
Height: Extra Small
Content Width: Small
Content Alignment: Center
Text Size: Extra Large

Seccion 3

Título:

Latest Posts

Contenido:

Read our latest tips, tricks, and musings below.

[grid content="post" exclude_categories="18" number="9" show="image, title, content, more_link" content_limit="30" slider="true" slidestoscroll="3" dots="true" center_mode="true"]

Note: We are using exclude_categories="18"  to make sure Recipes (category 18 on our site) are not shown in the Latest Posts section. You can remove this parameter or exclude your own categories by ID.

Configuración:

Background Color: #ffffff
Background Image: None
Overlay Style: None
Inner Style: None
Height: Large
Content Width: Default
Content Alignment: Center
Text Size: None

Seccion 4

La Sección 4 usa Columnas / códigos cortos de Col, e incluye un formulario creado con Ninja Forms. Ninja Forms no se distribuye con el tema, pero está disponible de forma gratuita en el repositorio de complementos de WordPress. Puede descargar este archivo de importación de formularios Ninja Forms aquí . Probablemente tendrá que cambiar la identificación de shortcode a su identificación de formulario real .

También necesitamos encontrar el id. De imagen de la imagen incluida a la izquierda. Puede consultar nuestra documentación de ayuda para encontrar la identificación de la imagen .

Título:

Ninguna.

Contenido:

[columns gutter="0"]
[col image="618" image_size="featured"]
[/col]
[col align_text="center, middle"]
<div style="max-width: 300px;">
<h4>Never miss a post</h4>
<em>Sign up for our weekly newsletter to add style to your inbox.</em>
[ninja_form id=2]

</div>
[/col]
[/columns]

Una versión simplificada aquí:

[columns gutter="0"]
[col image="618" image_size="featured"]
[/col]
[col align_text="center, middle"]
<h4>Never miss a post</h4>
<em>Sign up to add style to your inbox.</em>

<a class="button" href="#">Go Now</a>
[/col]
[/columns]

Settings:

Background Color: #f0f0f0
Background Image: None
Overlay Style: None
Inner Style: None
Height: Auto
Content Width: Full Width
Content Alignment: None
Text Size: None

Section 5

Title:

Recipes

Content:

We've been busy in the kitchen cooking up our new favorite recipes.
Check them out below, in a gorgeous swipeable slider.

[grid content="post" show="image, title, content, more_link" content_limit="14" categories="18" number="9" align_text="center" slider="true" slidestoscroll="3" center_mode="true"]

Note: We are using categories="18"  as 18 is the category ID of the Recipes on our demo. You can remove this parameter to show all posts, or display post from a specific category by ID.

Settings:

Background Color: #ffffff
Background Image: None
Overlay Style: None
Inner Style: None
Height: Large
Content Width: Default
Content Alignment: Center
Text Size: None

Section 6

Section 6 uses inner styling to create the text box, and button  class to render hyperlinks as buttons.

Title:

Unlock Your True Potential

Content:

You are powerful beyond measure, you just need to believe it. Cut out the negative in your life and seek out what inspires you. Don’t make excuses. Learn how to unlock your true potential, download our fake ebook below.

<a class="button" href="#">Download Now</a> <a class="button alt" href="#">Learn More</a>

Settings:

Background Color: None
Background Image: Select any image from the Media Library
Overlay Style: None
Inner Style: Light Box
Height: Large
Content Width: Small
Content Alignment: Center
Text Size: None

Section 7

Title:

Recipe Categories

Content:

Looking for something to make for dinner? Maybe a healthy late night snack? Find a recipe by category below.

[grid content="category" parent="18" columns="3" show="image, title" image_location="bg" align_text="center, middle"]

Note: We are using parent="18"  to only display child categories of the parent «Recipes» category, which has the ID of 18 on our demo. You can remove this parameter to show all categories, or display a specific category by ID.

Settings:

Background Color: #ffffff
Background Image: None
Overlay Style: None
Inner Style: None
Height: Large
Content Width: Default
Content Alignment: Center
Text Size: None

Section 8

Section 8 is simply an image added to the section content. Add an image to the section and choose the «banner» size. Then add full-width-image  class to the Additional Classes field for that section.

Title:

None.

Content:

Add any image from the Media Library.

Settings:

Background Color: None
Background Image: None
Overlay Style: None
Inner Style: None
Height: Auto
Content Width: Full Width
Content Alignment: None
Text Size: None
Additional Classes: full-width-image

Section 9

Section 9 displays our products. We use Woocommerce to power our Shop. Woocommerce is not included with Mai Theme.

Title:

Our Products

Content:

We've got just the right gifts to make the people in your life smile with joy. You won't be disappointed (and neither will they).

[grid content="product" columns="3" number="6" show="image, title, price, add_to_cart" align_text="center"]

<a class="button" href="https://maitheme.com/mai-lifestyle-pro/shop/">View All Products</a>

Settings:

Background Color: #ffffff
Background Image: Select any image from the Media Library
Overlay Style: None
Inner Style: None
Height: Large
Content Width: Default
Content Alignment: Center
Text Size: None

Section 10

Section 10 uses Mai Testimonials to populate a slider GRID. Mai Testimonials is not distributed with Mai Theme. Mai Testimonials IS available to purchase from maitheme.com. This plugin is currently in beta, so is not currently available to download. By purchasing now you are ensure the lowest price, and will be notified of its availability immediately upon release.

Title:

Testimonials

Content:

[grid content="testimonial" number="all" order_by="rand" columns="1" align="middle" slider="true" dots="true"] 

Settings:

Background Color: #f7f7f7
Background Image: None
Overlay Style: None
Inner Style: None
Height: Large
Content Width: Medium
Content Alignment: Center
Text Size: None

Comprehensive documentation on Grid and Columns/Col is available in here.

CONFIGURACIÓN AUTOMÁTICA

Para importar automáticamente el contenido y la configuración de la página de inicio, haga triple clic en el siguiente fragmento y cópielo / péguelo en el metabox Secciones Importar / Exportar y actualice su página. Nota: ¡Esto sobrescribirá cualquier contenido de página existente!

{"home_url":"https:\/\/maitheme.com\/mai-lifestyle-pro","layout":"full-width-content","banner_id":false,"hide_banner":"0","hide_breadcrumbs":"","hide_featured":"1","excerpt":"Mix, match, add or remove home page sections from each home page design. The \"Sections\" template in Mai Theme gives you the flexibility you need to make your website truly \"your website\".","images":[],"sections":[{"bg":"","image_id":"","image":false,"overlay":"","inner":"","height":"xs","content_width":"md","align":"center","text_size":"","id":"","class":"","title":"","content":"Sign up now to get all of our latest posts and recipes right to your inbox!\r\n[ninja_form id=3]"},{"bg":"","image_id":"","image":false,"overlay":"","inner":"","height":"md","content_width":"","align":"center","text_size":"","id":"","class":"","title":"Recent Recipes","content":"[grid content=\"post\" number=\"6\" show=\"image, title, content, more_link\" content_limit=\"16\"]"},{"bg":"","image_id":"","image":false,"overlay":"","inner":"","height":"auto","content_width":"full","align":"","text_size":"","id":"","class":"","title":"","content":"[grid content=\"post\" categories=\"18\" columns=\"1\" show=\"image, title\" image_size=\"banner\" image_location=\"bg\" inner=\"light\" align=\"center, middle\" slider=\"true\" fade=\"true\" autoplay=\"true\" overlay=\"gradient\"]"},{"bg":"","image_id":"","image":false,"overlay":"","inner":"","height":"md","content_width":"","align":"center","text_size":"xs","id":"","class":"","title":"In Season","content":"[grid content=\"post\" number=\"6\" columns=\"6\" offset=\"6\" show=\"image, title\" image_size=\"one-fourth\" gutter=\"10\"]"},{"bg":"","image_id":"","image":false,"overlay":"","inner":"","height":"md","content_width":"","align":"center","text_size":"","id":"","class":"","title":"Our Favorites","content":"[columns]\r\n[col]\r\n[grid content=\"post\" offset=\"12\" number=\"1\" columns=\"1\" image_size=\"one-half\" show=\"image, title, content, more_link\" content_limit=\"32\"]\r\n[\/col]\r\n[col]\r\n[grid content=\"post\" offset=\"13\" number=\"4\" columns=\"2\" show=\"image, title\" entry_class=\"text-sm\"]\r\n[\/col]\r\n[\/columns]"},{"bg":"","image_id":"","image":false,"overlay":"","inner":"","height":"auto","content_width":"full","align":"","text_size":"","id":"","class":"","title":"","content":"[grid content=\"category\" columns=\"3\" number=\"6\" parent=\"18\" show=\"image, title\" image_location=\"bg\" align=\"center, middle\" gutter=\"0\" bottom=\"0\"]"},{"height":"md","align":"center","title":"Contributors","content":"
"}]}

CONFIGURACIÓN MANUAL

Explicaremos aquí cómo recrear la página de demostración «Home Page Design Two» de Mai Lifestyle Theme.

Empezando

  1. En su panel de WP, visite Páginas> Agregar nuevo.
  2. En Atributos de página, elija la plantilla Secciones. Consulte el artículo de la Plantilla de secciones para obtener detalles sobre esta plantilla.
  3. Guarde como borrador o publique para ver el metabox Secciones para que pueda comenzar a agregar su contenido.
  4. Asegúrese de que su nueva página esté configurada como Página principal estática en Panel> Apariencia> Personalizar> Configuración de la página principal> Una página estática y página principal.

La ‘primera’ sección visual es en realidad el Área del banner (si la tiene habilitada en el Personalizador). Para editar el título / texto del área del banner simplemente edite el título de la página y el Extracto.

Página de inicio Secciones Configuración y contenido

La página de demostración de Mai Lifestyle Theme Home Two consta de 7 secciones, creadas con el editor de secciones, que funciona como el editor de cualquier página. Puede editar el contenido en modo Visual o Texto, y aplicar varias configuraciones a cada sección para configurar el Fondo, Superposición, Estilo interno, Altura, Ancho de contenido y Alineación de contenido. Además, hay configuraciones avanzadas para aplicar.

Sección 1

La Sección 1 incluye un formulario creado con Ninja Forms. Ninja Forms no se distribuye con el tema, pero está disponible de forma gratuita en el repositorio de complementos de WordPress. Puede descargar este archivo de importación de formularios Ninja Forms aquí . Probablemente tendrá que cambiar la identificación de shortcode a su identificación de formulario real.

Título:

Ninguna.

Contenido:

Sign up now to get all of our latest posts and recipes right to your inbox!
[ninja_form id=3]

Configuraciones:

Color de fondo: #(vacío)
Imagen de fondo: None
Estilo de superposición : Estilo None
interno: None
Altura: Extra Small
Ancho del Medium
contenido: Alineación del contenido: Center
Tamaño del texto:None

Nota: En el campo «Scripts de encabezado» del metabox «Scripts», agregamos el siguiente fragmento para hacer que el botón de enviar tenga el ancho completo de la columna.

<style>
.field-wrap.submit-wrap .ninja-forms-field[type="button"] {
	display:block;
	width: 100%;
}
</style>

Sección 2

Título:

Recent Recipes

Contenido:

[grid content="post" number="6" show="image, title, content, more_link" content_limit="16"]

Configuraciones:

Color de fondo: #(vacío)
Imagen de fondo: None
Estilo de superposición : Estilo None
interno: None
Altura: Medium
Ancho del Default
contenido: Alineación del contenido: Center
Tamaño del texto:None

Seccion 3

Título:

Ninguna.

Contenido:

[grid content="post" categories="18" columns="1" show="image, title" image_size="banner" image_location="bg" inner="light" align_text="center, middle" slider="true" fade="true" autoplay="true" overlay="gradient"]

Configuraciones:

Color de fondo: #(vacío)
Imagen de fondo: None
Estilo de superposición : Estilo None
interno: None
Altura: Auto
Ancho del Full Width
contenido: Alineación del contenido: None
Tamaño del texto:None

Sección 4

Título:

In Season

Contenido:

[grid content="post" number="6" columns="6" offset="6" show="image, title" image_size="one-fourth" gutter="10"]

Configuraciones:

Color de fondo: #(vacío)
Imagen de fondo: None
Estilo de superposición : Estilo None
interno: None
Altura: Medium
Ancho del Default
contenido: Alineación del contenido: Center
Tamaño del texto:Extra Small

Sección 5

Título:

Our Favorites

Contenido:

[columns]
[col]
[grid content="post" offset="12" number="1" columns="1" image_size="one-half" show="image, title, content, more_link" content_limit="32"]
[/col]
[col]
[grid content="post" offset="13" number="4" columns="2" show="image, title" entry_class="text-sm"]
[/col]
[/columns]

Configuraciones:

Color de fondo: #(vacío)
Imagen de fondo: None
Estilo de superposición : Estilo None
interno: None
Altura: Medium
Ancho del Default
contenido: Alineación del contenido: Center
Tamaño del texto:None

Seccion 6

Título:

Ninguna.

Contenido:

[grid content="category" columns="3" number="6" parent="18" show="image, title" image_location="bg" align_text="center, middle" gutter="0" bottom="0"]

Configuraciones:

Color de fondo: #(vacío)
Imagen de fondo: None
Estilo de superposición : Estilo None
interno: None
Altura: Auto
Ancho del Full Width
contenido: Alineación del contenido: None
Tamaño del texto:None

Seccion 7

Título:

Contributors

Contenido:

Esta sección utiliza una galería estándar de WordPress.

  1. En el editor, haga clic en Agregar medios
  2. En la barra lateral izquierda, haga clic en Crear galería
  3. Elige tus imágenes
  4. Insertar galería

Aquí está nuestro código abreviado de la galería como ejemplo, aunque sus ID de imágenes seguramente serán diferentes

Configuraciones:

Color de fondo: #(vacío)
Imagen de fondo: None
Estilo de superposición : Estilo None
interno: None
Altura: Medium
Ancho del Default
contenido: Alineación del contenido: Center
Tamaño del texto:None

Demostración del tema de estilo de vida Mai «Home Three»

Configure la página «Diseño de la página de inicio tres» como la demostración

Explicaremos aquí cómo recrear la página de demostración «Home Page Design Three» de Mai Lifestyle Theme. Esto no incluye el banner predeterminado agregado con el personalizador, los menús de navegación o los widgets. Consulte nuestra otra documentación para obtener instrucciones sobre el personalizador , los widgets y los menús .

Empezando

  1. En su panel de WP, visite Páginas> Agregar nuevo.
  2. Guardar como borrador o publicar la página.
  3. Asegúrese de que su nueva página esté configurada como Página principal estática en Panel> Apariencia> Personalizar> Configuración de la página principal> Una página estática y página principal.

La ‘primera’ sección visual es en realidad el Área del banner (si la tiene habilitada en el Personalizador). Para editar el título / texto del área del banner simplemente edite el título de la página y el Extracto.

Contenido de la página de inicio

Copie y pegue el siguiente contenido / shortcodes en el editor de página y personalice / edite como mejor le parezca.

Esta página incluye un formulario creado con Ninja Forms. Ninja Forms no se distribuye con el tema, pero está disponible de forma gratuita en el repositorio de complementos de WordPress. Puede descargar este archivo de importación de formularios Ninja Forms aquí . Probablemente tendrá que cambiar la identificación de shortcode a su identificación de formulario real.

[grid content="post" number="1" columns="1" show="image, title, excerpt, more_link"]

[grid content="post" grid_title="Dual Columns" number="2" columns="2" offset="1" show="image, title, excerpt, more_link" content_limit="16"]

[callout style="overflow:hidden;"]
<h2>Join our newsletter</h2>
Sign up now to get all of our latest posts and recipes right to your inbox!
[ninja_form id=3]
[/callout]

[grid content="post" grid_title="Triple Columns" number="3" columns="3" offset="3" show="image, title" entry_class="text-xs-center text-xs"]

[grid content="post" grid_title="Quadruple Columns" number="4" columns="4" offset="6" show="image, title" image_size="one-fourth" entry_class="text-xs-center text-xs" gutter="10"]

[grid content="post" grid_title="Sextuple Columns" number="6" columns="6" offset="10" show="image" image_size="one-fourth" image_location="bg" overlay="none" gutter="10"]

Diseño de página

Asegúrese de tener seleccionado el diseño de la barra lateral de contenido para mostrar la barra lateral en esta página.

Complementos utilizados en la demostración de tema de estilo de vida Mai

Este artículo describe los complementos gratuitos y de pago que recomendamos y que utilizamos en la demostración de Mai Lifestyle Theme.

La demostración del tema Mai Lifestyle Pro utiliza varios complementos que no están incluidos con el tema. Estos complementos prestan algunas funcionalidades y características a la demostración. Si desea volver a crear la demostración o duplicar las características de la demostración, puede considerar los siguientes complementos:

WooCommerce : WooCommerce se utiliza para crear la página de la Tienda y la sección «Nuestros productos» en la página de inicio. Hay varios widgets incluidos con WooCommerce, y hay
parámetros GRID específicos de WooCommerce (utilizados en la sección «Nuestros productos» GRID en la página de inicio). Consulte la documentación de WooCommerce para garantizar la configuración correcta de WooCommerce. El uso de WooCommerce también requiere el uso del complemento Genesis Connect para WooCommerce .

Genesis Connect para WooCommerce : se requiere Genesis Connect para WooCommerce cuando se instala WooCommerce. Este complemento reemplaza las plantillas de tienda integradas de WooCommerce con sus propias versiones listas para Genesis.

Iconos sociales simples– Simple Social Icons crea un widget para mostrar enlaces a sus perfiles sociales. Utilizamos el widget Simple Social Icons en el área del widget Before Header para mostrar nuestros enlaces sociales.

Recuentos compartidos: los recuentos compartidos se utilizan para compartir botones en publicaciones.

Tipos de publicaciones de cartera: el complemento Tipos de publicaciones de cartera se utiliza para crear la página Showcase en la demostración. Lea la documentación de este complemento para comprender su uso y configuración.

Cookbook : Cookbook es un complemento premium de pago. Es simplemente un excelente complemento de recetas. Lo usamos para crear la sección «Recetas» y «Categorías de recetas» en la página de inicio, y el widget de la barra lateral «Nuestras recetas favoritas» usando GRID. recetas a una categoría de publicación, y luego se muestran o excluyen usando GRID. Dado que Cookbook ya no es compatible, preferimos WP Recipe Maker y hemos escuchado cosas buenas sobre Tasty Recipes .

Mai Testimonials– Mai Testimonials le permite administrar y mostrar testimonios en su sitio web, creando una nueva área para agregar testimonios, incluyendo nombre, testimonio, byline (título de la persona) y enlace al sitio web. Sus testimonios se muestran fácilmente en una página a través del shortcode [grid], lo que significa que pueden estar en columnas, como un control deslizante, en un widget, etc … usted decide.

Mai Ads & Extra Content – Mai Ads & Extra Content permite ubicaciones de anuncios flexibles y áreas de contenido extra en los temas secundarios Mai Theme y Genesis. Muestre fácilmente anuncios o contenido antes o después de su encabezado, a la izquierda o derecha de su logotipo, después del área del banner, antes o después de sus publicaciones, dentro de sus publicaciones después de cualquier número de párrafos, en widgets, en su pie de página y prácticamente en cualquier lugar usted quiere.

La mayoría de estos complementos son gratuitos y se pueden obtener desde el repositorio de WordPress. ¡Simplemente visite la página de Complementos desde el Panel, haga clic en Agregar nuevo y busque!

Mai Lifestyle Theme Demo Personalizador y configuración de widgets

Configuraciones de personalizador y widget de la demostración de tema de estilo de vida Mai

Personalizar> Encabezado y pie de página de Mai:

Mai Banner Area

Personalizar> Área de banner Mai:

Publicaciones y páginas individuales

Personalizar> Tipos de contenido Mai> Entradas individuales Valor predeterminado:

Blog y archivos de categoría

Personalizar> Tipos de contenido Mai> Archivos Predeterminado:

Página de la tienda de WooCommerce

Personalizar> Tipos de contenido Mai> Configuración del producto:

(Barra lateral primaria) Nuestras recetas favoritas

Agregue el siguiente fragmento en un widget HTML o de texto personalizado al área del widget «Barra lateral principal» (modifique según sea necesario):

[grid content="post" categories="18" exclude_current="true" show="image, title" image_size="thumbnail" image_location="bg" columns="2" number="6" gutter="10" align_text="center, middle" entry_class="bottom-xs-xxs"]

(Barra lateral primaria) Publicaciones recientes

Agregue un widget de Génesis – Publicaciones destacadas al área del widget «Barra lateral principal» con la siguiente configuración (modifique según sea necesario):

(Después de la entrada) Publicaciones relacionadas

Agregue el siguiente fragmento de código en un widget HTML o de texto personalizado al área del widget «Después de la entrada» en Mai Theme con (modifique según sea necesario):

You may be interested in these posts from the same category.

[grid content="post" taxonomy="category" terms="current" exclude_current="true" number="12" gutter="xs" align_text="center" slider="true" center_mode="true"]

Agregue el siguiente fragmento en un widget HTML o de texto personalizado al área de widgets «Pie de página 1» en Mai Theme con (modifique según sea necesario):

<span class="text-lg"><em>"Every day is another chance to get stronger, to eat better, to live healthier, and to be the best version of you."</em></span>

<a class="button more-link small" href="https://maitheme.com/mai-lifestyle-pro/blog/">Be A Better You</a>

Agregue el siguiente fragmento de código en un widget HTML o de texto personalizado al área del widget «Pie de página 2» en Mai Theme con (modifique según sea necesario):

[grid content="post" exclude_current="true" show="image" image_size="thumbnail" image_location="bg" 

Configuración de encabezado y pie de página de Mai

Configuración del personalizador de encabezado y pie de página para Mai Theme

Estilo de encabezado

Opciones:

  • Encabezado estándar
  • Encabezado fijo (siempre disponible a medida que el usuario se desplaza, deshabilitado en el móvil)
  • Mostrar encabezado (se oculta al desplazarse hacia abajo y se revela al desplazarse hacia arriba rápidamente)
  • Encabezado adhesivo / encogible (siempre visible y se encoge más pequeño al desplazarse hacia abajo – dis)
  • Mostrar / Reducir encabezado (se oculta al desplazarse hacia abajo y revela una versión más pequeña al desplazarse hacia arriba.

Estilo de menú móvil

Obtenga más información sobre los menús aquí.

Opciones:

  • Estándar (menú desplegable para dispositivos móviles)
  • Lado (se desliza desde el lado derecho)

Nota: Esta configuración debe guardarse y la página debe actualizarse para que las áreas de widgets estén disponibles.

Opciones:

  • Ninguna
  • 1
  • 2
  • 3
  • 4 4
  • 6 6

Configuraciones singulares de contenido

Contenido (Blog / Categoría / Etiqueta) Archivos

Asegúrese de que su página de blog esté configurada como la «Página para publicaciones» en el Panel de control> Configuración> Lectura para que esta configuración funcione en el archivo principal del blog. La configuración en el personalizador es bastante clara. Se ven así:

Término Archives

Mai Theme le permite configurar ajustes de archivo personalizados para un término específico, diferente de los ajustes predeterminados en el Personalizador. Esta configuración existe al editar una sola categoría / término.

Marque la casilla Ocultar entradas para deshabilitar entradas y configuraciones de archivo adicionales en la página.

Para habilitar la configuración de configuraciones de archivo adicionales, marque la casilla Habilitar configuración de archivo.

Una vez que se habiliten configuraciones de archivo adicionales, configure el número máximo de entradas para mostrar por página en Entradas por página. Si se deja vacío, se usará el número establecido en Configuración> Lectura.

Configure el contenido del archivo para mostrar en columnas o herede la configuración de la configuración del archivo en Columnas de contenido. El contenido se puede mostrar en 2, 3, 4 o 6 columnas, o las columnas se pueden establecer en Ninguno para usar configuraciones heredadas.

Configure los ajustes de Imagen destacada para establecer si desea incluir la imagen destacada en las páginas de archivo, así como la ubicación de la imagen y el tamaño de imagen de la imagen destacada en las páginas de archivo.

Si Columnas de contenido está configurado en Ninguno, también puede configurar la alineación de la imagen como Izquierda o Derecha. Cuando las Columnas de contenido se establecen en algo diferente a Ninguno, esta configuración no está disponible.

Configure el contenido para mostrar Sin contenido, Contenido de entrada o Extractos de entrada, y si desea incluir el enlace Leer más en Extractos.

Configure los archivos para eliminar la información de la publicación y / o eliminar la meta de la publicación seleccionando las casillas de verificación en Entrada meta.

Cómo personalizar la plantilla de archivo de una categoría en Genesis Mai Pro Child Theme

El área del banner se puede habilitar o deshabilitar globalmente a través del Personalizador . Si está habilitado, se puede configurar globalmente o por página / publicación agregando una imagen de la biblioteca de medios o cargándola.

Estas son algunas de las muchas posibilidades:

Cree pancartas personalizables y hermosas de ancho completo fácilmente con Mai Theme.

El área de pancarta está habilitada globalmente de manera predeterminada, y puede deshabilitarse globalmente desmarcando la casilla Habilitar área de pancarta. La habilitación global del área de pancarta crea un área de pancarta predeterminada de ancho completo que se puede personalizar con un color o fondo de imagen con superposiciones y / o estilo de cuadro interno con muchas opciones. Habilitado, sin ninguna opción, el banner utiliza un fondo gris oscuro y un estilo interno claro, y muestra el título de la publicación y el extracto manual de forma predeterminada.

Los títulos y las descripciones del Área del banner se pueden personalizar de varias maneras, según el tipo de contenido que esté editando.

Páginas / Publicaciones / CPT

Para páginas / publicaciones individuales y tipos de publicaciones personalizadas, el título del banner usa el título real de la página / publicación, y la descripción usa el metabox Extracto .

Si no ve el cuadro meta Extracto, asegúrese de que esté habilitado (desactivado) en la pestaña Opciones de pantalla de cualquier página.

Archivos de categoría / etiqueta / taxonomía

Todos los archivos de categoría / etiqueta / taxonomía usan el nombre del término como título del banner, pero el contenido del banner se puede personalizar con los campos Genesis «Archive Headline» y «Archive Intro Text» disponibles al editar una categoría / etiqueta / término.

Archivos de tipo de publicación personalizada

Muchos tipos de publicaciones personalizadas funcionan de fábrica con Mai Theme. Sus títulos y descripciones de pancartas funcionan de manera idéntica a cómo funcionan los archivos de categoría / etiqueta / taxonomía, utilizando los mismos campos de Titular de archivo y Texto de introducción de archivo disponibles en la «Configuración de archivo». Si su CPT no agrega soporte de tipo de publicación para ‘genesis-cpt-archives-settings’, entonces esta configuración no estará disponible. Puede agregar soporte a través de:

// Add custom archive support for your CPT.
add_post_type_support( 'post_type_name_here', 'genesis-cpt-archives-settings' );

El fondo del banner se puede configurar globalmente para usar un color sólido usando un selector de color o ingresando un código hexadecimal de color, o una imagen de la biblioteca de medios o cargada.

 En publicaciones y páginas, si se usa una imagen destacada, se puede configurar aquí para que también se use para la imagen del banner.

Habilitar superposición crea una superposición clara, oscura o degradada sobre todo el fondo del banner (el cuadro de estilo interno se encuentra «encima» de la superposición), tanto en fondos de color como en fondos de imagen. Esto puede usarse para crear más contraste con el contenido del banner si lo desea.

El estilo interno crea un cuadro claro u oscuro alrededor del contenido del banner, que incluye el título de la página y el extracto manual (si hay alguno). Por defecto, se define el estilo interior ligero.

Use el menú desplegable Ancho del contenido del banner para elegir el tamaño del área de contenido dentro del área del banner,

y el menú desplegable Alineación de texto para alinear el texto a la izquierda, derecha o centro.

Cuando está habilitado globalmente, los banners se pueden deshabilitar aquí en tipos de publicaciones o taxonomías específicas. Los banners también se pueden deshabilitar en páginas individuales o publicaciones en la página o editor de publicaciones.

Mira nuestros videos de YouTube para ver cómo se pueden crear los banners de Mai Lifestyle Theme:

Cómo agregar texto / extractos de banner a Mai Theme Genesis Child Theme

Cómo personalizar el área del banner de Mai Theme Genesis Child Theme

Configuración de página / publicación

Para configurar el banner por página o publicación, agregue una imagen a través del metabox Área de banner o Imagen destacada en la barra lateral del Editor haciendo clic en el botón Agregar imagen.

Una vez que se agrega una imagen, puede eliminarla u ocultarla marcando la casilla «Ocultar imagen» o el enlace «Eliminar imagen».

Cuando el Área del banner está habilitada, el Título de la página y el Extracto manual se muestran en el cuadro de estilo interno de forma predeterminada.

Guías de video

Este video muestra cómo habilitar y personalizar el área del banner:

Este tutorial le muestra cómo agregar una introducción de texto debajo del título del banner principal:

Eliminar contenido del área del banner

Ponga los siguientes fragmentos en su propia línea en el archivo functions.php de su tema.

Eliminar todo el contenido del banner

// Run before genesis display the page.
add_action( 'genesis_before', function() {

    // Remove all banner content in Mai Theme.
    remove_action( 'mai_banner_content', 'mai_do_banner_content' );

});

Elimine el título del banner (requiere Mai Theme Engine v1.3.x)

Esto moverá el título nuevamente dentro del área de contenido.


// Remove the banner title.
remove_action( 'mai_banner_title_description', 'mai_do_banner_title', 10, 2 );

Elimine la descripción del banner (requiere Mai Theme Engine v1.3.x)

// Remove the banner description.
remove_action( 'mai_banner_title_description', 'mai_do_banner_description', 12, 2 );

Corre lo suficientemente tarde

Dependiendo de dónde ejecute el código, es posible que deba asegurarse de que se ejecute lo suficientemente tarde. Para esto, puede ajustar el código en una función que se ejecuta en un enlace posterior.

// Run before genesis display the page.
add_action( 'genesis_before', function() {

	// Remove the banner title.
	remove_action( 'mai_banner_title_description', 'mai_do_banner_title', 10, 2 );

	// Remove the banner description.
	remove_action( 'mai_banner_title_description', 'mai_do_banner_description', 12, 2 );

});

Plano del sitio

Mai Theme viene con 9 diseños de página incorporados.

Los diseños se pueden configurar para archivos, páginas y publicaciones: cada tipo de publicación puede tener un diseño único y / o se puede configurar un diseño predeterminado. Mai Lifestyle Theme está configurado con la siguiente configuración: la página en esta Vista previa en vivo es una página de Archivo.

Puede ver todos los diseños disponibles en acción en el sitio de demostración de Mai Lifestyle Theme. .

El contenido medio establece el ancho base del contenido en 800 px, el contenido pequeño establece el ancho base del contenido en 650 px y el contenido extra pequeño establece el ancho base del contenido en 400 px.

Cómo establecer diseños predeterminados para publicaciones, páginas y archivos en Genesis Mai Pro Child Theme

Mai Theme admite 5 ubicaciones de menú:

  1. Primario
  2. Encabezado a la izquierda
  3. Encabezado derecho
  4. Pie de página
  5. Móvil

Puede crear tantos menús como desee, pero solo se puede usar un menú en cada ubicación. Una ubicación de menú NO necesita usar un menú. Si no hay menú, no se creará la ubicación del menú.

Consulte «Una guía para principiantes del Marco de Génesis» para obtener instrucciones completas sobre cómo agregar y editar menús.

Antes de agregar cualquier clase de menú personalizada, debe asegurarse de que el campo Clases CSS esté habilitado para los elementos del menú. Esto se puede habilitar a través de la configuración de Opciones de pantalla en la pantalla de menús de administrador.

Ícono de búsqueda

Para agregar un icono de búsqueda con un cuadro de búsqueda emergente, simplemente cree su elemento de menú Agregar un enlace personalizado y agréguelo searchal campo Clases CSS.

Botones de resaltado

Mai Theme le permite agregar fácilmente un botón resaltado alrededor de un elemento de menú con la highlight  clase. Simplemente cree su elemento de menú de forma normal y agréguelo highlightal campo Clases CSS.

Menú móvil

Estas son algunas de las formas en que puede personalizar el menú móvil extremadamente flexible de Mai Theme.

Menú estándar (deslizar hacia abajo) o Menú lateral (deslizar desde la derecha)

Elementos del menú móvil

De forma predeterminada, Mai Theme mostrará automáticamente los menús que se muestran en el escritorio (tamaños de navegador más grandes) en dispositivos móviles (y tamaños de navegador más pequeños). Por lo tanto, técnicamente no necesita hacer nada, el menú móvil «simplemente funciona».

Contenido del menú móvil

Si desea agregar contenido personalizado como texto, imágenes, íconos sociales, etc., puede usar el área de widgets del menú móvil integrado en Mai Theme . Simplemente agregue los widgets que desee en esa área de widgets.

El área de widgets del menú móvil anula el menú móvil predeterminado , así que asegúrese de agregar al menos un widget del menú de navegación si desea que su menú móvil realmente muestre un menú.

Otros widgets que funcionan bien en el área de widgets del Menú móvil son Texto, HTML personalizado, Imagen, Búsqueda, Iconos sociales simples, Génesis – Perfil de usuario, ¡y casi cualquier otra cosa!

Cómo agregar un botón (resaltado) a un elemento de menú en Genesis Mai Theme

Cómo agregar un icono de búsqueda de menú en el tema Mai

Agregue texto y contenido al menú móvil con personalizaciones en Mai Theme

Utilice un menú lateral deslizable en el móvil en Genesis Mai Theme

Mai Theme admite 10 áreas de widgets, además de tantos widgets de pie de página como estén configurados en Configuración de tema. La página de inicio en la demostración de Mai Theme no usa las 10 áreas de widgets, solo se muestran las áreas de widgets en uso

NOTA: Genesis logic permite que solo 1 widgets de pie de página adicionales estén disponibles a la vez. Una vez que se guarda un widget, aparecerá otro hasta el número total configurado en Configuración del tema.

Haga clic en cualquier área de widgets disponible para abrir un nuevo panel donde puede agregar y configurar widgets.

En el nuevo panel abierto, haga clic en Agregar un widget para mostrar los widgets disponibles que puede agregar a esta área de widgets.

Verá una lista de todos los widgets disponibles que puede agregar a las áreas de widgets disponibles. Puede hacer clic directamente en cualquier widget que desee agregar. Desplácese hacia abajo en la lista o use el cuadro Buscar widgets en la parte superior para ubicar el que desea usar.

Después de seleccionar y configurar un widget, haga clic en Guardar y publicar para conservar sus cambios. También puede hacer clic en Hacer clic y arrastrar widgets para reorganizar o moverse a una nueva área de widgets. Haga clic en Listo cuando haya terminado y luego haga clic en Guardar y publicar para conservar sus cambios.

Consulte la Guía para principiantes de Genesis Framework para obtener instrucciones completas sobre el uso de widgets.

Maitheme Demo – Configurando la barra lateral primaria

Cómo cambiar el número de áreas de widget de pie de página en Genesis Mai Pro Child Theme

Cómo agregar iconos sociales sobre el encabezado en Genesis Mai Pro Child Theme

Las migas de pan son una ayuda de navegación que permite a los usuarios realizar un seguimiento de su ubicación en un sitio web en relación con la página de inicio. Esta opción le permite definir las páginas donde se mostrarán las migas de pan. Las migas de pan se pueden definir dentro del Personalizador MaiTheme o aquí en la pantalla de Configuración del tema Genesis. MaiTheme extiende las opciones estándar de migas de pan de Génesis al agregar una opción para incluir las migas de pan en la página de publicaciones. Esta opción se puede habilitar marcando la casilla de verificación Migajas de pan en la página de publicaciones.

El siguiente código se puede agregar directamente al archivo style.css en su tema. Cópielo / péguelo directamente y ajuste los colores según sea necesario.

Las actualizaciones del complemento Mai Theme Engine no sobrescribirán las personalizaciones en su tema.

a {
    color: #34cd31;
}

a:focus,
a:hover {
     color: #2aa427;
}

Botones

Si conoce un poco de HTML, puede crear algunos estilos de botones diferentes agregando algunas clases.

Si tienes un enlace como:

<a href="https://maitheme.com/">Mai Theme</a>

Puede convertirlo en un botón agregando la button  clase de esta manera:

<a class="button" href="https://maitheme.com/">Mai Theme</a>

Hay colores / estilos alternativos mediante la adición de altwhiteghostjunto con la button  clase:

<a class="button alt" href="https://maitheme.com/">Mai Theme</a>

Por último, puede agregar small  o largeclasificar para cambiar el tamaño:

<a class="button large" href="https://maitheme.com/">Mai Theme</a>
/* Main button color */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.entry-content .button,
.menu-item.highlight a,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.alt.single_add_to_cart_button,
.woocommerce .button.alt.checkout-button {
	background-color: #34cd31;
	color: #fff;
}

/* Main button color hover */
button:hover,
button:focus,
input:hover[type="button"],
input:focus[type="button"],
input:hover[type="reset"],
input:focus[type="reset"],
input:hover[type="submit"],
input:focus[type="submit"],
.button:hover,
.button:focus,
.entry-content .button:hover,
.entry-content .button:focus,
.menu-item.highlight.current-menu-item > a,
.menu-item.highlight > a:hover,
.menu-item.highlight > a:focus,
.woocommerce a.button:hover,
.woocommerce a.button:focus,
.woocommerce button.button:hover,
.woocommerce button.button:focus,
.woocommerce input.button:hover,
.woocommerce input.button:focus,
.woocommerce .button.alt.single_add_to_cart_button:hover,
.woocommerce .button.alt.single_add_to_cart_button:focus,
.woocommerce .button.alt.checkout-button:hover,
.woocommerce .button.alt.checkout-button:focus {
	background-color: #2fb82c;
	color: #fff;
}

/* Alt button color */
.button.alt,
.comment-reply-link,
.entry-content .button.alt,
.entry-content .more-link,
.footer-widgets .button,
.site-footer .button,
.woocommerce .actions .button,
.woocommerce a.button.alt,
.woocommerce a.button.add_to_cart_button {
	background-color: #e4e4e4;
	color: #515151;
}

/* Alt button color hover */
.button.alt:hover,
.button.alt:focus,
.comment-reply-link:hover,
.comment-reply-link:focus,
.entry-content .button.alt:hover,
.entry-content .button.alt:focus,
.entry-content .more-link:hover,
.entry-content .more-link:focus,
.footer-widgets .button:hover,
.footer-widgets .button:focus,
.site-footer .button:hover,
.site-footer .button:focus,
.woocommerce .actions .button:hover,
.woocommerce .actions .button:focus,
.woocommerce a.button.alt:hover,
.woocommerce a.button.alt:focus,
.woocommerce a.button.add_to_cart_button:hover,
.woocommerce a.button.add_to_cart_button:focus {
	background-color: #d7d7d7;
	color: #515151;
}

Menús de navegación del encabezado

/* Header navigation link color */
.home .nav-header .current-menu-item > a,
.nav-header .nav-search,
.nav-header .nav-search:focus,
.nav-header a {
	color: #323232;
}

/* Header navigation current/hover link color */
.nav-header a:hover,
.nav-header a:focus,
.nav-header .current-menu-item > a,
.nav-header .current-menu-ancestor > a,
.nav-header .menu-item-has-children:not(.highlight):hover > a,
.nav-header .menu-item-has-children:not(.highlight):focus > a,
.nav-header .nav-search:hover,
.nav-header .nav-search:focus,
.nav-header .sub-menu a:hover,
.nav-header .sub-menu a:focus,
.nav-header .sub-menu .current-menu-item > a,
.nav-header .sub-menu .current-menu-item > a:hover,
.nav-header .sub-menu .current-menu-item > a:focus {
	color: #34cd31;
}

/* Header navigation sub-menu background/color */
.nav-header .sub-menu a {
	background-color: #fff;
	color: #323232;
}

/* Header navigation sub-menu hover background/color */
.nav-header .sub-menu a:hover,
.nav-header .sub-menu a:focus,
.nav-header .sub-menu .current-menu-item > a,
.nav-header .sub-menu .current-menu-item > a:hover,
.nav-header .sub-menu .current-menu-item > a:focus {
	background-color: #f4f4f4;
	color: #323232;
}

Menú de navegación principal

/* Primary navigation background color */
.home .nav-primary .current-menu-item > a,
.nav-primary {
	background-color: #323232;
}

/* Primary navigation link color */
.home .nav-primary .current-menu-item > a,
.nav-primary .nav-search,
.nav-primary .nav-search:focus,
.nav-primary a {
	color: #e4e4e4;
}

/* Primary navigation current/hover link color */
.nav-primary a:hover,
.nav-primary a:focus,
.nav-primary .current-menu-item > a,
.nav-primary .current-menu-ancestor > a,
.nav-primary .menu-item-has-children:hover > a,
.nav-primary .menu-item-has-children:focus > a,
.nav-primary .nav-search:hover,
.nav-primary .nav-search:focus {
	background-color: #252525;
	color: #fff;
}

/* Primary navigation sub-menu background/color */
.nav-primary .sub-menu a {
	background-color: #323232;
	color: #e4e4e4;
}

/* Primary navigation sub-menu hover background/color */
.nav-primary .sub-menu a:hover,
.nav-primary .sub-menu a:focus,
.nav-primary .sub-menu .current-menu-item > a,
.nav-primary .sub-menu .current-menu-item > a:hover,
.nav-primary .sub-menu .current-menu-item > a:focus {
	background-color: #252525;
	color: #fff;
}

Menú de navegación secundaria

/* Secondary navigation background color */
.home .nav-secondary .current-menu-item > a,
.nav-secondary {
	background-color: #323232;
}

/* Secondary navigation link color */
.home .nav-secondary .current-menu-item > a,
.nav-secondary .nav-search,
.nav-secondary .nav-search:focus,
.nav-secondary a {
	color: #e4e4e4;
}

/* Secondary navigation current/hover link color */
.nav-secondary a:hover,
.nav-secondary a:focus,
.nav-secondary .current-menu-item > a,
.nav-secondary .current-menu-ancestor > a,
.nav-secondary .menu-item-has-children:hover > a,
.nav-secondary .menu-item-has-children:focus > a,
.nav-secondary .nav-search:hover,
.nav-secondary .nav-search:focus {
	background-color: #252525;
	color: #fff;
}

/* Secondary navigation sub-menu background/color */
.nav-secondary .sub-menu a {
	background-color: #323232;
	color: #e4e4e4;
}

/* Secondary navigation sub-menu hover background/color */
.nav-secondary .sub-menu a:hover,
.nav-secondary .sub-menu a:focus,
.nav-secondary .sub-menu .current-menu-item > a,
.nav-secondary .sub-menu .current-menu-item > a:hover,
.nav-secondary .sub-menu .current-menu-item > a:focus {
	background-color: #252525;
	color: #fff;
}

Menú de navegación móvil

.mobile-menu a {
	color: #323232;
}

.mobile-menu .sub-menu {
	background-color: rgba(0,0,0,0.01);
}

.mobile-menu .sub-menu a {
	background-color: rgba(0,0,0,0.01);
}

.mobile-menu .sub-menu a:hover,
.mobile-menu .sub-menu a:focus,
.mobile-menu .sub-menu a:active {
	color: #067CCC;
}

.mobile-menu .current-page-ancestor > a,
.mobile-menu .current-menu-item > a {
    color: #067CCC;
}

Plantilla de secciones

Mai Theme utiliza una plantilla de sección única para configurar páginas de ancho completo. En general, esto se usa para la página de inicio, pero también se puede usar en cualquier otra página, no está limitado a widgets en la página principal como muchos (¿la mayoría?) Temas secundarios de Génesis. Las secciones también funcionan bien con los códigos abreviados de Cuadrícula y Columnas / Col, por lo que todos se pueden usar juntos.

Cómo utilizar

  1. Seleccione «Secciones» en el cuadro meta Atributos de página.
  2. Publicar o guardar como borrador de la página.
  3. Si utiliza el editor de bloques (predeterminado en WP v5 +), debe actualizar manualmente la ventana del navegador para activar la configuración de la plantilla.
  4. Establezca el diseño de página en uno sin una barra lateral.
  5. Personalizar
  6. ¡Publicar!

Importante : si tiene instalado WooCommerce, asegúrese de tener una página «Comprar» configurada a través de su Panel de control> WooCommerce> Configuración> Productos> Página de compra. Por alguna razón, WooCommerce parece explotar sin ese conjunto de páginas.

La plantilla de secciones funciona mejor con un diseño de página que no utiliza una barra lateral.

Cómo personalizar

La plantilla Sections agrega un metabox que se repite Sections. Cada sección es como un pequeño editor de página individual, con un área de Título y Contenido con un Editor de Texto y Visual. Cada sección incluye una barra de formato estándar y botones para agregar tipos de contenido disponibles. Se puede agregar cualquier contenido, incluidas las cuadrículas, columnas / columnas y rótulos. Puede agregar tantas secciones a una página como desee: reordenarlas usando las flechas arriba / abajo, o eliminarlas según sea necesario.

Las secciones incluyen configuraciones adicionales donde puede configurar el color de fondo o la imagen, la superposición y el estilo interno, la altura y el ancho del contenido, ¡la misma configuración de banner disponible en el personalizador!

Si desea cambiar las fuentes (y los colores) sin utilizar ningún código, le encantará nuestro complemento Mai Styles disponible en el paquete de complementos Mai Theme .

Como la mayoría de los temas secundarios de Genesis, cambiar las fuentes (de la manera correcta) requiere un poco de código. Hay 2 pasos involucrados en el uso de fuentes web personalizadas de Google, registrar su fuente con PHP y declarar su fuente con CSS.

Este artículo le mostrará cómo cambiar Open Sans por Lato en Mai Lifestyle Theme. Los mismos principios se aplican para agregar sus propias fuentes o para eliminar las fuentes no utilizadas.

Elegir fuentes

Por lo general, es mejor elegir 2 fuentes principales para un sitio web, la fuente «Encabezados» y la fuente «Cuerpo». Ciertamente puede agregar más, pero cuantas más fuentes cargue, más lento será su sitio web, ¡así que tenga cuidado!

  1. Visita https://fonts.google.com/
  2. Elige las fuentes que te gustaría usar.
  3. Presiona el botón rojo + para «Seleccionar esta fuente».

4. Personalice su fuente eligiendo los pesos y estilos que desea usar.

Registrar fuentes

Cerca de la parte superior de las personalizaciones de su tema functions.php  habrá un bloque de código como este:

// Register custom Google fonts.
add_action( 'wp_enqueue_scripts', 'maitheme_enqueue_fonts' );  function maitheme_enqueue_fonts() {
  	wp_enqueue_style( 'maitheme-google-fonts', '//fonts.googleapis.com/css?family=Muli:200,200i|Open+Sans:300,300i,400,400i,700,700i|Playfair+Display:700,700i', array(), CHILD_THEME_VERSION );
}

El código anterior es de Mai Lifestyle Theme y registra las fuentes de Google utilizadas por el tema; Muli, Open Sans y Playfair Display.

Las fuentes se registran después de //fonts.googleapis.com/css?family=  y cada familia de fuentes está separada por a |.

Cambiar nuestras fuentes es tan fácil como reemplazar esto:

Open+Sans:300,300i,400,400i,700,700i

 con este:

Lato:400,400i,700

Entonces, el código final modificado será este:

// Register custom Google fonts.
add_action( 'wp_enqueue_scripts', 'maitheme_enqueue_fonts' );
function maitheme_enqueue_fonts() {
     wp_enqueue_style( 'maitheme-google-fonts', '//fonts.googleapis.com/css?family=Muli:200,200i|Lato:400,400i,700|Playfair+Display:700,700i', array(), CHILD_THEME_VERSION );
}

Declarando Fuentes

Cerca de la parte superior del style.css  archivo de su tema están las principales declaraciones de fuentes.

En Mai Lifestyle Theme, la fuente del cuerpo se declara así:

body,
body.text-md {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

Para cambiar esta fuente a Lato, simplemente cambie la familia de fuentes (y posiblemente el peso de la fuente) de esta manera:

body,
body.text-md {
     font-family: 'Lato', sans-serif;
     font-weight: 400;
}

Los mismos ajustes pueden suceder para los diversos títulos disponibles también.

¡Feliz personalización!

Tenga en cuenta que es posible que muchos fragmentos / filtros estándar de Genesis necesiten ejecutarse más tarde cuando se agreguen a su archivo Mai Theme (functions.php) ya que la mayoría de nuestro código se ejecuta temprano a través del complemento Mai Theme Engine.

Si sus fragmentos normales no funcionan como suelen hacerlo, antes de ponerse en contacto con el soporte, intente envolverlos en un gancho posterior como el siguiente:

Genesis funciona para registrar / configurar cosas

// Run after Mai Theme.
add_action( 'after_setup_theme', function() {
	
	// Register custom widget area.
	genesis_register_sidebar( array(
		'id'          => 'custom-widget-area',
		'name'        => __( 'Custom Widget Area', 'textdomain' ),
		'description' => __( 'This is a custom widget area.', 'textdomain' ),
	) );

});

Para la mayoría de las cosas frontales

// Run after Mai Theme.
add_action( 'genesis_before', function() {

	// Add your custom code here.

});

Menú de navegación principal fijo

Este fragmento mueve el menú de navegación principal dentro del marcado del encabezado para que quede fijo cuando la configuración del Encabezado fijo está habilitada en la Configuración de Mai.

//  Run after Mai Theme.
add_action( 'genesis_before', function() {

	// Remove the primary navigation menu.
	remove_action( 'genesis_after_header', 'genesis_do_nav' );
});

// Add primary nav after site-header closing wrap.
add_filter( 'genesis_structural_wrap-header', function( $output, $original_output ) {

	if ( 'close' == $original_output ) {
		// Build the new HTML.
		ob_start();
		genesis_do_nav();
		$output .= ob_get_clean();
	}
	return $output;

}, 20, 2 );

Encabezado adhesivo antes del área de widgets

// Run after Mai Theme.
add_action( 'genesis_before', function() {

	// Remove header before widget area.
	remove_action( 'genesis_header', 'mai_header_before', 2 );
});

// Add header before widget area before site-header opening wrap.
add_filter( 'genesis_structural_wrap-header', function( $output, $original_output ) {
	
	// Bail if not the opening wrap.
	if ( 'open' != $original_output ) {
		return $output;
	}
	
	// Build the new HTML.
	ob_start();
	mai_header_before();
	$header_before = ob_get_clean();
	
	// Return it.
	return $header_before . $output;

}, 4, 2 );

Buscar texto del formulario

// Run after Mai Theme.
add_action( 'genesis_before', function() {

	// Customize search form input box text.
	add_filter( 'genesis_search_text', function( $text ) {
		return esc_attr( 'Search...' );
	}
});

Este fragmento mueve la imagen destacada en publicaciones / páginas individuales después del título / meta (antes del contenido de la entrada).

// Move featured image before the content.
remove_action( 'genesis_before_entry', 'mai_do_entry_featured_image' );
add_action( 'genesis_before_entry_content', 'mai_do_entry_featured_image' );

Leer más texto

// Replace the default "Read More" text in Mai Theme.
add_filter( 'mai_more_link_text', function( $text, $object_or_id, $type ) {
	$text = 'Click Here';
	return $text;
}, 10, 3 );

Información de publicación

// Run after Mai Theme.
add_action( 'genesis_before', function() {

	// Customize post info.
	add_filter( 'genesis_post_info', function( $post_info ) {
		$post_info = '[post_date before="by "] [post_author_posts_link before=""] [post_comments before=""] [post_edit before=""]';
		return $post_info;
	});

});

Publicar Meta

// Run after Mai Theme.
add_action( 'genesis_before', function() {

	// Customize post meta.
	add_filter( 'genesis_post_meta', function( $post_meta ) {
		$post_meta = '[post_categories before="Categories: "] [post_tags before="Tags: "]';
		return $post_meta;
	});

});

Post meta taxonomías

// Remove tags from post meta.
add_filter( 'mai_post_meta_taxos', function( $taxos ) {
	unset( $taxos['post_tag'] );
	return $taxos;
});

Eliminar navegación de publicación anterior / siguiente

// Run after Mai Theme.
add_action( 'genesis_before', function() {
	
	// Remove previous/next post navigation.
	remove_post_type_support( 'post', 'genesis-adjacent-entry-nav' );
});

Añadir contenido a entradas [cuadrícula]

/**
 * Add content to the Mai Theme [grid] shortcode entry content, before more link.
 * 
 * @param   string  $entry_content  The existing entry content.
 * @param   array   $args           The sanitized grid args.
 * @param   array   $original_args  The original args passed the shortcode.
 * 
 * @return  string  The modified entry content.
 */ 
add_filter( 'mai_flex_entry_content', function( $entry_content, $args, $original_args ) {

	/**
	 * Check for a specific instance of grid.
	 * This requires context="my-custom-grid" as a parameter in your [grid] to target a specific instance.
	 * Or remove this conditional code to target all instances of grid.
	 */
	if ( 'my-custom-grid' !== $args['context'] ) {
		return $entry_content;
	}

	// Add my custom content.
	$new_content = '<p>My custom content here.</p>';

	// Return our modified content.
	return $new_content . $entry_content;

}, 10, 3 );

Cambiar el tamaño de la imagen utilizada para el área del banner

Nota: También puede filtrar los Tamaños de imagen para cambiar las dimensiones reales del tamaño de imagen de banner predeterminado.

// Change the image size used for the banner area.
add_filter( 'mai_section_args', function( $args ) {

	// Bail if not filtering the banner area.
	if ( ! isset( $args['context'] ) || 'banner-area' !== $args['context'] ) {
		return $args;
	}

	// Use the 'full' size image.
	$args['image_size'] = 'full';

	return $args;
});

Mostrar descripción del sitio / lema

// Run after Mai Theme.
add_action( 'genesis_before', function() {

	// Make Mai Theme site description/tagline visible.
	remove_filter( 'genesis_attr_site-description', 'mai_hide_site_description' );
});

Una vez que el personalizador esté abierto, verá un menú a la izquierda y una vista previa en vivo de su sitio a la derecha:

El menú del personalizador en el lado izquierdo muestra las diversas opciones disponibles para personalizar su diseño con Mai Pro. En el lado derecho, verá una vista previa interactiva en vivo para que pueda ver instantáneamente el resultado de cada opción en su tema. Todos los cambios aparecerán cuando los seleccione.

Para ver la configuración disponible dentro de cada opción, haga clic en su título para abrir la vista ampliada de esa opción.

Cuando termine de hacer todos los cambios, haga clic en Guardar y publicar. Si decide que no desea guardar los cambios que ha realizado, haga clic en la X para cerrar el editor y descartar los cambios.

Mira nuestros videos de YouTube para ver cómo usar el Personalizador de demostración de Mai Lifestyle Theme:

Demostración de tema de Mai: configuración del personalizador
Cómo mostrar automáticamente la imagen destacada en publicaciones y páginas en Genesis Mai Pro Child Theme

Las imágenes del logotipo del sitio tienen una dimensión sugerida de 240 px x 120 px, pero cualquier tamaño de imagen está bien. Los logotipos no están limitados a esta dimensión y se mostrarán a tamaño completo.

Logotipo de retina

Si desea preparar su logotipo «retina» (para la mayoría de los dispositivos móviles y computadoras de escritorio con pantallas retina), debe cargar un logotipo de doble tamaño .

Ejemplo: si el tamaño normal de su logotipo es de 200 px por 50 px, debe cargar una imagen de 400 px por 100 px.

Luego establezca la configuración del ancho del logotipo en Personalizador> Identidad del sitio a la mitad del ancho del logotipo :

Subiendo Imágenes

Al cargar cualquier imagen en WordPress y Mai Theme, es mejor cargar una imagen grande. Normalmente cargamos 2000-2400px. WordPress creará automáticamente todos los tamaños de imagen que necesita en función de los tamaños registrados en Mai Theme. Si planea cargar imágenes enormes (3000px o más), puede considerar usar un complemento como Imsanity para cambiar el tamaño de las imágenes extragrandes a un tamaño máximo. El valor predeterminado de Imsanity es 2048 px la última vez que lo verificamos. No se preocupe, Mai Theme en realidad no mostrará su imagen de ese tamaño. Es mejor tener la imagen original bastante grande para que cambiar el tamaño y el diseño de la imagen no requiera volver a cargar una nueva imagen. En cambio, solo regenera tus imágenes (ver abajo).

Tamaños de imagen predefinidos

Mai Lifestyle Theme define un puñado de tamaños de imagen personalizados.

Cuando se muestra un tamaño de imagen donde se muestra «Tipo: Recortado», mostrará una parte recortada de la imagen completa, en el ancho / alto establecido de ese tamaño de imagen registrada (ver más abajo) . Los tamaños de imagen recortados aseguran que las imágenes se muestren con un tamaño y forma consistentes en todo su sitio web.

Los tamaños de imagen recortados no son un problema para la mayoría de las imágenes en Mai Theme, ya que tienen una relación de aspecto estándar de 4×3, que está muy cerca de lo que toman la mayoría de las cámaras. Sin embargo, esto es una preocupación al elegir imágenes de banner.

A continuación se muestra un ejemplo de cómo se vería cada relación de aspecto recortada. Esto funciona muy bien para una imagen con el punto focal directamente en el centro.

El siguiente ejemplo no funciona muy bien . Observe cómo se corta la taza de café en el cultivo. Por esta razón, recomendamos usar fotos orientadas al paisaje en modo retrato.

Afortunadamente, puede usar complementos como YoImages y My Eyes Are Up Here para especificar dónde / cómo se debe recortar el tamaño de cada imagen.

Regenerando Tamaños de Imagen

Al convertir por primera vez a Mai Theme querrás regenerar tus imágenes. Esto significa tomar todas sus imágenes existentes (ya cargadas) y volver a crear cultivos en función de los nuevos tamaños de imagen establecidos en Mai Theme. Regenerar miniaturas es una forma realmente fácil de hacer esto. Tiene algunas buenas opciones también. Consulte la descripción del complemento para obtener más detalles.

Tamaños de imagen personalizados de Mai Theme:

Nota: El «Nombre:» de cada tamaño de imagen que necesitabas al usar el image_sizeparámetro en códigos cortos de Tema Mai como [grid].

Ejemplo: [grid content="post" image_size="thumbnail"]

Con la flexibilidad del banner o el tamaño de sección (altura) con la configuración «Altura» y la cantidad desconocida de contenido en el banner, es mejor elegir una imagen de banner con el foco de la imagen cerca del centro, especialmente si tiene caras o otras cosas que no desea «recortar», especialmente en tabletas / dispositivos móviles.

Por defecto, un Banner o Sección usa el banner  tamaño de la imagen. Si la configuración de Banner o Sección «Altura» es «lg» o «xl», section  se utiliza el tamaño de la imagen.

  • Nombre :banner
  • Relación de aspecto: 3×1
  • Ancho: 1600 px
  • Altura : 533 px
  • Tipo: recortado

Sección

Este tamaño de imagen se agregó en Mai Theme Engine 1.4.0

  • Nombre :section
  • Relación de aspecto : 16×9
  • Ancho : 1600 px
  • Altura : 900 px
  • Tipo : recortado
  • Nombre :featured
  • Relación de aspecto: 4×3
  • Ancho : 800 px
  • Altura : 600 px
  • Tipo : recortado

Una mitad

  • Nombre :one-half
  • Relación de aspecto: 4×3
  • Ancho : 550 px
  • Altura : 413 px
  • Tipo : recortado
  • Nombre :one-third
  • Relación de aspecto: 4×3
  • Ancho : 350 px
  • Altura : 263 px
  • Tipo : recortado

Un cuarto

  • Nombre :one-fourth
  • Relación de aspecto: 4×3
  • Ancho : 260 px
  • Altura : 195 px
  • Tipo : recortado

Minúsculo

  • Nombre :tiny
  • Relación de aspecto : 1×1 (cuadrado)
  • Ancho: 80 px
  • Altura : 80 px
  • Tipo : recortado

Cambiar los tamaños de imagen registrados de Mai Theme

Si desea cambiar los tamaños de imagen registrados con un complemento, los tamaños de imagen simples son muy fáciles de usar.

Si prefiere el código, el siguiente filtro le permitirá cambiar 1 o todos los tamaños de imagen . Este filtro de ejemplo muestra los tamaños existentes.

Debe modificar la altura y / o el ancho si desea usar un tamaño diferente.

Es mejor incluir solo los tamaños de imagen que realmente está cambiando en este filtro, no necesita mantenerlos allí si no se están modificando.

Nota: Debe regenerar las imágenes después de usar este filtro.

// Change the Mai Theme registered image sizes.
add_filter( 'mai_image_sizes', function( $image_sizes ) {

    $image_sizes['banner'] = array(
        'width'  => 1600,
        'height' => 533,
        'crop'   => true,
    );

    $image_sizes['section'] = array(
        'width'  => 1600,
        'height' => 900,
        'crop'   => true,
    );

    $image_sizes['featured'] = array(
        'width'  => 800,
        'height' => 600,
        'crop'   => true,
    );

    $image_sizes['one-half'] = array(
        'width'  => 550,
        'height' => 413,
        'crop'   => true,
    );

    $image_sizes['one-third'] = array(
        'width'  => 350,
        'height' => 263,
        'crop'   => true,
    );

    $image_sizes['one-fourth'] = array(
        'width'  => 260,
        'height' => 195,
        'crop'   => true,
    );

    $image_sizes['tiny'] = array(
        'width'  => 80,
        'height' => 80,
        'crop'   => true,
    );

    return $image_sizes;

});

Tamaños de imagen predeterminados de WordPress:

Además de estos tamaños de imagen específicos del Tema Mai, WordPress incluía los siguientes tamaños de imagen proporcionales o recortados. Estos tamaños retienen toda el área de la imagen y la ajustan en una caja de dimensiones especificadas. Entonces, si la forma de la imagen no es exactamente la misma que la de la caja, terminará con un espacio en blanco o relleno.

Miniatura

  • Nombre :thumbnail
  • Ancho : 150 px (WP predeterminado)
  • Altura : 150 px (WP por defecto)
  • Tipo: recortado / estándar (opcional)

Tamaño mediano (especificado por el usuario)

  • Nombre :medium
  • Ancho : 300 px (WP predeterminado)
  • Altura : 300 px (valor predeterminado de WP)
  • Tipo : estándar

Tamaño grande (especificado por el usuario)

  • Nombre :large
  • Ancho : 800px (WP predeterminado)
  • Altura : 0 (WP predeterminado) altura ilimitada
  • Tipo: estándar

Plantilla de secciones

La plantilla Sections es un generador de páginas ligero y fácil de usar. Le permite personalizar y reorganizar fácilmente las secciones en cualquier página, por lo que no se limita a crear Consulte la documentación de la plantilla de secciones aquí .

Plantilla de mapa del sitio

Mai Pro viene con una plantilla de página personalizada de Sitemap que muestra todo el contenido de su sitio web, incluidas publicaciones, páginas y tipos de publicaciones personalizadas. Simplemente seleccione esta plantilla en el metabox Atributos de página y guarde su publicación para activarla.

Plantilla de página de destino

La plantilla de página de destino elimina todas las áreas de navegación y widgets, útiles para las páginas donde desea disuadir a los usuarios de que se vayan. El editor de páginas es el mismo que otras páginas: edita el contenido de la misma manera y tiene las opciones de diseño habituales, por lo que puede tener contenido de ancho completo, mediano o pequeño, e incluso mantener barras laterales si lo desea.

Para agregar fragmentos de PHP a la página de destino, puede usar lo siguiente:

// Run after Genesis & Mai Theme.
add_action( 'genesis_before', function() {
	
	// Bail if not the landing page.
	if ( 'landing.php' !== get_page_template_slug() ) {
		return;
	}
	
	// Your custom code here.

});

Constructor de página

La plantilla del Creador de páginas es simplemente un lienzo en blanco para crear fácilmente diseños complejos con complementos del creador de páginas como Beaver Builder , Elementor , Oxygen , etc. La plantilla del Creador de páginas no agrega ninguna funcionalidad, solo elimina el relleno, el margen y otros elementos que crean la página está completamente vacía para que pueda diseñar con un complemento de generador de páginas.

Cómo encontrar una página o ID de publicación

Opción 1

  1. Instale y active Mostrar ID mediante el complemento 99 Robots .
  2. Vaya a su Panel de WordPress> Lista de páginas o publicaciones.
  3. Ver la columna ID en la lista.

opcion 2

  1. Vaya a su Panel de WordPress> Lista de páginas o publicaciones.
  2. Edite la página de la que necesita la identificación.
  3. Busque en la barra de direcciones del navegador post="12345"
  4. En este ejemplo, la ID de la página es 12345

Ejemplo:

Cómo encontrar una ID de categoría

Opción 1

  1. Instale y active Mostrar ID mediante el complemento 99 Robots .
  2. Navegue a su Panel de WordPress> Publicaciones> Lista de categorías.
  3. Ver la columna ID en la lista.

opcion 2

  1. Navegue a su Panel de WordPress> Publicaciones> Lista de categorías.
  2. Edite la categoría de la que necesita la identificación.
  3. Busque en la barra de direcciones del navegador tag_ID="12345"
  4. En este ejemplo, el ID de categoría es 12345

Cómo encontrar una ID de imagen

Opción 1

  1. Instale y active Mostrar ID mediante el complemento 99 Robots .
  2. Navegue a su Panel de WordPress> Medios> Biblioteca.
  3. Cambie la vista de Lista si aún no está configurada.
  4. Ver la columna ID en la lista.

opcion 2

  1. Navegue a su Panel de WordPress> Medios> Biblioteca.
  2. Encuentre la imagen que desea usar y haga clic en ella para abrir el modal de medios.
  3. Busque en la barra de direcciones del navegador item="12345"
  4. En este ejemplo, la ID de la imagen es 1234

Cómo encontrar una identificación de usuario

Opción 1

  1. Use Mostrar ID por el complemento 99 Robots .
  2. Navegue a su Panel de WordPress> Lista de usuarios.
  3. Ver la columna ID en la lista.

opcion 2

  1. Navegue a su Panel de WordPress> Lista de usuarios.
  2. Edite el usuario del que necesita la identificación.
  3. Busque en la barra de direcciones del navegador user_id="12"
  4. En este ejemplo, el ID de categoría es 12

Cómo lista de reproducción

Cómo cargar fácilmente un logotipo en Genesis Mai Pro Child Theme
Cómo agregar texto / extractos de banner a Genesis Mai Pro Child Theme
Cómo personalizar el área de banner
Cómo agregar columnas y personalizar el blog y los archivos
Cómo mostrar automáticamente la imagen destacada en las páginas y publicaciones
Cómo personalizar una plantilla de archivo de categorías
Cómo cambiar el número de widgets de pie de página
Cómo agregar un botón (resaltar) a un elemento del menú
Cómo centrar o alinear a la izquierda un logotipo
Cómo agregar iconos a los elementos del menú de navegación
Cómo ver todos las ubicaciones del menú
Cómo agregar un icono de búsqueda de menú
Cómo agregar texto y contenido al menú móvil con personalización
Cómo usar un menú deslizable en el móvil
Cómo crear una página de inicio de ancho completo con plantilla de secciones
Cómo establecer diseños predeterminados para publicaciones, páginas y archivos
Cómo agregar iconos sociales sobre el encabezado
Cómo tener un encabezado fijo / adhesivo que se encoge en el tema infantil Genesis Mai Pro sin código
Cómo personalizar columnas de WooCommerce, área de pancartas y más
Instalar Mai Lifestyle Theme en una nueva instalación de WordPress

Demostración del tema de Mai – Lista de reproducción detrás de escena

Demostración de MaiTheme – Agregar elementos gráficos a los elementos del menú
Demostración de MaiTheme – Cómo se configura la página de
inicio Demostración de Maitheme – Configuración de la barra lateral
primaria Demostración de Maitheme – Crear la demostración de tema de estilo de vida Mai Demostración de pie de página
Maitheme – Configuración del personalizador