Using Shortcodes

[direction]

Estimated reading: 1 minute 142 views

You may see some direction or steps highlighted on the theme doc demo pages as like the below screenshot.

We used the [direction] shortcode to render the design of the steps. Your shortcode could be [direction]Theme Options > Header > Top of Header > Menu Element[/direction] Use the > character as the direction separator icon. This character (>) will be replaced with an arrow-right icon by default.

You can change the icon with some custom CSS. See the code below-

.direction_step + .direction_step:before {
  content: "";
  font-family: eleganticons;
}

​Here the content value is the Elegant Icon​ code. You would not find the icon code directly on the Elegant Icon’s website. Inspect the icon by right-clicking on it from their website. Then navigate to the CSS ::before CSS Pseudo-elements to see the icon code. Watch the below GIF to see the process of inspection and taking of the icon code.

Leave a Comment

Share this Doc

[direction]

Or copy link

CONTENTS

¿Interesado en usar Vecindapp?

Nuestras soluciones

  • Asamblea virtual
  • Administración de visitantes
  • Gestión de correspondencia
  • Minuta digital
  • Difusión de comunicados
  • Reunión virtual del consejo
  • Gestión de PQR
  • Encuestas virtuales
  • Reserva de zonas comunes
  • Control de recursos
  • Estado de cuenta
  • Gestión de documentos
  • Control de vehículos
  • Botón de pánico
  • Consignas de vigilancia
  • Recordatorios
  • Llamados de atención
  • Botón de pago
  • Directorio de proveedores
  • Control de recursos y plan de mantenimiento
  • Gestión de citofonía
  • Asistente virtual
Open chat