¿Como se llama esto en web? Ayuda estoy bloqueado

CarlosImb

CarlosImb

Lanero Reconocido
3 Oct 2005
2,516
Saludos muchachos,

Tengo un problema. Estoy usando en wordpress Gutenberg (se los recomiendo a los que usan constructores visuales es muy liviano). El hecho es que no he visto un bloque que permita hacer esto que esta en la imagen. Y lo peor es que no entiendo como llamarlo para buscar una plantilla en html y ccs y a partir de allí modificar datos e incrustarlo como html .

¿Saben ustedes que nombre tiene esto: datos de contacto con iconos, card de empresa? La verdad he buscado así pero no encuentro algo que me sirva.

Saludos, y gracias por la ayuda.

problema.png
 
CarlosImb dijo:
Saludos muchachos,

Tengo un problema. Estoy usando en wordpress Gutenberg (se los recomiendo a los que usan constructores visuales es muy liviano). El hecho es que no he visto un bloque que permita hacer esto que esta en la imagen. Y lo peor es que no entiendo como llamarlo para buscar una plantilla en html y ccs y a partir de allí modificar datos e incrustarlo como html .

¿Saben ustedes que nombre tiene esto: datos de contacto con iconos, card de empresa? La verdad he buscado así pero no encuentro algo que me sirva.

Saludos, y gracias por la ayuda.

Ver el archivos adjunto 463876
Haz clic para expandir...
Busque por Widgets

Este es el artículo oficial de Wordpres...

wordpress.org

Manage WordPress widgets

WordPress Widgets add content and features to your Sidebars. Examples are the default widgets that come with WordPress; for Categories, Tag cloud, Search, etc. Plugins will often add their own widgets. Widgets were originally designed to provide a simple and easy-to-use way of giving design and...
wordpress.org wordpress.org

sin embargo es muy común encontrar un Widget genérico para el footer que simplemente divide en 3 o 4, y cada widget es un area de texto/html

Buscando en plugins debe haber algo más específico.


Tony.
 
  • Me gusta
Reacciones: CarlosImb
Gracias por la ayuda, en realidad estoy más bien bloqueado en encontrar un bloque de gutemberg que tenga ese diseño de los iconos con el texto así alineados. Es decir los iconos como teléfono, email, web, que estén al lado de los textos. Lo intente hacer con dreamweaver e imagenes svg pero me queda muy pobre de aspecto. Gracias por la ayuda.
 
CarlosImb dijo:
Gracias por la ayuda, en realidad estoy más bien bloqueado en encontrar un bloque de gutemberg que tenga ese diseño de los iconos con el texto así alineados. Es decir los iconos como teléfono, email, web, que estén al lado de los textos. Lo intente hacer con dreamweaver e imagenes svg pero me queda muy pobre de aspecto. Gracias por la ayuda.
Haz clic para expandir...

No me percaté lo de gutenberg. Pero la solución "simple" sigue siendo la misma, para mi eso no es nada distinto a una lista, puede utilizar el bloque de código Editar cómo HTML y poner en la lista Imagen > texto

Una forma sencilla para la alineación de los iconos es mandarlos a la izquierda usando margen negativo.

1622563144591.png


Para el ejemplo dejé la segunda línea sin icono.

Código: 
<ul style="list-style-type:none;">

<li><img style="margin-left:-35px;height:35px;width:35px;" src="https://s.w.org/images/core/emoji/13.0.1/svg/2764.svg">La primera linea</li>

<li>La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea</li>

<li><img style="margin-left:-35px;height:35px;width:35px;" src="https://s.w.org/images/core/emoji/13.0.1/svg/2764.svg"> La tercera linea</li></ul>

Para los iconos, busque cómo cargar en wordpress fontawesome y utiliza los iconos

Vamo a ver si cargan aquí: <i class="fa fa-camera-retro"></i>

no 😔

Código: 
<i class="fa fa-camera-retro"></i>


Tony.
 
  • Me encanta
Reacciones: CarlosImb
Toooooony dijo:
No me percaté lo de gutenberg. Pero la solución "simple" sigue siendo la misma, para mi eso no es nada distinto a una lista, puede utilizar el bloque de código Editar cómo HTML y poner en la lista Imagen > texto

Una forma sencilla para la alineación de los iconos es mandarlos a la izquierda usando margen negativo.

Ver el archivos adjunto 463926

Para el ejemplo dejé la segunda línea sin icono.

Código: 
<ul style="list-style-type:none;">

<li><img style="margin-left:-35px;height:35px;width:35px;" src="https://s.w.org/images/core/emoji/13.0.1/svg/2764.svg">La primera linea</li>

<li>La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea La segunda linea</li>

<li><img style="margin-left:-35px;height:35px;width:35px;" src="https://s.w.org/images/core/emoji/13.0.1/svg/2764.svg"> La tercera linea</li></ul>

Para los iconos, busque cómo cargar en wordpress fontawesome y utiliza los iconos

Vamo a ver si cargan aquí: <i class="fa fa-camera-retro"></i>

no 😔

Código: 
<i class="fa fa-camera-retro"></i>


Tony.
Haz clic para expandir...
Muchas gracias panita, sobre todo por el tiempo en la noche voy a trabajar con el código. Saludos y nuevamente gracias.
 
  • Me gusta
Reacciones: Toooooony
CarlosImb dijo:
Gracias por la ayuda, en realidad estoy más bien bloqueado en encontrar un bloque de gutemberg que tenga ese diseño de los iconos con el texto así alineados. Es decir los iconos como teléfono, email, web, que estén al lado de los textos. Lo intente hacer con dreamweaver e imagenes svg pero me queda muy pobre de aspecto. Gracias por la ayuda.
Haz clic para expandir...
Por el diseño de iconos pudes buscar en Fontawesome.

Como te dijeron más arriba, aquí te puedes inspirar con un Widget de "contact info"

wordpress.org

Contact Information Widget

Easily add a Contact Information Widget to your widgetable sidebar. With this plugin you can add a contact information.
wordpress.org wordpress.org

Por otra parte, para alinear (no conozco wp) se puede usar css (display: block o display:flex) y ahí puedes usar inline-block o flex:wrap. Incluso busca si puedes enlazar bootstrap con wp (y le agregas un "card" con la "contact info")
 
Última edición:
  • Me gusta
Reacciones: CarlosImb
kid_ dijo:
Por el diseño de iconos pudes buscar en Fontawesome.

Como te dijeron más arriba, aquí te puedes inspirar con un Widget de "contact info"

wordpress.org

Contact Information Widget

Easily add a Contact Information Widget to your widgetable sidebar. With this plugin you can add a contact information.
wordpress.org wordpress.org

Por otra parte, para alinear (no conozco wp) se puede usar css (display: block o display:flex) y ahí puedes usar inline-block o flex:wrap. Incluso busca si puedes enlazar bootstrap con wp (y le agregas un "card" con la "contact info")
Haz clic para expandir...
Vale, si ese era entonces el nombre. Yo intente con nombres como contact date, card contact, y otras combinaciones pero no se me ocurrío buscarlo como widget y veo otro nombre que es: "Contact Information"
Voy a intentarlo con el html del lanero para no generar tanto peso y si no lo logro con un plugin.

Gracias por su ayuda.
 

Los últimos mensajes

Los últimos temas

Arriba Pie
Atrás